/* Лицевые панели оборудования. Цвета корпусов не зависят от темы страницы. */
.hw, .srv .front { --body: #2b3138; --body2: #1a1f24; --cage: #07090b; --lit: var(--acc2, #19a6a6); }
.fcap { font: 11px var(--mono); color: var(--mute); margin: 6px 2px 0; }

/* --- коммутаторы и маршрутизаторы 1U/2U --- */
.hw.u1, .hw.u2 { background: linear-gradient(180deg, #1c2023, #0b0d0e); border-radius: 4px; border: 1px solid #0b0e10; padding: 6px 10px 6px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.6); position: relative; }
.hw.u1::before, .hw.u2::before { content: ""; position: absolute; left: 90px; right: 90px; top: 2px; height: 5px; background: radial-gradient(circle, #000 1.3px, transparent 1.6px) 0 0/7px 5px; opacity: .7; }
.hwbody { display: flex; align-items: center; gap: 10px; }
.hwlogo { font: 800 11px var(--sans, system-ui); color: #e8eef0; letter-spacing: .02em; writing-mode: horizontal-tb; min-width: 52px; line-height: 1.15; } .hwlogo small { display: block; font: 9px var(--mono); color: #8fa0a6; font-weight: 400; }
.hwports { flex: 1; min-width: 0; display: grid; gap: 8px; }
.hwrow { display: flex; gap: 8px; justify-content: space-between; align-items: stretch; }
.pgp { display: flex; gap: 5px; align-items: stretch; min-width: 0; }
.pblk { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 5px 1px; padding: 2px; background: linear-gradient(180deg, #34383c 0 40%, #d3cab2 40% 60%, #34383c 60%); border-radius: 2px; }
.pt { display: block; width: 15px; height: 11px; background: var(--cage); border: 1px solid #000; border-radius: 1px; box-shadow: inset 0 0 0 1px #20272c; }
.pt.q { width: 29px; height: 15px; } .pt.q.dd { width: 32px; } .pt.sm { width: 9px; height: 8px; } .pt.wide { width: 70px; height: 12px; }
.pt.f { background: linear-gradient(180deg, #9fe9e9, var(--lit)); box-shadow: 0 0 6px -1px var(--lit); border-color: #0b3b3b; }
.hw .pgp.q .pt.f { background: linear-gradient(180deg, #9fe9e9, var(--lit)); }
.hwled { display: flex; gap: 6px; font: 8px var(--mono); color: #8fa0a6; align-self: flex-start; } .hwled span::after { content: ""; display: block; width: 5px; height: 5px; margin: 2px auto 0; border-radius: 50%; background: #3a4a50; } .hwled span:nth-child(-n+3)::after { background: #2fcf7a; box-shadow: 0 0 4px #2fcf7a; }
.mgmt { display: flex; gap: 4px; align-items: center; padding-left: 6px; border-left: 1px solid #0b0e10; }
.mp.sfp { display: block; width: 15px; height: 12px; background: var(--cage); border: 1px solid #000; }
.rj { display: block; width: 18px; height: 16px; background: #1b2024; border: 1px solid #000; border-radius: 2px; box-shadow: inset 0 0 0 2px #8a949a; } .usb { display: block; width: 13px; height: 7px; background: #cfd5d8; border: 1px solid #333; border-radius: 1px; }
.hw.u2 .hwports { gap: 10px; }

/* --- шасси маршрутизатора --- */
.hw.chas { background: #14181b; border: 1px solid #000; border-radius: 3px; padding: 6px 8px 8px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.7); max-width: 560px; }
.lrows { display: grid; gap: 3px; }
.lrow { height: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 2px; border-radius: 2px; border: 1px dashed #3b454c; color: #66777e; font: 10px var(--mono); align-items: center; }
.lrow em { grid-column: 1 / -1; text-align: center; font-style: normal; }
.lrow.f { border: 1px solid #000; background: linear-gradient(180deg, #3a4249, #20262b); }
.nmod { height: 100%; border-radius: 2px; display: flex; align-items: center; gap: 4px; padding: 0 5px; background: #171c20; overflow: hidden; } .nmod.f { background: #2b3238; box-shadow: inset 0 0 0 1px #4a555c; }
.nmod b { font: 8px var(--mono); color: #aebcc2; font-weight: 400; margin-right: auto; white-space: nowrap; }
.cgp { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.chas:not(.tall) .nmod .pt.q { width: 16px; height: 10px; } .chas:not(.tall) .nmod .pt.q.dd { width: 20px; }
.cpsus { margin-top: 6px; display: grid; gap: 3px; }
.psurow { display: flex; gap: 3px; } .psu { flex: 1; height: 20px; border-radius: 2px; background: #0b0e10; border: 1px dashed #3b454c; position: relative; } .psu.f { background: linear-gradient(180deg, #4c565d, #252b30); border: 1px solid #000; } .psu.f i { position: absolute; left: 22%; top: 18%; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #11171a; background: radial-gradient(circle, #11171a 40%, #566268 42%); }

/* --- шасси DWDM/OTN --- */
.hw.chassis-d { display: flex; background: #0e1113; border: 1px solid #000; border-radius: 3px; padding: 6px; gap: 6px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.7); }
.fanp { width: 56px; border-radius: 3px; background: linear-gradient(90deg, #39454c, #27323a); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; font: 8px var(--mono); color: #aebcc2; text-align: center; }
.fanp .led { width: 5px; height: 5px; border-radius: 50%; background: #2fcf7a; box-shadow: 0 0 4px #2fcf7a; } .fanp .handle { flex: 1; width: 14px; border-radius: 7px; background: linear-gradient(90deg, #dfe5e8, #8f9a9f); min-height: 40px; }
.cstack { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: start; }
.crow { display: flex; gap: 8px; align-items: center; min-height: 30px; padding: 3px 8px 3px 4px; border-radius: 2px; border: 1px dashed #3b454c; color: #66777e; font: 10px var(--mono); }
.crow em { font-style: normal; } .crow.f { border: 1px solid #000; background: linear-gradient(180deg, #46525a, #2a343b); color: #cfd9de; }
.crow.two > .cf { flex: 1; min-width: 0; }
.clab { display: grid; width: 44px; font: 9px var(--mono); line-height: 1.1; color: #dfe7ea; } .clab b { font: 800 7px var(--sans, system-ui); letter-spacing: .04em; color: #aebcc2; }
.screw { margin-left: auto; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #dfe5e8, #7e898e); }
.cf { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.cf.trx .cgp { padding: 2px; background: #1b2024; border-radius: 2px; } .cf .pt.sm.f { background: var(--lit); }
.cf.mdu { gap: 4px; } .lcblk { flex: 1; min-width: 14px; height: 18px; border-radius: 2px; background: #1f7fe0 radial-gradient(circle, #fff 28%, transparent 32%) 0 0/8px 8px; box-shadow: inset 0 0 0 1px #0b4f9b; }
.cf.amp { gap: 14px; } .lcg { display: grid; justify-items: center; gap: 1px; } .lcg small { font: 7px var(--mono); color: #aebcc2; } .lcp { display: flex; gap: 1px; padding: 1px; background: #1f7fe0; border-radius: 2px; } .lcp i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.cf.cu .rj { box-shadow: inset 0 0 0 2px #2d9fb5; }
.pwr .cf { display: flex; justify-content: center; } .dc { display: block; width: 38px; height: 12px; border-radius: 3px; background: #0b0e10; box-shadow: inset 0 0 0 2px #8a949a; }

/* --- сервер BS-142 (вид спереди) --- */
.srv .front { height: 74px; padding: 0; gap: 4px; background: linear-gradient(180deg, #4a525a, #272d33); border: 1px solid #0b0e10; align-items: stretch; }
.srv .ear { width: 22px; background: linear-gradient(90deg, #c9cfd2, #8d979b); border-radius: 3px 0 0 3px; }
.srv .ear i { width: 11px; height: 11px; background: radial-gradient(circle, #555 30%, #bbb 35%); box-shadow: none; border: 1px solid #444; }
.sl-left { width: 150px; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto 1fr; gap: 3px 4px; padding: 6px 4px; align-items: center; }
.sl-left .usb { width: 18px; height: 9px; } .sl-left .vga { width: 24px; height: 10px; background: #1b2024; border: 1px solid #000; border-radius: 5px; grid-column: 1 / 3; }
.sl-left .stag { grid-column: 3; grid-row: 1 / 3; background: #fff; color: #111; font: 700 8px var(--sans, system-ui); text-align: center; padding: 3px 2px; border-radius: 2px; line-height: 1.2; } .sl-left .stag small { font-weight: 400; font-size: 8px; }
.sl-left .pbtn { grid-column: 3; justify-self: end; }
.sl-left .grille { grid-column: 1 / 4; height: 20px; background: radial-gradient(circle, #000 1.2px, transparent 1.5px) 0 0/5px 5px, #9aa4a9; border-radius: 2px; }
.pbtn { width: 11px; height: 11px; border-radius: 50%; background: #d3342d; box-shadow: 0 0 0 2px #1b2024; }
.sbays { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-flow: column; grid-template-rows: 1fr 1fr; gap: 2px; padding: 3px 0; }
.srv .sbay { background: #0d1114; background-image: none; border: 1px solid #2b3338; border-radius: 1px; }
.srv .sbay::after { content: ""; position: absolute; right: 8%; top: 50%; margin-top: -4px; border-left: 7px solid #d3342d; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.srv .sbay::before { content: ""; position: absolute; left: 8%; top: 22%; width: 52%; height: 56%; background: repeating-linear-gradient(90deg, #202830 0 2px, #0a0d10 2px 6px); border-radius: 2px; }
.srv .sbay.f { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #111), #111); }
.srv .sbay.f::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff) 0 2px, rgba(0,0,0,.45) 2px 6px); height: 56%; top: 22%; }
.srv .sbay i { display: none; }
.sl-right { width: 80px; display: grid; justify-items: center; align-content: center; gap: 4px; color: #e8eef0; } .sl-right b { font: 800 10px var(--sans, system-ui); letter-spacing: .04em; } .sl-right small { font: 8px var(--mono); color: #aebcc2; } .sl-right .pw { width: 9px; height: 9px; border-radius: 50%; background: #cfd5d8; }
@media (max-width: 720px) { .sl-left { width: 96px; } .sl-left .stag, .sl-right b { display: none; } .sl-right { width: 50px; } .pt { width: 9px; height: 8px; } .pt.q { width: 17px; height: 10px; } .pt.q.dd { width: 19px; } .hwlogo { display: none; } }

.hw.u1::after, .hw.u2::after { content: ""; position: absolute; left: 3px; top: 12px; bottom: 12px; width: 6px; background: radial-gradient(circle, #000 1.3px, transparent 1.6px) 0 0/5px 6px; opacity: .6; }
.mgmt { gap: 5px; } .mgmt .ms { display: grid; gap: 3px; } .mgmt .usbv { width: 10px; height: 26px; background: #cfd5d8; border: 1px solid #333; border-radius: 1px; } .mgmt .gled { width: 4px; height: 12px; background: #2fcf7a; border-radius: 2px; }
.hw.u2.br { background: linear-gradient(180deg, #5b6168, #3c4146); padding: 4px 18px; border-radius: 3px; }
.hw.br .hwlogo { display: none; } .hw.br::before, .hw.br::after { display: none; }
.hwrow.card { gap: 10px; align-items: center; background: linear-gradient(180deg, #4d535a, #33383d); border: 1px solid #0b0e10; border-radius: 3px; padding: 5px 8px 5px 22px; position: relative; justify-content: flex-start; }
.hwrow.card + .hwrow.card { margin-top: 2px; }
.handle-l { position: absolute; left: -12px; top: 6px; bottom: 6px; width: 16px; border: 3px solid #c9cfd2; border-right: none; border-radius: 8px 0 0 8px; }
.rcard { margin-left: auto; display: flex; gap: 6px; align-items: center; padding-left: 8px; border-left: 1px solid #0b0e10; }
.pgp.s .pt { width: 12px; height: 10px; } .hwled { flex-shrink: 0; } .hwports { overflow: hidden; }

/* --- единый стиль: графитовый корпус, серебристые уши и ручки, бежевая планка в блоках портов --- */
.hw, .srv .front { --hw-a: #23282c; --hw-b: #0c0e10; --hw-ca: #31373b; --hw-cb: #1b1f22; --hw-silver: linear-gradient(90deg, #d4d9dc, #8d979b); }
.hw.u1, .hw.u2, .hw.u2.br, .hw.chas, .hw.chassis-d, .srv .front { background: linear-gradient(180deg, var(--hw-a), var(--hw-b)); border: 1px solid #000; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px -10px rgba(0,0,0,.65); }
.hwrow.card, .lrow.f, .crow.f { background: linear-gradient(180deg, var(--hw-ca), var(--hw-cb)); border: 1px solid #000; color: #cfd9de; }
.nmod.f { background: #262b2f; box-shadow: inset 0 0 0 1px #3b4247; }
.psu.f { background: linear-gradient(180deg, var(--hw-ca), var(--hw-cb)); }
.fanp { background: linear-gradient(90deg, #2c3236, #1b1f22); } .fanp .handle, .handle-l { background: var(--hw-silver); }
.handle-l { background: none; border-color: #c9cfd2; }
.srv .ear { background: var(--hw-silver); }
.lrow, .crow, .psu, .nmod:not(.f) { border-color: #3b4247; }
.pblk { background: linear-gradient(180deg, #2b3034 0 40%, #d3cab2 40% 60%, #2b3034 60%); }
.hw.u1::before, .hw.u2::before { display: block; }
.hw.br::before, .hw.br::after { display: none; }
.hw.u2.br { padding: 4px 18px; }
.srv .sbay { background: #0d1114; }
.hwlogo, .clab, .sl-right { color: #e8eef0; }
.hw, .srv .front { width: 100%; max-width: none; box-sizing: border-box; } .hw.chas { max-width: none; }
.hw.u1 .pgp.q .pt { width: 24px; height: 14px; } .hw.u1 .pgp.q .pt.dd { width: 26px; }

/* --- СХД: 4U, отсеки 3,5″ --- */
.hw.stor { display: flex; align-items: stretch; gap: 8px; padding: 10px 6px 8px; }
.stor .grip { width: 22px; border-radius: 10px; background: linear-gradient(90deg, #15191c, #2b3136); border: 1px solid #000; box-shadow: inset 0 0 0 3px #0b0d0e; }
.trays { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 3px; background: #050607; padding: 3px; border-radius: 2px; }
.tray { height: 44px; position: relative; display: grid; grid-template-columns: 22px 1fr 9px 16px; gap: 3px; background: #101315; border: 1px solid #000; border-radius: 2px; padding: 2px; }
.tray .tab { background: #14181b; border-radius: 1px; } .tray .hex { background: #14181b; border-radius: 1px; } .tray .lat { background: #1f4fa8; border-radius: 1px; opacity: .55; } .tray .led { background: #14181b; border-radius: 1px; }
.tray.f .tab { background: color-mix(in srgb, var(--c) 70%, #111); } .tray.f .lat { opacity: 1; background: #2563d0; }
.tray.f .hex { background: #0a0c0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M3.5 .7h7l3 5.3-3 5.3h-7L.5 6z' fill='none' stroke='%2346505a' stroke-width='1.2'/%3E%3C/svg%3E") center/14px 12px; }
.tray.f .led { background: radial-gradient(circle at 50% 30%, #2fcf7a 1.5px, transparent 2px) 50% 25%/100% 8px repeat-y; }
.tray.hs { outline: 2px dashed var(--sand, #d9a441); outline-offset: 1px; }
@media (max-width: 720px) { .tray { grid-template-columns: 12px 1fr 6px 10px; height: 28px; } .stor .grip { width: 12px; } }