/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Core palette — warm Indian classical aesthetic (dark mode) */
  --bg:           hsl(20 18% 7%);
  --surface:      hsl(20 16% 11%);
  --surface2:     hsl(20 14% 16%);
  --border:       hsl(20 14% 18%);
  --text:         hsl(36 18% 92%);
  --text-muted:   hsl(36 12% 60%);

  /* Brand colours */
  --saffron:        hsl(32 85% 54%);
  --saffron-light:  hsl(36 75% 64%);
  --saffron-glow:   hsl(32 90% 58%);
  --indigo:         hsl(350 35% 32%);
  --indigo-light:   hsl(350 30% 45%);
  --terracotta:     hsl(12 55% 52%);
  --gold:           hsl(42 60% 50%);
  --maroon:         hsl(350 35% 32%);
  --sandalwood:     hsl(28 18% 40%);

  /* Semantic aliases matching the old API */
  --accent:   var(--saffron);
  --accent2:  hsl(32 75% 44%);
  --green:    hsl(150 50% 48%);
  --yellow:   hsl(38 80% 54%);
  --red:      hsl(0 55% 52%);

  /* Pitch quality */
  --pitch-stable:   hsl(150 50% 48%);
  --pitch-drift:    hsl(32 80% 54%);
  --pitch-unstable: hsl(0 55% 52%);

  /* Gradients */
  --gradient-hero:     linear-gradient(135deg, hsl(32 85% 54%) 0%, hsl(350 35% 34%) 100%);
  --gradient-card:     linear-gradient(180deg, hsl(20 16% 13%) 0%, hsl(20 16% 9%) 100%);
  --gradient-gold:     linear-gradient(135deg, hsl(38 60% 50%) 0%, hsl(32 85% 54%) 50%, hsl(42 65% 56%) 100%);
  --gradient-indigo:   linear-gradient(135deg, hsl(350 35% 32%) 0%, hsl(350 30% 42%) 100%);
  --gradient-spotlight: radial-gradient(ellipse 80% 60% at 50% 30%, hsl(32 85% 54% / 0.08) 0%, transparent 70%);

  /* Shadows */
  --shadow-soft:     0 4px 24px -6px hsl(0 0% 0% / 0.35);
  --shadow-glow:     0 0 48px -12px hsl(32 85% 54% / 0.25);
  --shadow-card:     0 2px 16px -4px hsl(0 0% 0% / 0.25);
  --shadow-gold:     0 4px 20px -4px hsl(38 60% 50% / 0.2);
  --shadow-elevated: 0 8px 32px -8px hsl(0 0% 0% / 0.4);

  /* Border radius */
  --radius:    10px;
  --radius-lg: 16px;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

html { font-feature-settings: "kern" 1, "liga" 1; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Mandala grain overlay */
  position: relative;
}

/* Background textures */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='180' fill='none' stroke='%23c4956a' stroke-width='0.5' opacity='0.04'/%3E%3Ccircle cx='200' cy='200' r='140' fill='none' stroke='%23c4956a' stroke-width='0.5' opacity='0.03'/%3E%3Ccircle cx='200' cy='200' r='100' fill='none' stroke='%23c4956a' stroke-width='0.5' opacity='0.04'/%3E%3Ccircle cx='200' cy='200' r='60' fill='none' stroke='%23c4956a' stroke-width='0.5' opacity='0.03'/%3E%3Cpath d='M200 20 L200 380 M20 200 L380 200 M60 60 L340 340 M340 60 L60 340' stroke='%23c4956a' stroke-width='0.3' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 400px 400px;
  opacity: 0.5;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

main, header, footer, section, div, article { position: relative; z-index: 2; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
}

