:root{
  color-scheme:dark;
  --bg:#07111b;--surface:#0b1722;--panel:#0e1b28;--panel2:#132333;
  --line:#23394b;--text:#e8f0f6;--muted:#91a5b7;--accent:#2dd4bf;
  --accent-strong:#14b8a6;--accent-soft:rgba(45,212,191,.13);--danger:#ef4444;
  --warning:#f59e0b;--success:#22c55e;--shadow:0 18px 50px rgba(0,0,0,.22);
  --sidebar-width:260px;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#cfdce7;--surface:#fdfafa;--panel:#aecae9;--panel2:#f7fafc;
  --line:#d9e2e9;--text:#13212d;--muted:#647788;--accent:#0f9f91;
  --accent-strong:#0b8278;--accent-soft:rgba(15,159,145,.11);--danger:#dc2626;
  --warning:#d97706;--success:#15803d;--shadow:0 16px 42px rgba(25,50,70,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;transition:background .2s ease,color .2s ease}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
.app-shell{display:block;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:20px 15px;position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);z-index:40;overflow-y:auto;transition:transform .25s ease,background .2s ease}
.brand{display:flex;gap:12px;align-items:center;padding:2px 8px 22px}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--accent);color:#04231f;border-radius:11px;font-weight:850;box-shadow:0 8px 24px var(--accent-soft)}
.brand strong{font-size:16px;letter-spacing:.02em}.brand small,.userbox small{display:block;color:var(--muted);margin-top:2px}
.sidebar nav{display:grid;gap:5px}
.sidebar nav a{padding:11px 12px;border-radius:9px;color:var(--muted);font-weight:600;transition:.18s ease}
.sidebar nav a:hover,.sidebar nav a:focus-visible{background:var(--accent-soft);color:var(--text);outline:none}
.sidebar nav a.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.main{min-width:0;margin-left:var(--sidebar-width)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 28px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);position:sticky;top:0;z-index:25}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}.topbar-title{min-width:0}.topbar h1{margin:2px 0 0;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:800}
.topbar-actions{display:flex;align-items:center;gap:10px}.userbox{text-align:right;line-height:1.2}.userbox a{display:inline-block;margin-top:5px;color:var(--accent);font-size:13px;font-weight:700}
.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--panel);display:inline-grid;place-items:center;cursor:pointer;transition:.18s ease}
.icon-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.menu-toggle{display:none}.theme-toggle{font-size:19px}
.content{padding:26px;max-width:1680px;margin:0 auto}
.grid{display:grid;gap:18px}.grid.kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.card h2{margin:0 0 4px;font-size:18px}.kpi-value{font-size:32px;font-weight:800;margin-top:8px;letter-spacing:-.03em}.muted{color:var(--muted)}
.toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 15px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;font-weight:700;transition:.18s ease}
.btn:hover{transform:translateY(-1px);border-color:var(--accent)}.btn.primary{background:var(--accent);color:#032723;border-color:var(--accent)}.btn.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.34);color:#ff8d8d}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:11px;background:var(--panel);-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;background:var(--panel);min-width:680px}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--accent-soft)}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.badge{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}.badge.active{background:rgba(34,197,94,.14);color:#4ade80}.badge.pending{background:rgba(245,158,11,.15);color:#fbbf24}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field label{display:block;color:var(--muted);margin-bottom:7px;font-size:13px;font-weight:700}.field input,.field select,.field textarea{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:11px 12px;outline:none;transition:.18s ease}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.field.full{grid-column:1/-1}
.feature-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-group{border:1px solid var(--line);border-radius:11px;padding:15px;background:var(--surface)}.feature-group h3{margin-top:0}.check{display:flex;gap:9px;margin:10px 0;color:var(--text)}
.alert{padding:12px 14px;border:1px solid transparent;border-radius:9px;margin-bottom:16px}.alert.success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28)}.alert.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28)}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,var(--accent-soft),transparent 34%),var(--bg)}.auth-card{width:min(460px,100%);background:var(--panel);border:1px solid var(--line);padding:30px;border-radius:16px;box-shadow:var(--shadow)}.auth-card h1{margin:5px 0 6px}.auth-theme{position:fixed;top:18px;right:18px}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:35;backdrop-filter:blur(2px)}
.mobile-overlay.visible{display:block}
@media(max-width:1100px){.grid.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  :root{--sidebar-width:270px}.app-shell{display:block}.sidebar{transform:translateX(-102%);box-shadow:20px 0 50px rgba(0,0,0,.28)}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.menu-toggle{display:inline-grid}.topbar{padding:14px 16px}.topbar h1{font-size:19px}.userbox span,.userbox small{display:none}.userbox a{margin:0}.content{padding:18px}.card{padding:17px}.toolbar{align-items:flex-start}.toolbar .btn{width:auto}
}
@media(max-width:600px){.grid.kpi,.form-grid,.feature-groups{grid-template-columns:1fr}.field.full{grid-column:auto}.content{padding:14px}.topbar{gap:8px}.topbar-actions{gap:7px}.icon-btn{width:40px;height:40px}.eyebrow{font-size:9px}.card{border-radius:12px}.kpi-value{font-size:28px}.toolbar{display:grid;grid-template-columns:1fr}.toolbar .btn{width:100%}.auth-page{padding:16px}.auth-card{padding:22px}.auth-theme{top:12px;right:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Desktop shell correction: fixed sidebar width is applied only once. */
@media(min-width:821px){
  .sidebar{transform:none!important}
  .main{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width))}
  .topbar{width:100%}
  .mobile-overlay{display:none!important}
}

