/* IoT Guardian — ισομετρική σκηνή. Τα αντικείμενα έχουν σταθερά «υλικά» χρώματα (είναι αντικείμενα του πάγκου).
   Οι ετικέτες, το πλέγμα και οι γραμμές ακολουθούν το θέμα. */
.scene { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
.scene.dragging { cursor: grabbing; }
.scene .floor path { stroke: var(--grid); stroke-width: 0.7; }

.box polygon { stroke-linejoin: round; }
.pcb .f-t { fill: #1d2534; } .pcb .f-l { fill: #121925; } .pcb .f-r { fill: #0c121b; }
.mod-base .f-t { fill: #2b3342; } .mod-base .f-l { fill: #1b222e; } .mod-base .f-r { fill: #151b25; }
.shield .f-t { fill: #cfd4d9; } .shield .f-l { fill: #959ca4; } .shield .f-r { fill: #b1b7bd; }
.pinhdr .f-t { fill: #1b1b1d; } .pinhdr .f-l { fill: #0d0d0e; } .pinhdr .f-r { fill: #141416; }
.usb .f-t { fill: #cdd2d7; } .usb .f-l { fill: #8a9198; } .usb .f-r { fill: #a7adb3; }
.btn-b .f-t { fill: #e2e4e6; } .btn-b .f-l { fill: #9aa0a6; } .btn-b .f-r { fill: #b9bec3; }
.pin-pad { fill: #d6aa48; }
.antenna2 { fill: none; stroke: #c9a24a; stroke-width: 0.45; stroke-linejoin: round; }
.silk2 { font: 600 2.4px var(--font-code); fill: #cfd7e3; letter-spacing: 0.04em; }
.shield-t { font: 700 1.9px var(--font-code); fill: #4b535c; letter-spacing: 0.05em; }
.smd { fill: #4a4f57; transition: fill 0.12s; }
.smd.pwr.on { fill: #ff4d3d; }
.smd.d2.on { fill: #7cc4ff; }
.halo { opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.halo.red { fill: url(#g-red); } .halo.blue { fill: url(#g-blue); }
.halo.on { opacity: 1; }
.sc-esp.asleep .shield, .sc-esp.asleep .mod-base { opacity: 0.45; }
.zzz { font: 700 12px var(--font-code); fill: #3b8fd6; opacity: 0; }
.sc-esp.asleep .zzz { opacity: 1; animation: zfloat 2.4s ease-in-out infinite; }
@keyframes zfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.bb .f-t { fill: #f5f0e4; } .bb .f-l { fill: #d6cdb8; } .bb .f-r { fill: #e6dece; }
.bb-holes rect { fill: #8f8878; }
.rail-r { fill: #d9534f; } .rail-b { fill: #3c6fd6; } .bb-gap { fill: #e0d7c4; }

.legs { stroke: #a2a8ad; stroke-width: 1.5; fill: none; }
.led-body { fill: #b8352a; }
.led-rim { fill: #8a2018; }
.led-dome { fill: #c93a2d; transition: fill 0.12s; }
.led-shine { fill: #fff; opacity: 0.55; }
.sc-led.on .led-dome, .sc-led.on .led-body { fill: #ff5a3c; }

.btn-body .f-t { fill: #2a2a2d; } .btn-body .f-l { fill: #141416; } .btn-body .f-r { fill: #1c1c1f; }
.cap { fill: #d4472f; } .cap-side { fill: #8f2c1f; }
#sc-btn-cap { transition: transform 0.08s; }
.sc-btn.on #sc-btn-cap { transform: translateY(2.6px); }
.sc-btn.on .cap { fill: #ff6a4d; }

.pir-pcb .f-t { fill: #1f7247; } .pir-pcb .f-l { fill: #134a2e; } .pir-pcb .f-r { fill: #18603b; }
.dome { fill: #f6f4ee; stroke: #c9c3b6; stroke-width: 0.8; }
.dome-lines { fill: none; stroke: #cfc9bc; stroke-width: 0.7; }
.pwaves path { fill: none; stroke: #e0a32e; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.sc-pir.on .pwaves path { animation: wave 1.4s ease-out infinite; }
.sc-pir.on .pwaves path:nth-child(2) { animation-delay: 0.25s; }
.sc-pir.on .pwaves path:nth-child(3) { animation-delay: 0.5s; }

.dht .f-t { fill: #f4f4ef; } .dht .f-l { fill: #c9c9c2; } .dht .f-r { fill: #dfdfd8; }
.vent { fill: #9b9b94; }
.readout { fill: var(--surface); stroke: var(--line-strong); stroke-width: 0.8; }
.readout-t { font: 600 10px var(--font-code); fill: var(--ink); }
.sc-sensor.fault .readout-t { fill: var(--err); }

.router-body .f-t { fill: #2c3549; } .router-body .f-l { fill: #1b2232; } .router-body .f-r { fill: #232b3e; }
.antenna-rod { stroke: #2c3549; stroke-width: 3.4; stroke-linecap: round; fill: none; }
.rled { fill: #3e4a62; } .sc-router.on .rled { fill: #39d98a; }
.waves path { fill: none; stroke: #2f9fe8; stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.waves.on path, .sc-router.on .waves path { animation: wave 1.8s ease-out infinite; }
.waves.on path:nth-child(2), .sc-router.on .waves path:nth-child(2) { animation-delay: 0.3s; }
.waves.on path:nth-child(3) { animation-delay: 0.6s; }
@keyframes wave { 0% { opacity: 0; } 30% { opacity: 0.95; } 100% { opacity: 0; } }

.pi-pcb .f-t { fill: #23864f; } .pi-pcb .f-l { fill: #155c35; } .pi-pcb .f-r { fill: #1b6f41; }
.port .f-t { fill: #d3d7db; } .port .f-l { fill: #8b9198; } .port .f-r { fill: #aab0b6; }
.chip .f-t { fill: #23262b; } .chip .f-l { fill: #131518; } .chip .f-r { fill: #1a1d21; }
.sc-pi.restart .pi-pcb .f-t { fill: #8a6b23; }

.tab-body .f-t { fill: #222a3c; } .tab-body .f-l { fill: #131a28; } .tab-body .f-r { fill: #1a2132; }
.tab-screen { fill: #0e1628; }
.tab-h { font: 700 2.3px var(--font-code); fill: #7fd0ff; }
.tab-t { font: 500 2.1px var(--font-code); fill: #d9e4f2; }

.lap-base .f-t { fill: #c9ced4; } .lap-base .f-l { fill: #8e959c; } .lap-base .f-r { fill: #aab0b6; }
.lap-lid { fill: #2a3346; stroke: #9aa2ab; stroke-width: 0.8; }
.sc-laptop.unk .lap-lid { fill: #5b4a4a; }

.wire { fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: 0.95; }
.w-led { stroke: #e8892f; } .w-btn { stroke: #18a196; } .w-pir { stroke: #e2b52d; } .w-gnd { stroke: #34383f; }
.wire.on { stroke-dasharray: 6 5; animation: flow 0.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -11; } }

.link { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: 0.55; }
.link.on { stroke: var(--teal); stroke-dasharray: none; opacity: 0.95; }
.link.deny { stroke: var(--err); stroke-dasharray: 3 4; opacity: 0.9; }
.link.hot { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: none; opacity: 1; }
.packet { fill: var(--accent); stroke: var(--surface); stroke-width: 1.2; }
.packet.in { fill: var(--teal); }

.callout .co-line { stroke: var(--ink); stroke-width: 0.8; fill: none; }
.callout .co-dot { fill: var(--teal); stroke: var(--surface); stroke-width: 1.2; }
.callout .co-box { fill: var(--surface); stroke: var(--ink); stroke-width: 0.8; }
.callout .co-txt { font: 600 9.5px var(--font-label); fill: var(--ink); letter-spacing: 0.07em; }
.callout.hot .co-box { fill: var(--accent); stroke: var(--accent); }
.callout.hot .co-txt { fill: var(--accent-ink); }

.clickable { cursor: pointer; }
.clickable:focus { outline: none; }
.clickable:focus-visible > g:first-child polygon, .clickable:focus-visible .f-t { stroke: var(--accent); stroke-width: 1.4; }

.port-tag rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 0.8; }
.port-tag text { font: 600 9px var(--font-label); fill: var(--ink); letter-spacing: 0.05em; }
.port-tag.open rect { stroke: var(--err); } .port-tag.open text { fill: var(--err); }
.port-tag.tls rect { stroke: var(--ok); } .port-tag.tls text { fill: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .waves path, .pwaves path, .wire.on, .zzz { animation: none !important; }
  .waves.on path, .sc-router.on .waves path, .sc-pir.on .pwaves path { opacity: 0.85; }
}
:root[data-reduced-motion="true"] .waves.on path, :root[data-reduced-motion="true"] .sc-router.on .waves path, :root[data-reduced-motion="true"] .sc-pir.on .pwaves path { opacity: 0.85; }
.smd.act.on { fill: #39d98a; }
.sc-node .shield { opacity: 0.9; }

/* ---------- εμφάνιση «μελανιού»: περίγραμμα, σκιές, λεπτομέρειες (όπως σχέδιο με πενάκι) */
.scene { --ink-line: #1c2130; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scene { --ink-line: #05080e; } }
:root[data-theme="dark"] .scene { --ink-line: #05080e; }
.box polygon { stroke: var(--ink-line); stroke-width: 0.75; }
.shadow { fill: #2a2418; opacity: 0.13; stroke: none; }
.hole { fill: var(--paper, #f7f0e1); stroke: #c9a24a; stroke-width: 0.9; }
.silk3 { font: 700 1.5px var(--font-code); fill: #cfd7e3; }
.shield-s { font: 600 1.4px var(--font-code); fill: #6b737c; }
.chip-t { font: 700 1.5px var(--font-code); fill: #8b939c; }
.ant-zone { fill: #18202d; }
.smd-c .f-t { fill: #c8a86a; } .smd-c .f-l { fill: #8d7444; } .smd-c .f-r { fill: #a88a52; }
.smd-c polygon { stroke-width: 0.35; }
.btn-dot { fill: #2b2b2e; stroke: var(--ink-line); stroke-width: 0.5; }
.eth .f-t { fill: #d9dde1; } .eth .f-l { fill: #9aa1a8; } .eth .f-r { fill: #b8bec4; }
.smd, .led-body, .led-dome, .led-rim, .cap, .cap-side, .dome, .rled { stroke: var(--ink-line); stroke-width: 0.8; }
.antenna-rod { stroke: var(--ink-line); }
.legs { stroke-width: 1.6; }
.wire-ol { fill: none; stroke: var(--ink-line); stroke-width: 4.6; stroke-linecap: round; }
.wire-end { stroke: var(--ink-line); stroke-width: 0.8; }
.wire-end.w-led { fill: #e8892f; } .wire-end.w-btn { fill: #18a196; } .wire-end.w-pir { fill: #e2b52d; } .wire-end.w-gnd { fill: #34383f; }
.lap-lid { stroke: var(--ink-line); }
.tab-screen { stroke: var(--ink-line); stroke-width: 0.3; }

/* ---------- κομμάτια που εξηγούνται («τι είναι») */
.scene [data-part] { cursor: pointer; }
.scene.dragging [data-part] { cursor: grabbing; }
.scene .part-hot > .box polygon, .scene .part-hot > g > .box polygon, .scene .part-hot.box polygon { stroke: var(--accent); stroke-width: 1.3; }
.scene .part-hot .wire-ol { stroke: var(--accent); }
.scene .part-sel > .box polygon, .scene .part-sel > g > .box polygon { stroke: var(--teal); stroke-width: 1.6; }
.scene .part-sel .wire-ol { stroke: var(--teal); }
.callout.part-link:hover .co-box, .callout.part-link:focus-visible .co-box { stroke: var(--accent); stroke-width: 1.6; }
.callout.part-link:focus { outline: none; }
.callout.part-sel .co-box { fill: var(--teal); stroke: var(--teal); }
.callout.part-sel .co-txt { fill: #fff; }

.part-info {
  position: absolute; right: 0.7rem; top: 0.7rem; z-index: 3; width: min(19rem, calc(100% - 1.4rem)); max-height: calc(100% - 4.6rem); overflow: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--teal); border-radius: 10px; padding: 0.7rem 0.8rem; font-size: 0.85rem; line-height: 1.5;
  box-shadow: 0 6px 18px rgba(20, 24, 36, 0.12);
}
.part-info h4 { margin: 0 1.6rem 0.2rem 0; font-family: var(--font-label); font-size: 1rem; letter-spacing: 0.04em; }
.part-info .pi-kind { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.part-info dl { margin: 0.5rem 0 0; display: grid; gap: 0.35rem; }
.part-info dt { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.part-info dd { margin: 0; }
.part-info .pi-close { position: absolute; top: 0.4rem; right: 0.4rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; font-size: 1.1rem; }
.part-info .pi-close:hover { background: var(--surface-2); }
.part-tip { position: absolute; z-index: 4; pointer-events: none; padding: 0.15rem 0.5rem; border-radius: 5px; background: var(--ink); color: var(--bg); font-size: 0.75rem; white-space: nowrap; transform: translate(-50%, -140%); }
@media (max-width: 720px) { .part-info { position: static; width: auto; max-height: none; margin: 0 0.6rem 0.6rem; order: 4; } }

/* ---------- ESP32 38 pins (μαύρο PCB όπως το πραγματικό) */
.esp-black .f-t { fill: #1b1c20; } .esp-black .f-l { fill: #0f1013; } .esp-black .f-r { fill: #15161a; }
.pin-leg { stroke: #b9bec4; stroke-width: 1.1; stroke-linecap: round; }
.solder { fill: #d7dbe0; stroke: #8d939a; stroke-width: 0.5; }
.castel { fill: #d6aa48; }
.shield-dot { fill: #3b4048; }
.tant .f-t { fill: #f0b429; } .tant .f-l { fill: #b9821a; } .tant .f-r { fill: #d39b20; }
.usbc-slot { fill: #3a3f46; stroke: #1c2130; stroke-width: 0.25; }
.esp-black ~ g .silk3, .silk3 { fill: #dfe5ee; }

/* ---------- καλώδια Dupont: βύσματα και γυαλάδα */
.wire-hl { fill: none; stroke: #ffffff; stroke-width: 0.7; stroke-linecap: round; opacity: 0.35; transform: translate(-0.6px, -0.8px); pointer-events: none; }
.plug .f-t { fill: #2b2f37; } .plug .f-l { fill: #15181d; } .plug .f-r { fill: #1e2228; }
.plug.w-led .f-t { fill: #c96f1f; } .plug.w-btn .f-t { fill: #11806f; } .plug.w-pir .f-t { fill: #b98f17; }
.plug.w-trig .f-t { fill: #2e8a3e; } .plug.w-echo .f-t { fill: #c79a14; } .plug.w-red .f-t { fill: #b33a2e; } .plug.w-yel .f-t { fill: #c79a14; } .plug.w-grn .f-t { fill: #2e8a3e; }
.w-trig { stroke: #3fae55; } .w-echo { stroke: #f2c230; } .w-red { stroke: #e0503f; } .w-yel { stroke: #f2c230; } .w-grn { stroke: #3fae55; } .w-vcc { stroke: #e0503f; }
.plug.w-vcc .f-t { fill: #b33a2e; }

/* ---------- ετικέτες: διακεκομμένη γραμμή, δαχτυλίδι, εικονίδιο */
.callout .co-line { stroke-dasharray: 3 3; stroke-width: 1; }
.callout .co-ring { fill: var(--surface); stroke: var(--teal); stroke-width: 1.4; }
.callout .co-dot { r: 3.4; }
.callout .co-ico { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.callout.part-sel .co-ico { stroke: #fff; }

/* ---------- HC-SR04 */
.us-pcb .f-t { fill: #3557b8; } .us-pcb .f-l { fill: #2a4aa6; } .us-pcb .f-r { fill: #22398a; }
.us-t { font: 700 2.2px var(--font-code); fill: #dfe7ff; }
.us-s { font: 600 0.95px var(--font-code); fill: #c9d6ff; }
.cyl-side { fill: #b8bec6; stroke: var(--ink-line); stroke-width: 0.8; stroke-linejoin: round; }
.cyl-face { fill: #d9dde2; stroke: var(--ink-line); stroke-width: 0.8; }
.cyl-mesh { fill: #3a3f47; stroke: #23272e; stroke-width: 0.4; }
.cyl-core { fill: #6b717a; }
.us-waves path { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.us-waves.on path { animation: wave 0.9s ease-out infinite; }
.us-waves.on path:nth-child(2) { animation-delay: 0.15s; }
.us-waves.on path:nth-child(3) { animation-delay: 0.3s; }

/* ---------- φανάρι */
.tl-pole .f-t { fill: #2b2f37; } .tl-pole .f-l { fill: #15181d; } .tl-pole .f-r { fill: #1e2228; }
.tl-body .f-t { fill: #2a2d33; } .tl-body .f-l { fill: #1b1d22; } .tl-body .f-r { fill: #121418; }
.tl-lamp { stroke: var(--ink-line); stroke-width: 0.3; transition: fill 0.12s; }
.tl-lamp.tl-r { fill: #5a2420; } .tl-lamp.tl-y { fill: #5a4a18; } .tl-lamp.tl-g { fill: #1e4a2a; }
.tl-lamp.tl-r.on { fill: #ff4a3a; } .tl-lamp.tl-y.on { fill: #ffd23a; } .tl-lamp.tl-g.on { fill: #44e07a; }
.tl-halo { opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.tl-halo.tl-r { fill: #ff4a3a; } .tl-halo.tl-y { fill: #ffd23a; } .tl-halo.tl-g { fill: #44e07a; }
.tl-halo.on { opacity: 0.45; }

/* ---------- αυτοκινητάκι και απόσταση */
.car-body .f-t { fill: #e4573f; } .car-body .f-l { fill: #b83c28; } .car-body .f-r { fill: #cc4932; }
.car-cabin .f-t { fill: #e86a52; } .car-cabin .f-l { fill: #bf4632; } .car-cabin .f-r { fill: #d2563e; }
.car-glass { fill: #cfe3ea; stroke: var(--ink-line); stroke-width: 0.6; }
.car-wheel { fill: #1f2228; stroke: var(--ink-line); stroke-width: 0.6; }
.car-hub { fill: #9aa1aa; }
.sc-car { cursor: grab; }
.sc-car.dragging, .scene.car-drag { cursor: grabbing; }
.sc-car:focus-visible .car-body polygon { stroke: var(--accent); stroke-width: 1.4; }
.dist-line path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.dist-pill { fill: var(--surface); stroke: var(--ink); stroke-width: 0.9; }
.dist-t { font: 700 9px var(--font-code); fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .us-waves.on path { animation: none; opacity: 0.8; } }

/* ---------- ESP32 όπως στην εικόνα αναφοράς */
.esp-black .f-l { fill: #7b6c4f; } .esp-black .f-r { fill: #6a5c42; }
.pin-stub { stroke: #c9ced4; stroke-width: 1.8; stroke-linecap: round; }
.silk-box.rows rect { stroke-width: 0.3; opacity: 0.95; }
.pin-tip { fill: #eef1f4; stroke: #7f868d; stroke-width: 0.45; }
.solder { fill: #b9bec4; stroke: #6f767d; stroke-width: 0.45; }
.silk-box rect { fill: none; stroke: #e9edf2; stroke-width: 0.22; opacity: 0.85; }
.shield .f-t { fill: #d4d8dc; } .shield .f-l { fill: #9aa1a8; } .shield .f-r { fill: #b6bcc2; }
.shield-logo { fill: none; stroke: #7d848c; stroke-width: 0.22; }
.shield-l { font: 700 0.95px var(--font-code); fill: #7d848c; }
.shield-c { font: 700 1.5px var(--font-code); fill: #7d848c; }
.shield-ring { fill: none; stroke: #7d848c; stroke-width: 0.25; }
.btn-s .f-t { fill: #c9ced3; } .btn-s .f-l { fill: #8d949b; } .btn-s .f-r { fill: #a9afb5; }
.usb .f-t { fill: #d9dde1; } .usb .f-l { fill: #9aa1a8; } .usb .f-r { fill: #c3c8cd; }
.usbc-slot { fill: #2f343b; stroke: #1c2130; stroke-width: 0.3; }
.usbc-tongue { fill: #6d747c; }
.shield-t.sm { font-size: 1.45px; }
.shield-s.sm { font-size: 0.82px; }

/* ---------- Raspberry Pi 5 όπως στην εικόνα αναφοράς */
.pi-pcb .f-t { fill: #2f9a55; } .pi-pcb .f-l { fill: #1f6e3b; } .pi-pcb .f-r { fill: #268448; }
.pi-hole { fill: #d9b24c; stroke: #8a6d22; stroke-width: 0.5; }
.pi-hole-in { fill: var(--paper, #f7f0e1); stroke: #8a6d22; stroke-width: 0.4; }
.pi-silk { font: 700 1.9px var(--font-label); fill: #eaf7ee; letter-spacing: 0.05em; }
.pi-silk.big { font-size: 2.6px; letter-spacing: 0.12em; }
.pi-silk-box { fill: none; stroke: #eaf7ee; stroke-width: 0.25; }
.pi-logo { fill: none; stroke: #eaf7ee; stroke-width: 0.35; }
.pi-logo-leaf { fill: none; stroke: #eaf7ee; stroke-width: 0.35; stroke-linecap: round; }
.pin-ol { stroke: var(--ink-line); stroke-width: 1.5; stroke-linecap: round; }
.pin-body { stroke: #cfd4d9; stroke-width: 0.85; stroke-linecap: round; }
.conn-white .f-t { fill: #f4f2ea; } .conn-white .f-l { fill: #cfcabd; } .conn-white .f-r { fill: #e2ded2; }
.cpu-lid .f-t { fill: #d7dbdf; } .cpu-lid .f-l { fill: #9aa1a8; } .cpu-lid .f-r { fill: #b8bec4; }
.chip-t.dark { fill: #5f666e; font-size: 1.3px; }
.fpc .f-t { fill: #23262b; } .fpc .f-l { fill: #131518; } .fpc .f-r { fill: #1a1d21; }
.fpc-gold { fill: #d6aa48; }
.usb-a .f-t { fill: #d9dde1; } .usb-a .f-l { fill: #b4bac0; } .usb-a .f-r { fill: #c7ccd1; }
.usb-tongue { fill: #2b2f36; } .usb3-tongue { fill: #2f6fd6; }
.eth .f-t { fill: #dfe2e6; } .eth .f-l { fill: #b3b9bf; } .eth .f-r { fill: #c8cdd2; }
.eth-mouth { fill: #2f343b; stroke: var(--ink-line); stroke-width: 0.3; }

/* 3D εξαρτήματα (Three.js): ο καμβάς κάθεται κάτω από την SVG. Η SVG κρατά αόρατα τα σχήματα (για κλικ και hover)
   και δείχνει μόνο ετικέτες, λάμψεις, κύματα και ενδείξεις. */
.scene-3d { position: absolute; pointer-events: none; display: block; }
.scene.has3d .floor { opacity: 0; }
.scene.has3d :is(.sc-back, .sc-mid, .sc-wires, .sc-front) :is(polygon, path, rect, ellipse, circle, text):not(.callout *, .halo, .smd, .zzz, .readout, .readout-t, .tl-halo, .tab-h, .tab-t, .rled, .waves *, .pwaves *, .us-waves *, .dist-line *) { opacity: 0; }

/* ---------- 3D περιστροφή: ο καμβάς παίρνει το ποντίκι, η επίπεδη σκηνή (ετικέτες, κλικ) κρύβεται */
.scene-3d.orbiting { pointer-events: auto; cursor: grab; touch-action: none; z-index: 1; }
.scene-3d.orbiting:active { cursor: grabbing; }
.scene.orbiting { opacity: 0; pointer-events: none; }
.sc-b.sc-3d { width: auto; padding: 0 0.5rem; gap: 0.25rem; display: inline-flex; align-items: center; font-family: var(--font-label); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; }
.sc-b.sc-3d.on { background: var(--teal); color: #fff; }
.sc-b.sc-3d .ic { width: 1.05rem; height: 1.05rem; }

/* ---------- θεματικό σκηνικό (δωμάτιο πίσω από τη σκηνή) */
.scene-wrap > svg.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-bg {
  --rm-floor: #c99a63; --rm-plank: #b3854f; --rm-wall-a: #dcc49a; --rm-wall-b: #ccb07f; --rm-base: #8e6a43; --rm-edge: #5e4a33;
  --rm-frame: #6b5a45; --rm-art-a: #9cc3c0; --rm-art-b: #e0a37a; --rm-door: #b98a5c; --rm-dframe: #7d5a38; --rm-sky: #9fd0f0;
}
.scene-bg .room.night { --rm-floor: #4a3e33; --rm-plank: #3d332a; --rm-wall-a: #48557a; --rm-wall-b: #3c476a; --rm-base: #2c3450; --rm-edge: #1d2333; --rm-art-a: #4f6f7a; --rm-art-b: #7a5a4a; --rm-door: #5a4a3a; --rm-dframe: #3d3226; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scene-bg { --rm-floor: #4a3a2b; --rm-plank: #3e3024; --rm-wall-a: #34405f; --rm-wall-b: #2c3753; --rm-base: #222a40; --rm-edge: #10141f; --rm-sky: #24365c; --rm-door: #7a5a3c; --rm-dframe: #4a3826; } }
:root[data-theme="dark"] .scene-bg { --rm-floor: #4a3a2b; --rm-plank: #3e3024; --rm-wall-a: #34405f; --rm-wall-b: #2c3753; --rm-base: #222a40; --rm-edge: #10141f; --rm-sky: #24365c; --rm-door: #7a5a3c; --rm-dframe: #4a3826; }
.rm-floor { fill: var(--rm-floor); }
.rm-plank { stroke: var(--rm-plank); stroke-width: 0.8; fill: none; }
.rm-wall-a { fill: var(--rm-wall-a); stroke: #1c2130; stroke-width: 1; }
.rm-wall-b { fill: var(--rm-wall-b); stroke: #1c2130; stroke-width: 1; }
.rm-floor { stroke: #1c2130; stroke-width: 1; }
.rm-base, .rm-base-b { fill: var(--rm-base); }
.rm-edge { fill: none; stroke: var(--rm-edge); stroke-width: 2; }
.rm-frame, .rm-wframe { fill: var(--rm-frame); stroke: #1c2130; stroke-width: 0.6; }
.rm-art-a { fill: var(--rm-art-a); } .rm-art-b { fill: var(--rm-art-b); } .rm-art { fill: var(--rm-art-a); }
.rm-sky { fill: var(--rm-sky); }
.rm-wbar { stroke: var(--rm-frame); stroke-width: 1.4; fill: none; }
.rm-moon { fill: #fff6c8; }
.rm-door { fill: var(--rm-door); stroke: #1c2130; stroke-width: 0.6; }
.rm-dframe { fill: var(--rm-dframe); }
.rm-dglass { fill: #cfe6f2; opacity: 0.8; }
.rm-knob { fill: #e2b52d; stroke: #1c2130; stroke-width: 0.5; }
.rm-mat { fill: #8a5a3a; opacity: 0.85; }
.rm-runner { fill: #7a3e3e; opacity: 0.55; }
.rm-pot { fill: #c46a3a; stroke: #1c2130; stroke-width: 0.6; }
.rm-leaf { fill: none; stroke: #3f8f5a; stroke-width: 3; stroke-linecap: round; }
/* φωτιστικά: σβηστά μέχρι να ανάψει το LED */
.lamp-base { fill: #2b2f3a; } .lamp-pole { stroke: #2b2f3a; stroke-width: 2.4; }
.lamp-shade { fill: #e0b05a; stroke: #1c2130; stroke-width: 0.8; }
.lamp-bulb, .porch-bulb, .ceil-lamp { fill: #8a8572; transition: fill 0.15s; }
.porch-lamp { fill: #2b2f3a; }
.bell-plate { fill: #d7d2c4; stroke: #1c2130; stroke-width: 0.5; }
.bell-btn { fill: #b33a2a; stroke: #1c2130; stroke-width: 0.5; transition: fill 0.12s; }
.bell-waves path { fill: none; stroke: #e2b52d; stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.th-glow { fill: url(#g-warm); opacity: 0; transition: opacity 0.2s; }
.th-pool { fill: #ffd27a; opacity: 0; transition: opacity 0.2s; }
.th-cone { fill: #ffe7a8; opacity: 0; transition: opacity 0.2s; }
.pir-zone { fill: #e0a32e; opacity: 0.08; stroke: #e0a32e; stroke-dasharray: 3 3; stroke-width: 0.8; transition: opacity 0.2s; }
.scene-bg.led-on .th-glow { opacity: 0.95; }
.scene-bg.led-on .th-pool { opacity: 0.35; }
.scene-bg.led-on .th-cone { opacity: 0.22; }
.scene-bg.led-on .lamp-bulb, .scene-bg.led-on .porch-bulb, .scene-bg.led-on .ceil-lamp { fill: #fff2b3; }
.scene-bg.btn-on .bell-btn { fill: #ff6a4d; }
.scene-bg.btn-on .bell-waves path { opacity: 1; }
.scene-bg.pir-on .pir-zone { opacity: 0.22; }
/* έπιπλα-κουτιά: η πλάγια πλευρά πιο σκούρα από την πάνω */
.blk polygon { stroke: #1c2130; stroke-width: 0.6; }
.blk .f-l { filter: brightness(0.86); } .blk .f-r { filter: brightness(0.72); }
.rm-bench polygon { fill: #a87a4c; } .rm-crate polygon { fill: #d9b27a; } .rm-crate.b polygon { fill: #7aa0b8; }
.rm-shelf polygon { fill: #8a8f99; }
.rm-sofa polygon { fill: #5b7fa6; } .rm-cushion polygon { fill: #e8b04a; }
.rm-rack polygon { fill: #2a3142; } .rm-rack .f-l { filter: none; fill: #1a1f2c; }
/* εργαστήρι */
.rm-peg { fill: #c9a678; stroke: #1c2130; stroke-width: 0.6; } .rm-peg-hole { fill: #6b5236; }
.rm-tool { fill: none; stroke: #4a5160; stroke-width: 2; stroke-linecap: round; } .rm-tool-r { stroke: #c0392b; stroke-width: 3; }
.rm-clock { fill: #fbf7ee; stroke: #1c2130; stroke-width: 1.2; } .rm-hands { stroke: #1c2130; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.lamp-pole.thin { stroke-width: 1.2; }
/* θερμοκήπιο */
.room.glass { --rm-wall-a: #cfe8e4; --rm-wall-b: #bcdcd6; --rm-floor: #b7a48a; --rm-plank: #a8957a; }
.rm-mullion { stroke: #5e7a74; stroke-width: 1.2; fill: none; }
.rm-leaf.thin { stroke-width: 2.2; }
.rm-thermo { fill: #fbf7ee; stroke: #1c2130; stroke-width: 0.6; } .rm-thermo-lvl { fill: #d9534f; } .rm-thermo-hot { fill: #f1d6d4; transition: fill 0.2s; } .rm-thermo-bulb { fill: #d9534f; stroke: #1c2130; stroke-width: 0.6; }
.scene-bg.led-on .rm-thermo-hot { fill: #d9534f; }
.rm-fan circle { fill: #e9edf2; stroke: #1c2130; stroke-width: 0.8; } .rm-fan path { stroke: #5b6475; stroke-width: 2.4; stroke-linecap: round; }
.grow-bar { stroke: #3a3f4c; stroke-width: 3; stroke-linecap: round; }
/* σαλόνι */
.rm-rug { fill: #b8574a; opacity: 0.45; }
.rm-curtain { fill: #c0504d; opacity: 0.85; }
.rm-tv { fill: #1c2130; } .rm-tv-screen { fill: #2f3a52; transition: fill 0.2s; }
.scene-bg.led-on .rm-tv-screen { fill: #5fa8e0; }
/* servers */
.rm-tile { stroke: var(--rm-plank); stroke-width: 0.8; fill: none; }
.rm-tray { stroke: #5b6475; stroke-width: 3; stroke-dasharray: 2 2; }
.rm-rack-line { stroke: #3c4558; stroke-width: 0.8; }
.rack-led { fill: #e0a32e; animation: rack-blink 1.6s steps(2) infinite; }
.rack-led.st { fill: #5c6578; animation: none; }
.scene-bg.led-on .rack-led.st { fill: #4fe08f; }
@keyframes rack-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rack-led { animation: none; } }
.rm-sign { fill: #f2efe6; stroke: #1c2130; stroke-width: 0.6; } .rm-shield { fill: #3f8f5a; stroke: #1c2130; stroke-width: 0.6; }
.th-glow.cool { fill: url(#g-cool); }
/* γκαράζ */
.room.concrete { --rm-floor: #b9b4aa; --rm-plank: #a9a398; --rm-wall-a: #d6d2c8; --rm-wall-b: #c7c2b6; }
.rm-gdoor-frame { fill: #5b6475; } .rm-gdoor { fill: #9aa3b2; stroke: #1c2130; stroke-width: 0.6; } .rm-slat { stroke: #6f7888; stroke-width: 0.8; }
.rm-pline { fill: #f2efe6; } .rm-stop { fill: #e2b52d; }
.rm-tyre { fill: #2b2f3a; stroke: #111; stroke-width: 0.8; } .rm-tyre-in { fill: #5b6475; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scene-bg .room.glass { --rm-wall-a: #2f4a4a; --rm-wall-b: #284040; --rm-floor: #3e3a33; } :root:not([data-theme="light"]) .scene-bg .room.concrete { --rm-wall-a: #3c4150; --rm-wall-b: #333846; --rm-floor: #4a4a4c; --rm-plank: #3d3d40; } }
:root[data-theme="dark"] .scene-bg .room.glass { --rm-wall-a: #2f4a4a; --rm-wall-b: #284040; --rm-floor: #3e3a33; }
:root[data-theme="dark"] .scene-bg .room.concrete { --rm-wall-a: #3c4150; --rm-wall-b: #333846; --rm-floor: #4a4a4c; --rm-plank: #3d3d40; }
/* η γιαγιά του διαδρόμου (σέρνεται) */
.sc-actors { cursor: grab; }
.sc-actors.dragging { cursor: grabbing; }
.actor:focus { outline: none; }
.actor:focus-visible .actor-head { stroke: var(--accent); stroke-width: 2; }
.actor-shadow { fill: #000; opacity: 0.18; }
.actor-dress { fill: #7a5aa8; stroke: #1c2130; stroke-width: 1; }
.actor-arm { stroke: #f0c9a8; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.actor-cane { stroke: #6b4a2a; stroke-width: 2; stroke-linecap: round; }
.actor-head { fill: #f0c9a8; stroke: #1c2130; stroke-width: 1; }
.actor-hair { fill: #e9e6df; stroke: #1c2130; stroke-width: 0.8; }
.actor-tip rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 0.8; }
.actor-tip text { font: 600 8px var(--font-label); fill: var(--ink); letter-spacing: 0.04em; }
.sc-actors:hover .actor-dress { stroke: var(--accent); stroke-width: 1.6; }
@media (max-width: 720px) { .scene-wrap > svg.scene-bg { position: absolute; top: 0; height: 17rem; } }