/* ================================================
   StageReady AI — Simplified Design System v2
   Philosophy: One action per screen. No noise.
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Inter:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;600&display=swap');

/* ── Tokens ── */
:root {
  --bg:      #F7F5F0;
  --surface: #FFFFFF;
  --border:  #E8E3DA;
  --primary: #0F3D2E;
  --p2:      #1A5C44;
  --p-a:     rgba(15,61,46,.08);
  --p-b:     rgba(15,61,46,.04);
  --gold:    #C8A951;
  --gold-a:  rgba(200,169,81,.14);
  --t1:      #111108;
  --t2:      #4A453E;
  --t3:      #9A9388;
  --r:       14px;
  --r-s:     8px;
  --r-l:     20px;
  --r-xl:    28px;
  --sh:      0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(15,61,46,.08);
  --sh-l:    0 2px 8px rgba(0,0,0,.06), 0 12px 40px rgba(15,61,46,.12);
  --dur:     .18s;
  --ease:    cubic-bezier(.4,0,.2,1);
  --f-sans:  'Inter', system-ui, sans-serif;
  --f-serif: 'Playfair Display', Georgia, serif;
  --f-urdu:  'Noto Nastaliq Urdu', serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--f-sans); background: var(--bg); color: var(--t2); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Utilities ── */
.hidden { display: none !important; }

/* ════════════════════════════════════
   BUTTONS — 3 types only
════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: var(--r); font-family: var(--f-sans);
  font-weight: 600; font-size: .875rem; cursor: pointer;
  transition: all var(--dur) var(--ease); white-space: nowrap;
  border: none;
}
.btn svg { flex-shrink: 0; }
.btn:active { transform: scale(.97); }

/* Primary — main actions */
.btn-p {
  background: var(--primary); color: #fff;
  padding: 12px 24px;
}
.btn-p:hover { background: var(--p2); box-shadow: var(--sh); }

/* Ghost — secondary actions */
.btn-g {
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--border); padding: 11px 22px;
}
.btn-g:hover { border-color: var(--primary); background: var(--p-b); }

/* Icon — icon-only  */
.btn-icon {
  background: transparent; color: var(--t3);
  padding: 8px; border-radius: var(--r-s);
}
.btn-icon:hover { background: var(--p-a); color: var(--primary); }

.btn-sm { padding: 8px 16px; font-size: .8rem; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* ════════════════════════════════════
   HEADER — slim, single bar
════════════════════════════════════ */
.app-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 56px;
  display: flex; align-items: center;
  padding: 0 20px; gap: 0;
}
.logo {
  display: flex; align-items: center;
  background: #000000;
  padding: 6px 12px;
  border-radius: var(--r-s);
  height: 38px;
  text-decoration: none; flex-shrink: 0;
  transition: opacity var(--dur) var(--ease);
}
.logo:hover {
  opacity: 0.9;
}
.logo img { height: 26px; width: auto; }
.logo-name { display: none; }

/* Step tabs in header */
.step-tabs {
  display: flex; align-items: center;
  margin: 0 auto;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
}
.step-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 18px; font-size: .8rem; font-weight: 500;
  color: var(--t3); background: transparent; border: none;
  cursor: pointer; transition: all var(--dur) var(--ease);
  border-right: 1px solid var(--border); white-space: nowrap;
  position: relative;
}
.step-tab:last-child { border-right: none; }
.step-tab .tab-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--border); color: var(--t3);
  font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--dur) var(--ease);
}
.step-tab:hover { color: var(--primary); background: var(--p-b); }
.step-tab.active {
  color: var(--primary); background: var(--surface); font-weight: 600;
}
.step-tab.active .tab-num {
  background: var(--primary); color: #fff;
}
.step-tab.done .tab-num {
  background: var(--gold); color: #fff;
}
.step-tab.done { color: var(--t2); }

/* Header right: profile pill */
.profile-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border); border-radius: 40px;
  cursor: pointer; transition: all var(--dur) var(--ease);
  background: var(--surface); flex-shrink: 0;
}
.profile-pill:hover { border-color: var(--primary); }
.pp-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--gold);
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pp-info { line-height: 1.2; }
.pp-name { font-size: .75rem; font-weight: 600; color: var(--t1); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-level { font-size: .62rem; color: var(--t3); }

/* ════════════════════════════════════
   XP STRIP — slim bar below header
════════════════════════════════════ */
.xp-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
  height: 34px;
}
.xps-level { font-size: .7rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.xps-bar-wrap {
  flex: 1; height: 5px; background: var(--border);
  border-radius: 4px; overflow: hidden;
}
.xps-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold));
  border-radius: 4px; transition: width 1s var(--ease);
}
.xps-xp { font-size: .68rem; color: var(--t3); white-space: nowrap; }
.xps-streak { font-size: .7rem; font-weight: 600; color: var(--t2); white-space: nowrap; }

/* ════════════════════════════════════
   MAIN LAYOUT — centered single column
════════════════════════════════════ */
.app-main {
  max-width: 720px; margin: 0 auto;
  padding: 28px 20px 100px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ════════════════════════════════════
   STEP PANELS
════════════════════════════════════ */
.step-panel { display: none; }
.step-panel.active { display: flex; flex-direction: column; gap: 16px; animation: fadeUp .22s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════
   SURFACE CARD
════════════════════════════════════ */
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--sh);
}
.surface-p { padding: 24px; }
.surface-sm { padding: 16px 20px; }

/* ════════════════════════════════════
   PLAYER — step 1
════════════════════════════════════ */
.player-wrap { display: flex; flex-direction: column; gap: 0; }

.player-meta {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 24px 0;
}
.player-badge-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--p-a); color: var(--primary);
  border-radius: 20px; padding: 4px 11px;
  font-size: .7rem; font-weight: 600; letter-spacing: .3px;
}
.player-title {
  font-family: var(--f-serif); font-size: 1.35rem; font-weight: 700;
  color: var(--t1); line-height: 1.25; padding: 10px 24px 0;
}
.player-subtitle { font-size: .8rem; color: var(--t3); padding: 4px 24px 16px; }

/* Waveform */
.waveform {
  height: 72px; position: relative;
  background: linear-gradient(135deg, var(--primary), var(--p2));
  overflow: hidden;
}
.waveform canvas { width: 100%; height: 100%; display: block; }
.wf-overlay {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(200,169,81,.18); pointer-events: none;
  transition: width .1s linear;
}
.wf-click { position: absolute; inset: 0; cursor: pointer; }

/* Seek + controls */
.player-controls {
  padding: 14px 24px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.seek-row {
  display: flex; align-items: center; gap: 10px;
}
.seek-time { font-size: .72rem; color: var(--t3); width: 36px; flex-shrink: 0; }
.seek-time.right { text-align: right; }
.seek-input {
  flex: 1; -webkit-appearance: none; height: 4px;
  background: var(--border); border-radius: 4px; outline: none; cursor: pointer;
}
.seek-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--primary); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(15,61,46,.15);
}
.ctrl-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ctrl-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--t2); border: none; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.ctrl-btn:hover { background: var(--p-a); color: var(--primary); }
.play-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 4px 14px rgba(15,61,46,.3);
}
.play-btn:hover { background: var(--p2); transform: scale(1.05); }
.play-btn svg { margin-left: 2px; }
.speed-pill {
  background: var(--p-a); color: var(--primary);
  border: none; border-radius: 20px; padding: 5px 12px;
  font-size: .72rem; font-weight: 700; cursor: pointer;
  transition: all var(--dur);
}
.speed-pill:hover { background: var(--primary); color: #fff; }

/* Transcript toggle button */
.transcript-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--p-b); border-top: 1px solid var(--border);
  cursor: pointer; transition: background var(--dur);
}
.transcript-toggle:hover { background: var(--p-a); }
.tt-label { display: flex; align-items: center; gap: 8px; font-size: .83rem; font-weight: 600; color: var(--primary); }
.tt-chevron { color: var(--t3); transition: transform .2s; }
.tt-chevron.open { transform: rotate(180deg); }
.transcript-body {
  max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
}
.transcript-body.open { max-height: 600px; overflow-y: auto; }
.transcript-inner {
  padding: 20px 24px; border-top: 1px solid var(--border);
  font-family: var(--f-urdu); direction: rtl; font-size: 1.05rem;
  line-height: 2.4; color: var(--t1);
}
.transcript-inner p { margin-bottom: 10px; }
.urdu-hl { color: var(--primary); font-weight: 600; }

/* Step footer */
.step-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 4px;
}
.step-hint { font-size: .75rem; color: var(--t3); }

