:root{
  --bg:#0b1220;
  --panel: rgba(17, 25, 48, 0.72);
  --stroke: rgba(255,255,255,0.10);
  --text:#eef2ff;
  --muted: rgba(238,242,255,0.72);
  --primary:#4da3ff;
  --green:#56f5a6;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:var(--bg);
}
.topbar{
  display:flex;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex;gap:12px;align-items:center}
.mark{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--green));
  color:#071022;
}
.shell{max-width:1100px;margin:auto;padding:16px}
.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:16px;
  margin-bottom:16px;
}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:rgba(255,255,255,0.05);border-radius:16px;padding:14px}
.btn{padding:10px 12px;border-radius:12px;border:none;cursor:pointer}
.btn.primary{background:rgba(77,163,255,0.25)}
.btn.ghost{background:rgba(255,255,255,0.08)}
.list{display:grid;gap:10px}
.item{background:rgba(255,255,255,0.05);padding:12px;border-radius:14px}
.progressGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.progressCard{background:rgba(255,255,255,0.05);padding:12px;border-radius:14px}