:root{
  --bg:#0b1020;
  --card:rgba(255,255,255,.06);
  --txt:#eaf0ff;
  --muted:rgba(234,240,255,.65);
  --line:rgba(255,255,255,.10);
  --accent:#5aa7ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(90,167,255,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(167,90,255,.12), transparent 55%),
    var(--bg);
  color:var(--txt);
}

.shell{display:flex; min-height:100vh}

.sidebar{
  width:280px;
  padding:18px;
  border-right:1px solid var(--line);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.brand{
  font-weight:700;
  letter-spacing:.3px;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background: var(--card);
}

.nav{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.nav__item{
  text-decoration:none;
  color:var(--txt);
  padding:12px 12px;
  border-radius:12px;
  border:1px solid transparent;
  opacity:.92;
}
.nav__item:hover{
  background: var(--card);
  border-color: var(--line);
}
.nav__item.is-active{
  background: linear-gradient(135deg, rgba(90,167,255,.22), rgba(255,255,255,.06));
  border-color: rgba(90,167,255,.35);
}

.sidebar__footer{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.main{
  flex:1;
  padding:24px;
}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}

.h1{font-size:22px; margin:0 0 6px 0}
.muted{color:var(--muted); font-size:13px}