/* ════════════════════════════════════
   PRACTICE — step 2
════════════════════════════════════ */
.practice-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.prac-opt {
  border: 2px solid var(--border); border-radius: var(--r-l);
  padding: 24px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; cursor: pointer;
  transition: all var(--dur) var(--ease); text-align: center;
  background: var(--surface);
}
.prac-opt:hover { border-color: var(--primary); background: var(--p-b); transform: translateY(-2px); box-shadow: var(--sh); }
.prac-opt.recording { border-color: #c0392b; background: #fdf2f2; }
.po-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.po-icon.rec-icon { background: rgba(192,57,43,.1); color: #c0392b; }
.po-icon.up-icon  { background: var(--p-a); color: var(--primary); }
.po-icon svg { width: 22px; height: 22px; }
.po-label { font-size: .88rem; font-weight: 700; color: var(--t1); }
.po-sub   { font-size: .72rem; color: var(--t3); }

/* Recording pulse */
@keyframes pulse-ring {
  0% { transform: scale(.9); opacity: .8; }
  50% { transform: scale(1.15); opacity: .3; }
  100% { transform: scale(.9); opacity: .8; }
}
.pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #c0392b; animation: pulse-ring 1.2s ease infinite; }

/* Recording timer */
.rec-timer {
  display: none; align-items: center; gap: 10px;
  background: #fdf2f2; border: 1px solid rgba(192,57,43,.2);
  border-radius: var(--r); padding: 12px 16px;
}
.rec-timer.show { display: flex; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #c0392b; animation: pulse-ring .8s ease infinite; }
.rec-val { font-size: .9rem; font-weight: 700; color: #c0392b; font-variant-numeric: tabular-nums; }
.rec-lbl { font-size: .8rem; color: var(--t2); flex: 1; }

/* Upload info */
.upload-info {
  display: none; align-items: center; gap: 10px;
  background: var(--p-b); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 16px;
}
.upload-info.show { display: flex; }
.upload-info svg { color: var(--primary); flex-shrink: 0; width: 16px; height: 16px; }
.upload-name { font-size: .82rem; font-weight: 500; color: var(--t1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Playback */
.playback-box {
  display: none; flex-direction: column; gap: 12px;
  background: var(--p-b); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: 16px 20px;
}
.playback-box.show { display: flex; }
.playback-label { font-size: .8rem; font-weight: 600; color: var(--t2); display: flex; align-items: center; gap: 6px; }
.user-audio { width: 100%; height: 40px; }
.playback-actions { display: flex; gap: 8px; }

/* ════════════════════════════════════
   FEEDBACK — step 3
════════════════════════════════════ */
.fb-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.fb-title { font-family: var(--f-serif); font-size: 1.2rem; font-weight: 700; color: var(--t1); }
.fb-session { font-size: .75rem; color: var(--t3); }

.fb-analyzing {
  display: none; align-items: center; justify-content: center;
  gap: 10px; padding: 32px 0; flex-direction: column;
}
.fb-analyzing.show { display: flex; }
.fb-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite;
}
.fb-spinner-label { font-size: .8rem; color: var(--t3); }
@keyframes spin { to { transform: rotate(360deg); } }

.scores-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.score-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg); border-radius: var(--r); padding: 16px 8px;
  opacity: 0; transform: translateY(8px);
  transition: all .35s var(--ease);
}
.score-card.in { opacity: 1; transform: none; }
.score-ring { position: relative; width: 72px; height: 72px; }
.score-ring svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border); stroke-width: 5; }
.ring-fill  { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 188; stroke-dashoffset: 188; transition: stroke-dashoffset 1s var(--ease); }
.ring-c { stroke: #2980b9; }
.ring-f { stroke: #27ae60; }
.ring-m { stroke: var(--gold); }
.ring-val {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: var(--t1);
}
.score-label { font-size: .72rem; font-weight: 600; color: var(--t2); text-align: center; }
.score-desc  { font-size: .66rem; color: var(--t3); text-align: center; line-height: 1.4; }

/* Suggestions */
.sug-block {
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease);
}
.sug-block.open { max-height: 800px; }
.sug-section { margin-bottom: 16px; }
.sug-section:last-child { margin-bottom: 0; }
.sug-section-label {
  font-size: .68rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.sug-section-label.green { color: #27ae60; }
.sug-section-label.red   { color: #c0392b; }
.sug-section-label.gold  { color: var(--gold); }
.sug-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .82rem; color: var(--t2); margin-bottom: 6px;
  line-height: 1.5;
}
.sug-item::before { content: '·'; color: var(--t3); flex-shrink: 0; margin-top: 1px; }

.sug-next-box {
  background: var(--p-a); border-radius: var(--r); padding: 14px 16px;
  margin-top: 16px;
}
.sug-next-label { font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); margin-bottom: 5px; }
.sug-next-text  { font-size: .82rem; color: var(--t1); line-height: 1.55; }

/* Complete screen */
.complete-screen {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 12px 0 4px; text-align: center;
}
.complete-trophy { font-size: 3rem; }
.complete-title { font-family: var(--f-serif); font-size: 1.5rem; font-weight: 700; color: var(--t1); }
.complete-sub { font-size: .88rem; color: var(--t3); max-width: 360px; }
.complete-scores {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.cs-item { text-align: center; }
.cs-val { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.cs-val.gold-text { color: var(--gold); }
.cs-lbl { font-size: .68rem; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; }
.complete-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ════════════════════════════════════
   BADGES PANEL (collapsible in header dropdown or separate)
════════════════════════════════════ */
.badge-bar {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  scrollbar-width: none;
}
.badge-bar::-webkit-scrollbar { display: none; }
.badge-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px;
  font-size: .68rem; font-weight: 500; color: var(--t2);
  white-space: nowrap; flex-shrink: 0;
}
.badge-chip.earned { background: var(--gold-a); border-color: var(--gold); color: var(--t1); font-weight: 600; }
.badge-chip.locked { opacity: .45; filter: grayscale(.7); }

/* ════════════════════════════════════
   PROFILE DROPDOWN PANEL
════════════════════════════════════ */
.profile-panel {
  position: fixed; top: 56px; right: 16px; z-index: 500;
  width: 280px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-l);
  box-shadow: var(--sh-l); overflow: hidden;
  display: none;
}
.profile-panel.open { display: block; animation: fadeUp .18s ease; }
.pp-top {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.pp-big-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: var(--gold);
  font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; border: 2px solid var(--gold-a);
}
.pp-big-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pp-user-name { font-size: .9rem; font-weight: 700; color: var(--t1); }
.pp-user-level { font-size: .72rem; color: var(--t3); }
.pp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.pp-stat { text-align: center; padding: 10px 6px; }
.pp-stat-val { font-size: .95rem; font-weight: 700; color: var(--primary); }
.pp-stat-lbl { font-size: .6rem; color: var(--t3); text-transform: uppercase; letter-spacing: .8px; }
.pp-links { padding: 8px; }
.pp-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--r-s);
  font-size: .83rem; color: var(--t2); cursor: pointer;
  transition: background var(--dur); text-decoration: none;
}
.pp-link:hover { background: var(--p-b); color: var(--primary); }
.pp-link svg { width: 15px; height: 15px; color: var(--t3); flex-shrink: 0; }

/* ════════════════════════════════════
   LEADERBOARD PAGE
════════════════════════════════════ */
.lb-page { min-height: 100vh; background: var(--bg); }
.lb-hero {
  background: linear-gradient(150deg, var(--primary) 0%, #1e5c40 100%);
  padding: 32px 20px 0; text-align: center;
}
.lb-hero-title {
  font-family: var(--f-serif); font-size: 1.6rem;
  font-weight: 700; color: #fff; margin-bottom: 4px;
}
.lb-hero-sub { font-size: .82rem; color: rgba(200,169,81,.8); margin-bottom: 24px; }

/* Podium */
.podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px; max-width: 360px; margin: 0 auto;
}
.pod-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.pod-avatar {
  border-radius: 50%; border: 3px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff;
  overflow: hidden; position: relative; background: rgba(255,255,255,.15);
}
.pod-avatar.p1 { width: 64px; height: 64px; border-color: var(--gold); }
.pod-avatar.p2 { width: 52px; height: 52px; border-color: rgba(200,200,200,.7); }
.pod-avatar.p3 { width: 46px; height: 46px; border-color: rgba(205,127,50,.7); }
.pod-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pod-crown { position: absolute; top: -13px; font-size: 1.1rem; }
.pod-name { font-size: .72rem; font-weight: 700; color: #fff; text-align: center; }
.pod-score { font-size: .65rem; color: rgba(200,169,81,.85); }
.pod-plinth { width: 100%; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; }
.pod-plinth.p1 { height: 56px; background: rgba(200,169,81,.2); }
.pod-plinth.p2 { height: 40px; background: rgba(255,255,255,.08); }
.pod-plinth.p3 { height: 28px; background: rgba(255,255,255,.05); }
.pod-rank { font-size: 1.1rem; font-weight: 800; color: #fff; }
.pod-rank.r1 { color: var(--gold); }
.pod-rank.r2 { color: #ccc; }
.pod-rank.r3 { color: #cd7f32; }

/* LB tabs */
.lb-tabs {
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab {
  flex: 1; min-width: 70px; padding: 11px 10px;
  background: none; border: none; font-size: .78rem;
  font-weight: 500; color: var(--t3); cursor: pointer;
  border-bottom: 2.5px solid transparent; white-space: nowrap;
  transition: all var(--dur);
}
.lb-tab:hover { color: var(--primary); }
.lb-tab.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }

/* LB table */
.lb-body { max-width: 680px; margin: 0 auto; padding: 16px; }
.lb-table { background: var(--surface); border-radius: var(--r-l); border: 1px solid var(--border); overflow: hidden; }
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  transition: background var(--dur);
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--p-b); }
.lb-row.is-me { background: var(--p-a); border-left: 3px solid var(--primary); }
.lb-rank { width: 28px; text-align: center; font-size: .88rem; font-weight: 800; color: var(--t3); flex-shrink: 0; }
.lb-rank.r1 { color: var(--gold); } .lb-rank.r2 { color: #999; } .lb-rank.r3 { color: #cd7f32; }
.lb-av {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--primary); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.lb-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: .85rem; font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lb-you { font-size: .6rem; background: var(--primary); color: #fff; padding: 1px 7px; border-radius: 10px; font-weight: 700; }
.lb-meta { font-size: .68rem; color: var(--t3); }
.lb-stat { text-align: right; flex-shrink: 0; }
.lb-stat-val { font-size: .88rem; font-weight: 700; color: var(--primary); }
.lb-stat-lbl { font-size: .6rem; color: var(--t3); }

/* ════════════════════════════════════
   ONBOARDING (index.html)
════════════════════════════════════ */
.ob-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.ob-header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
.ob-steps { display: flex; gap: 4px; }
.ob-step-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border);
  transition: all .25s;
}
.ob-step-dot.done { background: var(--p2); }
.ob-step-dot.active { width: 20px; border-radius: 4px; background: var(--primary); }
.ob-progress { height: 2px; background: var(--border); }
.ob-progress-fill { height: 100%; background: var(--primary); transition: width .4s var(--ease); }
.ob-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.ob-screen { display: none; flex-direction: column; align-items: center; width: 100%; max-width: 560px; animation: fadeUp .22s ease; }
.ob-screen.active { display: flex; }
.ob-emoji { font-size: 2.6rem; margin-bottom: 12px; }
.ob-title {
  font-family: var(--f-serif); font-size: clamp(1.5rem,4vw,2rem);
  font-weight: 700; color: var(--t1); text-align: center;
  line-height: 1.2; margin-bottom: 8px;
}
.ob-title em { font-style: italic; color: var(--primary); }
.ob-sub { font-size: .88rem; color: var(--t3); text-align: center; line-height: 1.65; margin-bottom: 24px; max-width: 420px; }
.ob-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* Input */
.ob-field { width: 100%; max-width: 400px; }
.ob-label { font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; display: block; }
.ob-input {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
  border-radius: var(--r); font-size: .95rem; background: var(--surface);
  color: var(--t1); outline: none; transition: border-color var(--dur);
}
.ob-input:focus { border-color: var(--primary); }
.ob-input::placeholder { color: var(--t3); }

/* Interest grid */
.ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.ob-card {
  border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 14px 10px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; cursor: pointer;
  transition: all var(--dur); text-align: center; background: var(--surface);
  position: relative; user-select: none;
}
.ob-card:hover { border-color: var(--primary); background: var(--p-b); }
.ob-card.on { border-color: var(--primary); background: var(--p-a); }
.ob-card.on::after {
  content: '✓'; position: absolute; top: 7px; right: 8px;
  width: 16px; height: 16px; background: var(--primary); color: #fff;
  border-radius: 50%; font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 16px;
}
.ob-card-icon { font-size: 1.8rem; }
.ob-card-name { font-size: .78rem; font-weight: 700; color: var(--t1); }
.ob-card-desc { font-size: .65rem; color: var(--t3); }
.ob-hint { font-size: .73rem; color: var(--t3); text-align: center; margin-top: 4px; }

/* Level + goal cards */
.ob-level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.ob-level-card {
  border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 16px 10px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface); transition: all var(--dur);
}
.ob-level-card:hover { border-color: var(--primary); }
.ob-level-card.on { border-color: var(--gold); background: var(--gold-a); }
.ob-level-icon { font-size: 1.8rem; }
.ob-level-name { font-size: .82rem; font-weight: 700; color: var(--t1); }
.ob-level-desc { font-size: .65rem; color: var(--t3); line-height: 1.35; }

.ob-goal-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 460px; }
.ob-goal-opt {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; cursor: pointer; background: var(--surface);
  transition: all var(--dur);
}
.ob-goal-opt:hover { border-color: var(--primary); }
.ob-goal-opt.on { border-color: var(--primary); background: var(--p-a); }
.ob-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur);
}
.ob-goal-opt.on .ob-radio { border-color: var(--primary); background: var(--primary); }
.ob-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
.ob-goal-opt.on .ob-radio::after { display: block; }
.og-text h4 { font-size: .84rem; font-weight: 600; color: var(--t1); }
.og-text p  { font-size: .7rem; color: var(--t3); }

