:root{
  --bg1:#0b1020;
  --bg2:#1b0e2a;
  --glass: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.14);
  --text: #eaf0ff;
  --muted: rgba(234,240,255,.7);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 22px;
}

*{ 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(900px 600px at 20% 10%, rgba(110,160,255,.35), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(170,90,255,.35), transparent 55%),
    radial-gradient(1000px 700px at 50% 90%, rgba(30,220,255,.18), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  min-height:100vh;
}

.wrap{
  max-width: 1150px;
  margin: 0 auto;
  padding: 22px 16px 110px;
}

.main{ margin-top: 18px; }

/* Top bar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

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

.logo{
  width: 44px; height: 44px; border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, #7fd6ff, #4a6bff 60%, #3b2cff);
  display:grid; place-items:center;
  box-shadow: 0 10px 25px rgba(70,120,255,.35);
  border: 1px solid rgba(255,255,255,.18);
  text-decoration:none;
}

.topnav{
  display:flex; gap:10px; align-items:center;
  overflow:auto;
  padding: 0 6px;
}

.topnav a{
  text-decoration:none;
  color: var(--muted);
  font-weight:700;
  padding: 10px 12px;
  border-radius: 999px;
  white-space:nowrap;
  transition:.2s;
  border: 1px solid transparent;
}
.topnav a.active{
  color: var(--text);
  background: rgba(106,167,255,.18);
  border-color: rgba(106,167,255,.30);
}
.topnav a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}

.actions{
  display:flex; align-items:center; gap:10px;
}
.iconbtn{
  width: 40px; height: 40px; border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
  color: var(--text);
  cursor:pointer;
  transition:.2s;
  text-decoration:none;
}
.iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

/* Page Title */
.page-title{
  margin: 26px 6px 14px;
  font-size: 42px;
  letter-spacing: .2px;
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* Tabs (reusable) */
.tabs{
  display:flex;
  gap:10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  overflow:auto;
}
.tab{
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight:800;
  cursor:pointer;
  transition:.2s;
  white-space:nowrap;
  font-size: 16px;
}
.tab.active{
  color: #0b1020;
  background: linear-gradient(135deg, #7fc1ff, #7c83ff);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 12px 30px rgba(110,160,255,.28);
}

/* Bottom nav */
.bottomnav{
  position:fixed;
  left:0; right:0; bottom:0;
  padding: 12px 14px;
  background: rgba(8,12,24,.72);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.bottomnav .inner{
  max-width: 1150px;
  margin: 0 auto;
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:12px;
}
.bitem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color: var(--muted);
  font-weight:800;
  text-decoration:none;
  min-width: 70px;
}
.bitem .dot{
  width: 46px; height: 46px; border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  transition:.2s;
}
.bitem.active{ color: var(--text); }
.bitem.active .dot{
  background: radial-gradient(circle at 30% 30%, #7fd6ff, #4a6bff 60%, #3b2cff);
  box-shadow: 0 12px 26px rgba(70,120,255,.25);
  border-color: rgba(255,255,255,.22);
}

/* Responsive */
@media (max-width: 980px){
  .page-title{ font-size: 36px; }
}
@media (max-width: 700px){
  .page-title{ font-size: 32px; }
}