:root{
  --bg:#0d1117; --bg2:#161b22; --line:#30363d; --line2:#21262d;
  --fg:#e6edf3; --muted:#8b949e; --accent:#2f81f7; --green:#3fb950;
  --blue:#79c0ff; --code:#0d1117;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.5}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
code{background:var(--code);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;color:var(--blue);font-size:.85em}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.thin{color:var(--muted);font-weight:400}

/* header */
.top{background:linear-gradient(180deg,#11223f,#0d1117);border-bottom:1px solid var(--line);
  padding:26px 0 22px;position:relative}
.top h1{margin:.1em 0;font-size:1.7rem}
.sub{color:var(--muted);margin:.2em 0 0}
.userbar{position:absolute;top:14px;right:22px;color:var(--muted);font-size:.85rem}

/* topology layout */
.topo{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:start;
  margin:26px 0}
.bldg{background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:12px;padding:16px}
.bldg-green{border-top-color:var(--green)}
.bldg-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:10px;flex-wrap:wrap}
.bldg-hd h2{font-size:1.05rem;margin:0}
.tag{color:var(--muted);font-size:.78rem;border:1px solid var(--line);
  border-radius:999px;padding:1px 9px}
.box{background:var(--bg);border:1px solid var(--line2);border-radius:9px;
  padding:11px 13px;margin-bottom:11px}
.box h3{margin:0 0 8px;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
ul{margin:0;padding:0;list-style:none}
.srv li{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:4px 0;border-bottom:1px solid var(--line2);font-size:.92rem}
.srv li:last-child{border-bottom:0}
.srv li em{color:var(--muted);font-style:normal;font-size:.78rem;text-align:right}
.srv li.deprecated span{color:#ff9d7b;text-decoration:line-through wavy transparent}
.srv li.deprecated em{color:#ff9d7b}
.srv li.warn em{color:#e3b341}
.plain li{padding:3px 0;font-size:.9rem;color:#c9d1d9}
.plain li::before{content:"▹ ";color:var(--accent)}
.row2{display:flex;gap:9px;background:transparent;border:0;padding:0}
.core{flex:1;background:#132033;border:1px solid #24406b;border-radius:8px;
  padding:9px;text-align:center;font-size:.85rem;color:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#132033;border:1px solid #24406b;border-radius:999px;
  padding:3px 10px;font-size:.82rem;color:#cbe2ff}

/* fiber link */
.link{align-self:center;display:flex;flex-direction:column;align-items:center;
  gap:6px;min-width:150px;text-align:center;padding:8px 0}
.fiber{width:3px;height:34px;background:repeating-linear-gradient(
  180deg,#e3b341 0 7px,transparent 7px 12px)}
.link-lbl strong{display:block;color:#e3b341;font-size:1rem}
.link-lbl span{display:block;font-size:.78rem;color:#c9d1d9;margin-top:2px}
.link-lbl small{display:block;font-size:.7rem;color:var(--muted);margin-top:3px}

/* panels */
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:18px 0}
.panel h2{margin:0 0 12px;font-size:1.1rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two-col .panel{margin:0}

.vlan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.vlan{display:flex;gap:11px;align-items:flex-start;background:var(--bg);
  border:1px solid var(--line2);border-radius:9px;padding:10px 12px}
.vlan .dot{width:14px;height:14px;border-radius:4px;margin-top:4px;flex:none}
.vlan b{font-size:.92rem}.vlan small{color:var(--muted);font-size:.72rem;margin-left:4px}
.vlan p{margin:2px 0 0;font-size:.82rem;color:#c9d1d9}

.ticks li{padding:5px 0 5px 24px;position:relative;font-size:.9rem;
  border-bottom:1px solid var(--line2)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.stat{background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:12px}
.stat b{display:block;font-size:1.5rem;color:var(--blue);line-height:1.1}
.stat span{font-size:.78rem;color:var(--muted)}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--muted);font-size:.8rem;padding-top:6px;padding-bottom:26px}

@media(max-width:880px){
  .topo{grid-template-columns:1fr}
  .link{flex-direction:row;min-width:0}
  .fiber{width:34px;height:3px;background:repeating-linear-gradient(
    90deg,#e3b341 0 7px,transparent 7px 12px)}
  .two-col{grid-template-columns:1fr}
}

/* ---------- login ---------- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 500px at 50% -10%,#16233d,#0d1117)}
.login-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:28px 26px;width:340px;max-width:92vw;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.login-card h1{margin:0;font-size:1.5rem;text-align:center}
.login-sub{margin:.2em 0 18px;text-align:center;color:var(--muted);font-size:.9rem}
.login-card label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.login-card input{width:100%;margin-top:5px;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:1rem}
.login-card input:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,129,247,.25)}
.cap-row{display:flex;gap:12px;align-items:flex-end;margin-bottom:14px}
.cap-box{flex:none;line-height:0}
.cap-box .cap{border-radius:8px}
.cap-label{flex:1;margin:0}
.login-card button{width:100%;margin-top:4px;background:var(--accent);color:#fff;
  border:0;border-radius:8px;padding:11px;font-size:1rem;font-weight:600;cursor:pointer}
.login-card button:hover{background:#4a95ff}
.login-error{background:#3a1113;border:1px solid #6e2429;color:#ff9d9d;
  border-radius:8px;padding:9px 11px;margin-bottom:14px;font-size:.86rem}
.login-foot{text-align:center;color:var(--muted);font-size:.72rem;margin:16px 0 0}

/* ================= LEFT SIDEBAR MENU ================= */
:root{--side:232px}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:50;
  background:#0b1220;border-right:1px solid var(--line);display:flex;
  flex-direction:column;overflow-y:auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.15rem;
  padding:18px 18px 14px;border-bottom:1px solid var(--line2)}
.brand-dot{width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#5fa8ff,#2f6fed);box-shadow:0 0 10px #2f6fed}
.nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;
  color:#c9d1d9;font-size:.92rem;transition:background .15s,color .15s}
.nav-i:hover{background:#131c2e;text-decoration:none;color:#fff}
.nav-i.active{background:#12233f;color:#fff;
  box-shadow:inset 3px 0 0 var(--accent)}
.nav-i .ic{width:20px;text-align:center;color:var(--muted);font-size:.95rem}
.nav-i.active .ic{color:var(--blue)}
.nav-sep{margin:12px 12px 4px;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.08em;color:#54607a}
.side-foot{border-top:1px solid var(--line2);padding:14px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.who{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#c9d1d9;min-width:0}
.avatar{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#12233f;color:var(--blue);font-weight:700;font-size:.8rem;border:1px solid #24406b}
.logout{font-size:.82rem;color:#ff9d9d}
.backdrop{display:none}

.content{margin-left:var(--side)}
.content .wrap{max-width:1120px}
.topbar{display:flex;align-items:center;gap:14px}
.burger{display:none;background:#132033;color:var(--fg);border:1px solid var(--line);
  border-radius:8px;font-size:1.2rem;line-height:1;padding:7px 11px;cursor:pointer}

@media(max-width:880px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.6)}
  .sidebar.open{transform:none}
  .content{margin-left:0}
  .burger{display:inline-flex}
  .backdrop.show{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55)}
}