/* Photo */
.ob-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.ob-av-preview {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 700; color: var(--gold);
  overflow: hidden; position: relative; cursor: pointer;
}
.ob-av-preview img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; position: absolute; inset: 0; }
.ob-presets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 300px; }
.ob-preset {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: pointer; transition: all var(--dur);
}
.ob-preset:hover { border-color: var(--gold); transform: scale(1.1); }
.ob-preset.on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-a); }

/* Done preview */
.ob-done-preview {
  background: var(--primary); border-radius: var(--r-l); overflow: hidden;
  width: 100%; max-width: 400px; color: #fff;
}
.odp-banner { height: 60px; background: linear-gradient(135deg, var(--p2), #2d7a5f); position: relative; overflow: hidden; }
.odp-banner img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.odp-body { padding: 0 20px 18px; position: relative; }
.odp-top { display: flex; align-items: flex-end; gap: 12px; margin: -22px 0 12px; }
.odp-av {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--gold); background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--gold);
  overflow: hidden; flex-shrink: 0;
}
.odp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odp-name { font-size: 1rem; font-weight: 700; }
.odp-level { font-size: .67rem; color: rgba(200,169,81,.8); text-transform: uppercase; letter-spacing: .8px; }
.odp-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.odp-row { background: rgba(255,255,255,.1); border-radius: var(--r-s); padding: 8px 10px; }
.odp-row-label { font-size: .6rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px; }
.odp-row-val { font-size: .8rem; font-weight: 600; }
.ob-footer { padding: 12px; text-align: center; font-size: .7rem; color: var(--t3); }

/* ════════════════════════════════════
   TOAST
════════════════════════════════════ */
.toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--t1); color: #fff; padding: 10px 18px;
  border-radius: 24px; font-size: .82rem; font-weight: 500;
  box-shadow: var(--sh-l); pointer-events: none;
  animation: toastIn .22s ease, toastOut .3s ease 2.7s forwards;
  max-width: 340px; text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* XP pop */
@keyframes xpPop { 0% { opacity: 0; transform: translateY(0) scale(.7); } 30% { opacity: 1; transform: translateY(-18px) scale(1.1); } 100% { opacity: 0; transform: translateY(-36px); } }
.xp-pop { position: fixed; pointer-events: none; font-size: .85rem; font-weight: 800; color: var(--gold); z-index: 800; animation: xpPop 1.5s ease forwards; }

/* ════════════════════════════════════
   BOTTOM NAV (mobile only)
════════════════════════════════════ */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  z-index: 300; padding: 8px 0 env(safe-area-inset-bottom, 0);
}
.bn-wrap { display: flex; justify-content: space-around; }
.bn-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 6px 12px;
  color: var(--t3); font-size: .6rem; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: color var(--dur);
}
.bn-btn svg { width: 20px; height: 20px; }
.bn-btn.active { color: var(--primary); }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 640px) {
  .step-tabs { display: none; }
  .bottom-nav { display: block; }
  body { padding-bottom: 64px; }
  .toast-root { bottom: 76px; }
  .app-main { padding: 16px 14px 80px; }
  .ob-grid { grid-template-columns: repeat(2, 1fr); }
  .ob-level-grid { grid-template-columns: 1fr; }
  .scores-row { gap: 8px; }
  .practice-options { grid-template-columns: 1fr; }
  .complete-scores { gap: 10px; }
  .profile-pill .pp-info { display: none; }
  .xp-strip { padding: 0 14px; }
  .lb-stat { display: none; }
  .lb-row { padding: 10px 12px; }
}

@media (max-width: 400px) {
  .ob-grid { grid-template-columns: repeat(2, 1fr); }
  .player-title { font-size: 1.1rem; }
}

/* ════════════════════════════════════
   SEARCH TRIGGER (header icon)
════════════════════════════════════ */
.search-trigger {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 6px 12px;
  color: var(--t3); font-size: .78rem; cursor: pointer;
  transition: all var(--dur) var(--ease); flex-shrink: 0;
  margin-right: 8px; font-family: var(--f-sans);
}
.search-trigger:hover { border-color: var(--primary); color: var(--t2); background: var(--surface); }
.search-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }
.search-trigger .st-kbd {
  font-size: .65rem; background: var(--border); border-radius: 4px;
  padding: 1px 5px; color: var(--t3); letter-spacing: .3px; margin-left: 4px;
}
@media (max-width: 640px) {
  .search-trigger .st-label { display: none; }
  .search-trigger .st-kbd  { display: none; }
  .search-trigger { padding: 7px; border-radius: 50%; }
}

/* ════════════════════════════════════
   SEARCH OVERLAY
════════════════════════════════════ */
.search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,10,8,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px 40px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease);
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-modal {
  width: 100%; max-width: 580px; background: var(--surface);
  border-radius: var(--r-l); box-shadow: var(--sh-l); overflow: hidden;
  transform: translateY(-14px) scale(.97);
  transition: transform .2s var(--ease);
}
.search-overlay.open .search-modal { transform: none; }
.search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.search-input-row svg { width: 18px; height: 18px; color: var(--t3); flex-shrink: 0; }
.search-input {
  flex: 1; border: none; outline: none;
  font-size: 1rem; font-family: var(--f-sans); color: var(--t1); background: transparent;
}
.search-input::placeholder { color: var(--t3); }
.search-close {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-s); padding: 4px 8px;
  font-size: .7rem; color: var(--t3); cursor: pointer;
  flex-shrink: 0; font-family: var(--f-sans); transition: all var(--dur);
}
.search-close:hover { background: var(--border); }
.search-results { max-height: 420px; overflow-y: auto; padding: 8px 0; }
.search-results::-webkit-scrollbar { width: 3px; }
.search-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.search-group-label {
  font-size: .64rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--t3); padding: 10px 16px 4px; display: block;
}
.search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; transition: background var(--dur);
  border: none; background: transparent; width: 100%; text-align: left; font-family: var(--f-sans);
}
.search-item:hover, .search-item.focused { background: var(--p-b); }
.search-item.focused .si-icon { background: var(--primary); }
.si-icon {
  width: 34px; height: 34px; border-radius: var(--r-s);
  background: var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0; transition: all var(--dur);
}
.si-text { flex: 1; min-width: 0; }
.si-title { font-size: .85rem; font-weight: 600; color: var(--t1); display: block; }
.si-desc  { font-size: .72rem; color: var(--t3); display: block; }
.si-badge {
  font-size: .62rem; background: var(--p-a); color: var(--primary);
  border-radius: 10px; padding: 2px 8px; font-weight: 600; flex-shrink: 0;
}
.search-empty { padding: 32px 20px; text-align: center; }
.search-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.search-empty-title { font-size: .9rem; font-weight: 600; color: var(--t2); margin-bottom: 4px; }
.search-empty-sub { font-size: .78rem; color: var(--t3); }
.search-quick {
  padding: 10px 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sq-label { font-size: .7rem; color: var(--t3); font-weight: 600; flex-shrink: 0; }
.sq-chip {
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  padding: 4px 10px; font-size: .72rem; color: var(--t2); cursor: pointer;
  transition: all var(--dur); font-family: var(--f-sans);
}
.sq-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--p-b); }

