:root{--bg:#0c1218;--panel:#131c24;--panel2:#18242e;--line:#263540;--text:#ecf6fb;--muted:#8ea2af;--primary:#19c7c3;--primary2:#2a8cff;--good:#1fd181;--warn:#ffad35;--danger:#ff4d5f;--purple:#9d75ff;--shadow:0 16px 40px rgba(0,0,0,.24);--sidebar:252px}
html[data-theme=graphite-purple]{--bg:#111016;--panel:#191821;--panel2:#23202d;--line:#342f42;--primary:#a779ff;--primary2:#5b8cff}
html[data-theme=light-clean]{--bg:#eef3f7;--panel:#fff;--panel2:#f6f9fb;--line:#dbe5ec;--text:#15212b;--muted:#667986;--shadow:0 14px 35px rgba(35,62,78,.12)}
html[data-theme=orange-tech]{--bg:#15110d;--panel:#211912;--panel2:#2b2118;--line:#463222;--primary:#ff9f32;--primary2:#ff5e3a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,sans-serif;background:var(--bg);color:var(--text)}body{overflow-x:hidden}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 82%,#000));border-right:1px solid var(--line);z-index:50;display:flex;flex-direction:column;transition:.25s}.brand{height:76px;display:flex;align-items:center;gap:11px;padding:14px;border-bottom:1px solid var(--line)}.brand img{width:42px;height:42px}.brand div{display:flex;flex-direction:column;min-width:0}.brand strong{font:800 19px Manrope}.brand span{font-size:11px;color:var(--muted)}.brand .icon-btn{margin-left:auto}.sidebar nav{padding:14px 10px;display:flex;flex-direction:column;gap:5px;overflow:auto}.nav{height:45px;border:0;background:transparent;color:var(--muted);border-radius:12px;display:flex;align-items:center;gap:13px;padding:0 14px;font:600 13px Inter;cursor:pointer;text-align:left;position:relative}.nav i{width:21px;text-align:center;font-size:16px}.nav:hover,.nav.active{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 18%,transparent),transparent)}.nav.active:before{content:"";position:absolute;left:0;width:3px;height:22px;border-radius:4px;background:var(--primary)}.badge{margin-left:auto;background:var(--danger);color:#fff;border-radius:20px;padding:2px 7px;font-size:10px}.side-foot{margin:auto 12px 14px;padding:12px;border:1px solid var(--line);border-radius:13px;display:flex;gap:9px;align-items:center}.side-foot div{display:flex;flex-direction:column}.side-foot b{font-size:11px}.side-foot small{color:var(--muted);font-size:10px}.main{margin-left:var(--sidebar);min-height:100vh;transition:.25s}.sidebar.collapsed{width:76px}.sidebar.collapsed .brand div,.sidebar.collapsed .brand .icon-btn,.sidebar.collapsed .nav span,.sidebar.collapsed .badge,.sidebar.collapsed .side-foot div{display:none}.sidebar.collapsed .brand{justify-content:center}.sidebar.collapsed .nav{justify-content:center}.sidebar.collapsed~.main{margin-left:76px}header{height:76px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-title{display:flex;align-items:center;gap:10px}.header-title h1{margin:0;font:800 20px Manrope}.header-title p{margin:4px 0 0;color:var(--muted);font-size:11px}.header-actions{display:flex;align-items:center;gap:9px}.icon-btn{width:39px;height:39px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);cursor:pointer}.status-chip{height:40px;display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;border:1px solid var(--line);background:var(--panel);padding:5px 11px;border-radius:11px}.status-chip .dot{grid-row:1/3}.status-chip small{font-size:9px;color:var(--muted)}.status-chip b{font-size:11px}.clock{display:flex;flex-direction:column;align-items:flex-end}.clock b{font-size:13px}.clock span{font-size:9px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:#687985;display:inline-block}.dot.online{background:var(--good);box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 14%,transparent)}.dot.warning{background:var(--warn)}.dot.danger{background:var(--danger)}.content{padding:20px 24px 30px}.page{display:none}.page.active{display:block;animation:pageIn .24s ease}@keyframes pageIn{from{opacity:0;transform:translateY(5px)}}.summary{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.summary article{min-height:96px;padding:15px;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel),var(--panel2));border-radius:16px;display:grid;grid-template-columns:42px 1fr;column-gap:11px;box-shadow:var(--shadow)}.summary article>i{grid-row:1/4;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 13%,transparent)}.summary span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}.summary b{font-size:22px}.summary small{color:var(--muted);font-size:9px}.good{color:var(--good)}.cyan{color:var(--primary)}.warn{color:var(--warn)}.purple{color:var(--purple)}.muted{color:var(--muted)}.section-head{margin:22px 0 13px;display:flex;justify-content:space-between;align-items:end;gap:12px}.section-head span,.panel-head span{font-size:9px;font-weight:800;color:var(--primary);letter-spacing:1.2px}.section-head h2,.panel-head h3{margin:3px 0 0;font-family:Manrope}.section-head h2{font-size:19px}.panel-head h3{font-size:14px}.toolbar,.button-row{display:flex;gap:8px;align-items:center}.toolbar input,.toolbar select,select,input{height:38px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);outline:none}.btn,.mini-btn,.pagination button{border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);height:38px;padding:0 13px;font:600 11px Inter;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:0}.btn.danger{background:color-mix(in srgb,var(--danger) 18%,var(--panel));color:#ff8e99;border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}.btn.secondary:hover,.mini-btn:hover{border-color:var(--primary)}.sensor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sensor{min-height:151px;border:1px solid var(--line);border-radius:16px;padding:14px;background:linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:var(--shadow);overflow:hidden;position:relative}.sensor:after{content:"";position:absolute;inset:auto -20px -45px auto;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--primary) 8%,transparent);filter:blur(5px)}.sensor-top{display:flex;justify-content:space-between;align-items:center}.sensor-top>span{font-size:11px;color:var(--muted)}.sensor-top i{color:var(--primary);margin-right:6px}.state{font-size:8px;padding:4px 7px;border-radius:20px;background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted)}.state.normal{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}.state.warning{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}.state.danger{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}.state.info{background:color-mix(in srgb,var(--primary2) 18%,transparent);color:var(--primary2)}.state.offline{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}.value{margin:17px 0 13px;display:flex;align-items:baseline;gap:6px}.value strong{font:800 29px Manrope}.value small{font-size:10px;color:var(--muted)}.value.coord strong{font-size:21px}.sensor footer{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.meter,.battery{height:6px;background:color-mix(in srgb,var(--line) 70%,transparent);border-radius:10px;overflow:hidden;margin-bottom:12px}.meter i,.battery i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--primary),var(--good));transition:.3s}.battery{height:8px}.bars{display:flex;gap:3px;height:19px;align-items:end;margin:0 0 9px}.bars i{width:6px;border-radius:3px;background:var(--line)}.bars i:nth-child(1){height:5px}.bars i:nth-child(2){height:9px}.bars i:nth-child(3){height:14px}.bars i:nth-child(4){height:19px}.bars i.on{background:var(--primary)}.system{text-align:center}.system .sensor-top{text-align:left}.orb{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:13px auto 7px;background:color-mix(in srgb,var(--muted) 13%,transparent);color:var(--muted);border:1px solid var(--line)}.orb.normal{color:var(--good);box-shadow:0 0 30px color-mix(in srgb,var(--good) 18%,transparent)}.orb.warning{color:var(--warn)}.orb.danger{color:var(--danger)}.system>strong{display:block;font:800 14px Manrope}.system>small{font-size:9px;color:var(--muted)}.charts-grid{margin-top:12px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.panel{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:var(--shadow);padding:15px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.chart-wrap{height:205px}.chart-wrap.tall{height:390px}.bottom-grid{margin-top:12px;display:grid;grid-template-columns:1.3fr 1fr;gap:12px}.mini-map{height:245px;border-radius:12px;overflow:hidden}.event-log{height:245px;overflow:auto;display:flex;flex-direction:column;gap:7px}.event{padding:9px 10px;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--panel2) 75%,transparent);border-radius:8px}.event b{font-size:10px}.event p{margin:3px 0;color:var(--muted);font-size:9px}.event time{font-size:8px;color:var(--muted)}.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.device-card{padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}.device-card .device-title{display:flex;justify-content:space-between;align-items:center}.device-card h3{margin:0;font:800 15px Manrope}.device-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.device-card dt{font-size:8px;color:var(--muted)}.device-card dd{margin:2px 0 0;font-size:11px;font-weight:700}.device-card button{width:100%}.kpi-row,.alarm-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.kpi-row article,.alarm-summary article{padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.kpi-row span,.alarm-summary span{font-size:9px;color:var(--muted)}.kpi-row b,.alarm-summary b{display:block;margin-top:7px;font-size:18px}.map-layout{display:grid;grid-template-columns:1fr 270px;gap:12px}.map-panel{padding:0;overflow:hidden}.map-panel #mainMap{height:calc(100vh - 145px);min-height:500px}.location-info{text-align:center}.location-info img{width:90px;height:75px}.location-info dl{text-align:left}.location-info dl div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.location-info dt{color:var(--muted);font-size:10px}.location-info dd{margin:0;font-size:10px;font-weight:700}.location-info .btn{display:flex;align-items:center;justify-content:center;text-decoration:none}.disabled{opacity:.5;pointer-events:none}.switch{display:flex;gap:8px;align-items:center;font-size:10px}.switch input{display:none}.switch i{width:35px;height:20px;border-radius:20px;background:var(--line);position:relative}.switch i:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}.switch input:checked+i{background:var(--primary)}.switch input:checked+i:after{left:18px}.table-panel{padding:0;overflow:hidden}.table-wrap{overflow:auto;max-height:520px}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:11px 13px;border-bottom:1px solid var(--line);font-size:9px;text-align:left;white-space:nowrap}th{position:sticky;top:0;background:var(--panel2);color:var(--muted);z-index:2}.pagination{display:flex;justify-content:center;align-items:center;gap:13px;padding:12px}.pagination button{height:32px}.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.export-form label,.form-card label{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:10px;color:var(--muted)}.export-form input,.export-form select,.form-card input,.form-card select{width:100%}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.export-info{text-align:center;display:grid;place-items:center}.big-icon{font-size:55px;color:var(--good)}.export-info p{font-size:11px;color:var(--muted);max-width:420px}.alarm-list{display:flex;flex-direction:column;gap:9px}.alarm-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.alarm-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center}.alarm-item.warning .alarm-icon{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn)}.alarm-item.danger .alarm-icon{background:color-mix(in srgb,var(--danger) 17%,transparent);color:var(--danger)}.alarm-item h4{margin:0;font-size:11px}.alarm-item p{margin:4px 0 0;font-size:9px;color:var(--muted)}.alarm-actions{display:flex;gap:6px}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.check{flex-direction:row!important;align-items:center}.check input{width:auto;height:auto}.demo-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.button-row.end{justify-content:flex-end;margin-top:12px}.file-btn{display:inline-flex;align-items:center}.file-btn input{display:none}.about-hero{text-align:center;padding:25px}.about-hero img{width:min(560px,90%)}.about-hero p{color:var(--muted);font-size:12px}.version{display:inline-block;padding:7px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--line);font-size:9px}.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}.flow{display:flex;align-items:center;justify-content:center;gap:14px;padding:25px 0}.flow div{width:105px;height:90px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;background:var(--panel2)}.flow div i{font-size:23px;color:var(--primary)}.flow div b{font-size:10px}.flow>i{color:var(--muted)}.tech-list{line-height:2;color:var(--muted);font-size:11px}.demo{margin:10px 24px 0;padding:9px 13px;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--panel));border-radius:11px;color:var(--warn);font-size:10px;font-weight:700}.demo button{float:right;border:0;background:transparent;color:inherit;font-weight:800;cursor:pointer}.toast-box{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{min-width:250px;max-width:340px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);font-size:10px;animation:toastIn .2s}.toast.good{border-left:4px solid var(--good)}.toast.warn{border-left:4px solid var(--warn)}.toast.danger{border-left:4px solid var(--danger)}@keyframes toastIn{from{opacity:0;transform:translateX(20px)}}.hidden{display:none!important}.mobile{display:none}.backdrop{display:none}
@media(max-width:1180px){.summary{grid-template-columns:repeat(3,1fr)}.sensor-grid{grid-template-columns:repeat(3,1fr)}.charts-grid{grid-template-columns:1fr 1fr}.charts-grid .span-2{grid-column:1/-1}.settings-grid{grid-template-columns:1fr 1fr}.device-grid{grid-template-columns:1fr 1fr}}
@media(max-width:850px){:root{--sidebar:252px}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.main,.sidebar.collapsed~.main{margin-left:0}.mobile{display:inline-grid}.desktop{display:none}.backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:40}.content{padding:15px}.summary{grid-template-columns:1fr 1fr}.sensor-grid{grid-template-columns:1fr 1fr}.bottom-grid,.map-layout,.download-grid,.about-grid{grid-template-columns:1fr}.map-panel #mainMap{height:500px}.settings-grid{grid-template-columns:1fr}.demo{margin:8px 15px 0}}
@media(max-width:560px){header{padding:0 12px;height:68px}.header-title h1{font-size:16px}.header-title p{display:none}.hide-sm,.hide-md{display:none}.content{padding:12px}.summary{grid-template-columns:1fr 1fr;gap:8px}.summary article{min-height:82px;padding:11px;grid-template-columns:35px 1fr}.summary article>i{width:35px;height:35px}.summary b{font-size:17px}.sensor-grid{grid-template-columns:1fr}.charts-grid{grid-template-columns:1fr}.charts-grid .span-2{grid-column:auto}.device-grid,.kpi-row,.alarm-summary{grid-template-columns:1fr 1fr}.section-head{align-items:flex-start;flex-direction:column}.toolbar{width:100%;flex-wrap:wrap}.toolbar input,.toolbar select{flex:1;min-width:120px}.two-col{grid-template-columns:1fr}.flow{flex-direction:column}.flow>i{transform:rotate(90deg)}.button-row.end{flex-wrap:wrap}.chart-wrap{height:240px}}