:root{
  --radius:18px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --shadow-hover: 0 10px 26px rgba(0,0,0,.12);
  --card-bg: var(--bs-body-bg);
  --muted: var(--bs-secondary-color);
  --hero-ink: #0f172a;
  --hero-accent: #2563eb;
  --page-bg: #f6f7fb;
  --surface-1: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  --surface-2: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.98));
  --surface-border: rgba(15,23,42,.06);
  --surface-border-soft: rgba(148,163,184,.18);
  --ink-soft: rgba(15,23,42,.68);
  --ink-muted-strong: rgba(15,23,42,.64);
  --ink-muted: rgba(15,23,42,.56);
  --chip-bg: rgba(255,255,255,.52);
  --chip-border: rgba(255,255,255,.44);
  --table-head-bg: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.96));
  --row-hover: rgba(37,99,235,.035);
  --result-blue: #1d4ed8;
  --result-navy: #0f172a;
  --result-steel: #64748b;
  --result-slate: #475569;
  --result-faint: #94a3b8;
  --result-time: #2563eb;
}

#main{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(99,102,241,.12), transparent 50%),
    radial-gradient(1200px 600px at 80% 10%, rgba(34,211,238,.10), transparent 50%),
    var(--page-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-bs-theme="dark"] #main{
  --page-bg: #0b1020;
  --card-bg: rgba(15,23,42,.78);
  --muted: #a9b8cf;
  --hero-ink: #e6eefc;
  --hero-accent: #7db4ff;
  --shadow: 0 14px 34px rgba(2,6,23,.26);
  --shadow-hover: 0 18px 40px rgba(2,6,23,.34);
  --surface-1: linear-gradient(180deg, rgba(15,23,42,.84), rgba(15,23,42,.72));
  --surface-2: linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.90));
  --surface-border: rgba(148,163,184,.16);
  --surface-border-soft: rgba(148,163,184,.14);
  --ink-soft: rgba(226,232,240,.88);
  --ink-muted-strong: rgba(203,213,225,.82);
  --ink-muted: rgba(148,163,184,.88);
  --chip-bg: rgba(15,23,42,.52);
  --chip-border: rgba(148,163,184,.16);
  --table-head-bg: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.82));
  --row-hover: rgba(96,165,250,.08);
  --result-blue: #93c5fd;
  --result-navy: #e2e8f0;
  --result-steel: #94a3b8;
  --result-slate: #cbd5e1;
  --result-faint: #94a3b8;
  --result-time: #7dd3fc;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(99,102,241,.18), transparent 50%),
    radial-gradient(1200px 600px at 80% 10%, rgba(34,211,238,.14), transparent 50%),
    var(--page-bg);
}

.container{ max-width: 1360px; }

.card-surface{
  background: var(--card-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-surface:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  color: var(--hero-accent);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(37,99,235,.16);
}

.hero-title{
  margin-top: 14px;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  color: var(--hero-ink);
}

.hero-subtitle{
  margin-top: 14px;
  max-width: 860px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
}

.hero-copy{
  padding-top: 6px;
}

.action-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.hero-panel{
  position: relative;
  overflow: hidden;
  padding: 17px 18px 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.46), transparent 28%),
    var(--surface-1);
  border: 1px solid var(--surface-border);
  box-shadow: 0 16px 34px rgba(15,23,42,.07);
}

.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.0), rgba(255,255,255,.18));
}

.hero-panel > *{
  position: relative;
  z-index: 1;
}

.hero-panel.start-card{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.44), transparent 28%),
    linear-gradient(180deg, rgba(96,165,250,.22), rgba(239,246,255,.98));
  border-color: rgba(59,130,246,.14);
}

.hero-panel.qod-card{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.44), transparent 28%),
    linear-gradient(180deg, rgba(103,232,249,.18), rgba(236,254,255,.98));
  border-color: rgba(34,211,238,.18);
}

.hero-panel-kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-panel-copy{
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}

.hero-panel-actions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.hero-panel-meta{
  margin-top: 10px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.btn-create-account{
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: .8rem 1.18rem;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(249,115,22,.22);
}

.btn-create-account:hover{
  color:#fff;
  opacity:.97;
  transform: translateY(-1px);
}

.trust-strip{
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(34,211,238,.08));
  border: 1px solid rgba(37,99,235,.16);
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  align-items:center;
}

.trust-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: .84rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--hero-accent) 80%, var(--bs-body-color));
}

.badge-soft{
  background: rgba(99,102,241,.10);
  color: color-mix(in srgb, var(--hero-accent) 84%, var(--bs-body-color));
  border: 1px solid rgba(99,102,241,.18);
  font-weight: 600;
}

.btn-gradient{
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: .8rem 1.18rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(34,211,238,.18);
}
.btn-gradient:hover{ opacity: .96; color:#fff; transform: translateY(-1px); }

.btn-qod{
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: .8rem 1.18rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(14,165,233,.18);
}
.btn-qod:hover{ opacity: .96; color:#fff; transform: translateY(-1px); }

.stats-kpi{
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.55), transparent 30%),
    var(--surface-1);
  min-height: 170px;
}

.stats-kpi::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.0), rgba(255,255,255,.18));
}