/* ════════════════════════════════════
   PROFILE PAGE
════════════════════════════════════ */
.profile-page { min-height: 100vh; background: var(--bg); }
.profile-main { max-width: 600px; margin: 0 auto; padding: 28px 20px 100px; }
.pf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--sh); overflow: visible; }
.pf-banner {
  height: 80px; background: linear-gradient(135deg, var(--primary), var(--p2));
  position: relative; cursor: pointer; overflow: hidden;
  border-radius: var(--r-l) var(--r-l) 0 0;
}
.pf-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-banner-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur);
}
.pf-banner:hover .pf-banner-overlay { opacity: 1; }
.pf-banner-overlay span { font-size: .75rem; font-weight: 600; color: #fff; }
.pf-avatar-area {
  padding: 0 24px; display: flex; align-items: flex-end;
  justify-content: space-between; margin-top: -26px; margin-bottom: 4px;
}
.pf-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--surface); background: var(--primary);
  color: var(--gold); font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; flex-shrink: 0; box-shadow: var(--sh);
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.pf-preset-bar { display: flex; gap: 6px; padding: 8px 24px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.pf-preset {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; cursor: pointer; transition: all var(--dur);
}
.pf-preset:hover { border-color: var(--gold); transform: scale(1.1); }
.pf-preset.on { border-color: var(--gold); background: var(--gold-a); }
.pf-form { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-field { display: flex; flex-direction: column; gap: 5px; }
.pf-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--t3); display: flex; align-items: center; gap: 6px;
}
.pf-optional { font-size: .6rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--t3); opacity: .7; }
.pf-input {
  padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--r);
  font-size: .88rem; font-family: var(--f-sans); background: var(--surface);
  color: var(--t1); outline: none; transition: border-color var(--dur);
}
.pf-input:focus { border-color: var(--primary); }
.pf-input::placeholder { color: var(--t3); }
.pf-input.error { border-color: #c0392b; }
.pf-error { font-size: .7rem; color: #c0392b; display: none; }
.pf-error.show { display: block; }
.gender-row { display: flex; gap: 8px; }
.gender-btn {
  flex: 1; padding: 9px 6px; border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface); font-size: .78rem; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: all var(--dur); font-family: var(--f-sans); text-align: center;
}
.gender-btn:hover { border-color: var(--primary); color: var(--primary); }
.gender-btn.on { border-color: var(--primary); background: var(--p-a); color: var(--primary); }
.country-select-wrap { position: relative; }
.country-select-btn {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--r);
  font-size: .88rem; font-family: var(--f-sans); background: var(--surface); color: var(--t1);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; transition: border-color var(--dur); text-align: left;
}
.country-select-btn:hover, .country-select-btn.open { border-color: var(--primary); }
.csb-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-text.placeholder { color: var(--t3); }
.country-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--surface); border: 1.5px solid var(--primary); border-radius: var(--r);
  box-shadow: var(--sh-l); overflow: hidden; display: none; flex-direction: column;
}
.country-dropdown.open { display: flex; }
.country-search-wrap { padding: 8px; border-bottom: 1px solid var(--border); }
.country-search {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-s);
  font-size: .82rem; outline: none; font-family: var(--f-sans);
  background: var(--bg); color: var(--t1); transition: border-color var(--dur);
}
.country-search:focus { border-color: var(--primary); }
.country-list { max-height: 200px; overflow-y: auto; }
.country-option {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; cursor: pointer;
  font-size: .84rem; transition: background var(--dur); color: var(--t1);
}
.country-option:hover { background: var(--p-b); }
.country-option.selected { background: var(--p-a); color: var(--primary); font-weight: 600; }
.co-flag { font-size: 1rem; flex-shrink: 0; }
.co-name { flex: 1; }
.co-code { font-size: .7rem; color: var(--t3); }
.phone-wrap { display: flex; gap: 0; }
.phone-code-btn {
  padding: 11px 10px; border: 1.5px solid var(--border); border-right: none;
  border-radius: var(--r) 0 0 var(--r); font-size: .8rem; font-family: var(--f-sans);
  background: var(--bg); color: var(--t2); cursor: pointer; white-space: nowrap;
  transition: all var(--dur); flex-shrink: 0; display: flex; align-items: center; gap: 4px;
}
.phone-code-btn:hover { border-color: var(--primary); }
.phone-number-input {
  flex: 1; padding: 11px 13px; border: 1.5px solid var(--border);
  border-radius: 0 var(--r) var(--r) 0; font-size: .88rem; font-family: var(--f-sans);
  background: var(--surface); color: var(--t1); outline: none; transition: border-color var(--dur);
}
.phone-number-input:focus { border-color: var(--primary); }
.phone-note { font-size: .68rem; color: var(--t3); display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.pf-divider { height: 1px; background: var(--border); margin: 4px 0; }
.pf-section-title { font-size: .88rem; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.pf-section-sub { font-size: .72rem; color: var(--t3); margin-bottom: 10px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-chip {
  display: flex; align-items: center; gap: 5px; border: 1.5px solid var(--border);
  border-radius: 20px; padding: 6px 12px; cursor: pointer; font-size: .78rem;
  font-weight: 600; color: var(--t2); background: var(--surface);
  transition: all var(--dur); font-family: var(--f-sans);
}
.pf-chip:hover { border-color: var(--primary); color: var(--primary); }
.pf-chip.on { border-color: var(--primary); background: var(--p-a); color: var(--primary); }
.level-row { display: flex; gap: 8px; }
.level-btn {
  flex: 1; padding: 10px 8px; border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface); font-size: .76rem; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: all var(--dur); font-family: var(--f-sans);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.level-btn:hover { border-color: var(--primary); }
.level-btn.on { border-color: var(--gold); background: var(--gold-a); color: var(--t1); }
.level-btn .lb-icon { font-size: 1.1rem; }
.pf-save-bar {
  position: sticky; bottom: 0; background: rgba(247,245,240,.95);
  backdrop-filter: blur(8px); border-top: 1px solid var(--border);
  padding: 14px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin-top: 16px;
  border-radius: 0 0 var(--r-l) var(--r-l);
}
.pf-save-status { font-size: .78rem; color: var(--t3); }
.pf-save-status.saved { color: #27ae60; font-weight: 600; }

/* Onboarding extras */
.ob-gender-row { display: flex; gap: 8px; width: 100%; max-width: 400px; }
.ob-gender-btn {
  flex: 1; padding: 11px 8px; border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: all var(--dur); font-family: var(--f-sans); text-align: center;
}
.ob-gender-btn:hover { border-color: var(--primary); }
.ob-gender-btn.on { border-color: var(--primary); background: var(--p-a); color: var(--primary); }
.ob-optional-section {
  width: 100%; max-width: 460px; margin-top: 12px;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.ob-optional-title {
  font-size: .66rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--t3); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.ob-optional-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ob-compact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-compact-field { display: flex; flex-direction: column; gap: 4px; }
.ob-compact-label { font-size: .65rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--t3); }
.ob-compact-select {
  padding: 9px 10px; border: 1.5px solid var(--border); border-radius: var(--r-s);
  font-size: .83rem; font-family: var(--f-sans); color: var(--t1);
  background: var(--surface); outline: none; cursor: pointer;
  transition: border-color var(--dur); -webkit-appearance: none;
}
.ob-compact-select:focus { border-color: var(--primary); }
.ob-compact-input {
  padding: 9px 10px; border: 1.5px solid var(--border); border-radius: var(--r-s);
  font-size: .83rem; font-family: var(--f-sans); color: var(--t1);
  background: var(--surface); outline: none; transition: border-color var(--dur);
}
.ob-compact-input:focus { border-color: var(--primary); }
@media (max-width: 640px) {
  .pf-row { grid-template-columns: 1fr; }
  .search-overlay { padding: 56px 12px 20px; }
  .ob-compact-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════
   SMOOTH SCROLL + PERFORMANCE
════════════════════════════════════ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
/* Isolate paint layers — prevent reflow spreading */
.step-panel     { contain: layout style; }
.waveform       { contain: layout style paint; }
.waveform canvas{ contain: strict; }
.search-modal   { will-change: transform; }
.score-card     { will-change: transform; }
.profile-panel  { will-change: transform; }
.country-dropdown { will-change: transform; }

/* Inner scroll areas — contained momentum */
.country-list,
.search-results,
.transcript-inner,
.cl-list,
.sh-list { overscroll-behavior: contain; }

/* Prevent tap delay on touch devices */
button, a, .prac-opt, .ob-card, .ob-preset,
.cl-card, .sh-row, .lb-row, .search-item {
  touch-action: manipulation;
}

/* ════════════════════════════════════
   INLINE SEARCH BAR (reusable)
════════════════════════════════════ */
.inline-search {
  position: relative; display: flex; align-items: center;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 0 12px; gap: 8px;
  transition: border-color var(--dur) var(--ease);
}
.inline-search:focus-within { border-color: var(--primary); background: var(--surface); }
.inline-search svg { width: 15px; height: 15px; color: var(--t3); flex-shrink: 0; }
.inline-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 10px 0; font-size: .85rem; font-family: var(--f-sans);
  color: var(--t1);
}
.inline-search-input::placeholder { color: var(--t3); }
.inline-search-clear {
  background: none; border: none; cursor: pointer; color: var(--t3);
  font-size: .75rem; padding: 4px; border-radius: 50%;
  transition: all var(--dur); display: none; flex-shrink: 0;
}
.inline-search-clear.show { display: flex; }
.inline-search-clear:hover { background: var(--border); color: var(--t1); }

/* ════════════════════════════════════
   CONTENT LIBRARY
════════════════════════════════════ */
.cl-section {
  margin-top: 16px; border: 1px solid var(--border);
  border-radius: var(--r-l); background: var(--surface);
  overflow: hidden;
}
.cl-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer; user-select: none;
  transition: background var(--dur);
}
.cl-header:hover { background: var(--p-b); }
.cl-header-left { display: flex; align-items: center; gap: 8px; }
.cl-header-title { font-size: .88rem; font-weight: 700; color: var(--t1); }
.cl-header-count {
  font-size: .66rem; background: var(--p-a); color: var(--primary);
  border-radius: 10px; padding: 2px 7px; font-weight: 700;
}
.cl-chevron {
  transition: transform .2s var(--ease); color: var(--t3);
  width: 16px; height: 16px;
}
.cl-chevron.open { transform: rotate(180deg); }

.cl-body { display: none; border-top: 1px solid var(--border); }
.cl-body.open { display: block; }

.cl-search-bar { padding: 10px 12px; border-bottom: 1px solid var(--border); }

.cl-list {
  max-height: 340px; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.cl-list::-webkit-scrollbar { width: 3px; }
.cl-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.cl-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r);
  cursor: pointer; transition: background var(--dur);
  border: 1.5px solid transparent;
}
.cl-card:hover { background: var(--p-b); border-color: var(--border); }
.cl-card.active { background: var(--p-a); border-color: var(--primary); }
.cl-icon {
  width: 36px; height: 36px; border-radius: var(--r-s);
  background: var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; flex-shrink: 0;
  border: 1px solid var(--border);
}
.cl-card.active .cl-icon { background: var(--primary); border-color: var(--primary); }
.cl-info { flex: 1; min-width: 0; }
.cl-title { font-size: .83rem; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-urdu { font-family: var(--f-urdu); font-size: .78rem; color: var(--t3); direction: rtl; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.cl-dur { font-size: .67rem; color: var(--t3); font-weight: 600; }
.cl-lvl {
  font-size: .6rem; font-weight: 700; border-radius: 8px;
  padding: 1px 6px; letter-spacing: .3px;
}
.cl-lvl.beginner     { background: rgba(39,174,96,.12); color: #27ae60; }
.cl-lvl.intermediate { background: rgba(200,169,81,.15); color: #a0803a; }
.cl-lvl.advanced     { background: rgba(139,30,45,.1);  color: #8b1e2d; }

.cl-empty {
  padding: 24px 16px; text-align: center;
  font-size: .8rem; color: var(--t3);
}
.cl-empty-icon { font-size: 1.6rem; margin-bottom: 6px; }

/* ════════════════════════════════════
   SESSION HISTORY
════════════════════════════════════ */
.sh-section {
  margin-top: 16px; border: 1px solid var(--border);
  border-radius: var(--r-l); background: var(--surface); overflow: hidden;
}
.sh-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer; user-select: none;
  transition: background var(--dur);
}
.sh-header:hover { background: var(--p-b); }
.sh-header-left { display: flex; align-items: center; gap: 8px; }
.sh-header-title { font-size: .88rem; font-weight: 700; color: var(--t1); }
.sh-header-count {
  font-size: .66rem; background: var(--gold-a); color: #8a6d28;
  border-radius: 10px; padding: 2px 7px; font-weight: 700;
}
.sh-body { display: none; border-top: 1px solid var(--border); }
.sh-body.open { display: block; }
.sh-search-bar { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sh-list {
  max-height: 360px; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.sh-list::-webkit-scrollbar { width: 3px; }
.sh-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.sh-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--border); cursor: default;
  transition: background var(--dur); background: var(--surface);
}
.sh-row:hover { background: var(--p-b); }
.sh-path-icon {
  width: 32px; height: 32px; border-radius: var(--r-s);
  background: var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.sh-info { flex: 1; min-width: 0; }
.sh-path-name { font-size: .8rem; font-weight: 700; color: var(--t1); text-transform: capitalize; }
.sh-date { font-size: .68rem; color: var(--t3); }
.sh-scores { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sh-score {
  display: flex; flex-direction: column; align-items: center;
  min-width: 32px;
}
.sh-score-val { font-size: .78rem; font-weight: 700; color: var(--t1); line-height: 1; }
.sh-score-lbl { font-size: .55rem; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.sh-avg {
  font-size: .82rem; font-weight: 800;
  background: var(--p-a); color: var(--primary);
  border-radius: var(--r-s); padding: 4px 8px;
  min-width: 36px; text-align: center;
}
.sh-avg.gold { background: var(--gold-a); color: #8a6d28; }
.sh-avg.great { background: rgba(39,174,96,.12); color: #27ae60; }

.sh-empty { padding: 24px 16px; text-align: center; }
.sh-empty-icon { font-size: 1.6rem; margin-bottom: 6px; }
.sh-empty-text { font-size: .8rem; color: var(--t3); }

/* ════════════════════════════════════
   LEADERBOARD SEARCH
════════════════════════════════════ */
.lb-search-wrap {
  padding: 10px 0 0; margin-bottom: 12px;
  display: flex; gap: 8px; align-items: center;
}
.lb-search-wrap .inline-search { flex: 1; }
.lb-find-me {
  flex-shrink: 0; padding: 10px 12px; font-size: .75rem; font-weight: 600;
  background: var(--p-a); color: var(--primary); border: 1.5px solid var(--border);
  border-radius: var(--r); cursor: pointer; font-family: var(--f-sans);
  transition: all var(--dur); white-space: nowrap;
}
.lb-find-me:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.lb-row.highlight {
  background: var(--gold-a) !important;
  border: 1.5px solid var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(200,169,81,.15);
}
.lb-no-results {
  padding: 20px; text-align: center; color: var(--t3);
  font-size: .82rem; background: var(--surface);
  border-radius: var(--r); border: 1px solid var(--border);
}

/* Score color helpers */
.avg-low  { color: #c0392b; }
.avg-mid  { color: var(--t2); }
.avg-high { color: #27ae60; }
.avg-best { color: var(--gold); font-weight: 800; }

@media (max-width: 640px) {
  .sh-scores { display: none; }
  .cl-list { max-height: 280px; }
  .sh-list { max-height: 300px; }
  .lb-find-me { display: none; }
}

/* ════════════════════════════════════
   LEADERBOARD ROW — HOVER & CLICK
════════════════════════════════════ */
.lb-row {
  cursor: pointer;
  position: relative;
  transition: background var(--dur), transform 120ms var(--ease), box-shadow 120ms;
}
.lb-row:hover {
  background: var(--p-b) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15,61,46,.06);
}
.lb-row:active { transform: translateY(0); }
.lb-row.pm-active { background: var(--p-a) !important; outline: 1.5px solid var(--primary); }

/* View-profile hint on desktop hover */
.lb-row .lb-view-hint {
  position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
  font-size: .67rem; font-weight: 600; color: var(--primary);
  opacity: 0; transition: opacity var(--dur); pointer-events: none;
  white-space: nowrap;
}
.lb-row:hover .lb-view-hint { opacity: 1; }

/* Podium items — clickable */
.pod-item {
  cursor: pointer;
  transition: transform 150ms var(--ease);
}
.pod-item:hover { transform: translateY(-3px); }

/* ════════════════════════════════════
   PROFILE MODAL OVERLAY
════════════════════════════════════ */
.pm-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10, 20, 15, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
  will-change: opacity;
}
.pm-overlay.open {
  opacity: 1; pointer-events: all;
}

/* ── Card ── */
.pm-card {
  background: var(--surface);
  border-radius: 20px;
  width: 100%; max-width: 448px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(24px) scale(.97);
  opacity: 0;
  transition: transform 220ms var(--ease), opacity 220ms ease;
  will-change: transform, opacity;
  position: relative;
}
.pm-overlay.open .pm-card { transform: none; opacity: 1; }
.pm-card::-webkit-scrollbar { width: 3px; }
.pm-card::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Mobile → bottom sheet */
@media (max-width: 640px) {
  .pm-overlay { align-items: flex-end; padding: 0; }
  .pm-card {
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    transform: translateY(100%);
  }
  .pm-overlay.open .pm-card { transform: none; }
}

/* ── Close button ── */
.pm-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); font-size: 1rem; font-weight: 700;
  transition: background var(--dur), color var(--dur);
}
.pm-close:hover { background: var(--border); color: var(--t1); }

/* ── Hero banner ── */
.pm-hero {
  background: linear-gradient(135deg, var(--primary) 0%, #1a5c43 60%, #0b2a1f 100%);
  border-radius: 20px 20px 0 0;
  padding: 32px 24px 40px;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; position: relative;
  overflow: hidden;
}
/* Subtle pattern overlay */
.pm-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.pm-av-wrap {
  position: relative; display: inline-flex;
}
.pm-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff;
  overflow: hidden; flex-shrink: 0;
}
.pm-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pm-rank-badge {
  position: absolute; bottom: -4px; right: -4px;
  background: var(--gold); color: #fff;
  border: 2px solid var(--surface);
  border-radius: 20px; padding: 2px 8px;
  font-size: .65rem; font-weight: 800; line-height: 1.4;
  white-space: nowrap;
}
.pm-rank-badge.rank1 { background: #C9A84C; }
.pm-rank-badge.rank2 { background: #9aa8b4; }
.pm-rank-badge.rank3 { background: #c07c4a; }

.pm-name {
  font-family: var(--f-serif); font-size: 1.25rem;
  font-weight: 700; color: #fff; line-height: 1.2;
}
.pm-sub-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
}
.pm-country {
  font-size: .8rem; color: rgba(255,255,255,.75);
  display: flex; align-items: center; gap: 4px;
}
.pm-you-pill {
  font-size: .62rem; font-weight: 700; background: rgba(255,255,255,.2);
  color: #fff; border-radius: 20px; padding: 2px 8px; letter-spacing: .5px;
}

/* ── Body ── */
.pm-body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 18px; }

/* ── Stat pills ── */
.pm-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
}
.pm-stat {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pm-stat-val {
  font-size: 1.25rem; font-weight: 800; color: var(--t1); line-height: 1;
}
.pm-stat-lbl {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--t3);
}
.pm-stat.highlight-stat { border-color: var(--primary); background: var(--p-a); }
.pm-stat.highlight-stat .pm-stat-val { color: var(--primary); }

/* ── Level section ── */
.pm-section-label {
  font-size: .7rem; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px;
}
.pm-level-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pm-level-name {
  display: flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 700; color: var(--t1);
}
.pm-level-xp { font-size: .72rem; color: var(--t3); font-weight: 500; }
.pm-xp-track {
  height: 6px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.pm-xp-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--gold) 100%);
  transition: width 600ms cubic-bezier(.4,0,.2,1);
}

/* ── Badges ── */
.pm-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.pm-badge {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 10px;
  font-size: .72rem; font-weight: 600; color: var(--t2);
}
.pm-badge-icon { font-size: .9rem; }
.pm-badge.earned { background: var(--gold-a); border-color: rgba(200,169,81,.3); color: #8a6d28; }

/* ── Path tags ── */
.pm-paths { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-path-tag {
  display: flex; align-items: center; gap: 4px;
  background: var(--p-a); border: 1px solid rgba(15,61,46,.12);
  color: var(--primary); border-radius: 20px;
  padding: 5px 10px; font-size: .72rem; font-weight: 600;
}

/* ── Bio ── */
.pm-bio {
  font-size: .82rem; color: var(--t2); line-height: 1.55;
  font-style: italic; padding: 10px 12px;
  background: var(--bg); border-radius: var(--r);
  border-left: 3px solid var(--border);
}

/* ── Actions ── */
.pm-actions { display: flex; gap: 8px; padding-top: 4px; }
.pm-edit-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 11px 16px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--r); cursor: pointer;
  font-size: .82rem; font-weight: 700; font-family: var(--f-sans);
  text-decoration: none; transition: background var(--dur);
}
.pm-edit-btn:hover { background: #0d3327; }
.pm-close-btn {
  padding: 11px 16px; border: 1.5px solid var(--border);
  background: var(--bg); border-radius: var(--r);
  cursor: pointer; font-size: .82rem; font-weight: 600;
  color: var(--t2); font-family: var(--f-sans); transition: all var(--dur);
}
.pm-close-btn:hover { background: var(--border); }

/* ── Privacy note ── */
.pm-privacy {
  display: flex; align-items: center; gap: 6px;
  font-size: .68rem; color: var(--t3); padding-top: 4px;
}
.pm-privacy svg { flex-shrink: 0; }

/* ── Divider ── */
.pm-divider {
  height: 1px; background: var(--border); margin: 0;
}

/* ════════════════════════════════════
   USTAD SELECTION — ONBOARDING
════════════════════════════════════ */
.ustad-intro {
  text-align: center; margin-bottom: 20px;
}
.ustad-intro-icon { font-size: 2rem; margin-bottom: 6px; }
.ustad-intro-note {
  font-size: .72rem; color: var(--t3); font-style: italic;
  background: var(--bg); border-radius: var(--r); padding: 6px 12px;
  border-left: 3px solid var(--gold); display: inline-block; margin-top: 4px;
  line-height: 1.5;
}

.ustad-grid {
  width: 100%; max-width: 600px;
  display: flex; flex-direction: column; gap: 10px;
}
.ustad-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-l); padding: 14px 16px;
  cursor: pointer; display: flex; gap: 14px; align-items: flex-start;
  transition: border-color var(--dur), background var(--dur), transform 120ms var(--ease);
  text-align: left; width: 100%;
}
.ustad-card:hover {
  border-color: var(--primary); background: var(--p-b);
  transform: translateY(-1px);
}
.ustad-card.selected {
  border-color: var(--primary); background: var(--p-a);
  box-shadow: 0 0 0 3px rgba(15,61,46,.1);
}
.ustad-card.selected .uc-av { background: var(--primary); }

.uc-av {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  transition: background var(--dur);
}
.uc-body { flex: 1; min-width: 0; }
.uc-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.uc-name { font-size: .92rem; font-weight: 700; color: var(--t1); }
.uc-style-pill {
  font-size: .6rem; font-weight: 700; border-radius: 20px;
  padding: 2px 7px; letter-spacing: .3px;
  background: var(--gold-a); color: #8a6d28;
}
.uc-specialty { font-size: .72rem; font-weight: 600; color: var(--primary); margin-bottom: 5px; }
.uc-desc { font-size: .78rem; color: var(--t2); line-height: 1.5; margin-bottom: 8px; }
.uc-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.uc-tag {
  font-size: .62rem; font-weight: 600; border-radius: 20px;
  padding: 2px 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--t3);
}
.uc-tag.path-tag  { background: var(--p-a); color: var(--primary); border-color: rgba(15,61,46,.15); }
.uc-tag.lvl-beg   { background: rgba(39,174,96,.1);  color: #27ae60; }
.uc-tag.lvl-int   { background: rgba(200,169,81,.12); color: #a0803a; }
.uc-tag.lvl-adv   { background: rgba(139,30,45,.09);  color: #8b1e2d; }

.uc-selected-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; margin-top: 2px;
  opacity: 0; transition: opacity var(--dur);
}
.ustad-card.selected .uc-selected-check { opacity: 1; }
.uc-selected-check svg { color: #fff; width: 12px; height: 12px; }

/* Path filter for ustad grid */
.ustad-filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 14px; width: 100%;
}
.ustad-filter-btn {
  padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--surface); font-size: .72rem; font-weight: 600;
  color: var(--t2); cursor: pointer; font-family: var(--f-sans);
  transition: all var(--dur);
}
.ustad-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ustad-card.hidden { display: none; }

/* ── Ustad Attribution Pill (Dashboard) ── */
.ustad-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-a); border: 1px solid rgba(200,169,81,.25);
  border-radius: 20px; padding: 5px 12px;
  font-size: .72rem; font-weight: 600; color: #8a6d28;
}
.ustad-pill-icon { font-size: .9rem; }

/* ── Ustad Section in Profile Page ── */
.ustad-profile-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--r-l); padding: 16px;
  display: flex; gap: 14px; align-items: center;
}
.upc-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.upc-info { flex: 1; }
.upc-name { font-size: .9rem; font-weight: 700; color: var(--t1); }
.upc-style { font-size: .72rem; color: var(--t3); }
.upc-change {
  font-size: .72rem; font-weight: 600; color: var(--primary);
  background: var(--p-a); border: 1px solid rgba(15,61,46,.15);
  border-radius: var(--r-s); padding: 5px 10px; cursor: pointer;
  text-decoration: none; font-family: var(--f-sans); flex-shrink: 0;
}

/* ── Feedback Attribution Header ── */
.fb-ustad-attr {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r);
  background: var(--gold-a); border: 1px solid rgba(200,169,81,.2);
  font-size: .72rem; color: #8a6d28; font-weight: 500; margin-bottom: 12px;
}
.fb-ustad-attr strong { font-weight: 700; }

@media (max-width: 640px) {
  .ustad-grid { max-width: 100%; }
  .upc-change { padding: 4px 8px; font-size: .68rem; }
}

/* ════════════════════════════════════
   PROGRESS DASHBOARD — FULL PAGE
════════════════════════════════════ */
.progress-page { background: var(--bg); min-height: 100vh; padding-bottom: 80px; }
.progress-main { max-width: 640px; margin: 0 auto; padding: 16px 16px 100px; }

/* ── AI Status Card ── */
.ai-status-card {
  background: linear-gradient(135deg, var(--primary) 0%, #1a5c42 100%);
  border-radius: var(--r-l); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; position: relative; overflow: hidden;
  color: #fff;
}
.ai-status-card::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:140px; height:140px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.ai-status-card::after {
  content:''; position:absolute; bottom:-40px; right:40px;
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,.03);
}
.ais-icon { font-size:2.2rem; flex-shrink:0; position:relative;z-index:1; }
.ais-text { flex:1; position:relative;z-index:1; }
.ais-title { font-size:.65rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; opacity:.65; margin-bottom:5px; }
.ais-main { font-size:.88rem; font-weight:600; line-height:1.5; }
.ais-sessions { font-size:.65rem; opacity:.55; margin-top:5px; }

/* ── Metric Cards (3-col) ── */
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.metric-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-l); padding:14px 10px; text-align:center;
  transition:border-color var(--dur);
}
.metric-card.mc-weak {
  border-color:rgba(200,169,81,.4); background:rgba(200,169,81,.04);
}
.mc-val { font-size:1.55rem; font-weight:800; color:var(--t1); font-family:var(--f-serif); margin-bottom:2px; }
.mc-label { font-size:.64rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; }
.mc-trend { font-size:.7rem; font-weight:600; margin-top:5px; }
.mc-trend.up   { color:#27ae60; }
.mc-trend.down { color:var(--cta); }
.mc-trend.flat { color:var(--t3); }

/* ── Score Trend Chart ── */
.chart-section {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-l); padding:16px; margin-bottom:14px;
}
.chart-title-row {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.chart-legend { display:flex; gap:10px; flex-wrap:wrap; }
.chart-legend-item { display:flex; align-items:center; gap:5px; font-size:.64rem; color:var(--t3); }
.chart-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.chart-empty {
  text-align:center; padding:32px 20px; color:var(--t3); font-size:.8rem; line-height:1.6;
}

/* ── Roadmap ── */
.roadmap-section {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-l); padding:16px; margin-bottom:14px;
}
.roadmap-track { position:relative; padding-left:34px; }
.roadmap-track::before {
  content:''; position:absolute; left:11px; top:10px; bottom:10px;
  width:2px; background:linear-gradient(to bottom, var(--primary) 0%, var(--border) 100%);
}
.milestone {
  position:relative; margin-bottom:20px;
  display:flex; align-items:flex-start; gap:12px;
}
.milestone:last-child { margin-bottom:0; }
.ms-dot {
  position:absolute; left:-34px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; border:2px solid var(--border);
  background:var(--bg); flex-shrink:0; top:0;
  transition:background var(--dur), border-color var(--dur);
}
.milestone.done   .ms-dot { background:var(--primary); border-color:var(--primary); color:#fff; font-size:.75rem; }
.milestone.active .ms-dot { background:var(--gold-a); border-color:var(--gold); }
.milestone.future .ms-dot { opacity:.5; }
.ms-body { flex:1; }
.ms-title { font-size:.85rem; font-weight:700; color:var(--t1); margin-bottom:2px; }
.milestone.future .ms-title { color:var(--t3); font-weight:500; }
.ms-desc { font-size:.72rem; color:var(--t3); line-height:1.45; }
.milestone.active .ms-desc { color:var(--t2); }
.ms-badge {
  font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:20px;
  flex-shrink:0; align-self:flex-start;
}
.milestone.done   .ms-badge { background:rgba(15,61,46,.08); color:var(--primary); }
.milestone.active .ms-badge { background:var(--gold-a); color:#a0803a; }

/* ── AI Recommendations ── */
.ai-recs { margin-bottom:14px; }
.ai-recs-header {
  font-size:.7rem; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;
}
.ai-rec-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-l); padding:14px;
  margin-bottom:10px; display:flex; gap:12px; align-items:flex-start;
  transition:border-color var(--dur), transform 120ms;
}
.ai-rec-card:hover { border-color:rgba(15,61,46,.2); transform:translateY(-1px); }
.ai-rec-icon { font-size:1.5rem; flex-shrink:0; }
.ai-rec-body { flex:1; }
.ai-rec-title { font-size:.88rem; font-weight:700; color:var(--t1); margin-bottom:4px; }
.ai-rec-desc { font-size:.76rem; color:var(--t2); line-height:1.55; }
.ai-rec-ustad { font-size:.65rem; color:var(--t3); margin-top:6px; font-style:italic; }

