:root{
  --bg:#0A0E14;
  --panel:#111826;
  --panel-line:#1E2A3D;
  --text:#D8E1F0;
  --text-dim:#7A8AA3;
  --ok:#4ADE80;
  --ok-dim:rgba(74,222,128,0.12);
  --warn:#FBBF24;
  --warn-dim:rgba(251,191,36,0.12);
  --crit:#FB5B5B;
  --crit-dim:rgba(251,91,91,0.12);
  --info:#60A5FA;
  --info-dim:rgba(96,165,250,0.12);
  --radius:14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at top, #0F1622 0%, var(--bg) 60%);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}

/* ===== Topbar ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  border-bottom:1px solid var(--panel-line);
  background:rgba(17,24,38,0.6);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:10;
}
.topbar-brand{display:flex; align-items:center; gap:12px;}
.mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,#4ADE80,#22A365);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; color:#06210F; font-size:16px;
}
.brand-title{font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:#fff;}
.brand-sub{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);}
.topbar-right{display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim);}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-dim); display:inline-block;}
.logout-link{color:var(--text-dim); text-decoration:none; border:1px solid var(--panel-line); padding:6px 12px; border-radius:100px; margin-left:8px;}
.logout-link:hover{color:var(--text); border-color:#33445E;}

/* ===== Layout ===== */
.main{max-width:1200px; margin:0 auto; padding:24px 20px 60px;}

/* ===== Summary cards ===== */
.summary-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;
}
@media (max-width:900px){ .summary-grid{grid-template-columns:repeat(2,1fr);} }

.stat-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:16px 18px;
}
.stat-top{display:flex; align-items:center; justify-content:space-between;}
.stat-icon{font-size:16px; opacity:.8;}
.stat-value{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:28px; color:#fff;}
.stat-label{margin-top:4px; font-size:12.5px; color:var(--text-dim); font-weight:600;}
.stat-foot{margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); border-top:1px solid var(--panel-line); padding-top:8px;}

.stat-info .stat-icon{color:var(--info);}
.stat-ok .stat-icon{color:var(--ok);}
.stat-off .stat-icon{color:var(--crit);}
.stat-warn .stat-icon{color:var(--warn);}

/* ===== Panels ===== */
.panels{display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:14px;}
@media (max-width:900px){ .panels{grid-template-columns:1fr;} }

.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:16px 18px 18px;
}
.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; color:#fff;
  margin-bottom:10px;
}
.panel-hint{font-family:'Inter'; font-weight:500; font-size:11px; color:var(--text-dim);}

#history-graph{width:100%; height:220px;}

.graph-legend{display:flex; gap:16px; margin-top:6px; font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px;}
.dot-ok{background:var(--ok);}
.dot-off{background:var(--crit);}
.dot-warn{background:var(--warn);}

.chassis-body{display:flex; flex-direction:column; gap:10px;}
.chassis-name{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; color:#fff;}
.chassis-row{display:flex; justify-content:space-between; font-size:12px; color:var(--text-dim); border-top:1px solid var(--panel-line); padding-top:8px;}
.chassis-row b{color:var(--text); font-family:'JetBrains Mono',monospace; font-weight:600; text-align:right;}

/* ===== ONU grid ("patch panel") ===== */
.onu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(14px, 1fr));
  gap:4px;
  margin-top:6px;
}
.onu-cell{
  aspect-ratio:1;
  border-radius:3px;
  background:#1B2740;
  cursor:default;
}
.onu-cell.online{background:var(--ok);}
.onu-cell.low_signal_warning{background:var(--warn);}
.onu-cell.low_signal_critical{background:var(--warn);}
.onu-cell.offline, .onu-cell.los, .onu-cell.power_fail{background:var(--crit);}

/* ===== Login page ===== */
.login-body{
  background: radial-gradient(ellipse at top, #0F1622 0%, var(--bg) 60%);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif;
}
.login-card{
  width:320px; background:var(--panel); border:1px solid var(--panel-line);
  border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:10px;
}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.login-mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#4ADE80,#22A365);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; color:#06210F;
}
.login-title{font-family:'Sora',sans-serif; font-weight:700; color:#fff; font-size:15px;}
.login-sub{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim);}
.login-label{font-size:11.5px; color:var(--text-dim); margin-top:6px;}
.login-input{
  background:#0D1420; border:1px solid var(--panel-line); border-radius:8px;
  padding:10px 12px; color:var(--text); font-family:'Inter'; font-size:13px;
}
.login-btn{
  margin-top:12px; background:linear-gradient(135deg,#4ADE80,#22A365); border:none;
  border-radius:8px; padding:11px; color:#06210F; font-family:'Sora',sans-serif; font-weight:700; cursor:pointer;
}
.login-error{background:var(--crit-dim); color:var(--crit); font-size:12px; padding:8px 10px; border-radius:8px;}