/* SmartHub UI — dark control room */
:root{
  --bg:#0d1117; --panel:#161c26; --panel2:#1c2433; --line:#27314433;
  --txt:#dde4ef; --mut:#7d8aa0; --acc:#ffb454; --acc2:#39c5cf; --ok:#3fb950; --err:#f85149; --warn:#d29922;
  --r:14px; font-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--txt);display:flex;min-height:100vh}
a{color:var(--acc2);text-decoration:none}
h1{font-size:1.5rem;font-weight:600;letter-spacing:.3px;margin-bottom:18px}
h2{font-size:1.1rem;margin:14px 0 10px}
h3{font-size:.95rem;color:var(--mut);margin:16px 0 8px;text-transform:uppercase;letter-spacing:.08em}
small{color:var(--mut)}

/* sidebar */
.sidebar{width:210px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.logo{font-weight:700;font-size:1.15rem;display:flex;align-items:center;gap:9px;padding:4px 8px 18px}
.logo small{font-weight:400;font-size:.7rem}
.logo-hex{width:18px;height:18px;background:var(--acc);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);box-shadow:0 0 14px #ffb45466;flex:none}
nav{display:flex;flex-direction:column;gap:2px}
nav a{color:var(--mut);padding:10px 12px;border-radius:10px;display:flex;gap:11px;align-items:center;font-size:.93rem;transition:.15s}
nav a i{font-style:normal;width:18px;text-align:center;opacity:.85}
nav a:hover{background:var(--panel2);color:var(--txt)}
nav a.on{background:var(--panel2);color:var(--acc);box-shadow:inset 2px 0 0 var(--acc)}
.sidebar-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px}
.sidebar-foot select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:4px 6px;font-size:.8rem}
.logout{color:var(--mut);font-size:1.1rem;margin-left:auto}
.mqtt-dot{width:10px;height:10px;border-radius:50%;background:var(--err);transition:.3s}
.mqtt-dot.ok{background:var(--ok);box-shadow:0 0 10px #3fb95088}

/* main */
.main{flex:1;padding:26px 30px;max-width:1500px}
.topbar-alert{margin-bottom:18px}

/* cards & grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;position:relative}
.card.s2x1{grid-column:span 2}
.card h4{font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px;font-weight:600}
.card .drag{cursor:grab;position:absolute;top:12px;right:14px;color:var(--mut);opacity:.4}
.bigval{font-size:2.1rem;font-weight:700;font-variant-numeric:tabular-nums}
.bigval small{font-size:.95rem;font-weight:400;margin-left:4px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.kv:last-child{border:none}
.kv b{font-variant-numeric:tabular-nums}

/* forms */
label{display:block;color:var(--mut);font-size:.83rem;margin:12px 0 5px}
input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:10px 12px;font-size:.93rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc2);outline-offset:-1px}
.row{display:flex;gap:12px}.row>*{flex:1}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:9px 16px;cursor:pointer;font-size:.9rem;transition:.15s}
.btn:hover{border-color:var(--acc2)}
.btn.primary{background:var(--acc);color:#1a1205;border:none;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--err);border-color:#f8514955}
.btn.sm{padding:5px 11px;font-size:.8rem}
.btn:disabled{opacity:.45;cursor:default}

/* switch */
.sw{position:relative;display:inline-block;width:44px;height:24px;flex:none}
.sw input{display:none}
.sw span{position:absolute;inset:0;background:var(--panel2);border:1px solid var(--line);border-radius:24px;transition:.2s;cursor:pointer}
.sw span:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--mut);border-radius:50%;transition:.2s}
.sw input:checked+span{background:var(--ok)33;border-color:var(--ok)}
.sw input:checked+span:before{transform:translateX(20px);background:var(--ok)}

/* alerts, badges, tables */
.alert{padding:11px 15px;border-radius:10px;font-size:.9rem;margin:10px 0}
.alert.err{background:#f8514918;border:1px solid #f8514944;color:#ffb4ae}
.alert.warn{background:#d2992218;border:1px solid #d2992244;color:#ffd88a}
.alert.info{background:#39c5cf14;border:1px solid #39c5cf3a;color:#9be4ea}
.alert.ok{background:#3fb95016;border:1px solid #3fb95044;color:#9fe8ad}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:600;letter-spacing:.04em}
.badge.ok{background:#3fb95022;color:var(--ok)}
.badge.off{background:#7d8aa022;color:var(--mut)}
.badge.warn{background:#d2992222;color:#ffd88a}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;color:var(--mut);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line)}

/* mini chart */
.spark{width:100%;height:60px;margin-top:8px}
.spark polyline{fill:none;stroke:var(--acc2);stroke-width:1.6}
.spark .fill{fill:url(#sgrad);stroke:none}

/* auth */
.auth-body{align-items:center;justify-content:center;background:radial-gradient(1000px 500px at 70% -10%,#1c2433,var(--bg))}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px;width:min(440px,94vw);box-shadow:0 24px 60px #00000066}
.auth-card .logo{justify-content:center;padding-bottom:8px}
.auth-card h2{text-align:center;color:var(--mut);font-weight:500;margin-bottom:14px}
.auth-card .btn{width:100%;margin-top:18px}
.hint{color:var(--mut);font-size:.8rem;margin-top:14px;text-align:center}

/* modal */
.modal-bg{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-bg.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;width:min(560px,96vw);max-height:92vh;overflow:auto}

/* responsive */
@media(max-width:780px){
  body{flex-direction:column}
  .sidebar{width:100%;height:auto;flex-direction:row;align-items:center;padding:8px 10px;position:static}
  .logo{padding:0 10px 0 4px}
  nav{flex-direction:row;overflow-x:auto;flex:1}
  nav a{padding:8px 10px;white-space:nowrap}
  nav a i{display:none}
  .sidebar-foot{margin:0}
  .main{padding:16px 14px}
  .card.s2x1{grid-column:span 1}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}