/* ── Session History ── */
.sh-section {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-l); padding:16px; margin-bottom:14px;
}
.sh-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.sh-row:last-child { border-bottom:none; padding-bottom:0; }
.sh-num { font-size:.63rem; color:var(--t3); font-weight:700; width:22px; text-align:center; flex-shrink:0; }
.sh-path-badge {
  font-size:.62rem; font-weight:700; color:var(--primary);
  background:var(--p-a); padding:2px 7px; border-radius:20px;
  text-transform:capitalize;
}
.sh-avg { font-size:.92rem; font-weight:800; color:var(--t1); font-family:var(--f-serif); }
.sh-sub { font-size:.6rem; color:var(--t3); }

/* ── AI Coaching Card (Dashboard Practice) ── */
.ai-coach-card {
  background:linear-gradient(135deg, rgba(15,61,46,.05) 0%, rgba(200,169,81,.04) 100%);
  border:1.5px solid rgba(15,61,46,.15); border-radius:var(--r-l);
  padding:14px; margin-bottom:16px;
}
.ai-coach-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ai-coach-icon { font-size:1.5rem; }
.ai-coach-name { font-size:.82rem; font-weight:700; color:var(--primary); line-height:1.2; }
.ai-coach-label { font-size:.63rem; color:var(--t3); }
.ai-coach-msg {
  font-size:.79rem; color:var(--t2); line-height:1.6; font-style:italic;
  margin-bottom:10px; border-left:3px solid var(--gold);
  padding-left:10px; margin-left:2px;
}
.ai-coach-focus {
  background:var(--surface); border-radius:var(--r);
  padding:8px 12px; border:1px solid var(--border);
}
.ai-cf-label { font-size:.62rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:3px; }
.ai-cf-drill { font-size:.78rem; color:var(--t1); font-weight:600; line-height:1.4; }

