:root{
  --bg:#0b1a2a; --panel:#102133; --text:#e6eef7; --muted:#8aa0b8;
  --primary:#2f7df4; --primary-600:#1f6ae0; --success:#16a34a; --danger:#dc2626;
  --chip:#13273b; --card:#0f2032; --line:#1b3550;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:linear-gradient(180deg,#07121d 0%, #0c1d2e 100%); color:var(--text)}
a{color:var(--primary);text-decoration:none}
.container{padding:24px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:12px;padding:12px 0;margin-bottom:16px;border-bottom:1px solid var(--line)}
.brand img{width:40px;height:40px}
.brand .title{font-weight:700;font-size:18px}
.brand .badge{font-size:12px;background:var(--chip);padding:4px 8px;border-radius:999px;color:#9ac1ff;border:1px solid #24496e}
h3{margin:8px 0 12px;font-size:18px}
.form .input{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form label{font-size:12px;color:var(--muted)}
.form input{background:#0b1c2c;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;outline:none}
.form input:focus{border-color:#2f7df4; box-shadow:0 0 0 3px rgba(47,125,244,.2)}
.btn{appearance:none;border:0;border-radius:12px;padding:10px 14px;font-weight:600;background:var(--primary);color:white;cursor:pointer;box-shadow:0 6px 18px rgba(47,125,244,.4);transition:.15s}
.btn:hover{background:var(--primary-600)}
.btn.secondary{background:#143153;color:#cfe3ff;border:1px solid #244c7a;box-shadow:none}
.btn.ghost{background:transparent;color:#cfe3ff;border:1px dashed #355c88}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{border-right:1px solid var(--line);background:rgba(15,32,50,.7);backdrop-filter: blur(6px);padding:18px 16px;position:sticky;top:0;height:100vh}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#b9cde7;border:1px solid transparent}
.nav a .dot{width:8px;height:8px;border-radius:50%;background:#294f78}
.nav a:hover{background:#0b1c2c;border-color:#2a4c74}
.nav a.active{background:#0c2238;border-color:#34679f;color:white}
.main{padding:18px 22px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#0b1c2c;padding:6px 10px;border-radius:12px;min-width:280px}
.search input{background:transparent;border:0;color:var(--text);outline:none}
.chips .chip{display:inline-flex;align-items:center;padding:8px 10px;border-radius:999px;background:#0e2842;border:1px solid #234d7a;color:#b8d2ff}
.notice{background:#0e2238;border:1px solid #1c4168;color:#cde5ff;padding:10px 12px;border-radius:12px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.grid > .card{background:var(--card)}
code{background:#0c2236;border:1px solid #1b4166;padding:2px 6px;border-radius:8px;color:#a7d1ff}
@media (max-width: 920px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .grid{grid-template-columns:1fr}
}