:root{
--bg:#0b0f17; --panel:#0f1624cc; --text:#e6f1ff; --muted:#9fb3c8;
--primary:#5ef0ff; --accent:#a855f7; --danger:#ff6b6b; --ok:#22c55e;
--ring: 0 0 0 .2rem color-mix(in oklab, var(--primary) 40%, transparent);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background: radial-gradient(1200px 600px at 80% -10%, rgba(94,240,255,.15), transparent),
linear-gradient(180deg, #0b0f17 0%, #0b0f17 40%, #0a0e15 100%);
color:var(--text);font:16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}


.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;background:#000;padding:.5rem 1rem;border-radius:.5rem}


.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid #1b2233;background:linear-gradient(180deg,#0e1320dd,#0c111bdd);backdrop-filter:saturate(140%) blur(8px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.2px}
.sidebar nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.sidebar a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;color:var(--muted);text-decoration:none;border-radius:.75rem}
.sidebar a:hover,.sidebar a[aria-current="page"],.sidebar a:focus{color:var(--text);background:linear-gradient(90deg, #141c2b, #111827);outline:none;box-shadow:var(--ring)}
.sidebar .sep{height:1px;background:#1b2233;margin:.5rem 0}
.sidebar footer{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;color:var(--muted)}


.main{display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid #1b2233;background:linear-gradient(180deg,#0e1320dd,#0c111bdd)}
.search{flex:1;min-width:200px;background:#0a1222;border:1px solid #1b2233;color:var(--text);padding:.7rem 1rem;border-radius:.8rem}
.search:focus{outline:none;box-shadow:var(--ring);border-color:#21314d}
.profile button{background:#0a1222;border:1px solid #1b2233;color:var(--text);padding:.6rem .8rem;border-radius:.8rem}
.profile button:focus{outline:none;box-shadow:var(--ring)}


.app{padding:1.25rem;display:grid;gap:1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.card{background:var(--panel);border:1px solid #1b2233;border-radius:1rem;padding:1rem;box-shadow:0 10px 30px #0008}
.card h3{margin:.2rem 0 .75rem 0}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .55rem;border-radius:999px;font-size:.8rem;border:1px solid #21405b;color:var(--primary);background:#0a1422}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border-radius:.7rem;border:1px solid #24324b;background:#0a1222;color:var(--text);text-decoration:none}
.btn:hover{border-color:#2e4368;box-shadow:var(--ring)}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.6rem;border-bottom:1px solid #1b2233;text-align:left}
.status-ok{color:var(--ok)}.status-danger{color:var(--danger)}


/* Neon accent borders */
.card.neon{border-image: linear-gradient(90deg, var(--primary), var(--accent)) 1;border-width:1px;border-style:solid}


/* Motion */
@media (prefers-reduced-motion: no-preference){
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px)}
}


/* Light mode */
.light{--bg:#f6f8fb; --panel:#ffffffcc; --text:#0b1220; --muted:#4b5b70; --primary:#0066ff; --accent:#7c3aed; background:#f6f8fb;}
.light body{background:#f6f8fb}