.stats-kpi::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:7px;
  border-radius: 22px 22px 0 0;
  opacity: .95;
}

.stats-kpi.gold{ box-shadow: 0 18px 35px rgba(234,179,8,.12); }
.stats-kpi.blue{ box-shadow: 0 18px 35px rgba(37,99,235,.12); }
.stats-kpi.green{ box-shadow: 0 18px 35px rgba(34,197,94,.12); }

.stats-kpi.gold::after{ background: linear-gradient(90deg, #fbbf24, #d97706); }
.stats-kpi.blue::after{ background: linear-gradient(90deg, #60a5fa, #2563eb); }
.stats-kpi.green::after{ background: linear-gradient(90deg, #86efac, #16a34a); }

.stats-kpi .kpi-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
}

.stat-label{
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
}

.stat-value{
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1;
  margin-top: 10px;
}

.stat-value-gold{
  color: #b45309;
}

.kpi-icon{
  width: 58px; height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 10px rgba(255,255,255,.35);
}

.kpi-icon.gold{ color:#b45309; background: linear-gradient(135deg, rgba(253,230,138,.95), rgba(255,255,255,.85)); }
.kpi-icon.blue{ color:#1d4ed8; background: linear-gradient(135deg, rgba(191,219,254,.95), rgba(255,255,255,.85)); }
.kpi-icon.green{ color:#15803d; background: linear-gradient(135deg, rgba(187,247,208,.95), rgba(255,255,255,.85)); }

.kpi-copy{
  position:relative;
  z-index:1;
}

.kpi-note{
  position:relative;
  z-index:1;
  margin-top: 12px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
}

.progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
.progress-bar{
  border-radius: 999px;
  transition: width .45s ease;
}

.momentum-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.momentum-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 20px 20px 18px;
  border: 1px solid var(--surface-border);
  background: var(--surface-2);
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
}

.momentum-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 48%);
}

.momentum-card > *{
  position: relative;
  z-index: 1;
}

.momentum-card.blue{
  background: linear-gradient(180deg, rgba(96,165,250,.26), rgba(239,246,255,.98));
  border-color: rgba(59,130,246,.14);
  box-shadow: 0 16px 34px rgba(59,130,246,.12);
}

.momentum-card.cyan{
  background: linear-gradient(180deg, rgba(103,232,249,.28), rgba(236,254,255,.98));
  border-color: rgba(6,182,212,.14);
  box-shadow: 0 16px 34px rgba(6,182,212,.12);
}

.momentum-card.green{
  background: linear-gradient(180deg, rgba(134,239,172,.28), rgba(240,253,244,.98));
  border-color: rgba(34,197,94,.14);
  box-shadow: 0 16px 34px rgba(34,197,94,.12);
}

.momentum-label{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.momentum-value{
  margin-top: 10px;
  font-size: clamp(2.15rem, 3.7vw, 3.35rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
}

.momentum-note{
  margin-top: 10px;
  color: var(--ink-muted-strong);
  font-size: .88rem;
  line-height: 1.4;
}

.results-shell{
  border-radius: 20px;
  border: 1px solid var(--surface-border);
  overflow: hidden;
  background: var(--surface-2);
}

.results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.results-subtitle{
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.55;
}

.results-table{
  margin: 0;
}

.results-table thead th{
  padding: 16px 18px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--surface-border-soft);
  text-align: center;
}

.results-table tbody td{
  padding: 13px 16px;
  vertical-align: middle;
  border-color: var(--surface-border-soft);
}

.results-table tbody tr:hover{
  background: var(--row-hover);
}

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

.result-avatar{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-size: .9rem;
  font-weight: 800;
  color: var(--result-blue);
  background: linear-gradient(135deg, rgba(191,219,254,.96), rgba(224,242,254,.92));
  border: 1px solid rgba(59,130,246,.14);
}

.result-user-name{
  font-weight: 800;
  color: var(--result-navy);
  line-height: 1.2;
}

.result-user-meta{
  margin-top: 2px;
  font-size: .78rem;
  color: var(--muted);
}

.result-exam-pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.2;
  color: color-mix(in srgb, var(--hero-accent) 78%, var(--bs-body-color));
  background: linear-gradient(135deg, rgba(219,234,254,.95), rgba(239,246,255,.98));
  border: 1px solid rgba(59,130,246,.15);
}

.result-score-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.result-score-main{
  font-size: 1rem;
  font-weight: 800;
  color: var(--result-navy);
}

.result-score-main .score-total{
  color: var(--result-steel);
}

.result-score-side{
  display:flex;
  align-items:center;
  gap: 8px;
}

.result-percent{
  font-size: .82rem;
  font-weight: 800;
  color: var(--result-slate);
}

.result-date{
  margin-top: 4px;
  font-weight: 600;
  color: var(--result-faint);
  line-height: 1.2;
  font-size: .82rem;
}

.result-time-cell{
  text-align: center;
}

.result-time{
  font-weight: 800;
  color: var(--result-time);
  line-height: 1.2;
  font-size: .92rem;
}

.results-table .badge.bg-success{
  background: #d9fbe3 !important;
  color: #166534 !important;
}

.results-table .badge.bg-primary{
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

.results-table .badge.bg-warning{
  background: #fef3c7 !important;
  color: #92400e !important;
}

.results-table .badge.bg-danger{
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

.results-table .progress-bar.bg-success{
  background-color: #86efac !important;
}

.results-table .progress-bar.bg-primary{
  background-color: #93c5fd !important;
}

.results-table .progress-bar.bg-warning{
  background-color: #fcd34d !important;
}

.results-table .progress-bar.bg-danger{
  background-color: #fca5a5 !important;
}

.table thead th{
  font-weight: 800;
  color: var(--muted);
  background: rgba(0,0,0,.03);
  border-bottom: 0;
}

.row-hover tbody tr:hover{
  background: rgba(99,102,241,.06);
}

.subtle{
  color: var(--muted);
  font-size: .92rem;
}

/* QOD card */
.qod-card{
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(34,211,238,.08));
  border: 1px solid rgba(99,102,241,.18);
}

[data-bs-theme="dark"] .hero-kicker{
  background: rgba(37,99,235,.14);
  border-color: rgba(125,180,255,.20);
}

[data-bs-theme="dark"] .hero-panel{
  box-shadow: 0 18px 38px rgba(2,6,23,.32);
}

[data-bs-theme="dark"] .hero-panel::before,
[data-bs-theme="dark"] .stats-kpi::before,
[data-bs-theme="dark"] .momentum-card::before{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 48%);
}

[data-bs-theme="dark"] .hero-panel.start-card{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(59,130,246,.16), rgba(15,23,42,.88));
  border-color: rgba(96,165,250,.20);
}

[data-bs-theme="dark"] .hero-panel.qod-card,
[data-bs-theme="dark"] .qod-card{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(34,211,238,.14), rgba(15,23,42,.88));
  border-color: rgba(34,211,238,.20);
}

[data-bs-theme="dark"] .trust-strip{
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(34,211,238,.10));
  border-color: rgba(125,180,255,.16);
}

[data-bs-theme="dark"] .kpi-icon{
  background: rgba(15,23,42,.68);
  border-color: rgba(148,163,184,.16);
  box-shadow: inset 0 1px 10px rgba(255,255,255,.03);
}

[data-bs-theme="dark"] .stat-value-gold{
  color: #fbbf24;
}

[data-bs-theme="dark"] .momentum-card.blue{
  background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(15,23,42,.88));
  border-color: rgba(96,165,250,.20);
  box-shadow: 0 16px 34px rgba(37,99,235,.18);
}

[data-bs-theme="dark"] .momentum-card.cyan{
  background: linear-gradient(180deg, rgba(6,182,212,.16), rgba(15,23,42,.88));
  border-color: rgba(34,211,238,.18);
  box-shadow: 0 16px 34px rgba(6,182,212,.18);
}

[data-bs-theme="dark"] .momentum-card.green{
  background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(15,23,42,.88));
  border-color: rgba(74,222,128,.18);
  box-shadow: 0 16px 34px rgba(34,197,94,.18);
}

