:root{
  --bg0:#041022;
  --bg1:#061733;
  --card:#0a2346cc;
  --stroke:#1e3a66;
  --text:#eaf2ff;
  --muted:#b7c7e6;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --radius: 18px;
}

/* ---------- Base ---------- */

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(61,124,255,.20), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(45,210,255,.14), transparent 55%),
    radial-gradient(800px 600px at 60% 90%, rgba(120,74,255,.16), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color:#dbe8ff; text-decoration:none }
a:hover{ text-decoration:underline }

/* ---------- Top Navigation ---------- */

.topnav{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6,18,36,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30,58,102,.75);
}

.nav-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
}

.brand img{
  height: 28px;
  width: auto;
  display:block;
}

.brand-name{
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 14px;
  white-space: nowrap;
}

.nav-links{
  list-style:none;
  display:flex;
  gap: 14px;
  margin:0;
  padding:0;
}

.nav-links a{
  color: rgba(183,199,230,.9);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}

.nav-links a:hover{
  color:#fff;
  background: rgba(61,124,255,.15);
  text-decoration:none;
}

.nav-links a.active{
  color:#fff;
  background: rgba(61,124,255,.22);
}

/* ---------- Layout ---------- */

.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 18px 48px;
}

.panel{
  background: linear-gradient(180deg, rgba(10,35,70,.75), rgba(10,35,70,.45));
  border: 1px solid rgba(30,58,102,.85);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- Headers ---------- */

h1{
  margin:0;
  font-size: 22px;
  letter-spacing:.2px;
}

.sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Toolbar ---------- */

.toolbar{
  padding: 14px;
  background: rgba(6,18,36,.25);
}

/* ---------- Cards ---------- */

.sumCard{
  border: 1px solid rgba(30,58,102,.75);
  background: rgba(7,26,51,.42);
  border-radius: var(--radius);
  padding: 14px;
}

.sumTitle{
  font-size: 12px;
  color: var(--muted);
  margin:0 0 6px;
}

.note{
  font-size: 13px;
  color: rgba(183,199,230,.95);
  line-height:1.6;
  margin:0;
}

.big{
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
}

/* ---------- Chips ---------- */

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(30,58,102,.75);
  background: rgba(6,18,36,.55);
  font-size:12px;
  color: rgba(183,199,230,.95);
}

/* ---------- Footer ---------- */

footer{
  margin-top: 16px;
  font-size: 12px;
  color: rgba(183,199,230,.85);
}

/* ---------- Responsive ---------- */

@media (max-width: 600px){
  .brand-name{ display:none }
  .nav-inner{ padding: 10px 14px }
}