/* SACS IoT live operations */
html[data-theme="light"]{
  --bg:#f6f1e8;--surface:#fbf7ef;--panel:#fffaf2;--panel2:#fffdf8;
  --line:#ded5c7;--text:#2b2a27;--muted:#756f66;--accent:#0f9f91;
  --accent-strong:#0b8278;--accent-soft:rgba(15,159,145,.10);--shadow:0 14px 36px rgba(88,72,48,.08);
}
.device-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.device-head h2{font-size:24px;margin:4px 0}.device-status{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 8px;text-align:right}.device-status small{grid-column:1/-1}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.12);vertical-align:middle}.status-dot.online{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.telemetry-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}.metric-card{min-height:118px}.metric-value{font-size:29px;font-weight:800;margin-top:10px;letter-spacing:-.02em}.metric-value small{font-size:13px;font-weight:600;color:var(--muted)}
.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.control-panel{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:16px}.control-panel h3{margin:0 0 12px}.control-panel form{display:grid;gap:10px}.button-row{display:flex;gap:8px;flex-wrap:wrap}.button-row form{display:inline-block}.control-panel input[type="text"],.control-panel input:not([type]){width:100%}.control-panel input[type="range"]{width:min(280px,100%)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px}.code-box,.token-box{white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto}.token-box{font-size:14px;color:var(--accent)}hr{border:0;border-top:1px solid var(--line);margin:22px 0}.device-select-list{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface)}.rule-examples p{padding:10px 0;border-bottom:1px solid var(--line);margin:0}.rule-examples p:last-child{border-bottom:0}.severity-critical,.severity-emergency{background:rgba(239,68,68,.15)!important;color:#ef4444!important}.severity-major{background:rgba(245,158,11,.15)!important;color:#d97706!important}
@media(max-width:1100px){.telemetry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-grid,.two-col{grid-template-columns:1fr}}
@media(max-width:600px){.telemetry-grid{grid-template-columns:1fr}.device-head{align-items:flex-start;flex-direction:column}.device-status{text-align:left}.button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.button-row .btn{width:100%}}

/* ================================================================
   SACS realistic smart-pole / SCADA device page
   ================================================================ */
.device-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 20px;background:linear-gradient(135deg,var(--panel2),var(--panel));position:relative;overflow:hidden}
.device-hero:after{content:"";position:absolute;width:380px;height:180px;right:-100px;top:-110px;background:radial-gradient(circle,var(--accent-soft),transparent 68%);pointer-events:none}
.device-hero-main{display:flex;align-items:center;gap:15px;min-width:0}.device-identity-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent);font-weight:900;font-size:21px}.device-hero h2{font-size:25px;margin:2px 0}.device-meta-line{display:flex;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:13px}.device-hero-actions{display:flex;align-items:center;gap:13px;z-index:1}.device-online-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px}.device-online-pill.online{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}.last-seen-box{display:grid;gap:2px;min-width:138px}.last-seen-box span{font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:800}.last-seen-box strong{font-size:11px}.compact-actions{flex-wrap:nowrap}
.device-operations-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px;margin-top:18px}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}.section-head h2{margin:2px 0 0}.section-head p{margin:4px 0 0}.mini-live{font-size:10px;letter-spacing:.11em;font-weight:800;color:#4ade80;display:flex;align-items:center;gap:6px}.mini-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.85)}
.smart-pole-panel{min-height:560px}.smart-pole-stage{display:grid;grid-template-columns:minmax(260px,1fr) minmax(250px,.85fr);gap:20px;min-height:470px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 86%,#1d3b50 14%),var(--surface));border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden}.ambient-sky{position:absolute;top:14px;left:14px;z-index:2;display:grid;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(8px)}.ambient-sky span{font-size:8px;letter-spacing:.14em;color:var(--muted)}.ambient-sky strong{font-size:12px}.pole-scene{position:relative;min-height:470px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(46,86,112,.18) 0%,rgba(15,35,48,.06) 60%,rgba(57,91,56,.13) 100%);overflow:hidden}.pole-scene:before{content:"";position:absolute;left:0;right:0;bottom:68px;height:1px;background:var(--line)}.pole-scene:after{content:"";position:absolute;left:0;right:0;bottom:0;height:68px;background:linear-gradient(180deg,rgba(69,96,58,.06),rgba(51,78,42,.18))}.pole-mast{position:absolute;width:12px;height:290px;left:48%;bottom:68px;transform:translateX(-50%);border-radius:6px 6px 2px 2px;background:linear-gradient(90deg,#3b4650,#89949c 45%,#4d5b65);box-shadow:10px 0 22px rgba(0,0,0,.16)}.streetlight-head{position:absolute;left:48%;top:73px;width:112px;height:10px;background:linear-gradient(180deg,#87949d,#34434d);border-radius:7px;transform:translateX(-7px);z-index:3}.streetlight-head:before{content:"";position:absolute;right:-4px;top:-4px;width:25px;height:17px;border-radius:12px 15px 7px 7px;background:#46545e}.lamp-lens{position:absolute;right:0;bottom:-6px;width:24px;height:8px;border-radius:0 0 12px 12px;background:#f8e49c;box-shadow:0 0 18px rgba(255,223,122,.5);transition:.35s}.streetlight-beam{position:absolute;top:86px;left:58%;width:175px;height:300px;clip-path:polygon(43% 0,58% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,229,138,.25),rgba(255,229,138,0));opacity:.5;filter:blur(3px);transition:.4s}.sensor-crown{position:absolute;left:48%;top:105px;transform:translateX(-50%);display:flex;gap:4px;z-index:4}.sensor-crown span{width:12px;height:12px;border-radius:50%;background:#172531;border:2px solid #8295a3;box-shadow:0 0 0 2px rgba(25,45,58,.5)}.matrix-display{position:absolute;left:48%;top:150px;transform:translateX(-50%);width:68px;height:88px;border:5px solid #263844;background:#041018;border-radius:7px;display:grid;place-items:center;align-content:center;text-align:center;color:#59e9de;box-shadow:0 8px 20px rgba(0,0,0,.28);z-index:5}.matrix-display:before{content:"";position:absolute;inset:5px;background-image:radial-gradient(circle,#3ed4c8 1px,transparent 1.6px);background-size:7px 7px;opacity:.18}.matrix-display small,.matrix-display strong{z-index:1;font-size:8px;line-height:1.2}.matrix-display strong{font-size:9px}.fog-nozzle{position:absolute;left:48%;top:260px;width:50px;height:5px;background:#596a74;z-index:4}.fog-nozzle:after{content:"";position:absolute;right:-5px;top:-2px;width:8px;height:8px;border-radius:50%;background:#7d8d96}.fog-mist{position:absolute;left:50px;top:-20px;width:115px;height:70px;background:radial-gradient(ellipse at left,rgba(166,225,236,.55),rgba(166,225,236,.12) 38%,transparent 70%);filter:blur(6px);opacity:0;transition:.4s}.fog-mist.active{opacity:1;animation:fogPulse 2s ease-in-out infinite}.power-cabinet{position:absolute;left:calc(48% + 22px);bottom:78px;width:42px;height:60px;border-radius:5px;background:linear-gradient(135deg,#43515a,#1f2e37);border:1px solid #71808a;color:#a9b7c0;font-size:7px;letter-spacing:.1em;display:grid;place-items:center;align-content:center;z-index:4}.power-cabinet i{width:5px;height:5px;border-radius:50%;background:#22c55e;margin-top:5px;box-shadow:0 0 8px rgba(34,197,94,.7)}.plant-bed{position:absolute;left:11%;right:10%;bottom:28px;height:48px;border-radius:50% 50% 8px 8px;background:linear-gradient(180deg,#344f2c,#21351e);z-index:5;display:flex;align-items:flex-start;justify-content:center;gap:22px}.plant-bed>i{width:10px;height:34px;background:linear-gradient(45deg,transparent 43%,#59a44e 44% 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,#6db75b 44% 56%,transparent 57%);transform:translateY(-20px)}.soil-bar{position:absolute;left:18px;right:18px;bottom:7px;height:5px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden}.soil-bar span{display:block;height:100%;width:0;background:#67c75a;transition:.4s}.pole-status-stack{padding:78px 16px 16px;display:flex;flex-direction:column;gap:10px}.subsystem-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel2) 70%,transparent)}.subsystem-row strong{display:block;font-size:12px}.subsystem-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.subsystem-icon{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);position:relative}.subsystem-icon:after{content:"";position:absolute;inset:9px;border:2px solid var(--accent);border-radius:50%}.subsystem-icon.lighting:after{border-radius:2px;transform:rotate(45deg)}.subsystem-icon.fog:after{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.subsystem-icon.comms:after{border-width:0 0 2px 2px;border-radius:0;transform:rotate(-45deg)}.subsystem-state{font-size:9px;font-weight:900;letter-spacing:.08em;padding:5px 7px;border-radius:5px;background:rgba(100,116,139,.13);color:var(--muted)}.subsystem-state.good,.subsystem-state.on{background:rgba(34,197,94,.12);color:#4ade80}.subsystem-state.off{background:rgba(100,116,139,.12);color:var(--muted)}
.telemetry-console{min-height:560px}.telemetry-stack{display:grid;grid-template-columns:1fr;gap:9px}.telemetry-tile{display:grid;grid-template-columns:40px 1fr;gap:11px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.telemetry-icon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:900}.telemetry-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:800}.telemetry-reading{font-size:21px;font-weight:800;letter-spacing:-.02em}.telemetry-reading small{font-size:10px;color:var(--muted);margin-left:3px}.telemetry-tile.warning{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.05)}.telemetry-tile.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.06)}
.control-console{margin-top:18px}.safety-banner{font-size:9px;letter-spacing:.12em;font-weight:900;padding:7px 10px;border:1px solid rgba(34,197,94,.28);background:rgba(34,197,94,.08);color:#4ade80;border-radius:6px}.control-console-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.industrial-control-card{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:14px;min-width:0}.industrial-control-card.wide-control-card{grid-column:span 2}.control-card-head{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;margin-bottom:14px}.control-symbol{width:36px;height:36px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:900}.control-card-head h3{font-size:13px;margin:0}.control-card-head small{font-size:9px;color:var(--muted)}.control-live-value{font-size:17px;font-weight:900;color:var(--accent)}.control-form{display:grid;gap:10px}.slider-shell{padding:7px 2px}.slider-shell input{width:100%;accent-color:var(--accent)}.segmented-actions,.three-way-control{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:9px}.three-way-control{grid-template-columns:repeat(3,1fr)}.seg-btn,.control-switch,.preset-btn,.mode-key{width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:7px;padding:9px 7px;font-size:9px;font-weight:800;cursor:pointer;transition:.18s}.seg-btn:hover,.preset-btn:hover,.mode-key:hover{border-color:var(--accent);background:var(--accent-soft)}.control-switch.on{border-color:rgba(34,197,94,.3);color:#4ade80}.control-switch.off{border-color:rgba(239,68,68,.25);color:#ef8f8f}.control-switch.auto{color:#67e8f9}.color-control-form{display:grid;grid-template-columns:64px 1fr;gap:10px}.industrial-color{width:64px;height:42px;border:1px solid var(--line);background:var(--panel2);padding:4px;border-radius:8px}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.preset-btn{text-align:left}.preset-btn span{display:block;color:var(--accent);font-size:13px}.matrix-mode-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-bottom:10px}.mode-key{padding:7px 2px}.mode-key span{display:block;font-size:14px}.mode-key small{font-size:7px;color:var(--muted)}.dual-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inline-command-form{display:grid;grid-template-columns:1fr auto;gap:6px}.inline-command-form input{width:100%;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 10px}.device-bottom-grid{margin-top:18px}.feature-chip-row .chip{display:flex;align-items:center;gap:7px}.feature-chip-row .chip i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}.command-table code{font-size:11px;color:var(--accent)}
@keyframes fogPulse{0%,100%{transform:translateX(0) scale(.9);opacity:.35}50%{transform:translateX(8px) scale(1.05);opacity:.8}}
@media(max-width:1280px){.device-operations-layout{grid-template-columns:1fr}.telemetry-console{min-height:auto}.telemetry-stack{grid-template-columns:repeat(4,minmax(0,1fr))}.telemetry-tile{grid-template-columns:1fr;text-align:center}.telemetry-icon{margin:auto}.control-console-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.industrial-control-card.wide-control-card{grid-column:span 2}}
@media(max-width:900px){.device-hero{align-items:flex-start;flex-direction:column}.device-hero-actions{width:100%;flex-wrap:wrap}.smart-pole-stage{grid-template-columns:1fr}.pole-scene{border-right:0;border-bottom:1px solid var(--line)}.pole-status-stack{padding:16px}.telemetry-stack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.device-operations-layout{gap:12px}.device-hero-main{align-items:flex-start}.device-identity-icon{width:42px;height:42px}.device-hero h2{font-size:21px}.device-hero-actions{display:grid;grid-template-columns:1fr 1fr}.compact-actions{grid-column:1/-1}.smart-pole-panel{padding:12px}.smart-pole-stage{min-height:auto}.pole-scene{min-height:430px}.telemetry-stack{grid-template-columns:1fr 1fr}.control-console-grid{grid-template-columns:1fr}.industrial-control-card.wide-control-card{grid-column:auto}.matrix-mode-grid{grid-template-columns:repeat(5,1fr)}.dual-form-row{grid-template-columns:1fr}.inline-command-form{grid-template-columns:1fr}.control-card-head{grid-template-columns:36px 1fr auto}.device-bottom-grid{grid-template-columns:1fr}.safety-banner{display:none}}

/* Command lifecycle */
.command-status{min-width:92px;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.command-status.queued{background:rgba(245,158,11,.14);color:#fbbf24}
.command-status.sent{background:rgba(59,130,246,.16);color:#60a5fa}
.command-status.acknowledged{background:rgba(139,92,246,.16);color:#a78bfa}
.command-status.executed{background:rgba(34,197,94,.16);color:#4ade80}
.command-status.failed,.command-status.expired{background:rgba(239,68,68,.15);color:#f87171}
.command-result{max-width:210px;white-space:normal;color:var(--muted)}
.command-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.command-legend span{display:flex;align-items:center;gap:6px}.command-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.command-legend .q{background:#f59e0b}.command-legend .s{background:#3b82f6}.command-legend .a{background:#8b5cf6}.command-legend .e{background:#22c55e}.command-legend .f{background:#ef4444}

/* =========================================================
   SACS REALISTIC SMART-POLE DEVICE COMMAND CENTER
   ========================================================= */
.device-command-center{padding:0;overflow:hidden;background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 92%,#08131f 8%));border-color:color-mix(in srgb,var(--line) 75%,var(--accent) 25%)}
.dcc-header{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--panel2) 92%,var(--accent) 8%),var(--panel))}.dcc-title-wrap{display:flex;align-items:center;gap:14px;min-width:0}.dcc-device-badge{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),#0c5968);color:#041219;font-weight:1000;letter-spacing:.04em;box-shadow:0 8px 22px rgba(19,210,193,.18)}.dcc-title-wrap h2{margin:2px 0 4px;font-size:22px}.dcc-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:11px}.dcc-header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.dcc-main-grid{display:grid;grid-template-columns:minmax(470px,1.05fr) minmax(520px,1fr);min-height:670px}.pole-live-card{position:relative;border-right:1px solid var(--line);background:radial-gradient(circle at 42% 20%,rgba(255,223,122,.08),transparent 28%),linear-gradient(180deg,#0c1a26 0%,#102334 58%,#0d1b23 100%);overflow:hidden}.pole-visual-toolbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(148,163,184,.15);background:rgba(4,13,20,.42);backdrop-filter:blur(6px)}.pole-toolbar-metrics{display:flex;gap:18px;color:#9eb1c3;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.pole-toolbar-metrics strong{display:block;color:#ecf9ff;font-size:13px;margin-top:2px}.real-pole-stage{position:relative;height:540px;overflow:hidden;background:linear-gradient(180deg,#183044 0 46%,#162a2f 46% 80%,#101a16 80% 100%)}.real-pole-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 49%,rgba(255,255,255,.018) 50%,transparent 51%),linear-gradient(0deg,transparent 0 49%,rgba(255,255,255,.018) 50%,transparent 51%);background-size:36px 36px;opacity:.55}.real-pole-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:112px;background:radial-gradient(ellipse at center,rgba(74,99,54,.5),rgba(14,27,21,.95) 68%);pointer-events:none}.real-pole-image{position:absolute;z-index:4;left:50%;bottom:12px;transform:translateX(-50%);height:500px;width:auto;max-width:50%;object-fit:contain;background:#fff;box-shadow:0 18px 48px rgba(0,0,0,.28);border-radius:4px}.pole-night-haze{position:absolute;z-index:3;left:48%;top:64px;width:290px;height:230px;transform:translateX(-4%);clip-path:polygon(0 0,29% 0,100% 100%,10% 100%);background:linear-gradient(110deg,rgba(255,239,174,.34),rgba(255,232,136,.07) 65%,transparent);filter:blur(5px);opacity:.4;transition:opacity .4s}.pole-lamp-glow{position:absolute;z-index:5;left:60.6%;top:62px;width:34px;height:15px;border-radius:50%;background:#ffe89c;box-shadow:0 0 26px 12px rgba(255,222,126,.6);opacity:.6;transition:.35s}.pole-fog-cloud{position:absolute;z-index:7;left:43%;bottom:126px;width:86px;height:52px;opacity:0;transition:.25s}.pole-fog-cloud.active{opacity:1}.pole-fog-cloud i{position:absolute;width:52px;height:16px;border-radius:50%;background:rgba(218,245,255,.5);filter:blur(7px);animation:sacsMist 1.6s ease-in-out infinite}.pole-fog-cloud i:nth-child(2){left:22px;top:16px;animation-delay:.35s}.pole-fog-cloud i:nth-child(3){left:-14px;top:27px;animation-delay:.7s}.pole-soil-meter{position:absolute;z-index:8;left:18px;bottom:18px;width:120px;padding:8px 9px;background:rgba(5,14,20,.78);border:1px solid rgba(100,180,115,.25);border-radius:8px;color:#9cc7a4;font-size:9px;letter-spacing:.08em}.pole-soil-meter div{height:6px;background:#18271f;border-radius:99px;margin-top:5px;overflow:hidden}.pole-soil-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a97729,#5dcf75);transition:width .35s}.pole-power-led{position:absolute;z-index:8;right:16px;bottom:18px;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:7px;background:rgba(5,14,20,.78);border:1px solid rgba(148,163,184,.17);color:#9db0bf;font-size:9px;letter-spacing:.08em}.pole-power-led i{width:8px;height:8px;border-radius:50%;background:#64748b}.sensor-callout{position:absolute;z-index:9;min-width:104px;padding:8px 10px;border:1px solid rgba(115,206,210,.22);border-left:3px solid #2dd4bf;background:rgba(7,20,30,.88);box-shadow:0 10px 30px rgba(0,0,0,.15);border-radius:7px;color:#9fb6c5;backdrop-filter:blur(6px)}.sensor-callout:after{content:"";position:absolute;top:50%;width:28px;border-top:1px solid rgba(45,212,191,.35)}.sensor-callout span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.sensor-callout strong{display:inline-block;font-size:17px;color:#f1fbff;margin-top:2px}.sensor-callout small{font-size:8px;margin-left:3px}.callout-temp{left:14px;top:68px}.callout-temp:after,.callout-aqi:after,.callout-soil:after{right:-29px}.callout-hum{right:14px;top:100px}.callout-hum:after,.callout-lux:after,.callout-pump:after{left:-29px}.callout-aqi{left:14px;top:190px}.callout-lux{right:14px;top:220px}.callout-soil{left:14px;top:330px}.callout-pump{right:14px;top:350px}.pole-subsystem-strip{height:74px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(148,163,184,.14);background:#08141d}.pole-subsystem{display:flex;align-items:center;gap:9px;padding:11px 12px;border-right:1px solid rgba(148,163,184,.12)}.pole-subsystem:last-child{border-right:0}.pole-subsystem small{display:block;font-size:7px;color:#6f8799;letter-spacing:.1em}.pole-subsystem strong{display:block;font-size:11px;color:#eef9ff;margin-top:2px}.pole-subsystem strong.good{color:#4ade80}
.integrated-control-panel{background:linear-gradient(180deg,var(--panel2),var(--panel));padding:16px;overflow:auto;max-height:670px}.control-panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.control-panel-title h2{margin:2px 0 0}.operator-control-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}.operator-module{border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,var(--accent) 6%),var(--surface));border-radius:10px;padding:12px}.module-display{grid-column:1/-1}.operator-module-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.operator-module-head h3{margin:1px 0 0;font-size:13px}.module-kicker{font-size:7px;color:var(--accent);letter-spacing:.12em;font-weight:900}.big-live-value{font-size:20px;color:var(--accent);font-weight:1000}.operator-module input[type=range]{width:100%;accent-color:var(--accent)}.two-command-grid,.three-command-grid,.festival-command-grid,.matrix-command-grid{display:grid;gap:6px}.two-command-grid{grid-template-columns:1fr 1fr;margin-top:8px}.three-command-grid{grid-template-columns:repeat(3,1fr)}.festival-command-grid{grid-template-columns:repeat(4,1fr)}.matrix-command-grid{grid-template-columns:repeat(9,1fr);margin-bottom:8px}.control-chip,.festival-scene,.matrix-command{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;cursor:pointer;font-size:8px;font-weight:850;padding:8px 5px;transition:.18s}.control-chip:hover,.festival-scene:hover,.matrix-command:hover{border-color:var(--accent);background:var(--accent-soft)}.control-chip.run{color:#4ade80;border-color:rgba(34,197,94,.28)}.control-chip.stop{color:#fb7185;border-color:rgba(244,63,94,.22)}.control-chip.auto{color:#67e8f9}.festival-scene strong{display:block;color:var(--accent);font-size:13px}.festival-scene span{font-size:7px}.matrix-command strong{display:block;font-size:12px}.matrix-command small{font-size:6px;color:var(--muted)}.color-command-row{display:grid;grid-template-columns:62px 1fr;gap:8px}.color-command-row input[type=color]{width:62px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:4px}.rgb-preview{width:28px;height:28px;border-radius:50%;background:#35c4ff;box-shadow:0 0 14px rgba(53,196,255,.55)}.operator-inline-form{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:7px}.operator-inline-form input{min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:8px 9px}.viewer-control-message{padding:22px;border:1px dashed var(--line);border-radius:10px;color:var(--muted)}
.device-secondary-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;margin-top:16px}.rack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.rack-cell{padding:11px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:0}.rack-cell span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.rack-cell strong{font-size:20px;color:var(--text)}.rack-cell small{font-size:8px;color:var(--muted);margin-left:3px}.rack-cell.warning{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.06)}.rack-cell.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.06)}.command-bus-compact .table-wrap{max-height:270px;overflow:auto}.installed-feature-bar{margin-top:16px}