[data-bs-theme="dark"] .result-avatar{
  color: #bfdbfe;
  background: linear-gradient(135deg, rgba(30,41,59,.96), rgba(15,23,42,.90));
  border-color: rgba(96,165,250,.20);
  box-shadow: inset 0 1px 10px rgba(255,255,255,.03);
}

[data-bs-theme="dark"] .result-user-meta{
  color: #94a3b8;
}

[data-bs-theme="dark"] .result-exam-pill{
  color: #bfdbfe;
  background: linear-gradient(135deg, rgba(30,41,59,.94), rgba(15,23,42,.90));
  border-color: rgba(96,165,250,.18);
}

[data-bs-theme="dark"] .btn-outline-primary{
  border-color: rgba(125,180,255,.28);
  color: #cfe3ff;
  background: rgba(15,23,42,.24);
}

[data-bs-theme="dark"] .btn-outline-primary:hover{
  border-color: rgba(125,180,255,.40);
  color: #f8fbff;
  background: rgba(37,99,235,.18);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 991.98px) {
  .action-grid{
    grid-template-columns: 1fr;
  }

  .momentum-grid{
    grid-template-columns: 1fr;
  }
}

/* About page */
.about-page {
  --about-ink: #14213d;
  --about-muted: #5e6b82;
  --about-accent: #2364d2;
  --about-border: rgba(21, 42, 76, .10);
  --about-surface: rgba(255, 255, 255, .88);
  padding-bottom: 1.5rem;
}
.about-hero { padding: clamp(2rem, 4vw, 3.5rem) 0 2rem; background: radial-gradient(circle at 85% 12%, rgba(75, 159, 255, .20), transparent 26%), radial-gradient(circle at 12% 0%, rgba(99, 102, 241, .15), transparent 28%); }
.about-hero-grid, .about-mission { display: grid; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.about-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); }
.about-eyebrow, .about-section-label { margin: 0 0 .7rem; color: var(--about-accent); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid rgba(35, 100, 210, .16); border-radius: 999px; background: rgba(255, 255, 255, .65); }
.about-hero h1 { max-width: 700px; margin: 0; color: var(--about-ink); font-size: clamp(2.35rem, 5vw, 4.45rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.02; }
.about-intro { max-width: 670px; margin: 1.35rem 0 0; color: var(--about-muted); font-size: 1.1rem; line-height: 1.7; }
.about-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.about-actions .about-secondary-action { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(35, 100, 210, .22); border-radius: 12px; padding: .8rem 1.1rem; color: var(--about-accent); background: rgba(255, 255, 255, .72); font-size: 1rem; font-weight: 700; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.about-actions .about-secondary-action:hover { transform: translateY(-1px); border-color: rgba(35, 100, 210, .38); background: rgba(35, 100, 210, .08); }
.about-actions .about-secondary-action:focus-visible { outline: 3px solid rgba(35, 100, 210, .35); outline-offset: 3px; }
.about-hero-panel, .about-surface, .about-audience-card, .about-contact { border: 1px solid var(--about-border); border-radius: 22px; background: var(--about-surface); box-shadow: 0 18px 45px rgba(26, 47, 84, .07); }
.about-hero-panel { padding: 1.15rem; background: linear-gradient(145deg, rgba(35, 100, 210, .10), rgba(255, 255, 255, .92) 50%); }
.about-highlight { display: grid; grid-template-columns: 2.7rem 1fr; gap: .8rem; padding: 1rem .4rem; }
.about-highlight + .about-highlight { border-top: 1px solid var(--about-border); }
.about-highlight-icon, .about-card-icon { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 12px; color: var(--about-accent); background: rgba(35, 100, 210, .10); font-size: 1.2rem; }
.about-highlight strong { color: var(--about-ink); font-size: .95rem; }
.about-highlight p { margin: .2rem 0 0; color: var(--about-muted); font-size: .86rem; line-height: 1.45; }
.about-section { padding-top: 2.75rem; }
.about-surface { padding: clamp(1.5rem, 4vw, 3rem); }
.about-mission { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.about-section h2 { margin: 0; color: var(--about-ink); font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.about-mission-copy > p { margin: 0; color: var(--about-muted); line-height: 1.65; }
.about-check-list { display: grid; gap: .75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: var(--about-ink); font-size: .95rem; }
.about-check-list i { margin-right: .5rem; color: #16825b; }
.about-section-heading { margin-bottom: 1.65rem; }
.about-section-heading-centered { text-align: center; }
.about-audience-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-content: center; gap: .85rem; height: 100%; min-height: 150px; padding: 1.35rem; }
.about-audience-card .about-card-icon { grid-row: 1 / span 2; align-self: center; }
.about-audience-card h3 { margin: .1rem 0 .3rem; color: var(--about-ink); font-size: 1.1rem; font-weight: 750; }
.about-audience-card p { grid-column: 2; margin: 0; color: var(--about-muted); line-height: 1.6; }
.about-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.about-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; gap: .8rem; min-height: 150px; padding: 1.15rem; border: 1px solid var(--about-border); border-radius: 16px; background: var(--about-surface); }
.about-steps span { display: grid; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; place-items: center; align-self: center; border: 1px solid rgba(35, 100, 210, .18); border-radius: 13px; color: var(--about-accent); background: rgba(35, 100, 210, .08); font-size: .9rem; font-weight: 800; letter-spacing: .04em; }
.about-steps h3 { margin: .1rem 0 .3rem; color: var(--about-ink); font-size: 1.05rem; font-weight: 750; }
.about-steps p { grid-column: 2; margin: 0; color: var(--about-muted); font-size: .92rem; line-height: 1.55; }
.about-faq { overflow: hidden; border: 1px solid var(--about-border); border-radius: 18px; box-shadow: 0 14px 32px rgba(26, 47, 84, .05); }
.about-faq .accordion-item { border-color: var(--about-border); }
.about-faq .accordion-button { color: var(--about-ink); font-weight: 700; }
.about-faq .accordion-button:not(.collapsed) { color: var(--about-accent); background: rgba(35, 100, 210, .06); box-shadow: none; }
.about-faq .accordion-body { color: var(--about-muted); line-height: 1.65; }
.about-contact-section { padding-bottom: .5rem; }
.about-contact { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(115deg, rgba(35, 100, 210, .13), rgba(255, 255, 255, .92) 58%); }
.about-contact h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.about-contact p:last-child { margin: .6rem 0 0; color: var(--about-muted); }
[data-bs-theme="dark"] .about-page { --about-ink: #edf4ff; --about-muted: #b4c0d4; --about-accent: #8db8ff; --about-border: rgba(148, 163, 184, .20); --about-surface: rgba(15, 23, 42, .82); }
[data-bs-theme="dark"] .about-hero { background: radial-gradient(circle at 85% 12%, rgba(59, 130, 246, .22), transparent 26%), radial-gradient(circle at 12% 0%, rgba(99, 102, 241, .18), transparent 28%); }
[data-bs-theme="dark"] .about-eyebrow { background: rgba(15, 23, 42, .65); }
[data-bs-theme="dark"] .about-actions .about-secondary-action { border-color: rgba(141, 184, 255, .28); color: var(--about-ink); background: rgba(15, 23, 42, .58); }
[data-bs-theme="dark"] .about-actions .about-secondary-action:hover { border-color: rgba(141, 184, 255, .48); background: rgba(59, 130, 246, .16); }
[data-bs-theme="dark"] .about-hero-panel, [data-bs-theme="dark"] .about-contact { background: linear-gradient(145deg, rgba(35, 100, 210, .20), rgba(15, 23, 42, .90) 55%); }
@media (max-width: 991.98px) { .about-hero-grid, .about-mission { grid-template-columns: 1fr; } .about-hero-panel { max-width: 680px; } .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .about-page { padding-bottom: 1rem; } .about-hero { padding: 1.75rem 0 1.5rem; } .about-section { padding-top: 2.25rem; } .about-actions .btn, .about-actions .about-secondary-action { width: 100%; justify-content: center; } .about-steps { grid-template-columns: 1fr; } .about-steps li { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .75rem; min-height: auto; padding: 1rem; } .about-steps span { width: 2.4rem; height: 2.4rem; } .about-contact { align-items: flex-start; flex-direction: column; } .about-contact .btn { width: 100%; } }

/* Contact page */
.contact-page { --contact-ink: #14213d; --contact-muted: #5e6b82; --contact-accent: #2364d2; --contact-border: rgba(21, 42, 76, .10); --contact-surface: rgba(255, 255, 255, .88); padding-bottom: 1.5rem; }
.contact-hero { padding: clamp(2rem, 4vw, 3.5rem) 0 2rem; background: radial-gradient(circle at 84% 0%, rgba(75, 159, 255, .20), transparent 30%), radial-gradient(circle at 12% 10%, rgba(99, 102, 241, .14), transparent 30%); }
.contact-eyebrow, .contact-label { margin: 0 0 .7rem; color: var(--contact-accent); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid rgba(35, 100, 210, .16); border-radius: 999px; background: rgba(255, 255, 255, .65); }
.contact-hero h1 { margin: 0; color: var(--contact-ink); font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }
.contact-intro { max-width: 650px; margin: 1.2rem 0 0; color: var(--contact-muted); font-size: 1.08rem; line-height: 1.7; }
.contact-content { padding-top: 1rem; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.contact-card, .contact-guidance { border: 1px solid var(--contact-border); border-radius: 22px; background: var(--contact-surface); box-shadow: 0 18px 45px rgba(26, 47, 84, .07); }
.contact-card { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-content: center; gap: .35rem 1rem; min-height: 260px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.contact-primary-card { background: linear-gradient(145deg, rgba(35, 100, 210, .13), rgba(255, 255, 255, .92) 60%); }
.contact-card-icon { display: inline-grid; grid-row: 1 / span 4; width: 2.8rem; height: 2.8rem; place-items: center; align-self: center; border-radius: 14px; color: var(--contact-accent); background: rgba(35, 100, 210, .10); font-size: 1.3rem; }
.contact-card .contact-label { grid-column: 2; margin: 0; }
.contact-card h2 { grid-column: 2; margin: 0; color: var(--contact-ink); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 750; letter-spacing: -.025em; }
.contact-primary-card h2 { color: var(--contact-accent); }
.contact-card p:not(.contact-label) { grid-column: 2; max-width: 500px; margin: .4rem 0 .8rem; color: var(--contact-muted); line-height: 1.6; }
.contact-card .btn { grid-column: 2; justify-self: start; }
.contact-guidance { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2rem; margin-top: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.contact-guidance h2 { margin: 0; color: var(--contact-ink); font-size: clamp(1.35rem, 2.5vw, 1.9rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.2; }
.contact-guidance ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; color: var(--contact-muted); line-height: 1.55; }
.contact-guidance li i { margin-right: .5rem; color: #16825b; }
.contact-note { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding: .9rem 1rem; border: 1px solid rgba(217, 119, 6, .30); border-radius: 14px; color: #7c4a03; background: #fff7df; font-size: .95rem; font-weight: 600; line-height: 1.45; }
.contact-note i { color: #b45309; font-size: 1.25rem; }
[data-bs-theme="dark"] .contact-page { --contact-ink: #edf4ff; --contact-muted: #b4c0d4; --contact-accent: #8db8ff; --contact-border: rgba(148, 163, 184, .20); --contact-surface: rgba(15, 23, 42, .82); }
[data-bs-theme="dark"] .contact-hero { background: radial-gradient(circle at 84% 0%, rgba(59, 130, 246, .22), transparent 30%), radial-gradient(circle at 12% 10%, rgba(99, 102, 241, .18), transparent 30%); }
[data-bs-theme="dark"] .contact-eyebrow, [data-bs-theme="dark"] .contact-primary-card { background: linear-gradient(145deg, rgba(35, 100, 210, .20), rgba(15, 23, 42, .90) 60%); }
[data-bs-theme="dark"] .contact-note { border-color: rgba(251, 191, 36, .30); color: #fde68a; background: rgba(120, 53, 15, .35); }
[data-bs-theme="dark"] .contact-note i { color: #fbbf24; }
@media (max-width: 991.98px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .contact-grid, .contact-guidance { grid-template-columns: 1fr; } .contact-card { min-height: auto; } }
@media (max-width: 575.98px) { .contact-page { padding-bottom: 1rem; } .contact-hero { padding: 1.75rem 0 1.5rem; } }

/* Login page */
.login-page {
  min-height: calc(100vh - 120px);
  min-height: calc(100dvh - 120px);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .30), transparent 55%), radial-gradient(1000px 500px at 110% 10%, rgba(16, 185, 129, .26), transparent 55%), linear-gradient(135deg, rgba(13, 110, 253, .10), rgba(111, 66, 193, .10));
}
.login-card { background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 10px 30px rgba(22, 28, 45, .12); }
.login-page .form-floating.icon-left { position: relative; }
.login-page .form-floating.icon-left .left-icon { position: absolute; top: 50%; left: .85rem; width: 1rem; transform: translateY(-50%); color: var(--bs-secondary-color); font-size: 1rem; line-height: 1; pointer-events: none; text-align: center; }
.login-page .form-floating.icon-left > .form-control { padding-left: 2.6rem; }
.login-page .form-floating.icon-left > label { padding-left: 2.6rem; opacity: .75; }
.login-page .form-floating .toggle-password { position: absolute; top: 50%; right: .5rem; z-index: 2; display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; transform: translateY(-50%); line-height: 1; }
.login-page .form-floating > .form-control { padding-right: 3rem; }
.login-side-copy { max-width: 26rem; }
.login-side-copy p:last-child { margin-bottom: 0; }
.login-page .hint { color: var(--bs-secondary-color); font-size: .92rem; }
.login-page .alert i { margin-top: .15rem; }
[data-bs-theme="dark"] .login-page { background: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .22), transparent 55%), radial-gradient(1000px 500px at 110% 10%, rgba(16, 185, 129, .18), transparent 55%), linear-gradient(135deg, rgba(8, 15, 35, .96), rgba(18, 25, 44, .92)); }
[data-bs-theme="dark"] .login-card { background: rgba(20, 22, 28, .72); border-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .50); }

/* Registration page */
.register-page {
  min-height: calc(100vh - 120px);
  min-height: calc(100dvh - 120px);
  padding: 3.5rem 0;
  background: radial-gradient(1100px 560px at -5% -10%, rgba(13, 110, 253, .16), transparent 58%), radial-gradient(980px 520px at 110% 0%, rgba(25, 135, 84, .14), transparent 58%), linear-gradient(140deg, rgba(111, 66, 193, .08), rgba(13, 110, 253, .06));
}
.register-card { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(255, 255, 255, .50); border-radius: 20px; background: rgba(255, 255, 255, .88); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.register-title { color: #14213d; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.register-page .form-label { font-weight: 600; }
.register-page .form-control:focus { border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25); }
.register-page .strength { height: 6px; overflow: hidden; border-radius: 6px; background: #e9ecef; }
.register-page .strength-bar { width: 0; height: 100%; transition: width .25s ease; }
.register-page .password-rules { display: grid; gap: .3rem; margin-top: .65rem; color: var(--bs-secondary-color); font-size: .86rem; }
.register-page .password-rules span { display: inline-flex; align-items: center; gap: .35rem; }
.register-page .password-rules i { color: var(--bs-secondary-color); }
.register-page .password-rules .is-met { color: #16794e; }
.register-page .password-rules .is-met i { color: #16825b; }
.register-honeypot { position: absolute; top: auto; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[data-bs-theme="dark"] .register-page { background: radial-gradient(1100px 560px at -5% -10%, rgba(99, 102, 241, .20), transparent 58%), radial-gradient(980px 520px at 110% 0%, rgba(16, 185, 129, .14), transparent 58%), linear-gradient(140deg, rgba(8, 15, 35, .96), rgba(18, 25, 44, .92)); }
[data-bs-theme="dark"] .register-card { border-color: rgba(255, 255, 255, .08); background: rgba(20, 22, 28, .76); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .register-title { color: #f5f7ff; }
[data-bs-theme="dark"] .register-page .strength { background: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .register-page .password-rules .is-met { color: #86efac; }
[data-bs-theme="dark"] .register-page .password-rules .is-met i { color: #4ade80; }

/* Password reset pages */
.password-reset-page { min-height: calc(100vh - 120px); min-height: calc(100dvh - 120px); background: radial-gradient(1100px 520px at -5% -10%, rgba(13, 110, 253, .16), transparent 58%), radial-gradient(980px 520px at 110% 0%, rgba(25, 135, 84, .14), transparent 58%), linear-gradient(140deg, rgba(111, 66, 193, .08), rgba(13, 110, 253, .06)); }
.password-reset-card { background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .50); box-shadow: 0 12px 30px rgba(2, 6, 23, .15); }
.password-reset-help { color: var(--bs-secondary-color); font-size: .9rem; }
.password-reset-rules { display: grid; gap: .3rem; margin-top: .65rem; color: var(--bs-secondary-color); font-size: .86rem; }
.password-reset-rules span { display: inline-flex; align-items: center; gap: .35rem; }
.password-reset-rules i { color: #16825b; }
[data-bs-theme="dark"] .password-reset-page { background: radial-gradient(1100px 520px at -5% -10%, rgba(99, 102, 241, .20), transparent 58%), radial-gradient(980px 520px at 110% 0%, rgba(16, 185, 129, .14), transparent 58%), linear-gradient(140deg, rgba(8, 15, 35, .96), rgba(18, 25, 44, .92)); }
[data-bs-theme="dark"] .password-reset-card { background: rgba(20, 22, 28, .76); border-color: rgba(255, 255, 255, .08); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }

.password-reset-heading { display: flex; align-items: center; gap: .85rem; margin-bottom: .5rem; }
.password-reset-heading-icon { display: inline-grid; width: 2.8rem; height: 2.8rem; place-items: center; flex: 0 0 auto; border: 1px solid rgba(13, 110, 253, .16); border-radius: .9rem; background: rgba(13, 110, 253, .09); color: #0d6efd; font-size: 1.2rem; }
.password-reset-eyebrow { margin: 0 0 .15rem; color: #0d6efd; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.password-reset-heading h1 { margin: 0; color: #14213d; font-size: clamp(1.45rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.password-reset-back { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1.5rem 3.65rem; color: var(--bs-secondary-color); font-size: .88rem; text-decoration: none; }
.password-reset-back:hover { color: #0d6efd; text-decoration: underline; }
.password-reset-rules i { color: var(--bs-secondary-color); }
.password-reset-rules .is-met { color: #16794e; }
.password-reset-rules .is-met i { color: #16825b; }
.password-reset-toggle { min-width: 2.9rem; }
.password-reset-match { min-height: 1.1rem; margin: .45rem 0 0; font-size: .84rem; font-weight: 600; }
.password-reset-match.is-match { color: #16794e; }
.password-reset-match.is-mismatch { color: #b42318; }
.password-reset-expired { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.25rem; padding: 1rem; border: 1px solid rgba(217, 119, 6, .28); border-radius: 1rem; background: #fff8e6; color: #754400; }
.password-reset-expired-icon { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; flex: 0 0 auto; border-radius: .7rem; background: rgba(217, 119, 6, .12); color: #b45309; }
.password-reset-expired h2 { margin: .05rem 0 .25rem; font-size: 1rem; font-weight: 800; }
.password-reset-expired p { margin: 0; font-size: .9rem; line-height: 1.45; }
[data-bs-theme="dark"] .password-reset-heading h1 { color: #f5f7ff; }
[data-bs-theme="dark"] .password-reset-expired { border-color: rgba(251, 191, 36, .30); background: rgba(120, 53, 15, .35); color: #fde68a; }
[data-bs-theme="dark"] .password-reset-expired-icon { color: #fbbf24; }

/* Learner dashboard */
.dashboard-page { min-height: calc(100vh - 120px); padding: 2rem 0 1rem; }
.dashboard-container { max-width: 1360px; }
.dashboard-hero { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgba(35, 100, 210, .12); border-radius: 22px; background: radial-gradient(circle at 90% 5%, rgba(64, 151, 255, .22), transparent 28%), linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(238, 245, 255, .92)); box-shadow: 0 14px 32px rgba(31, 61, 108, .07); }
.dashboard-eyebrow, .dashboard-card-label { margin: 0 0 .45rem; color: #2364d2; font-size: .73rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-eyebrow i { margin-right: .35rem; }
.dashboard-hero h1 { margin: 0; color: #14213d; font-size: clamp(1.8rem, 4vw, 2.55rem); font-weight: 800; letter-spacing: -.045em; }
.dashboard-hero > div > p:last-child { margin: .55rem 0 0; color: #5e6b82; }
.dashboard-primary-action { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.dashboard-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.dashboard-card { border: 1px solid rgba(21, 42, 76, .10); border-radius: 20px; background: rgba(255, 255, 255, .87); box-shadow: 0 12px 30px rgba(31, 61, 108, .06); }
.dashboard-profile-card, .dashboard-wallet-card, .dashboard-subscription-card { min-height: 205px; padding: 1.5rem; }
.dashboard-profile-card { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .65rem 1rem; align-content: center; }
.dashboard-avatar, .dashboard-card-icon { display: inline-grid; width: 3.1rem; height: 3.1rem; place-items: center; border-radius: 1rem; }
.dashboard-avatar { background: linear-gradient(135deg, #2364d2, #67a9ff); color: #fff; font-size: 1rem; font-weight: 800; }
.dashboard-card-icon { margin-bottom: 1rem; background: rgba(35, 100, 210, .10); color: #2364d2; font-size: 1.3rem; }
.dashboard-profile-copy h2, .dashboard-subscription-card h2 { margin: 0; color: #14213d; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.dashboard-profile-copy p:last-child { margin: .25rem 0 0; color: #5e6b82; font-size: .9rem; overflow-wrap: anywhere; }
.dashboard-profile-card .dashboard-avatar { grid-row: 1 / span 2; align-self: center; }
.dashboard-profile-card .dashboard-profile-copy, .dashboard-profile-card .dashboard-text-link { grid-column: 2; }
.dashboard-wallet-card, .dashboard-subscription-card { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .35rem 1rem; align-content: center; }
.dashboard-wallet-card .dashboard-card-icon, .dashboard-subscription-card .dashboard-card-icon { grid-row: 1 / span 5; align-self: center; margin: 0; }
.dashboard-wallet-card .dashboard-card-label, .dashboard-wallet-card .dashboard-wallet-value, .dashboard-wallet-card .dashboard-text-link, .dashboard-subscription-card .dashboard-card-label, .dashboard-subscription-card h2, .dashboard-subscription-card .dashboard-status, .dashboard-subscription-card .dashboard-progress, .dashboard-subscription-card .dashboard-text-link { grid-column: 2; }
.dashboard-wallet-value { margin: .1rem 0 .7rem; color: #14213d; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.55rem, 2.3vw, 2rem); font-weight: 700; letter-spacing: -.03em; }
.dashboard-status { margin: .1rem 0 .65rem; color: #5e6b82; font-size: .9rem; line-height: 1.5; }
.dashboard-status-active { color: #16794e; }.dashboard-status-scheduled { color: #2364d2; }.dashboard-status-expired { color: #9a5c00; }
.dashboard-progress { height: .45rem; overflow: hidden; margin: .1rem 0 .65rem; border-radius: 999px; background: #e7edf6; }.dashboard-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #24905e, #57bd82); }
.dashboard-text-link { display: inline-flex; align-items: center; gap: .35rem; color: #2364d2; font-size: .9rem; font-weight: 700; text-decoration: none; }.dashboard-text-link:hover { color: #164b9f; text-decoration: underline; }
.dashboard-result-card { padding: clamp(1.35rem, 3vw, 2rem); }.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }.dashboard-section-heading h2 { margin: 0; color: #14213d; font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; }
.dashboard-result-grid { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(115px, .6fr) minmax(250px, 1.45fr) auto; align-items: center; gap: 1.25rem; }.dashboard-result-score, .dashboard-result-percent { margin: 0; color: #14213d; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -.04em; }.dashboard-result-score span { color: #718096; font-size: .56em; }.dashboard-result-percent { color: #2364d2; }.dashboard-result-steady { color: #a56100; }.dashboard-result-review { color: #bd3c32; }.dashboard-result-meta { margin: .15rem 0 0; color: #718096; font-size: .84rem; }.dashboard-result-details p { margin: .2rem 0; color: #5e6b82; font-size: .9rem; }.dashboard-result-details p:first-child { color: #14213d; }.dashboard-review-link { justify-self: end; white-space: nowrap; }
.dashboard-empty-state { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .5rem 0; }.dashboard-empty-icon { display: inline-grid; width: 3rem; height: 3rem; place-items: center; border-radius: .9rem; background: rgba(35, 100, 210, .10); color: #2364d2; font-size: 1.2rem; }.dashboard-empty-state h3 { margin: 0; color: #14213d; font-size: 1rem; font-weight: 800; }.dashboard-empty-state p { margin: .25rem 0 0; color: #5e6b82; font-size: .9rem; }
[data-bs-theme="dark"] .dashboard-hero, [data-bs-theme="dark"] .dashboard-card { border-color: rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .84); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }[data-bs-theme="dark"] .dashboard-hero { background: radial-gradient(circle at 90% 5%, rgba(59, 130, 246, .24), transparent 28%), rgba(15, 23, 42, .84); }[data-bs-theme="dark"] .dashboard-hero h1, [data-bs-theme="dark"] .dashboard-profile-copy h2, [data-bs-theme="dark"] .dashboard-subscription-card h2, [data-bs-theme="dark"] .dashboard-section-heading h2, [data-bs-theme="dark"] .dashboard-result-score, [data-bs-theme="dark"] .dashboard-empty-state h3 { color: #f5f7ff; }[data-bs-theme="dark"] .dashboard-hero > div > p:last-child, [data-bs-theme="dark"] .dashboard-profile-copy p:last-child, [data-bs-theme="dark"] .dashboard-status, [data-bs-theme="dark"] .dashboard-result-details p, [data-bs-theme="dark"] .dashboard-empty-state p { color: #b4c0d4; }[data-bs-theme="dark"] .dashboard-result-score span { color: #94a3b8; }
@media (max-width: 991.98px) { .dashboard-overview { grid-template-columns: 1fr 1fr; }.dashboard-subscription-card { grid-column: 1 / -1; min-height: auto; }.dashboard-result-grid { grid-template-columns: 1fr 1fr; }.dashboard-result-details { grid-column: 1 / -1; }.dashboard-review-link { justify-self: start; } }
@media (max-width: 575.98px) { .dashboard-page { padding-top: 1rem; padding-bottom: 1rem; }.dashboard-hero { align-items: stretch; flex-direction: column; }.dashboard-primary-action { justify-content: center; }.dashboard-overview, .dashboard-result-grid { grid-template-columns: 1fr; }.dashboard-subscription-card { grid-column: auto; }.dashboard-profile-card, .dashboard-wallet-card, .dashboard-subscription-card { min-height: auto; }.dashboard-empty-state { grid-template-columns: 3rem minmax(0, 1fr); }.dashboard-empty-state .btn { grid-column: 1 / -1; }.dashboard-review-link { width: 100%; justify-content: center; } }