:root{
  --bg:#0b0f1a;
  --panel:#0f1627cc;
  --accent:#31d6ff;
  --accent2:#8a7bff;
  --text:#e8f0ff;
  --muted:#9bb0d3;
  --danger:#ff5470;
  --shadow:0 10px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;}
body{
  margin:0; color:var(--text); background:var(--bg); min-height:100vh; overflow-x:hidden;
}
.bg{
  position:fixed; inset:-20%; background:
    url('assets/bg.webp') center/cover no-repeat,
    radial-gradient(800px 400px at 20% 20%, #1a2d55 0%, transparent 60%),
    radial-gradient(600px 300px at 80% 20%, #1b3b4e 0%, transparent 60%),
    radial-gradient(900px 500px at 50% 80%, #1a1040 0%, transparent 60%),
    linear-gradient(120deg, #0b0f1a 0%, #0c1322 100%);
  opacity:0.45; filter:blur(0px); z-index:-1;
}
.topbar{
  display:flex; justify-content:space-between; align-items:center; padding:20px 40px;
  border-bottom:1px solid #1b2340; backdrop-filter:blur(12px); position:sticky; top:0;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.06em;}
.orb{
  width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px var(--accent);
}
.name .muted{color:var(--muted); font-weight:500;}
.nav{display:flex; gap:10px;}
.pill{
  color:var(--text); text-decoration:none; padding:8px 12px; border:1px solid #2a3558; border-radius:999px;
  font-size:12px; background:#111a2d88;
}
.shell{max-width:1100px; margin:30px auto; padding:0 20px 60px; display:grid; gap:24px;}
.panel{
  background:var(--panel); border:1px solid #1b2340; border-radius:18px; box-shadow:var(--shadow);
  padding:24px; backdrop-filter:blur(16px);
}
.hero h1{margin:0 0 8px; font-size:36px;}
.hero-head{display:flex; gap:16px; align-items:center;}
.avatar{width:64px; height:64px; border-radius:50%; border:1px solid #2a3558; box-shadow:0 0 20px rgba(49,214,255,.35); object-fit:cover;}
.lead{color:var(--muted); margin-top:0;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:18px;}
.card{
  background:#0f192e; border:1px solid #1e2948; border-radius:14px; padding:18px;
}
.card h2{margin:0 0 10px; font-size:18px;}
.card-head{display:flex; align-items:center; gap:10px;}
.card-head h3{margin:0;}
.icon{width:44px; height:44px; opacity:.9; filter:drop-shadow(0 0 6px rgba(49,214,255,.35));}
label{display:block; margin:10px 0 6px; color:var(--muted); font-size:12px; letter-spacing:.04em;}
input,select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a3558; background:#0b1224; color:var(--text);
}
button{
  margin-top:12px; width:100%; padding:10px 12px; border-radius:10px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#050712; font-weight:700;
}
button.ghost{background:transparent; border:1px solid #2a3558; color:var(--text);}
button.danger{background:transparent; border:1px solid #ff5470; color:#ff5470;}
.hint{color:#8fa2c9; font-size:12px; margin-top:8px;}
.terminal{padding:0; overflow:hidden;}
.terminal-header{padding:12px 18px; background:#0c1224; border-bottom:1px solid #1b2340; font-size:12px; letter-spacing:.1em; color:#7fa8ff;}
.terminal-body{padding:16px 18px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco; min-height:120px; color:#cfe0ff;}
.terminal-actions{display:flex; gap:10px; padding:12px 18px; border-top:1px solid #1b2340;}
.terminal-actions button{width:auto;}
#dashboard .stack{display:grid; gap:8px;}
.users table{width:100%; border-collapse:collapse; font-size:14px;}
.users th,.users td{padding:10px 6px; border-bottom:1px solid #1b2340; text-align:left;}
.footer{padding:20px; text-align:center; color:#7f93b8; font-size:12px;}
@media (max-width:640px){
  .topbar{padding:14px 18px; flex-direction:column; gap:10px; align-items:flex-start;}
}