/* AJAX toast */
.device-toast-container{position:fixed;top:18px;right:18px;z-index:999999;display:flex;flex-direction:column;gap:9px;width:min(360px,calc(100vw - 28px));pointer-events:none}.device-toast{display:flex;align-items:center;gap:10px;padding:12px 13px;background:var(--panel);border:1px solid var(--line);border-left:4px solid #22c55e;border-radius:10px;box-shadow:0 16px 42px rgba(0,0,0,.22);opacity:0;transform:translateY(-12px);transition:.22s;pointer-events:auto}.device-toast.show{opacity:1;transform:translateY(0)}.device-toast.error{border-left-color:#ef4444}.device-toast-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,94,.12);color:#4ade80;font-weight:900}.device-toast.error .device-toast-icon{background:rgba(239,68,68,.12);color:#f87171}.device-toast-copy{display:flex;flex-direction:column;gap:1px}.device-toast-copy strong{font-size:12px}.device-toast-copy span{font-size:10px;color:var(--muted)}

@keyframes sacsMist{0%,100%{transform:translateX(0) scale(.85);opacity:.35}50%{transform:translateX(14px) scale(1.12);opacity:.8}}
@media(max-width:1260px){.dcc-main-grid{grid-template-columns:1fr}.pole-live-card{border-right:0;border-bottom:1px solid var(--line)}.integrated-control-panel{max-height:none}.device-secondary-grid{grid-template-columns:1fr}.real-pole-image{max-width:38%}}
@media(max-width:850px){.dcc-header{align-items:flex-start;flex-direction:column}.dcc-header-right{justify-content:flex-start}.operator-control-stack{grid-template-columns:1fr}.module-display{grid-column:auto}.real-pole-stage{height:510px}.real-pole-image{height:455px;max-width:48%}.sensor-callout{min-width:88px;padding:7px}.sensor-callout strong{font-size:14px}.rack-grid{grid-template-columns:repeat(2,1fr)}.pole-subsystem-strip{grid-template-columns:1fr 1fr;height:auto}.festival-command-grid{grid-template-columns:1fr 1fr}.matrix-command-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:560px){.device-command-center{border-radius:0;margin-left:-12px;margin-right:-12px}.dcc-header{padding:14px}.dcc-device-badge{width:40px;height:40px}.dcc-title-wrap h2{font-size:19px}.real-pole-stage{height:470px}.real-pole-image{height:405px;max-width:52%;bottom:18px}.callout-temp{left:7px;top:52px}.callout-hum{right:7px;top:83px}.callout-aqi{left:7px;top:163px}.callout-lux{right:7px;top:194px}.callout-soil{left:7px;top:300px}.callout-pump{right:7px;top:323px}.sensor-callout{min-width:75px}.sensor-callout:after{display:none}.pole-toolbar-metrics{gap:8px}.pole-subsystem{padding:9px}.integrated-control-panel{padding:11px}.operator-inline-form{grid-template-columns:1fr}.matrix-command-grid{grid-template-columns:repeat(3,1fr)}.rack-grid{grid-template-columns:1fr 1fr}.device-toast-container{left:10px;right:10px;top:10px;width:auto}}

/* =========================================================
   SACS DISPLAY MODES - integrated into existing device page
   ========================================================= */
.display-active-mode{text-align:right}.display-active-mode small{display:block;font-size:7px;letter-spacing:.1em;color:var(--muted)}.display-active-mode strong{display:block;color:var(--accent);font-size:11px;margin-top:2px}
.display-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px}.display-mode-form{min-width:0}.display-mode-button{position:relative;width:100%;min-height:82px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);padding:10px 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:.18s}.display-mode-button:hover,.display-mode-button.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}.display-mode-number{position:absolute;top:5px;left:6px;font-size:7px;color:var(--accent);font-weight:900}.display-mode-button strong{font-size:10px}.display-mode-button small{font-size:7px;color:var(--muted);line-height:1.25;text-align:center}
.display-subcontrol{margin-top:10px;padding:11px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--panel) 88%,var(--accent) 12%)}.display-subcontrol[hidden]{display:none!important}.display-subcontrol-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.display-subcontrol-head span{font-size:7px;letter-spacing:.12em;color:var(--accent);font-weight:900}.display-subcontrol-head strong{font-size:10px}
.display-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.display-setting-form,.display-size-panel{border:1px solid var(--line);border-radius:8px;padding:9px;background:var(--surface)}.display-setting-form label,.display-size-panel label{display:flex;justify-content:space-between;font-size:8px;color:var(--muted);font-weight:800;margin-bottom:7px}.display-setting-form input[type=range]{width:100%;accent-color:var(--accent);margin-bottom:6px}.display-size-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.display-color-presets{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.display-color-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--line);background:var(--swatch);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.15)}.display-color-swatch:hover{border-color:#fff;transform:scale(1.06)}.display-custom-color{margin-top:10px}
.festival-named-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.figure-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px}.figure-named-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.figure-button{width:100%;min-height:54px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);cursor:pointer;padding:7px 4px}.figure-button:hover{border-color:var(--accent);background:var(--accent-soft)}.figure-button strong{display:block;font-size:9px}.figure-button small{font-size:6px;color:var(--muted)}
.display-raw-command{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
@media(max-width:850px){.display-mode-grid{grid-template-columns:repeat(3,1fr)}.figure-named-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.display-mode-grid{grid-template-columns:repeat(2,1fr)}.display-settings-grid{grid-template-columns:1fr}.festival-named-grid{grid-template-columns:repeat(2,1fr)}.figure-named-grid{grid-template-columns:repeat(2,1fr)}.display-color-presets{grid-template-columns:repeat(4,1fr)}}

/* === SACS Platform Phase 3 === */
.nav-section-label{padding:14px 14px 5px;font-size:8px;font-weight:900;letter-spacing:.16em;color:var(--muted);opacity:.75}
.platform-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;margin-bottom:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,var(--card),var(--panel));box-shadow:var(--shadow)}
.platform-hero h2{margin:3px 0 5px;font-size:24px}.platform-hero p{margin:0}.platform-grid{align-items:start}.platform-kpi{margin-bottom:18px}
.platform-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.platform-module{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);display:flex;flex-direction:column;gap:5px}.platform-module b{font-size:12px;color:var(--text)}.platform-module span{font-size:9px;line-height:1.45;color:var(--muted)}.platform-link{text-decoration:none;transition:.18s}.platform-link:hover{border-color:var(--accent);transform:translateY(-1px);background:var(--accent-soft)}
.analytics-metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.analytics-metric-grid>div{padding:13px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.analytics-metric-grid small{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.analytics-metric-grid strong{display:block;margin-top:5px;font-size:18px;color:var(--accent)}
.workflow-list{display:grid;gap:8px}.workflow-list p{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);display:flex;flex-direction:column;gap:3px}.workflow-list b{font-size:11px}.workflow-list span{font-size:9px;color:var(--muted)}
.reporting-types{margin-top:4px}
@media(max-width:850px){.platform-module-grid{grid-template-columns:repeat(2,1fr)}.platform-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.platform-module-grid,.analytics-metric-grid{grid-template-columns:1fr}.platform-hero h2{font-size:20px}}