/* Digital Twin SMART-RES */
.tw { --tw-navy:#12324A; --tw-blue:#006FBE; --tw-cyan:#00A9E8; --tw-green:#2E8A1F; --tw-amber:#E09A00; --tw-red:#C93C3C;
  --tw-line:#dde4ea; --tw-muted:#5f6f7c; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; color:#14232f; }
.tw *, .tw *::before, .tw *::after { box-sizing:border-box; }
.tw [hidden] { display:none !important; }
.tw-view { position:relative; min-height:520px; border-radius:18px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%, #ffffff 0%, #eef2f5 60%, #e3e9ee 100%); border:1px solid var(--tw-line); }
.tw.is-sim .tw-view { background:radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f1f3fa 60%, #e4e7f4 100%); }
.tw.is-emergency .tw-view { box-shadow: inset 0 0 0 3px var(--tw-red); }
.tw-stage { position:absolute; inset:0; perspective:1500px; perspective-origin:50% 30%; cursor:grab; touch-action:none; }
.tw-stage:active { cursor:grabbing; }
.tw-scene { position:absolute; left:50%; top:52%; width:0; height:0; transform-style:preserve-3d; }
.tw-g, .tw-room { position:absolute; left:0; top:0; transform-style:preserve-3d; }
.tw-face { position:absolute; left:0; top:0; transform-origin:0 0; backface-visibility:visible; }
.tw-floor { background-color:#f3efe7; background-image:linear-gradient(#e2dccf 1px, transparent 1px), linear-gradient(90deg, #e2dccf 1px, transparent 1px);
  background-size:35px 35px; box-shadow: 0 0 0 2px #d8d0c1; }
.tw-heat, .tw-glow { pointer-events:none; }
.tw-glow { opacity:0; transition:opacity .4s; background:
  radial-gradient(circle at 28% 28%, rgba(255,214,120,.45), transparent 22%), radial-gradient(circle at 73% 28%, rgba(255,214,120,.45), transparent 22%),
  radial-gradient(circle at 28% 71%, rgba(255,214,120,.45), transparent 22%), radial-gradient(circle at 73% 71%, rgba(255,214,120,.45), transparent 22%); }
.tw-glow.on { opacity:1; }
.tw-glow.em { opacity:1; animation:tw-em 1.2s ease-in-out infinite; background:
  radial-gradient(circle at 28% 28%, rgba(255,70,70,.35), transparent 26%), radial-gradient(circle at 73% 71%, rgba(255,70,70,.35), transparent 26%),
  radial-gradient(circle at 50% 50%, rgba(255,90,90,.12), transparent 60%); }
.tw-lamp.em { background:#ffe1e1; border-color:#ff7b7b; box-shadow:0 0 22px 6px rgba(255,80,80,.6); }
@keyframes tw-em { 50% { opacity:.55; } }
.tw-wall { background:linear-gradient(180deg, #f2f5f7, #e3e9ee); }
.tw-wall-left { background:linear-gradient(180deg, #e9eef2, #d9e1e7); }
.tw-screen { background:#f7f8fa; border:3px solid #aab6c0; border-radius:3px; transition:background .4s, box-shadow .4s; }
.tw-screen.on { background:linear-gradient(135deg, #cfe8ff, #ffffff 45%, #d8f3e4); box-shadow:0 0 40px rgba(0,169,232,.55); }
.tw-lamp { background:#e6eaee; border:2px solid #c9d1d8; border-radius:4px; transition:all .3s; }
.tw-lamp.on { background:#fff6d6; border-color:#ffd166; box-shadow:0 0 30px 8px rgba(255,200,80,.75); }
.tw-fan .tw-rotor { position:absolute; left:0; top:0; width:0; height:0; transform:translateZ(0px); }
.tw-blade { position:absolute; left:-4px; top:-4px; width:8px; height:46px; margin:0; border-radius:4px; background:#7d8b96; transform-origin:4px 4px; }
.tw-fan.on .tw-rotor { animation:tw-spin .5s linear infinite; }
@keyframes tw-spin { to { transform:rotate(360deg); } }
.tw-ac .tw-face, .tw-dev .tw-face { transition:box-shadow .3s; }
.tw-acflow { opacity:0; transition:opacity .4s; pointer-events:none; }
.tw-acflow.on { opacity:1; }
.tw-air { background:repeating-linear-gradient(90deg, rgba(0,169,232,0) 0 10px, rgba(0,169,232,.35) 10px 14px); background-size:28px 100%;
  border-radius:20px; animation:tw-air 1s linear infinite; }
@keyframes tw-air { to { background-position:28px 0; } }
.tw-pv { background:linear-gradient(135deg, #0b4f8a, #123b63); border:2px solid #c7cfd6;
  background-image:linear-gradient(#5fb2e6 1px, transparent 1px), linear-gradient(90deg, #5fb2e6 1px, transparent 1px), linear-gradient(135deg,#0b4f8a,#123b63);
  background-size:26px 26px, 26px 26px, 100% 100%; }
.tw-buzzer.on { animation:tw-blink .5s steps(2) infinite; box-shadow:0 0 18px 6px rgba(255,60,60,.8); background:#ff4d4d !important; }
@keyframes tw-blink { 50% { opacity:.35; } }
.tw-dev { cursor:pointer; }
.tw-dev.sel .tw-face, .tw-face.tw-dev.sel { box-shadow:0 0 0 3px var(--tw-cyan); }
.tw-bb { position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; }
.tw-person { width:22px; height:44px; margin:-44px 0 0 -11px; transform-origin:11px 44px !important; opacity:0; transition:opacity .35s; }
.tw-person svg { display:block; fill:var(--tw-blue); }
.tw-person.on { opacity:1; }
.tw-tag { transform-origin:0 100% !important; white-space:nowrap; font:600 11px/1 system-ui, sans-serif; color:#fff; background:rgba(18,50,74,.88); padding:4px 7px; border-radius:6px;
  transform-origin:0 100%; margin-top:-20px; pointer-events:auto; cursor:pointer; }
.tw-hud { position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; pointer-events:none; }
.tw-chip { font:600 12px system-ui, sans-serif; padding:5px 10px; border-radius:20px; background:#fff; border:1px solid var(--tw-line); color:#33424e; }
.tw-chip.ok { color:#1f6f15; border-color:#bfe2b5; background:#f1faee; }
.tw-chip.warn { color:#8a5a00; border-color:#f1d9a3; background:#fff8e8; }
.tw-chip.bad { color:#fff; border-color:var(--tw-red); background:var(--tw-red); }
.tw-viewbtn { position:absolute; right:12px; bottom:12px; display:flex; gap:6px; }
.tw-viewbtn button { width:36px; height:36px; border-radius:10px; border:1px solid var(--tw-line); background:#fff; font-size:17px; cursor:pointer; color:#33424e; }
.tw-viewbtn button:hover { background:#f0f4f7; }
.tw-simnote { position:absolute; left:12px; bottom:12px; font:700 12px system-ui, sans-serif; color:#3d3a8c; background:#ecebff;
  border:1px solid #cfccf6; padding:6px 10px; border-radius:8px; }
.tw-side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.tw-seg { display:flex; background:#eef2f5; border-radius:12px; padding:4px; gap:4px; }
.tw-seg button { flex:1; border:0; background:transparent; padding:8px 6px; border-radius:9px; font:600 13px system-ui, sans-serif; color:#4b5a66; cursor:pointer; }
.tw-seg button.on { background:#fff; color:var(--tw-navy); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.tw-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.tw-metrics div { background:#fff; border:1px solid var(--tw-line); border-radius:12px; padding:9px 10px; display:flex; flex-direction:column; min-width:0; }
.tw-metrics span { font-size:11px; color:var(--tw-muted); text-transform:uppercase; letter-spacing:.5px; }
.tw-metrics b { font-size:19px; color:var(--tw-navy); }
.tw-metrics small { font-size:11px; color:var(--tw-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tw-devs, .tw-energy, .tw-simbox { background:#fff; border:1px solid var(--tw-line); border-radius:14px; padding:12px; }
.tw-side h4 { margin:0 0 8px; font-size:13px; color:var(--tw-navy); }
.tw-dev-row { display:flex; align-items:center; gap:9px; padding:6px 4px; border-radius:8px; }
.tw-dev-row.sel { background:#eaf6fc; }
.tw-dn { flex:1; font-size:13px; font-weight:600; display:flex; flex-direction:column; min-width:0; }
.tw-dn small { font-weight:400; color:var(--tw-muted); font-size:11px; }
.tw-dot { width:10px; height:10px; border-radius:50%; background:#c4ccd3; flex-shrink:0; }
.tw-dot.on { background:#3fb24a; box-shadow:0 0 0 3px #dff3dc; }
.tw-dot.off { background:#9aa6b0; }
.tw-btns { display:flex; gap:4px; }
.tw-mini { border:1px solid var(--tw-line); background:#fff; border-radius:7px; padding:4px 9px; font:600 11px system-ui, sans-serif; cursor:pointer; color:#33424e; }
.tw-mini.act { background:var(--tw-navy); border-color:var(--tw-navy); color:#fff; }
.tw-info { font-size:12px; margin:8px 2px 0; color:#33424e; }
.tw-info.muted { color:var(--tw-muted); }
.tw-flow { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.tw-flow i { flex:0 0 20px; height:3px; background:#cfd8df; border-radius:2px; position:relative; overflow:hidden; }
.tw-flow i.run::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--tw-green), transparent); animation:tw-flow 1s linear infinite; }
@keyframes tw-flow { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.tw-node { flex:1; background:#f5f8fa; border-radius:9px; padding:6px 7px; min-width:0; }
.tw-node.wide { flex:2.2; }
.tw-node span { display:block; font-size:10px; color:var(--tw-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tw-node b { font-size:13px; color:var(--tw-navy); }
.tw-simbox { display:flex; flex-direction:column; gap:10px; border-color:#d9d6f5; background:#fbfbff; }
.tw-simbox label { font-size:12px; color:#33424e; display:flex; flex-direction:column; gap:4px; }
.tw-simbox label b { position:absolute; right:0; }
.tw-simbox label { position:relative; }
.tw-simbox input[type=range] { width:100%; accent-color:var(--tw-blue); }
.tw-row { display:flex; gap:8px; }
.tw-check { flex-direction:row !important; align-items:center; }
.tw-btn { flex:1; border:1px solid var(--tw-line); background:#fff; border-radius:9px; padding:8px; font:600 12px system-ui, sans-serif; cursor:pointer; }
.tw-btn.danger { background:#fff1f1; border-color:#f3c4c4; color:var(--tw-red); }
.tw-log { margin:0; padding-left:16px; font-size:11px; color:#4b5a66; max-height:120px; overflow:auto; }
.tw-msg { min-height:16px; margin:0; font-size:12px; color:var(--tw-muted); }
.tw-msg.bad { color:var(--tw-red); }
@media (max-width: 980px) { .tw { grid-template-columns:1fr; } .tw-view { min-height:420px; } }
@media (prefers-reduced-motion: reduce) { .tw-fan.on .tw-rotor, .tw-air, .tw-flow i.run::after, .tw-buzzer.on, .tw-glow.em { animation:none; } }