/* ── Progress link in bottom nav ── */
.bn-wrap a.bn-btn, .bn-wrap button.bn-btn { font-size:.6rem; }

@media (max-width: 640px) {
  .metric-row { gap:8px; }
  .mc-val { font-size:1.3rem; }
  .roadmap-section { padding:14px; }
}

/* ════════════════════════════════════
   MULTI-USTAD EXPERIENCE STYLES
   ════════════════════════════════════ */

/* Onboarding Accordion List */
.ob-ustad-select-list {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 600px;
}
.ob-ustad-select-item {
  border: 1.5px solid var(--border); border-radius: var(--r-l);
  background: var(--surface); overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.ob-ustad-select-item.active {
  border-color: var(--primary);
  box-shadow: var(--sh);
}
.ob-ustad-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer; user-select: none;
  background: var(--surface); transition: background var(--dur);
}
.ob-ustad-header-row:hover {
  background: var(--p-b);
}
.ob-ustad-header-left {
  display: flex; align-items: center; gap: 10px;
}
.ob-ustad-category-icon { font-size: 1.4rem; }
.ob-ustad-category-name { font-size: .92rem; font-weight: 700; color: var(--t1); text-transform: capitalize; }
.ob-ustad-header-right {
  display: flex; align-items: center; gap: 8px; font-size: .8rem;
}
.ob-ustad-assigned-summary {
  font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 4px;
}
.ob-ustad-assigned-summary.empty {
  color: var(--t3); font-weight: 500; font-style: italic;
}
.ob-ustad-arrow {
  font-size: .8rem; color: var(--t3); transition: transform var(--dur);
}
.ob-ustad-select-item.active .ob-ustad-arrow {
  transform: rotate(180deg);
}

