/* ============================================================
   CHOOSE AND RISE — white glass theme
   Applied to all inner app pages (not landing page)
   ============================================================ */

/* ── CSS variable overrides — light palette ── */
body {
  --bg: #f2f5ff;
  --bg-2: #eaedfa;
  --paper: rgba(255,255,255,0.78);
  --paper-solid: #ffffff;
  --ink: #0e1528;
  --ink-2: rgba(14,21,40,0.72);
  --ink-3: rgba(14,21,40,0.44);
  --mute: rgba(14,21,40,0.26);
  --line: rgba(14,21,40,0.09);
  --line-2: rgba(14,21,40,0.15);
  --shadow-1: 0 2px 12px rgba(14,21,40,0.07), 0 1px 3px rgba(14,21,40,0.04);
  --shadow-2: 0 8px 32px rgba(14,21,40,0.10), 0 2px 8px rgba(14,21,40,0.05);
  --shadow-3: 0 20px 60px rgba(14,21,40,0.14), 0 6px 20px rgba(14,21,40,0.07);

  background-color: #f2f5ff;
  background-attachment: fixed;
  color: #0e1528;
}

/* ── Auth mask ── */
.auth-mask { background: #f2f5ff !important; }
.auth-mask .spinner { border-color: rgba(14,21,40,0.12) !important; border-top-color: var(--cyan) !important; }

/* ── Blue glowing box decoration ── */
body::before {
  content: '';
  position: fixed;
  width: 460px;
  height: 460px;
  right: 5%;
  top: 8%;
  border-radius: 88px;
  background: linear-gradient(145deg, #1a3570 0%, #0d1e4a 50%, #091530 100%);
  box-shadow:
    0 0 60px rgba(30,90,220,0.22),
    0 0 140px rgba(20,70,190,0.13),
    0 0 280px rgba(10,50,160,0.07),
    inset 0 1px 0 rgba(120,170,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  border: 1px solid rgba(80,130,255,0.12);
  transform: rotate(-7deg);
  z-index: 0;
  pointer-events: none;
}

/* Ensure layout containers sit above the glow box */
.wrap, .sidebar, .main, .topbar { position: relative; z-index: 1; }

/* ── Topbar: white glass ── */
.topbar {
  background: rgba(242,245,255,0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(14,21,40,0.08) !important;
  color: var(--ink) !important;
}

/* ── Sidebar: white glass ── */
.sidebar {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-right: 1px solid rgba(14,21,40,0.07) !important;
}

/* ── Cards, panels, widgets: white frosted glass ── */
.panel,
.widget,
.card,
.major,
.ec,
.year-col,
.quiz-card,
.feat-card,
.stat-card,
.val-card,
.msg .bub,
.nova-intro,
.plan-block,
.ctx-tile,
.nova-card,
.person,
.card-mini,
.ap-grid .ap,
.side-section,
.f-chip,
.tag-label,
.quiz-shell,
.lb,
.status,
.quest,
.leaderboard,
.vocab-strip,
.vocab-card,
.timeline-wrap {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-color: rgba(14,21,40,0.09) !important;
}

/* ── Side nav active state ── */
.side-nav button.active,
.side-nav a.active {
  background: var(--ink) !important;
  color: #fff !important;
}
.side-nav button:hover,
.side-nav a:hover {
  background: rgba(14,21,40,0.06) !important;
}

/* ── School row hover ── */
.school-row:hover {
  background: rgba(14,21,40,0.05) !important;
}
.school-row.sel {
  background: rgba(8,145,178,0.12) !important;
}

/* ── Filter chips ── */
.f-chip {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(14,21,40,0.12) !important;
  color: var(--ink-2) !important;
}
.f-chip.active {
  background: var(--cyan) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Buttons on light theme ── */
.btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--cyan) !important;
}
.btn-ghost {
  border-color: rgba(14,21,40,0.18) !important;
  color: var(--ink-2) !important;
  background: rgba(255,255,255,0.7) !important;
}
.btn-ghost:hover {
  background: rgba(14,21,40,0.07) !important;
  color: var(--ink) !important;
}

/* ── Input fields ── */
.school-input,
.input,
input[type="text"],
input[type="number"],
textarea {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(14,21,40,0.14) !important;
  color: var(--ink) !important;
}
input::placeholder,
textarea::placeholder { color: var(--ink-3) !important; }

/* ── Select elements ── */
select {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(14,21,40,0.14) !important;
  color: var(--ink) !important;
}

/* ── Input group elements ── */
.inp-group input,
.inp-group select {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(14,21,40,0.16) !important;
  color: var(--ink) !important;
}

/* ── Topbar search ── */
.topbar .search {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(14,21,40,0.12) !important;
  color: var(--ink-2) !important;
}

/* ── Course pills ── */
.course-pill {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(14,21,40,0.12) !important;
  color: var(--ink) !important;
}
.course-pill.ap {
  background: rgba(8,145,178,0.1) !important;
  border-color: rgba(8,145,178,0.25) !important;
}

/* ── Timeline items ── */
.item {
  border-color: rgba(14,21,40,0.08) !important;
}
.item.done .check {
  background: rgba(22,163,74,0.15) !important;
  color: #15803d !important;
}

/* ── Progress bars ── */
.status .bar {
  background: rgba(14,21,40,0.08) !important;
}

/* ── Leaderboard rows ── */
.lb-row { border-color: rgba(14,21,40,0.07) !important; }

/* ── Nova chat bubbles ── */
.msg.user .bub {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.msg.nova .bub {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(14,21,40,0.1) !important;
  color: var(--ink) !important;
}

/* ── Composer ── */
.composer {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(14,21,40,0.14) !important;
}
.composer textarea {
  color: var(--ink) !important;
}

/* ── Notification panel ── */
#cnr-notif-panel {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(14,21,40,0.12) !important;
}

/* ── Icon buttons ── */
.icon-btn, [data-notif-bell] {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(14,21,40,0.12) !important;
  color: var(--ink-2) !important;
}
.icon-btn:hover {
  background: rgba(14,21,40,0.08) !important;
}

/* ── Pills ── */
.pill {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(14,21,40,0.1) !important;
  color: var(--ink-2) !important;
}

/* ── Kanban ── */
.kb-col {
  background: rgba(255,255,255,0.6) !important;
  border-color: rgba(14,21,40,0.08) !important;
}
.kb-card {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(14,21,40,0.09) !important;
}

/* ── course-item remove button ── */
.course-item .remove {
  color: var(--ink-3) !important;
  background: rgba(14,21,40,0.06) !important;
}
.course-item .remove:hover {
  background: rgba(225,29,72,0.12) !important;
  color: #e11d48 !important;
}

/* ── Tags ── */
.tag {
  background: rgba(14,21,40,0.07) !important;
  color: var(--ink-2) !important;
}
.tag.leaf { background: rgba(22,163,74,0.12) !important; color: #15803d !important; }

/* ── Eyebrow / mono labels ── */
.eyebrow, .lbl { color: var(--cyan) !important; }

/* ── Scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: rgba(14,21,40,0.15) transparent; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(14,21,40,0.15); border-radius: 999px; }

/* ── White text overrides for light theme ── */
.quiz-opt.sel .desc { color: rgba(14,21,40,0.65) !important; }
.school-row.sel .s { color: rgba(14,21,40,0.65) !important; }
.timeline .item.active .row .meta { color: rgba(14,21,40,0.55) !important; }
.school-hero { background: var(--ink) !important; color: var(--paper) !important; }
.school-hero .loc { color: rgba(255,255,255,0.6) !important; }
.school-hero .row .k { background: rgba(255,255,255,0.08) !important; }
.school-hero .row .k .v { color: var(--paper) !important; }
.school-hero .row .k .l { color: rgba(255,255,255,0.55) !important; }
.leaderboard { background: var(--paper) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.leaderboard h4 { color: var(--ink-3) !important; }
.leaderboard .lb .nm { color: var(--ink) !important; }
.leaderboard .lb .rk { color: var(--ink) !important; }
.leaderboard .lb .pct { color: var(--ink-3) !important; }
.leaderboard .lb .bar { background: rgba(14,21,40,0.08) !important; }
.lb-row { color: var(--ink) !important; }
.lb-row .nm { color: var(--ink) !important; }
.side-nav button.active .badge { background: rgba(255,255,255,0.25) !important; color: #fff !important; }