a { color: var(--saffron); text-decoration: none; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  background: hsl(20 16% 9% / 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid hsl(var(--saffron, 32 85% 54%) / 0.15);
  box-shadow: 0 1px 12px -2px hsl(32 85% 54% / 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: .6rem; }
.logo-icon { font-size: 1.5rem; filter: drop-shadow(0 0 8px hsl(32 85% 54% / 0.4)); }
.logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-tagline { font-size: .72rem; color: var(--text-muted); margin-top: 2px; letter-spacing: .04em; }
.header-nav { display: flex; gap: .5rem; }
.nav-link {
  font-size: .88rem;
  color: var(--text-muted);
  padding: .3rem .75rem;
  border-radius: 8px;
  transition: color .2s, background .2s;
  border: 1px solid transparent;
}
.nav-link:hover { color: var(--saffron); background: hsl(32 85% 54% / 0.08); }
.nav-link.active {
  color: var(--saffron);
  background: hsl(32 85% 54% / 0.12);
  border-color: hsl(32 85% 54% / 0.25);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.main-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, hsl(20 16% 13%) 0%, hsl(20 16% 9%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: .75rem;
  color: var(--text);
}
.card-subtitle { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; margin-top: -.4rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1.25rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 500;
  transition: all .2s;
}
.btn-primary {
  background: var(--gradient-hero);
  color: hsl(36 18% 92%);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  opacity: .9;
  box-shadow: 0 0 24px -6px hsl(32 85% 54% / 0.5);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  border: 1px solid hsl(32 85% 54% / 0.3);
  color: var(--saffron);
}
.btn-outline:hover { border-color: var(--saffron); background: hsl(32 85% 54% / 0.08); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: hsl(36 18% 92% / 0.05); }
.btn-danger { background: hsl(0 55% 20%); color: var(--red); border: 1px solid hsl(0 55% 30%); }
.btn-danger:hover { background: hsl(0 55% 26%); }
.btn-record { background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
.btn-record.recording { background: hsl(0 55% 15%); border-color: var(--red); color: var(--red); }
.btn-full { width: 100%; margin-top: .75rem; padding: .75rem; font-size: 1rem; }
.btn-sm { padding: .3rem .75rem; font-size: .8rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
.field-group label { font-size: .85rem; color: var(--text-muted); letter-spacing: .01em; }
.input-field {
  background: hsl(20 14% 13%);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: .5rem .85rem;
  font-size: .9rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  width: 100%;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input-field:focus {
  border-color: hsl(32 85% 54% / 0.6);
  box-shadow: 0 0 0 3px hsl(32 85% 54% / 0.12);
}
textarea.input-field { resize: vertical; }
select.input-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c4956a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
select.input-field option { background: hsl(20 14% 13%); color: var(--text); }
.optional { font-size: .75rem; color: var(--text-muted); }
.error-msg { color: var(--red); font-size: .85rem; margin-top: .25rem; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: .25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: .5rem 1rem;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .88rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .2s;
  border-radius: 6px 6px 0 0;
}
.tab-btn.active { color: var(--saffron); border-bottom-color: var(--saffron); }
.tab-btn:hover:not(.active) { color: var(--text); background: hsl(36 18% 92% / 0.04); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Drop zone ────────────────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed hsl(32 85% 54% / 0.25);
  border-radius: var(--radius);
  padding: 2.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--saffron);
  background: hsl(32 85% 54% / 0.05);
}
.drop-icon { font-size: 2.5rem; margin-bottom: .6rem; filter: drop-shadow(0 0 8px hsl(32 85% 54% / 0.3)); }
.drop-zone p { color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem; }
.drop-zone small { font-size: .8rem; color: var(--text-muted); }
.file-info {
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--green);
  padding: .5rem .85rem;
  background: hsl(150 50% 48% / 0.1);
  border: 1px solid hsl(150 50% 48% / 0.2);
  border-radius: 8px;
}

/* ── Record ───────────────────────────────────────────────────────────────── */
.wave-canvas {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  background: hsl(20 18% 6%);
  display: block;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.record-controls { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.rec-timer { font-family: monospace; font-size: 1.1rem; color: var(--text-muted); }
audio {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  background: var(--surface2);
  outline: none;
  margin-top: .5rem;
  accent-color: var(--saffron);
  color-scheme: dark;
}

/* ── AI toggle ────────────────────────────────────────────────────────────── */
.ai-toggle-row { display: flex; align-items: center; margin-top: 1rem; }
.toggle-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text-muted);
}
.toggle-label input[type="checkbox"] { display: none; }
.toggle-switch {
  width: 42px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  transition: background .25s;
  flex-shrink: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left .25s, box-shadow .25s;
}
.toggle-label input:checked + .toggle-switch {
  background: var(--saffron);
  box-shadow: 0 0 12px hsl(32 85% 54% / 0.3);
}
.toggle-label input:checked + .toggle-switch::after { left: 21px; }

/* ── Status bar ───────────────────────────────────────────────────────────── */
.status-bar { padding: .75rem 1rem; border-radius: 10px; font-size: .9rem; margin-top: .75rem; }
.status-loading { background: hsl(32 85% 54% / 0.1); color: var(--saffron); border: 1px solid hsl(32 85% 54% / 0.2); }
.status-error   { background: hsl(0 55% 52% / 0.1); color: var(--red); border: 1px solid hsl(0 55% 52% / 0.2); }
.status-success { background: hsl(150 50% 48% / 0.1); color: var(--green); border: 1px solid hsl(150 50% 48% / 0.2); }

/* ── Result header ────────────────────────────────────────────────────────── */
.result-header-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--gradient-card);
  border-color: hsl(32 85% 54% / 0.2);
  box-shadow: var(--shadow-glow);
}
.result-raga-block { display: flex; flex-direction: column; gap: .25rem; }
.result-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.result-raga-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 700;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.result-confidence { font-size: .88rem; font-weight: 600; }
.conf-high   { color: var(--green); }
.conf-medium { color: var(--yellow); }
.conf-low    { color: var(--red); }
.target-match-banner {
  padding: .5rem .85rem;
  border-radius: 8px;
  font-size: .9rem;
}
.match-yes { background: hsl(150 50% 48% / 0.1); color: var(--green); border: 1px solid hsl(150 50% 48% / 0.2); }
.match-no  { background: hsl(38 80% 54% / 0.1); color: var(--yellow); border: 1px solid hsl(38 80% 54% / 0.2); }

/* ── AI Tutor card ────────────────────────────────────────────────────────── */
.tutor-card {
  border-color: hsl(32 85% 54% / 0.2);
  background: linear-gradient(135deg, hsl(20 16% 12% / 0.9), hsl(20 14% 9% / 0.8));
  box-shadow: var(--shadow-glow), var(--shadow-card);
}
.tutor-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.tutor-icon { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 0 8px hsl(32 85% 54% / 0.3)); }
.tutor-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.tutor-raga-label { font-size: .8rem; color: var(--text-muted); }
.tutor-assessment { color: var(--text-muted); font-size: .95rem; line-height: 1.75; margin-bottom: 1rem; }
.raga-context-box {
  background: hsl(32 85% 54% / 0.07);
  border-left: 3px solid var(--saffron);
  padding: .85rem 1rem;
  border-radius: 0 10px 10px 0;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Score ring */
.tutor-score-ring {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  position: relative;
  margin-left: auto;
}
.score-ring-svg { width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: var(--surface2); stroke-width: 3; }
.ring-fill {
  fill: none;
  stroke: var(--saffron);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray .6s ease;
  filter: drop-shadow(0 0 4px hsl(32 85% 54% / 0.4));
}
.ring-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .9rem;
  font-weight: 700;
  color: var(--saffron);
}

/* Feedback sections */
.feedback-section { margin-top: 1rem; }
.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.section-title.positive { color: var(--green); }
.section-title.warning  { color: var(--yellow); }
.section-title.tips     { color: var(--saffron); }
.feedback-list { padding-left: 1.25rem; }
.feedback-list li { font-size: .9rem; color: var(--text-muted); margin-bottom: .4rem; }
.positive-list li { color: var(--text); }
.tips-list { padding-left: 1.25rem; }
.tips-list li { font-size: .9rem; color: var(--text-muted); margin-bottom: .5rem; line-height: 1.55; }

/* Deviation items */
.deviations-list { display: flex; flex-direction: column; gap: .75rem; }
.deviation-item { border-radius: 10px; padding: .85rem; }
.deviation-item.sev-high   { background: hsl(0 55% 52% / 0.08); border: 1px solid hsl(0 55% 52% / 0.2); }
.deviation-item.sev-medium { background: hsl(38 80% 54% / 0.08); border: 1px solid hsl(38 80% 54% / 0.2); }
.deviation-item.sev-low    { background: hsl(36 12% 60% / 0.06); border: 1px solid hsl(36 12% 60% / 0.15); }
.dev-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.dev-param { font-weight: 600; font-size: .9rem; }
.dev-badge {
  font-size: .7rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dev-badge.sev-high   { background: hsl(0 55% 52% / 0.2); color: var(--red); }
.dev-badge.sev-medium { background: hsl(38 80% 54% / 0.2); color: var(--yellow); }
.dev-badge.sev-low    { background: hsl(36 12% 60% / 0.15); color: var(--text-muted); }
.dev-issue { font-size: .85rem; color: var(--text-muted); margin-bottom: .3rem; }
.dev-suggestion { font-size: .85rem; color: var(--text); }

/* ── Rankings ─────────────────────────────────────────────────────────────── */
.rankings-list { display: flex; flex-direction: column; gap: .5rem; }
.ranking-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.ranking-row.top-rank {
  border-color: hsl(32 85% 54% / 0.3);
  background: hsl(32 85% 54% / 0.07);
  box-shadow: 0 0 16px -6px hsl(32 85% 54% / 0.15);
}
.rank-pos { font-size: .8rem; color: var(--text-muted); width: 1.2rem; flex-shrink: 0; }
.rank-name { font-weight: 600; min-width: 90px; font-family: 'Playfair Display', Georgia, serif; }
.rank-scores { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.rank-score-pill {
  background: var(--gradient-gold);
  color: hsl(20 18% 8%);
  font-size: .8rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 999px;
}
.score-detail { font-size: .75rem; color: var(--text-muted); }
.rank-bar-wrap { flex: 1; background: var(--border); border-radius: 4px; height: 5px; overflow: hidden; }
.rank-bar { height: 100%; background: var(--gradient-gold); border-radius: 4px; transition: width .5s ease; }

/* ── Param grid ───────────────────────────────────────────────────────────── */
.param-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.param-item {
  background: var(--surface2);
  border-radius: 10px;
  padding: .85rem;
  border: 1px solid var(--border);
  transition: border-color .2s;
}
.param-item.param-ok  { border-color: hsl(150 50% 48% / 0.3); }
.param-item.param-off { border-color: hsl(0 55% 52% / 0.3); }
.param-name  { font-size: .78rem; color: var(--text-muted); margin-bottom: .25rem; letter-spacing: .02em; }
.param-value { font-size: 1.1rem; font-weight: 700; font-family: 'Playfair Display', Georgia, serif; }
.param-value small { font-size: .7rem; color: var(--text-muted); font-family: 'DM Sans', system-ui, sans-serif; }
.param-range  { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.param-status { font-size: .75rem; margin-top: .25rem; font-weight: 600; }
.param-ok .param-status  { color: var(--green); }
.param-off .param-status { color: var(--red); }

/* ── Features grid ────────────────────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.feat-item {
  display: flex;
  flex-direction: column;
  background: var(--surface2);
  padding: .65rem .85rem;
  border-radius: 10px;
  gap: .1rem;
  border: 1px solid var(--border);
}
.feat-label { font-size: .75rem; color: var(--text-muted); }
.feat-value { font-size: .9rem; font-weight: 600; }

/* ── Admin ────────────────────────────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: hsl(20 18% 5% / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.login-box {
  width: 100%;
  max-width: 420px;
  border-color: hsl(32 85% 54% / 0.2);
  box-shadow: var(--shadow-glow), var(--shadow-elevated);
}
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.admin-page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.admin-alert { padding: .75rem 1rem; border-radius: 10px; font-size: .9rem; margin-bottom: 1rem; }
.alert-success { background: hsl(150 50% 48% / 0.1); color: var(--green); border: 1px solid hsl(150 50% 48% / 0.2); }
.alert-error   { background: hsl(0 55% 52% / 0.1); color: var(--red); border: 1px solid hsl(0 55% 52% / 0.2); }

/* Raga admin grid */
.raga-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.raga-admin-card {
  background: linear-gradient(180deg, hsl(20 16% 13%) 0%, hsl(20 16% 9%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.raga-admin-card:hover {
  border-color: hsl(32 85% 54% / 0.25);
  box-shadow: 0 0 20px -8px hsl(32 85% 54% / 0.2);
}
.rac-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.rac-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.rac-badge {
  font-size: .7rem;
  background: hsl(32 85% 54% / 0.12);
  color: var(--saffron);
  padding: .15rem .55rem;
  border-radius: 999px;
  margin-right: .3rem;
  border: 1px solid hsl(32 85% 54% / 0.2);
}
.rac-time { font-size: .75rem; color: var(--text-muted); }
.rac-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.rac-desc { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; line-height: 1.55; }
.rac-scales { font-size: .8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.rac-params { font-size: .75rem; color: var(--text-muted); }
.empty-state { padding: 3rem; text-align: center; color: var(--text-muted); }
.loading-spinner-wrap { padding: 3rem; text-align: center; color: var(--text-muted); }
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--saffron);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Ornamental divider ───────────────────────────────────────────────────── */
.ornamental-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: .5rem 0;
}
.ornamental-divider::before,
.ornamental-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(32 85% 54% / 0.3), transparent);
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsl(20 18% 5% / 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 1rem;
}
.modal-box {
  background: linear-gradient(180deg, hsl(20 16% 13%) 0%, hsl(20 16% 9%) 100%);
  border: 1px solid hsl(32 85% 54% / 0.2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-elevated), var(--shadow-glow);
}
.modal-box-sm { max-width: 440px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.modal-close:hover { color: var(--text); background: hsl(36 18% 92% / 0.06); }
.modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

/* Modal tabs */
.modal-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.modal-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: .5rem .85rem;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .85rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .2s;
}
.modal-tab.active { color: var(--saffron); border-bottom-color: var(--saffron); }
.modal-tab:hover:not(.active) { color: var(--text); }
.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; }

/* Form grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-grid .full-width { grid-column: 1 / -1; }
.helper-text { font-size: .8rem; color: var(--text-muted); margin-bottom: .85rem; }

/* Chroma grid */
.chroma-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.chroma-cell { display: flex; flex-direction: column; gap: .2rem; }
.chroma-note {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chroma-note small { font-size: .65rem; }
.chroma-input { text-align: center; padding: .35rem .25rem; }

/* Pitch params editor */
.pitch-params-editor { display: flex; flex-direction: column; gap: .75rem; margin-bottom: .75rem; }
.param-editor-row {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  background: var(--surface2);
  padding: .75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.param-row-fields { display: grid; grid-template-columns: 1.5fr 2fr 1fr 1fr 1fr; gap: .5rem; flex: 1; }
.remove-param-btn { flex-shrink: 0; margin-bottom: 0; }

/* ── Upload card accent ───────────────────────────────────────────────────── */
.upload-card {
  border-color: hsl(32 85% 54% / 0.2);
  box-shadow: var(--shadow-card), 0 0 32px -16px hsl(32 85% 54% / 0.1);
}

/* ── Admin body ───────────────────────────────────────────────────────────── */
.admin-body { background: var(--bg); }

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px -8px hsl(32 85% 54% / 0.25); }
  50% { box-shadow: 0 0 32px -4px hsl(32 85% 54% / 0.45); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-breathe { animation: breathe 3s ease-in-out infinite; }
.animate-float   { animation: float 6s ease-in-out infinite; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-fade-in-up { animation: fade-in-up .4s ease forwards; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full-width { grid-column: 1; }
  .chroma-grid { grid-template-columns: repeat(4, 1fr); }
  .param-row-fields { grid-template-columns: 1fr 1fr; }
  .admin-toolbar { flex-direction: column; align-items: flex-start; }
  .ranking-row { flex-wrap: wrap; }
  .modal-box { max-height: 95vh; }
  .tutor-header { flex-wrap: wrap; }
  .tutor-score-ring { order: -1; }
  .header-inner { height: 56px; }
  .result-raga-name { font-size: 1.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPA PAGE SYSTEM
═══════════════════════════════════════════════════════════════════════════ */
.page { display: none; }
.page.active { display: block; }
.page-bottom-pad { height: 100px; }

/* ── Bottom Navigation ─────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 50;
  max-width: 520px;
  margin: 0 auto;
}
.bottom-nav-inner {
  position: relative;
  background: hsl(20 16% 10% / 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(36 18% 92% / 0.08);
  border-radius: 20px;
  padding: 6px 8px;
  box-shadow: var(--shadow-elevated);
}
.nav-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 14px;
  background: hsl(32 85% 54% / 0.12);
  box-shadow: var(--shadow-gold);
  transition: left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.nav-items {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 14px;
  transition: color .25s;
  color: var(--text-muted);
  z-index: 10;
  flex: 1;
}
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--saffron); }
.nav-item-icon {
  transition: transform .25s;
  line-height: 0;
}
.nav-item.active .nav-item-icon { transform: scale(1.12); }
.nav-item-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .25s;
}
.nav-item-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--saffron);
  opacity: 0;
  transition: opacity .25s;
}
.nav-item.active .nav-item-dot { opacity: 1; animation: glow-pulse 3s ease-in-out infinite; }

/* Admin link in header (hidden on small nav) */
.admin-link { font-size: .82rem; }

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}
.hero-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid hsl(32 85% 54% / 0.06);
}
.hero-circle-1 { width: 300px; height: 300px; top: -80px; right: -60px; border-color: hsl(32 85% 54% / 0.06); }
.hero-circle-2 { width: 220px; height: 220px; top: -40px; right: -20px; border-color: hsl(32 85% 54% / 0.04); }
.hero-circle-3 { width: 350px; height: 350px; bottom: -100px; left: -80px; border-color: hsl(350 35% 32% / 0.05); }
.hero-blur {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.hero-blur-right { width: 300px; height: 300px; top: 40px; right: -60px; background: hsl(32 85% 54% / 0.07); }
.hero-blur-left  { width: 360px; height: 360px; bottom: -80px; left: -80px; background: hsl(350 35% 32% / 0.05); }

.svara-decorations {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.svara {
  position: absolute;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: hsl(32 85% 54% / 0.04);
}

.tanpura-silhouette {
  position: absolute;
  right: -10px;
  top: 12%;
  opacity: 0.03;
  pointer-events: none;
  color: var(--text);
}

.hero-content {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4.5rem;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: hsl(20 16% 11% / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(36 18% 92% / 0.1);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}
.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--saffron);
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
}
.hero-shimmer {
  background-image: linear-gradient(
    110deg,
    hsl(32 85% 54%) 0%,
    hsl(42 65% 56%) 30%,
    hsl(36 75% 64%) 50%,
    hsl(42 65% 56%) 70%,
    hsl(32 85% 54%) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer-move 3s ease-in-out infinite;
}
@keyframes text-shimmer-move {
  0% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
.hero-subtitle-line { font-size: clamp(1.4rem, 4vw, 2.75rem); font-weight: 500; }

.hero-description {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 2.25rem;
  line-height: 1.8;
}

.hero-cta-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cta-pulse-ring {
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  background: hsl(32 85% 54% / 0.18);
  animation: cta-pulse-ring 4s ease-out infinite;
  pointer-events: none;
}
@keyframes cta-pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.btn-hero {
  font-size: 1.05rem;
  padding: .85rem 2rem;
  gap: .75rem;
  border-radius: 14px;
  position: relative;
  z-index: 1;
}

/* Waveform bars inside hero CTA */
.waveform-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.waveform-bars span {
  display: block;
  width: 3px;
  height: 100%;
  background: hsl(20 18% 8% / 0.85);
  border-radius: 2px;
  animation: waveform-bar 1.2s ease-in-out infinite;
}
.waveform-bars span:nth-child(1) { animation-delay: 0s; }
.waveform-bars span:nth-child(2) { animation-delay: .15s; }
.waveform-bars span:nth-child(3) { animation-delay: .3s; }
.waveform-bars span:nth-child(4) { animation-delay: .15s; }
.waveform-bars span:nth-child(5) { animation-delay: .4s; }
@keyframes waveform-bar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.hero-wave {
  position: relative;
  height: 60px;
  overflow: hidden;
  margin-top: -2px;
}
.hero-wave svg { position: absolute; bottom: 0; width: 100%; height: 100%; }

/* Home sections */
.home-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.section-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin-bottom: 2rem;
}
.section-subheading { font-size: .9rem; color: var(--text-muted); text-align: center; margin-top: .35rem; }
.ornamental-center { color: hsl(32 85% 54% / 0.5); font-size: .8rem; font-family: 'Playfair Display', Georgia, serif; }

/* Features grid */
.features-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.feature-card {
  padding: 1.75rem;
  border-radius: 18px;
  background: hsl(20 16% 11% / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(36 18% 92% / 0.07);
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.feature-card:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-3px);
  border-color: hsl(32 85% 54% / 0.2);
}
.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  color: hsl(20 18% 8%);
  box-shadow: var(--shadow-gold);
}
.feature-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.feature-desc { font-size: .88rem; color: var(--text-muted); line-height: 1.65; }

/* Philosophy */
.philosophy-card {
  padding: 1.75rem;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.philosophy-arch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 60px;
  border: 1px solid hsl(32 85% 54% / 0.08);
  border-radius: 0 0 60px 60px;
  border-top: none;
  pointer-events: none;
}
.philosophy-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--text); margin-bottom: .75rem; }
.philosophy-text { font-size: .9rem; color: var(--text-muted); line-height: 1.8; }
.philosophy-text strong { color: var(--text); font-weight: 600; }

/* page heading centered */
.page-heading-center { text-align: center; margin-bottom: 1.75rem; }

/* ══════════════════════════════════════════════════════════════════════════
   LEARN PAGE
═══════════════════════════════════════════════════════════════════════════ */
.learn-intro {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.learn-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: hsl(32 85% 54% / 0.12);
  border: 1px solid hsl(32 85% 54% / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saffron);
  flex-shrink: 0;
}
.learn-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.learn-desc { font-size: .88rem; color: var(--text-muted); line-height: 1.65; }

.learn-tradition-tabs { margin-bottom: 1rem; }
.learn-search-wrap { position: relative; margin-bottom: 1.25rem; }
.learn-search-icon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.learn-search-input { padding-left: 2.5rem; }

/* Raga cards */
.raga-cards-list { display: flex; flex-direction: column; gap: 1rem; }

.raga-edu-card {
  background: linear-gradient(180deg, hsl(20 16% 13%) 0%, hsl(20 16% 9%) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s;
}
.raga-edu-card:hover { border-color: hsl(32 85% 54% / 0.3); }

.rec-header {
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, hsl(32 85% 54% / 0.05), hsl(350 35% 32% / 0.05));
  border-bottom: 1px solid var(--border);
}
.rec-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.rec-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.rec-alt { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.rec-tradition-badge {
  font-size: .68rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .04em;
  padding: .2rem .65rem;
  border-radius: 999px;
  border: 1px solid hsl(32 85% 54% / 0.25);
  color: var(--saffron);
  background: hsl(32 85% 54% / 0.1);
  white-space: nowrap;
  flex-shrink: 0;
}
.rec-time {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.rec-time svg { color: var(--saffron); flex-shrink: 0; }

.rec-mood { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.rec-mood-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
}
.rec-mood-label svg { color: var(--saffron); }
.rec-mood-text { font-size: .85rem; color: var(--text-muted); line-height: 1.65; }

/* Accordion */
.rec-accordion { padding: .25rem 0; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-trigger {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  cursor: pointer;
  color: var(--text);
  transition: background .2s;
}
.acc-trigger:hover { background: hsl(36 18% 92% / 0.03); }
.acc-trigger-label { display: flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 500; }
.acc-trigger-label svg { color: var(--saffron); flex-shrink: 0; }
.acc-chevron {
  color: var(--text-muted);
  transition: transform .25s;
  flex-shrink: 0;
}
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-content {
  display: none;
  padding: 0 1.25rem .85rem;
}
.acc-item.open .acc-content { display: block; }
.acc-content p { font-size: .85rem; color: var(--text-muted); line-height: 1.7; }
.acc-content ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.acc-content ul li { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--text-muted); line-height: 1.55; }
.acc-bullet { color: var(--saffron); flex-shrink: 0; margin-top: .2rem; }
.acc-comp-item { font-size: .85rem; color: var(--text-muted); margin-bottom: .4rem; }
.acc-comp-item strong { color: var(--text); }
.acc-listening { font-style: italic; }

.raga-no-results { padding: 2.5rem; text-align: center; color: var(--text-muted); font-size: .9rem; }

/* ══════════════════════════════════════════════════════════════════════════
   PROGRESS PAGE
═══════════════════════════════════════════════════════════════════════════ */
.progress-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.progress-metric-card {
  padding: 1.1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.pm-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-icon-green  { background: hsl(150 50% 48% / 0.12); color: var(--green); border: 1px solid hsl(150 50% 48% / 0.2); }
.pm-icon-saffron { background: hsl(32 85% 54% / 0.12); color: var(--saffron); border: 1px solid hsl(32 85% 54% / 0.2); }
.pm-icon-gold   { background: hsl(42 60% 50% / 0.12); color: var(--gold); border: 1px solid hsl(42 60% 50% / 0.2); }
.pm-value { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1; }
.pm-label { font-size: .75rem; color: var(--text-muted); }

.recent-sessions-list { display: flex; flex-direction: column; gap: .6rem; }
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .85rem;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.session-raga { font-weight: 600; font-family: 'Playfair Display', Georgia, serif; font-size: .95rem; }
.session-date { font-size: .75rem; color: var(--text-muted); }
.session-score {
  font-size: .82rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: hsl(20 18% 8%);
  white-space: nowrap;
}

.insights-card { margin-top: 0; }
.insights-list { list-style: none; display: flex; flex-direction: column; gap: .85rem; padding: 0; }
.insight-item { display: flex; align-items: flex-start; gap: .75rem; font-size: .88rem; color: var(--text-muted); line-height: 1.6; }
.insight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.insight-dot-green  { background: var(--green); }
.insight-dot-saffron { background: var(--saffron); }
.insight-dot-indigo { background: var(--indigo-light); }

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE
═══════════════════════════════════════════════════════════════════════════ */
.settings-container { max-width: 640px; }

.settings-card { margin-bottom: 0; }
.settings-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  color: var(--text);
}
.settings-card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--text); }

/* Theme picker */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.theme-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: none;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
  color: var(--text);
}
.theme-btn:hover { border-color: hsl(32 85% 54% / 0.3); }
.theme-btn.active { border-color: var(--saffron); background: hsl(32 85% 54% / 0.08); box-shadow: var(--shadow-gold); }
.theme-emoji { font-size: 1.4rem; }
.theme-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.theme-desc { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }

/* Settings rows */
.settings-rows { display: flex; flex-direction: column; gap: .5rem; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.settings-row-info { display: flex; align-items: flex-start; gap: .75rem; color: var(--text-muted); }
.settings-row-label { font-size: .88rem; font-weight: 500; color: var(--text); }
.settings-row-sub { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.settings-divider { height: 1px; background: var(--border); margin: .25rem 0; }

/* About */
.about-text { display: flex; align-items: flex-start; gap: .75rem; color: var(--text-muted); font-size: .88rem; line-height: 1.7; }
.about-version { font-size: .75rem; color: var(--text-muted); }
.about-links { display: flex; gap: 1.25rem; margin-top: .85rem; flex-wrap: wrap; }
.about-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--text-muted);
  transition: color .2s;
}
.about-link:hover { color: var(--saffron); }

.settings-danger-card { border-color: hsl(0 55% 52% / 0.2); }
.settings-danger-title { color: var(--red); }

/* ── Raga theme CSS variable overrides ─────────────────────────────────── */
[data-raga-theme="yaman"] {
  --saffron: hsl(220 55% 58%);
  --saffron-light: hsl(220 45% 64%);
  --saffron-glow: hsl(42 65% 56%);
  --gradient-hero: linear-gradient(135deg, hsl(220 55% 58%) 0%, hsl(42 60% 50%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(42 60% 50%) 0%, hsl(220 55% 58%) 50%, hsl(42 65% 56%) 100%);
  --shadow-glow: 0 0 48px -12px hsl(220 55% 58% / 0.25);
  --shadow-gold: 0 4px 20px -4px hsl(220 55% 58% / 0.2);
  --accent: hsl(220 55% 58%);
  --accent2: hsl(220 55% 44%);
}
[data-raga-theme="bhairav"] {
  --saffron: hsl(18 75% 56%);
  --saffron-light: hsl(18 65% 64%);
  --saffron-glow: hsl(0 55% 55%);
  --gradient-hero: linear-gradient(135deg, hsl(18 75% 56%) 0%, hsl(0 50% 42%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(0 55% 45%) 0%, hsl(18 75% 56%) 50%, hsl(32 70% 58%) 100%);
  --shadow-glow: 0 0 48px -12px hsl(18 75% 56% / 0.25);
  --shadow-gold: 0 4px 20px -4px hsl(18 75% 56% / 0.2);
  --accent: hsl(18 75% 56%);
  --accent2: hsl(18 75% 44%);
}
[data-raga-theme="kalyani"] {
  --saffron: hsl(42 72% 54%);
  --saffron-light: hsl(42 65% 62%);
  --saffron-glow: hsl(38 75% 58%);
  --gradient-hero: linear-gradient(135deg, hsl(42 72% 54%) 0%, hsl(32 60% 48%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(36 60% 58%) 0%, hsl(42 72% 54%) 50%, hsl(48 80% 60%) 100%);
  --shadow-glow: 0 0 48px -12px hsl(42 72% 54% / 0.25);
  --shadow-gold: 0 4px 20px -4px hsl(42 72% 54% / 0.3);
  --accent: hsl(42 72% 54%);
  --accent2: hsl(42 72% 42%);
}

/* ── Responsive additions ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .features-row { grid-template-columns: 1fr; gap: .85rem; }
  .progress-metrics-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .pm-value { font-size: 1.4rem; }
  .theme-grid { grid-template-columns: 1fr; }
  .hero-content { padding: 2.5rem 1.25rem 3.5rem; }
  .home-section { padding: 2rem 1.25rem; }
  .bottom-nav { bottom: 10px; left: 10px; right: 10px; }
  .bottom-nav-inner { border-radius: 16px; }
  .nav-item { padding: 7px 8px; }
  .nav-item-label { font-size: 8px; }
  .settings-container { max-width: 100%; }
  .features-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .progress-metrics-grid { grid-template-columns: 1fr; }
}