.ob-ustad-select-content {
  padding: 0 16px 16px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  max-height: 380px; overflow-y: auto; background: var(--bg);
}
.ob-ustad-select-content.hidden { display: none; }

/* Progress Filter Bar */
.pf-filter-bar {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pf-filter-bar::-webkit-scrollbar { display: none; }
.pf-filter-btn {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 6px 14px; font-size: .76rem; font-weight: 600; color: var(--t2);
  white-space: nowrap; transition: all var(--dur) var(--ease); cursor: pointer;
}
.pf-filter-btn:hover { border-color: var(--primary); }
.pf-filter-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Public Profile Modal Mappings */
.pm-learning-map {
  display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px;
}
.pm-learning-row {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 12px 14px;
}
.pm-learning-row-header {
  display: flex; align-items: center; justify-content: space-between;
}
.pm-learning-category {
  display: flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 700; color: var(--t1);
  text-transform: capitalize;
}
.pm-learning-ustad {
  display: flex; align-items: center; gap: 4px;
  font-size: .78rem; font-weight: 700; color: var(--primary);
}
.pm-learning-focus {
  font-size: .68rem; color: var(--t3); line-height: 1.4; border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 2px;
}

/* ================================================
   SECURE ADMIN PANEL & USTAD DASHBOARD STYLES
   ================================================ */

/* Login Overlay (Gate) */
.gate-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gate-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-l);
  width: 100%; max-width: 400px; padding: 32px 28px; box-shadow: var(--sh-l);
  text-align: center;
}
.gate-icon {
  font-size: 2.2rem; margin-bottom: 12px; display: inline-block;
}
.gate-title {
  font-family: var(--f-serif); font-size: 1.4rem; font-weight: 700; color: var(--t1); margin-bottom: 6px;
}
.gate-sub {
  font-size: .8rem; color: var(--t3); margin-bottom: 24px; line-height: 1.4;
}
.gate-form {
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.gate-field {
  display: flex; flex-direction: column; gap: 5px;
}
.gate-label {
  font-size: .7rem; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .5px;
}
.gate-input {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 10px 14px; font-size: .88rem; color: var(--t1); font-family: var(--f-sans);
  transition: border-color var(--dur);
}
.gate-input:focus {
  outline: none; border-color: var(--primary); background: var(--surface);
}
.gate-select {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 10px 14px; font-size: .88rem; color: var(--t1); font-family: var(--f-sans);
  cursor: pointer; transition: border-color var(--dur);
}
.gate-select:focus {
  outline: none; border-color: var(--primary);
}
.gate-error {
  color: #c0392b; font-size: .72rem; font-weight: 600; display: none; margin-top: 2px;
}
.gate-error.show { display: block; }

/* Admin/Ustad Portal Main Wrapper */
.portal-container {
  max-width: 900px; margin: 0 auto; padding: 24px 20px 80px;
}
.portal-header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; border-bottom: 1.5px solid var(--border); padding-bottom: 14px;
}
.portal-title-area {
  display: flex; align-items: center; gap: 10px;
}
.portal-role-badge {
  font-size: .6rem; font-weight: 700; background: var(--primary); color: #fff;
  padding: 2px 8px; border-radius: 12px; text-transform: uppercase; letter-spacing: .5px;
}
.portal-role-badge.ustad {
  background: var(--gold);
}
.portal-meta {
  font-size: .8rem; color: var(--t3);
}

/* Linear-like Tabs Navigation */
.portal-nav {
  display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
  padding-bottom: 10px; overflow-x: auto;
}
.portal-nav-btn {
  background: transparent; color: var(--t3); font-size: .84rem; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r); cursor: pointer;
  transition: all var(--dur) var(--ease); border: 1.5px solid transparent;
}
.portal-nav-btn:hover {
  color: var(--primary); background: var(--p-b);
}
.portal-nav-btn.active {
  color: var(--primary); background: var(--p-a); border-color: rgba(15,61,46,.12);
}

/* Dashboard Section Panels */
.portal-panel {
  display: none; animation: fadeIn .2s var(--ease);
}
.portal-panel.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mini Analytics Cards */
.portal-stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
  margin-bottom: 20px;
}
.portal-stat-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-l);
  padding: 16px 20px; position: relative;
}
.portal-stat-card::after {
  content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 3px; background: var(--border); border-radius: 99px;
}
.portal-stat-card.highlight::after {
  background: var(--primary);
}
.portal-stat-card.gold::after {
  background: var(--gold);
}
.ps-label { font-size: .65rem; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.ps-val { font-size: 1.6rem; font-weight: 800; color: var(--t1); font-family: var(--f-serif); line-height: 1.2; }
.ps-sub { font-size: .7rem; color: var(--t3); margin-top: 4px; }

/* Admin/Ustad Form Structures */
.portal-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 600px) {
  .portal-form-grid { grid-template-columns: 1fr; }
}
.portal-field {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px;
}
.portal-field.full-width {
  grid-column: 1 / -1;
}
.portal-input {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 9px 12px; font-size: .84rem; color: var(--t1); font-family: var(--f-sans);
  transition: border-color var(--dur); width: 100%;
}
.portal-input:focus {
  outline: none; border-color: var(--primary);
}
.portal-textarea {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 10px 12px; font-size: .84rem; color: var(--t1); font-family: var(--f-sans);
  transition: border-color var(--dur); width: 100%; min-height: 100px; resize: vertical;
}
.portal-textarea:focus {
  outline: none; border-color: var(--primary);
}

/* Linear-like Tables */
.portal-table-wrap {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-l);
  overflow-x: auto; margin-bottom: 20px;
}
.portal-table {
  width: 100%; border-collapse: collapse; text-align: left; font-size: .82rem;
}
.portal-table th {
  background: var(--bg); border-bottom: 1.5px solid var(--border);
  padding: 12px 16px; font-weight: 700; color: var(--t2); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.portal-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--t2); vertical-align: middle;
}
.portal-table tr:last-child td {
  border-bottom: none;
}
.portal-table tr:hover td {
  background: var(--bg);
}
.portal-table tr.suspended-row td {
  opacity: .5;
}
.status-pill {
  font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 12px; display: inline-block;
}
.status-pill.active { background: rgba(39,174,96,.1); color: #27ae60; }
.status-pill.suspended { background: rgba(192,57,43,.1); color: #c0392b; }

/* Prompt Configurations Parameter Range */
.param-range-row {
  display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: var(--r); padding: 8px 12px;
}
.param-range-label { font-size: .72rem; font-weight: 600; color: var(--t2); min-width: 60px; }
.param-range-slider { flex: 1; accent-color: var(--primary); cursor: pointer; height: 4px; }
.param-range-val { font-size: .76rem; font-weight: 700; color: var(--primary); min-width: 24px; text-align: right; }

/* Student Metrics Grid on Ustad Dashboard */
.student-metrics-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 640px) {
  .student-metrics-grid { grid-template-columns: 1fr; }
}
.student-metric-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-l);
  padding: 14px 16px; display: flex; gap: 12px; align-items: center;
}
.sm-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--border);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
  flex-shrink: 0; color: var(--primary);
}
.sm-info { flex: 1; min-width: 0; }
.sm-name-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.sm-name { font-size: .84rem; font-weight: 700; color: var(--t1); }
.sm-score { font-size: .9rem; font-weight: 800; color: var(--primary); font-family: var(--f-serif); }
.sm-detail-row { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; color: var(--t3); }
.sm-improvement { color: #8a6d28; font-weight: 600; }

/* Portal low-contrast Footer Links */
.portal-footer-links {
  display: flex; gap: 14px; justify-content: center; margin-top: 32px; padding-top: 18px;
  border-top: 1.5px dashed var(--border);
}
.portal-foot-link {
  font-size: .68rem; font-weight: 600; color: var(--t3); text-decoration: none; transition: color var(--dur);
}
.portal-foot-link:hover {
  color: var(--primary);
}

/* ================================================
   USTAD POETIC / SCHOLARLY BIOGRAPHY PROFILE PAGE
   ================================================ */
.ubio-page {
  background: #FAF8F5; min-height: 100vh;
}
.ubio-main {
  max-width: 640px; margin: 0 auto; padding: 24px 16px 80px;
}

/* Biography Header Card */
.ubio-hero-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-l);
  padding: 28px 24px; text-align: center; margin-bottom: 16px; box-shadow: var(--sh);
}
.ubio-avatar {
  width: 72px; height: 72px; border-radius: 50%; background: var(--p-a); border: 2px solid var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 14px;
}
.ubio-name {
  font-family: var(--f-serif); font-size: 1.5rem; font-weight: 700; color: var(--t1); margin-bottom: 4px;
}
.ubio-specialty {
  font-size: .76rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 12px;
}
.ubio-quote {
  font-family: var(--f-serif); font-size: .95rem; font-style: italic; color: var(--t2);
  line-height: 1.6; padding: 14px 20px; background: var(--bg); border-radius: var(--r);
  position: relative; max-width: 500px; margin: 0 auto 18px; border-left: 3px solid var(--gold);
}

/* Bio Content Card split */
.ubio-content-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-l);
  padding: 20px 24px; margin-bottom: 16px;
}
.ubio-section-title {
  font-family: var(--f-serif); font-size: 1rem; font-weight: 700; color: var(--t1); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.ubio-body-text {
  font-size: .8rem; color: var(--t2); line-height: 1.6; margin-bottom: 14px; text-align: justify;
}
.ubio-body-text:last-child { margin-bottom: 0; }

.ubio-highlight-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.ubio-highlight-item {
  display: flex; gap: 10px; align-items: flex-start;
}
.ubio-hi-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--p-a); border: 1.5px solid var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: .5rem; color: var(--primary); font-weight: 700; margin-top: 3px; flex-shrink: 0;
}
.ubio-hi-text {
  font-size: .78rem; color: var(--t2); line-height: 1.45;
}
.ubio-hi-text strong { color: var(--t1); }

/* Available tracks list */
.ubio-tracks-section {
  margin-top: 20px;
}
.ubio-track-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;
  transition: border-color var(--dur);
}
.ubio-track-card:hover { border-color: var(--primary); }
.ubio-track-left { display: flex; align-items: center; gap: 10px; }
.ubio-track-icon { font-size: 1.2rem; }
.ubio-track-title { font-size: .82rem; font-weight: 700; color: var(--t1); }
.ubio-track-meta { font-size: .68rem; color: var(--t3); display: flex; gap: 8px; margin-top: 2px; }
.ubio-track-btn {
  font-size: .72rem; font-weight: 600; padding: 5px 12px; border-radius: 12px;
  background: var(--p-a); color: var(--primary); cursor: pointer; transition: all var(--dur);
}
.ubio-track-btn:hover { background: var(--primary); color: #fff; }

/* SVG Analytics Chart */
.analytics-chart-svg {
  width: 100%; height: 120px; display: block; overflow: visible;
}
.chart-grid-line {
  stroke: var(--border); stroke-dasharray: 2 3; stroke-width: 1px;
}
.chart-path-line {
  fill: none; stroke: var(--primary); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round;
}
.chart-area-fill {
  fill: url(#chart-gradient); opacity: .12;
}
.chart-point {
  fill: var(--primary); stroke: var(--surface); stroke-width: 1.5px; cursor: pointer; transition: r 0.1s var(--ease);
}
.chart-point:hover { r: 5px; }
.chart-label-text {
  font-size: 7px; fill: var(--t3); font-weight: 600; font-family: var(--f-sans); text-anchor: middle;
}