/* ============================================================
   MuhaffizAI v4 — "Sighat al Jamea — MuhaffizAI V1"
   Design language: Islamic scholarly tradition meets
   precision software. Deep teal + antique gold on warm
   parchment. Generous whitespace, refined Arabic typography.
   ============================================================ */

/* ----------------------------------------------------------
   FONT FACE DECLARATIONS
   ---------------------------------------------------------- */

/* Google Fonts: Amiri + Libre Baskerville loaded via link in HTML */

/* QPC V1 Page fonts (604 pages) — font files live at /static/fonts/p{N}-v1.ttf */
/* font-display: block prevents Latin fallback on missing font file */

/* PERFORMANCE NOTE: We only load the page font for the currently-rendered page.
   The JS dynamically inserts @font-face or adds a <link> when a page is needed.
   Below we declare them all statically so the browser knows about them. */

/* We generate all 604 @font-face rules via a <style> tag injected by JS (app.js)
   at DOMContentLoaded — this avoids 604 static rules in this file costing parse time.
   The JS loop is in app.js: initPageFonts(). */


/* ----------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  /* Palette */
  --clr-teal-900:  #0a3d42;
  --clr-teal-800:  #0d4f56;
  --clr-teal-700:  #115f67;
  --clr-teal-600:  #166f79;
  --clr-teal-500:  #1a8290;
  --clr-teal-100:  #e0f2f4;
  --clr-teal-50:   #f0f9fa;

  --clr-gold-700:  #7a5410;
  --clr-gold-600:  #8b6914;
  --clr-gold-400:  #c49a2c;
  --clr-gold-300:  #d4ac4c;
  --clr-gold-100:  #f5edd3;
  --clr-gold-50:   #faf5e4;

  --clr-parchment: #faf8f3;
  --clr-paper:     #f4f1ea;
  --clr-border:    #d8d0b8;
  --clr-border-soft: #e8e2d6;
  --clr-ink:       #1a1a1a;
  --clr-ink-muted: #5a5244;
  --clr-ink-faint: #9e9484;

  /* Verdict colors */
  --clr-green:     #1b6b37;
  --clr-green-bg:  #e8f5ee;
  --clr-green-mid: #a8d5b5;
  --clr-yellow:    #8a5e00;
  --clr-yellow-bg: #fef6e0;
  --clr-yellow-mid:#d4b060;
  --clr-red:       #b71c1c;
  --clr-red-bg:    #fdecea;
  --clr-red-mid:   #e8a0a0;
  --clr-neutral:   #444;
  --clr-neutral-bg:#f5f5f5;

  /* Playing highlight */
  --clr-playing:   #b58620;
  --clr-playing-bg:#fff3c4;

  /* Typography — editorial stack (Cormorant for display, Inter Tight for UI) */
  --font-arabic:   'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
  --font-display:  'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-serif:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:       'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Spacing scale (8-point grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Layered premium shadows */
  --shadow-sm:   0 1px 3px rgba(10,61,66,0.04), 0 8px 24px -12px rgba(10,61,66,0.08);
  --shadow-md:   0 2px 8px rgba(10,61,66,0.07), 0 12px 32px -8px rgba(10,61,66,0.10);
  --shadow-lg:   0 4px 16px rgba(10,61,66,0.10), 0 24px 48px -16px rgba(10,61,66,0.14);
  --shadow-glow: 0 0 0 3px rgba(17,95,103,0.22);

  /* Easing */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durations */
  --dur-micro:  150ms;
  --dur-base:   250ms;
  --dur-page:   350ms;
  --dur-score:  700ms;
}

/* ----------------------------------------------------------
   RESET + BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--clr-parchment);
  color: var(--clr-ink);
  font-family: var(--font-ui);
  line-height: 1.6;
  min-height: 100dvh;
}

/* Visible focus rings — accessible */
:focus-visible {
  outline: 2px solid var(--clr-teal-600);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ----------------------------------------------------------
   LAYOUT SHELL
   ---------------------------------------------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ----------------------------------------------------------
   HEADER — compact 56px. Nav embedded inside header.
   ---------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    linear-gradient(180deg, rgba(10,61,66,0.98) 0%, rgba(10,61,66,0.94) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(212,172,76,0.32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  height: 76px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,237,211,0.10) 0%, rgba(212,172,76,0.04) 60%, transparent 80%);
  border: 1px solid rgba(212,172,76,0.40);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 6px 20px -8px rgba(0,0,0,0.45),
    inset 0 0 14px rgba(212,172,76,0.10);
  position: relative;
}
.brand-logo-frame::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(212,172,76,0.22);
  pointer-events: none;
}

.brand-logo {
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.30));
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}

.brand-arabic {
  font-family: var(--font-arabic);
  font-size: 24px;
  color: var(--clr-gold-300);
  line-height: 1.1;
  direction: rtl;
  font-feature-settings: "liga", "kern";
  margin-bottom: 2px;
}

.brand-english {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(245,237,211,0.62);
  font-feature-settings: "liga", "kern";
  font-weight: 500;
}

/* ----------------------------------------------------------
   PRIMARY NAV — now lives inside the header
   ---------------------------------------------------------- */
.primary-nav {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
}

.primary-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  height: 100%;
}

.primary-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(245,237,211,0.55);
  padding: 0 var(--sp-5);
  height: 100%;
  position: relative;
  transition: color var(--dur-base) var(--ease-standard);
}
.primary-nav-btn:hover { color: rgba(255,255,255,0.82); }
.primary-nav-btn.active { color: #fff; }

/* Animated underline bar */
.primary-nav-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--clr-gold-400);
  border-radius: 2px 2px 0 0;
  transition: transform var(--dur-base) var(--ease-standard),
              width var(--dur-base) var(--ease-standard);
  will-change: transform, width;
}

/* User pill */
.user-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  transition: background var(--dur-micro) var(--ease-standard);
  flex-shrink: 0;
}
.user-pill:hover { background: rgba(255,255,255,0.11); }

.user-pill .user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clr-gold-600);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-pill .username {
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}

.btn-logout {
  background: none;
  border: none;
  color: rgba(255,255,255,0.40);
  font-size: 11px;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  transition: color var(--dur-micro), background var(--dur-micro);
  font-family: var(--font-ui);
}
.btn-logout:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ----------------------------------------------------------
   NOTICE STRIP (slim, quiet, dismissable) ~30px
   ---------------------------------------------------------- */
.notice-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 6px var(--sp-5);
  border-bottom: 1px solid var(--clr-border-soft);
  background: transparent;
  transition: opacity var(--dur-base) var(--ease-standard),
              max-height var(--dur-base) var(--ease-standard),
              padding var(--dur-base) var(--ease-standard);
  overflow: hidden;
  /* Generous cap so wrapped text isn't clipped on narrow viewports;
     transitions to 0 on dismiss for the collapse animation. */
  max-height: 200px;
}
.notice-strip.dismissed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.notice-text {
  font-size: 11px;
  color: var(--clr-ink-faint);
  font-style: italic;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.notice-icon {
  flex-shrink: 0;
  opacity: 0.65;
  margin-top: 2px;
}

.notice-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--clr-ink-muted);
  white-space: nowrap;     /* keep "10–30 s" together */
}

/* Mobile: drop padding a touch and align dismiss to the top so it
   doesn't shift down when text wraps to two lines. */
@media (max-width: 640px) {
  .notice-strip {
    padding: 8px var(--sp-3);
    align-items: flex-start;
  }
  .btn-notice-dismiss {
    margin-top: 1px;
  }
}

.btn-notice-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--clr-ink-faint);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  opacity: 0.5;
  transition: opacity var(--dur-micro);
  flex-shrink: 0;
  font-family: var(--font-ui);
}
.btn-notice-dismiss:hover { opacity: 1; }

/* ----------------------------------------------------------
   PAGE CONTAINERS + TRANSITIONS
   ---------------------------------------------------------- */
.page {
  display: none;
  flex-direction: column;
  flex: 1;
}
.page.active {
  display: flex;
  animation: pageFadeSlide var(--dur-page) var(--ease-out-expo) both;
}

@keyframes pageFadeSlide {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  flex: 1;
}

/* ----------------------------------------------------------
   SUB-TAB STRIP
   ---------------------------------------------------------- */
.subtab-strip {
  display: flex;
  gap: 0;
  position: relative;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: var(--sp-4);
}

.subtab-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-ink-muted);
  padding: var(--sp-2) var(--sp-4);
  position: relative;
  transition: color var(--dur-micro) var(--ease-standard);
}
.subtab-btn:hover { color: var(--clr-teal-700); }
.subtab-btn.active { color: var(--clr-teal-800); font-weight: 600; }

.subtab-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--clr-teal-700);
  border-radius: 2px 2px 0 0;
  transition: transform var(--dur-base) var(--ease-standard),
              width var(--dur-base) var(--ease-standard);
  will-change: transform, width;
}

/* ----------------------------------------------------------
   FORM SECTIONS
   ---------------------------------------------------------- */
.form-section {
  display: none;
}
.form-section.active { display: block; }

/* .field: stacks label above select in a column */
.field {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: var(--sp-4);
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-2);
}

/* Arabic labels: above the dropdown, right-aligned, Arabic font */
.label-arabic-rtl {
  font-family: var(--font-arabic);
  font-size: 15px;
  color: var(--clr-ink-muted);
  direction: rtl;
  text-align: right;
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Custom native select — 40px height, custom chevron */
.form-select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 38px 0 var(--sp-3);
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--clr-ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a5244' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
}
.form-select:hover {
  border-color: var(--clr-teal-600);
}
.form-select:focus-visible {
  outline: none;
  border-color: var(--clr-teal-600);
  box-shadow: 0 0 0 2px rgba(17,95,103,0.30);
}

/* Select row — two selects side by side */
.select-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-3);
}
.select-row-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-3);
}

/* ----------------------------------------------------------
   INPUT ZONE — the compact form area
   ---------------------------------------------------------- */
.input-zone {
  background: #fff;
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  max-width: 860px;
}
.input-zone::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-teal-700), var(--clr-gold-400));
}
.input-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ----------------------------------------------------------
   RECORD ROW — horizontal layout inside input zone
   ---------------------------------------------------------- */
.record-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--clr-border-soft);
}

.waveform-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}

.waveform-canvas {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 48px;
  border-radius: var(--r-md);
  background: rgba(17,95,103,0.03);
  border: 1px solid var(--clr-border-soft);
}

/* Record timer inline */
.record-timer {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-red);
  letter-spacing: 0.04em;
  min-height: 18px;
  text-align: left;
}

/* Record button group */
.record-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* The big record button — smaller in the row context */
.btn-record {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(145deg, var(--clr-teal-600), var(--clr-teal-800));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(17,95,103,0.07);
  transition: background var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  animation: idlePulse 3s var(--ease-standard) infinite;
}
.btn-record:hover {
  background: linear-gradient(145deg, var(--clr-teal-700), var(--clr-teal-900));
  transform: scale(1.06);
  box-shadow: var(--shadow-lg), 0 0 0 12px rgba(17,95,103,0.09);
  animation: none;
}
.btn-record:active { transform: scale(0.96); animation: none; }
.btn-record:focus-visible {
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--clr-teal-600);
  animation: none;
}

@keyframes idlePulse {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(17,95,103,0.07); transform: scale(1.000); }
  50%  { box-shadow: var(--shadow-lg), 0 0 0 12px rgba(17,95,103,0.03); transform: scale(1.005); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(17,95,103,0.07); transform: scale(1.000); }
}

/* Recording state: faster red ring pulse */
.btn-record.recording {
  background: linear-gradient(145deg, #c62828, var(--clr-red));
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(183,28,28,0.12);
  animation: recordPulse 1.2s var(--ease-standard) infinite;
}
@keyframes recordPulse {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(183,28,28,0.14); }
  50%  { box-shadow: var(--shadow-lg), 0 0 0 18px rgba(183,28,28,0.04); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(183,28,28,0.14); }
}

.record-label {
  font-size: 11px;
  color: var(--clr-ink-muted);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

/* File upload — compact icon button */
.file-upload-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.file-upload-label-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px dashed var(--clr-border);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--clr-ink-muted);
  background: rgba(255,255,255,0.5);
  transition: border-color var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
.file-upload-label-compact:hover {
  border-color: var(--clr-teal-600);
  background: var(--clr-teal-50);
  color: var(--clr-teal-700);
}
.file-upload-input { display: none; }
.file-selected-name {
  font-size: 10px;
  color: var(--clr-teal-700);
  text-align: center;
  font-weight: 500;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mic permission error */
.mic-error {
  font-size: 12px;
  color: var(--clr-red);
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--clr-red-bg);
  border-radius: var(--r-md);
  max-width: 260px;
}

/* Submit button — primary action */
.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(160deg, var(--clr-teal-600), var(--clr-teal-800));
  color: #fff;
  border: none;
  border-radius: var(--r-lg);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-left: auto;
}
.btn-submit:hover {
  background: linear-gradient(160deg, var(--clr-teal-700), var(--clr-teal-900));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled {
  background: var(--clr-border);
  color: var(--clr-ink-faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.42;
}

/* ----------------------------------------------------------
   VERSE PREVIEW — neutral display before recording
   ---------------------------------------------------------- */
.verse-preview {
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-2);
  background: linear-gradient(160deg, var(--clr-gold-50), var(--clr-parchment));
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3);
  animation: pageFadeSlide var(--dur-base) var(--ease-out-expo);
  direction: rtl;
}
/* Compact preview images inside the input zone */
.input-zone .verse-preview .word-image,
.input-zone .words-row .word-image {
  height: 52px;
}

.verse-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
}

/* Per-word image row */
.words-row {
  direction: rtl;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2);
}
.word-image {
  height: 72px;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  transition: filter 300ms var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}
.word-image:hover {
  transform: scale(1.04);
  filter: brightness(1.08) !important;
}

/* Verdict color filters for word PNGs */
.word-image.verdict-green {
  filter: brightness(0) saturate(100%) invert(34%) sepia(78%) saturate(495%) hue-rotate(80deg) brightness(95%) contrast(91%);
}
.word-image.verdict-yellow {
  filter: brightness(0) saturate(100%) invert(45%) sepia(99%) saturate(744%) hue-rotate(15deg) brightness(98%) contrast(105%);
}
.word-image.verdict-red {
  filter: brightness(0) saturate(100%) invert(20%) sepia(63%) saturate(2000%) hue-rotate(345deg) brightness(94%) contrast(95%);
}
.word-image.verdict-neutral {
  /* keep default ink color */
}
/* Ayah-end marker */
.word-image-end {
  filter: none !important;
  opacity: 0.85;
}

/* Each verse block in a range preview */
.preview-verse-block {
  margin: var(--sp-2) 0;
}
.preview-verse-block .preview-ref-pill {
  display: block;
  width: fit-content;
  margin: 0 auto var(--sp-1);
}

/* verse ref pill inside range preview rows */
.preview-ref-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--clr-teal-700);
  background: var(--clr-teal-50);
  border: 1px solid var(--clr-teal-100);
  border-radius: var(--r-full);
  padding: 2px 8px;
  align-self: center;
  flex-shrink: 0;
  font-family: var(--font-ui);
  text-transform: uppercase;
  margin-inline-start: auto;
}

.preview-ellipsis {
  text-align: center;
  color: var(--clr-ink-faint);
  font-size: 18px;
  padding: var(--sp-1) 0;
  letter-spacing: 0.1em;
}

/* Dua preview uses letter flow, not word-glyph */
.verse-preview-dua .preview-dua-row {
  padding: var(--sp-1) 0;
  font-size: 24px;
}

/* ----------------------------------------------------------
   LOADER — 3-dot elegant loader
   ---------------------------------------------------------- */
.grading-overlay {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
}
.grading-overlay.visible { display: flex; }

.spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clr-teal-700);
  position: relative;
  margin: 0 18px;
  animation: dotFadeMid 1.2s var(--ease-standard) 0.2s infinite;
}
.spinner::before,
.spinner::after {
  content: '';
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clr-teal-700);
}
.spinner::before { left: -18px; animation: dotFade 1.2s var(--ease-standard) 0s   infinite; }
.spinner::after  { left:  18px; animation: dotFade 1.2s var(--ease-standard) 0.4s infinite; }
@keyframes dotFade {
  0%, 100% { opacity: 0.25; transform: scale(0.82); }
  40%       { opacity: 1;   transform: scale(1.08);  }
}
@keyframes dotFadeMid {
  0%, 100% { opacity: 0.25; transform: scale(0.82); }
  40%       { opacity: 1;   transform: scale(1.08);  }
}

.slow-grade-hint {
  font-size: 12px;
  color: var(--clr-ink-muted);
  text-align: center;
  max-width: 280px;
  line-height: 1.6;
  font-style: italic;
}

/* ----------------------------------------------------------
   RESULTS PANEL — two-column on desktop
   ---------------------------------------------------------- */
.results-panel {
  display: none;
}
.results-panel.visible { display: block; }

/* Error state */
.grade-error {
  display: none;
  padding: var(--sp-3) var(--sp-4);
  background: var(--clr-red-bg);
  border: 1px solid var(--clr-red-mid);
  border-radius: var(--r-lg);
  color: var(--clr-red);
  font-size: 13px;
  margin-bottom: var(--sp-4);
}
.grade-error.visible { display: flex; gap: var(--sp-3); align-items: flex-start; }

.btn-retry {
  background: none;
  border: 1px solid var(--clr-red);
  color: var(--clr-red);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  white-space: nowrap;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.btn-retry:hover { background: var(--clr-red); color: #fff; }

/* ===========================================================
   TWO-COLUMN RESULTS LAYOUT
   =========================================================== */
.results-columns {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-4);
  align-items: start;
  animation: pageFadeSlide var(--dur-base) var(--ease-out-expo) both;
}

/* Left col: verse + letter view */
.result-left {
  min-width: 0;
}

/* Right col: score + meta stack */
.result-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* Dua has no score panel — right col is narrower */
.results-columns--dua {
  grid-template-columns: 1fr 260px;
}
.result-right--dua {
  gap: var(--sp-3);
}

/* ----------------------------------------------------------
   SCORE PANEL — hero section, right column top
   ---------------------------------------------------------- */
.score-panel {
  background: linear-gradient(155deg, var(--clr-gold-50) 0%, #fff 60%, var(--clr-teal-50) 100%);
  border: 1px solid var(--clr-gold-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  animation: scoreReveal var(--dur-base) var(--ease-out-expo) both;
}
.score-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-gold-400), var(--clr-teal-700), var(--clr-gold-300));
}

@keyframes scoreReveal {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* "MARKS" micro label */
.score-b-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-gold-600);
  margin-bottom: var(--sp-1);
}

/* Hero score number + denominator */
.score-b-line {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.score-b-value {
  font-family: var(--font-serif);
  font-size: 80px;
  font-weight: 700;
  color: var(--clr-teal-800);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.score-b-denom {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--clr-ink-muted);
  font-weight: 400;
  align-self: flex-end;
  margin-bottom: 8px;
}

/* Score A click-to-expand */
.score-a-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--clr-ink-muted);
  cursor: pointer;
  user-select: none;
  border-top: 1px solid var(--clr-border-soft);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
}
.score-a-value {
  font-weight: 700;
  color: var(--clr-teal-700);
  font-size: 13px;
}
.score-a-chevron {
  font-size: 10px;
  color: var(--clr-ink-faint);
  transition: transform var(--dur-micro) var(--ease-standard);
  display: inline-block;
  margin-left: auto;
}
.score-a-line[aria-expanded="true"] .score-a-chevron { transform: rotate(180deg); }

/* Master name pill */
.master-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--clr-gold-50);
  border: 1px solid var(--clr-gold-100);
  font-size: 10px;
  font-style: italic;
  color: var(--clr-gold-700);
}

/* Score A breakdown chip row */
.score-a-breakdown {
  display: none;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--clr-border-soft);
}
.score-a-breakdown.visible { display: flex; }
/* Staggered chip reveal */
.score-a-breakdown.visible .breakdown-chip:nth-child(1) { animation: chipIn var(--dur-base) var(--ease-out-expo) 0ms   both; }
.score-a-breakdown.visible .breakdown-chip:nth-child(2) { animation: chipIn var(--dur-base) var(--ease-out-expo) 40ms  both; }
.score-a-breakdown.visible .breakdown-chip:nth-child(3) { animation: chipIn var(--dur-base) var(--ease-out-expo) 80ms  both; }
@keyframes chipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.breakdown-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--clr-teal-50);
  border: 1px solid var(--clr-teal-100);
  font-size: 12px;
}
.breakdown-chip-label {
  color: var(--clr-ink-muted);
  font-weight: 500;
}
.breakdown-chip-value {
  font-weight: 700;
  color: var(--clr-teal-700);
}

/* Confetti canvas */
.confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ----------------------------------------------------------
   AUDIO QUALITY WARNING BANNER — slim
   ---------------------------------------------------------- */
.audio-quality-banner {
  display: none;
  padding: var(--sp-2) var(--sp-3);
  background: var(--clr-yellow-bg);
  border: 1px solid var(--clr-yellow-mid);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--clr-yellow);
}
.audio-quality-banner.visible { display: block; }
.audio-quality-banner strong { display: block; margin-bottom: 4px; font-size: 11px; }
.audio-quality-banner ul { margin: 0 0 4px var(--sp-4); padding: 0; }
.aq-metrics {
  font-size: 11px;
  color: var(--clr-ink-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* ----------------------------------------------------------
   VERDICT COUNT PILLS
   ---------------------------------------------------------- */
.verdict-counts {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.verdict-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  animation: countPillIn 400ms var(--ease-out-expo) both;
}
.verdict-pill.green  { background: var(--clr-green-bg);  color: var(--clr-green); }
.verdict-pill.yellow { background: var(--clr-yellow-bg); color: var(--clr-yellow); }
.verdict-pill.red    { background: var(--clr-red-bg);    color: var(--clr-red); }
.verdict-pill .pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.verdict-pill.green  .pill-dot { background: var(--clr-green); }
.verdict-pill.yellow .pill-dot { background: var(--clr-yellow); }
.verdict-pill.red    .pill-dot { background: var(--clr-red); }

@keyframes countPillIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------
   VERSE CARD (word-glyph + letter expansion)
   ---------------------------------------------------------- */
.verse-card {
  background: #fff;
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: pageFadeSlide var(--dur-base) var(--ease-out-expo) both;
}

.verse-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--clr-border-soft);
  background: linear-gradient(135deg, var(--clr-teal-50), #fff);
}
.verse-card-ref {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--clr-teal-700);
  text-transform: uppercase;
  font-family: var(--font-ui);
}
.btn-expand {
  background: none;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 2px var(--sp-3);
  font-size: 11px;
  font-family: var(--font-ui);
  color: var(--clr-ink-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
.btn-expand:hover {
  background: var(--clr-teal-50);
  border-color: var(--clr-teal-600);
  color: var(--clr-teal-700);
}

/* Word-glyph view */
.word-glyph-row {
  padding: var(--sp-3) var(--sp-4);
  direction: rtl;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  justify-content: flex-start;
  align-items: center;
  line-height: 1;
  min-height: 60px;
}

/* Letter-level expanded view */
.letter-expand-row {
  direction: rtl;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--clr-border-soft);
  background: linear-gradient(160deg, var(--clr-paper), #fdfcf8);
  display: none;
  overflow: hidden;
}
.letter-expand-row.open {
  display: block;
  animation: expandDown 350ms var(--ease-standard);
}
@keyframes expandDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.letter-row-inner {
  font-family: var(--font-arabic);
  font-size: 28px;
  line-height: 2.2;
  direction: rtl;
  text-align: right;
}

/* Individual letter span */
.letter {
  display: inline;
  cursor: default;
  border-radius: 3px;
  padding: 0 1px;
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
  position: relative;
}
.letter.verdict-green  { color: var(--clr-green); }
.letter.verdict-yellow { color: var(--clr-yellow); }
.letter.verdict-red    { color: var(--clr-red); }
.letter.verdict-neutral { color: var(--clr-ink-muted); }
.letter.playing {
  background: var(--clr-playing-bg);
  color: var(--clr-playing);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--clr-gold-300);
}

/* Collapse button */
.btn-collapse {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--clr-border-soft);
  padding: var(--sp-1) var(--sp-4);
  font-size: 11px;
  color: var(--clr-ink-faint);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-ui);
  margin-top: var(--sp-2);
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
.btn-collapse:hover { background: var(--clr-teal-50); color: var(--clr-teal-700); }

/* ----------------------------------------------------------
   PLAYBACK CONTROLS — in right column
   ---------------------------------------------------------- */
.playback-bar {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--clr-teal-50);
  border: 1px solid var(--clr-teal-100);
}
.playback-bar.visible { display: flex; }

.btn-play {
  background: var(--clr-teal-700);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}
.btn-play:hover { background: var(--clr-teal-800); transform: scale(1.08); }

.audio-scrubber {
  flex: 1;
  accent-color: var(--clr-teal-700);
  cursor: pointer;
  height: 4px;
}

.audio-time {
  font-size: 11px;
  color: var(--clr-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   DEBUG BAR — small ghost buttons
   ---------------------------------------------------------- */
.debug-bar {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-top: var(--sp-2);
}

.btn-debug {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--clr-ink-faint);
  font-size: 11px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
.btn-debug:hover {
  border-color: var(--clr-teal-600);
  background: var(--clr-teal-50);
  color: var(--clr-teal-700);
}
.btn-debug:active {
  background: var(--clr-teal-100);
}

/* ----------------------------------------------------------
   DUA PAGE — letter-level only (no word-glyph)
   ---------------------------------------------------------- */
.dua-verse-card {
  background: #fff;
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: pageFadeSlide var(--dur-base) var(--ease-out-expo) both;
}
.dua-verse-header {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--clr-border-soft);
  background: linear-gradient(135deg, var(--clr-gold-50), #fff);
}
.dua-verse-ref {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--clr-gold-700);
  text-transform: uppercase;
  font-family: var(--font-ui);
}
.dua-letter-row {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-arabic);
  font-size: 28px;
  line-height: 2.2;
  direction: rtl;
  text-align: right;
}

/* ----------------------------------------------------------
   RANGE RESULTS STACK HEADER
   ---------------------------------------------------------- */
.range-summary {
  background: linear-gradient(135deg, var(--clr-teal-900), var(--clr-teal-800));
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  box-shadow: var(--shadow-md);
}
.range-summary-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}
.range-summary-value {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--clr-gold-300);
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------
   LOGIN PAGE
   ---------------------------------------------------------- */
.login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--clr-teal-900);
  padding: var(--sp-5);
}

.login-card {
  background: var(--clr-parchment);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.05);
  animation: pageFadeSlide var(--dur-page) var(--ease-out-expo) both;
}

.login-brand {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.login-brand img {
  height: 64px;
  width: auto;
  margin-bottom: var(--sp-3);
  object-fit: contain;
}

.login-brand-arabic {
  font-family: var(--font-arabic);
  font-size: 24px;
  color: var(--clr-teal-800);
  direction: rtl;
  display: block;
  margin-bottom: 4px;
}
.login-brand-english {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
}

.login-field {
  margin-bottom: var(--sp-4);
}
.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-ink-muted);
  margin-bottom: var(--sp-2);
}
.login-field input {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  font-size: 15px;
  font-family: var(--font-ui);
  color: var(--clr-ink);
  background: #fff;
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
.login-field input:focus-visible {
  outline: none;
  border-color: var(--clr-teal-600);
  box-shadow: var(--shadow-glow);
}

.btn-login {
  display: block;
  width: 100%;
  padding: var(--sp-4);
  background: linear-gradient(160deg, var(--clr-teal-600), var(--clr-teal-800));
  color: #fff;
  border: none;
  border-radius: var(--r-lg);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-md);
  transition: background var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  margin-top: var(--sp-2);
}
.btn-login:hover {
  background: linear-gradient(160deg, var(--clr-teal-700), var(--clr-teal-900));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-login:active { transform: translateY(0); }

.login-error {
  display: none;
  color: var(--clr-red);
  background: var(--clr-red-bg);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  margin-bottom: var(--sp-4);
  text-align: center;
}
.login-error.visible { display: block; }

/* ----------------------------------------------------------
   UTILITY
   ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.divider {
  height: 1px;
  background: var(--clr-border-soft);
  margin: var(--sp-4) 0;
}

.text-muted  { color: var(--clr-ink-muted); }
.text-small  { font-size: 13px; }
.text-center { text-align: center; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  color: var(--clr-ink-muted);
}
.empty-state-icon  { font-size: 36px; margin-bottom: var(--sp-3); opacity: 0.4; }
.empty-state-title { font-family: var(--font-serif); font-size: 17px; margin-bottom: var(--sp-2); }
.empty-state-body  { font-size: 13px; }

/* Each word glyph span (text fallback path, not image path) */
.word {
  font-family: var(--font-arabic);
  font-size: 36px;
  line-height: 1.8;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
  color: var(--clr-ink);
  padding: 0 3px;
  display: inline-block;
}
.word:hover { transform: scale(1.04); }
.word.verdict-green { color: var(--clr-green); }
.word.verdict-yellow { color: var(--clr-yellow); }
.word.verdict-red { color: var(--clr-red); }
.word.verdict-neutral { color: var(--clr-ink-muted); }

/* ----------------------------------------------------------
   REDUCED MOTION — kill all animations & transitions
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .spinner, .spinner::before, .spinner::after {
    opacity: 0.7 !important;
    transform: none !important;
  }
  .btn-record { animation: none !important; }
}

/* ----------------------------------------------------------
   RESPONSIVE — mobile single column (<1024px)
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .results-columns,
  .results-columns--dua {
    grid-template-columns: 1fr;
  }
  /* On mobile: right col (score) appears FIRST (above verse) */
  .result-left  { order: 2; }
  .result-right { order: 1; }
  .result-right--dua { order: 1; }

  .score-b-value { font-size: 64px; }
}

@media (max-width: 640px) {
  .app-header { padding: 0 var(--sp-3); }
  .brand-logo { height: 34px; }
  .brand-arabic { font-size: 15px; }
  .brand-english { display: none; }
  .page-inner { padding: var(--sp-3); }
  .notice-strip { padding: 5px var(--sp-3); }
  .score-b-value { font-size: 52px; }
  .word { font-size: 28px; }
  .letter-row-inner { font-size: 22px; }
  .dua-letter-row { font-size: 22px; }
  .login-card { padding: var(--sp-6) var(--sp-4); }
  .input-zone { padding: var(--sp-3); }
  .record-row { flex-wrap: wrap; }
  .waveform-group { min-width: 100%; order: -1; }
  .word-image { height: 56px; }
}

@media (max-width: 400px) {
  .score-panel { padding: var(--sp-3) var(--sp-3); }
  .score-b-value { font-size: 44px; }
  .score-b-denom { font-size: 20px; }
  .word-image { height: 48px; }
}

/* ----------------------------------------------------------
   Large screen: give the verse card max height so it doesn't
   overflow the viewport when letter view is very long
   ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .result-left .verse-card {
    max-height: calc(100dvh - 220px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Ensure the select rows are within the max-width of the content */
  .page-inner {
    max-width: 1200px;
  }
}

/* ============================================================
   v4 REFINEMENT (May 2026) — Lammas-inspired editorial pass
   Animated background, split-screen login, redesigned upload,
   refined score panel, smooth result reveal.
   ============================================================ */

/* ---- Page-wide ambient background (home) -------------------- */
body {
  background:
    radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(212,172,76,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at -10% 110%, rgba(17,95,103,0.06) 0%, transparent 55%),
    var(--clr-parchment);
  font-family: var(--font-ui);
  letter-spacing: -0.005em;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* Faint editorial grid overlay */
.ambient-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10,61,66,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,61,66,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity: 0.6;
}

.app-shell { position: relative; z-index: 1; }

/* ---- Page-inner editorial enhancements ---------------------- */
.page-inner {
  padding: var(--sp-6) var(--sp-6);
}

/* Sub-tab strip — refined editorial feel */
.subtab-btn {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: var(--sp-3) var(--sp-4);
}
.subtab-btn.active { font-weight: 600; }

/* Form labels: more editorial */
.label-arabic-rtl {
  font-size: 17px;
}
.form-select {
  font-family: var(--font-ui);
  font-size: 14px;
  height: 44px;
  border-radius: var(--r-md);
}

/* Input zone: warmer, more editorial framing */
.input-zone {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(250,248,243,0.92) 100%);
  border: 1px solid rgba(216,208,184,0.55);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 3px rgba(10,61,66,0.04),
    0 24px 48px -28px rgba(10,61,66,0.18);
  max-width: 920px;
  backdrop-filter: blur(8px);
}
.input-zone::before {
  height: 3px;
  background: linear-gradient(90deg, var(--clr-gold-400) 0%, var(--clr-teal-700) 50%, var(--clr-gold-400) 100%);
  opacity: 0.85;
}

/* Record row: a bit more breathing room */
.record-row {
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
}
.record-or {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--clr-ink-faint);
  padding: 0 2px;
  align-self: center;
  letter-spacing: 0.04em;
}

/* ---- File upload zone (new, larger, fills green when ready) -- */
.file-upload-zone {
  flex: 1 1 220px;
  min-width: 200px;
  display: flex;
  align-items: stretch;
  border: 1.5px dashed rgba(17,95,103,0.30);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(240,249,250,0.55));
  cursor: pointer;
  transition:
    border-color 200ms var(--ease-standard),
    background 200ms var(--ease-standard),
    box-shadow 200ms var(--ease-standard),
    transform 200ms var(--ease-out-expo);
  overflow: hidden;
}
.file-upload-zone:hover {
  border-color: var(--clr-teal-600);
  background:
    linear-gradient(180deg, rgba(224,242,244,0.55), rgba(240,249,250,0.85));
  box-shadow: 0 6px 20px -10px rgba(17,95,103,0.25);
  transform: translateY(-1px);
}
.file-upload-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  color: var(--clr-ink-muted);
}
.file-upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(17,95,103,0.08);
  color: var(--clr-teal-700);
  flex-shrink: 0;
  transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard), transform 250ms var(--ease-overshoot);
}
.file-upload-zone:hover .file-upload-icon {
  background: var(--clr-teal-700);
  color: #fff;
  transform: scale(1.06);
}
.file-upload-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.file-upload-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-ink);
  letter-spacing: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.file-upload-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--clr-ink-faint);
  letter-spacing: 0.04em;
}

/* SELECTED STATE — whole zone turns green, file name large */
.file-upload-zone.has-file {
  border-style: solid;
  border-color: var(--clr-green);
  background:
    linear-gradient(180deg, rgba(232,245,238,0.95) 0%, rgba(216,239,224,0.95) 100%);
  box-shadow:
    0 0 0 3px rgba(27,107,55,0.10),
    0 8px 22px -10px rgba(27,107,55,0.30);
  animation: uploadAccept 360ms var(--ease-out-expo);
}
.file-upload-zone.has-file .file-upload-icon {
  background: var(--clr-green);
  color: #fff;
  transform: scale(1.0);
}
.file-upload-zone.has-file .file-upload-title {
  color: var(--clr-green);
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: -0.005em;
  max-width: 360px;
}
.file-upload-zone.has-file .file-upload-hint {
  color: rgba(27,107,55,0.85);
  font-weight: 500;
}
@keyframes uploadAccept {
  0%   { transform: scale(0.985); }
  60%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}

/* Submit button: slightly subdued (auto-grade does the work now) */
.btn-submit {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: var(--sp-3) var(--sp-6);
  height: 48px;
}

/* ---- Score panel — always visible, more editorial -------- */
.score-panel {
  background:
    linear-gradient(155deg, var(--clr-gold-50) 0%, #ffffff 55%, rgba(224,242,244,0.55) 100%);
  border: 1px solid rgba(212,172,76,0.30);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-5);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 4px 14px -6px rgba(10,61,66,0.10),
    0 28px 56px -32px rgba(10,61,66,0.22);
}
.score-panel::before {
  height: 4px;
  background: linear-gradient(90deg, var(--clr-gold-400) 0%, var(--clr-teal-700) 50%, var(--clr-gold-400) 100%);
}
.score-b-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--clr-gold-700);
  letter-spacing: 0.18em;
}
.score-b-value {
  font-family: var(--font-display);
  font-size: 92px;
  font-weight: 600;
  color: var(--clr-teal-900);
  letter-spacing: -0.04em;
}
.score-b-denom {
  font-family: var(--font-display);
  font-size: 30px;
  font-style: italic;
  color: var(--clr-ink-muted);
}
.score-a-line {
  font-family: var(--font-ui);
  font-size: 12px;
}
.score-a-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--clr-teal-800);
  letter-spacing: -0.02em;
  line-height: 1;
}
.score-a-line .score-a-denom {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--clr-ink-faint);
}
.score-a-unavailable {
  font-style: italic;
  color: var(--clr-ink-faint);
  font-size: 12px;
}

/* ---- Range summary --------------------------------------- */
.range-summary-value {
  font-family: var(--font-display);
  font-size: 40px;
}

/* ---- Smooth, fast results reveal ------------------------- */
.results-panel {
  /* Hidden by default (no animation when not visible) */
  opacity: 0;
}
.results-panel.visible {
  display: block;
  opacity: 1;
}
.results-panel.visible .results-columns {
  animation: resultsReveal 380ms var(--ease-out-expo) both;
}
.results-panel.visible .score-panel {
  animation: resultPaneReveal 420ms var(--ease-out-expo) 0ms both;
}
.results-panel.visible .verse-card {
  animation: resultPaneReveal 460ms var(--ease-out-expo) 80ms both;
}
.results-panel.visible .verdict-counts {
  animation: resultPaneReveal 380ms var(--ease-out-expo) 160ms both;
}
.results-panel.visible .audio-quality-banner.visible {
  animation: resultPaneReveal 360ms var(--ease-out-expo) 220ms both;
}
.results-panel.visible .playback-bar.visible {
  animation: resultPaneReveal 360ms var(--ease-out-expo) 280ms both;
}
.results-panel.visible .debug-bar {
  animation: resultPaneReveal 320ms var(--ease-out-expo) 340ms both;
}
.results-panel.visible .verdict-pill {
  animation: pillFly 380ms var(--ease-overshoot) both;
}
.results-panel.visible .verdict-pill:nth-child(1) { animation-delay: 200ms; }
.results-panel.visible .verdict-pill:nth-child(2) { animation-delay: 240ms; }
.results-panel.visible .verdict-pill:nth-child(3) { animation-delay: 280ms; }

@keyframes resultsReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes resultPaneReveal {
  from { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes pillFly {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Letter spans pop-in when grades arrive */
.letter-row-inner .letter {
  animation: letterFade 260ms var(--ease-out-expo) both;
}
.letter-row-inner .letter:nth-child(8n+1) { animation-delay: 0ms; }
.letter-row-inner .letter:nth-child(8n+2) { animation-delay: 14ms; }
.letter-row-inner .letter:nth-child(8n+3) { animation-delay: 28ms; }
.letter-row-inner .letter:nth-child(8n+4) { animation-delay: 42ms; }
.letter-row-inner .letter:nth-child(8n+5) { animation-delay: 56ms; }
.letter-row-inner .letter:nth-child(8n+6) { animation-delay: 70ms; }
.letter-row-inner .letter:nth-child(8n+7) { animation-delay: 84ms; }
.letter-row-inner .letter:nth-child(8n+8) { animation-delay: 98ms; }
@keyframes letterFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Word images stagger in subtly */
.word-glyph-row .word-image {
  animation: wordFade 320ms var(--ease-out-expo) both;
}
@keyframes wordFade {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   LOGIN SPLIT-SCREEN
   ============================================================ */
.login-body {
  margin: 0;
  background: var(--clr-teal-900);
  min-height: 100dvh;
  font-family: var(--font-ui);
  overflow: hidden;
}

.login-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100dvh;
  width: 100%;
}

/* ---- LEFT: motif pane --------------------------------------- */
.login-motif {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 30% 40%, rgba(17,95,103,0.55) 0%, rgba(10,61,66,0) 60%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(212,172,76,0.10) 0%, transparent 55%),
    linear-gradient(160deg, #0a3d42 0%, #082e32 50%, #061f23 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  color: #f5edd3;
  isolation: isolate;
}

.login-motif::after {
  /* Soft vignette */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.30) 100%);
  pointer-events: none;
  z-index: 1;
}

.motif-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.motif-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  opacity: 0.85;
}
.motif-ring-outer {
  width: 1100px; height: 1100px;
  margin-left: -550px; margin-top: -550px;
  animation: motifSpin 90s linear infinite;
  opacity: 0.55;
}
.motif-ring-mid {
  width: 720px; height: 720px;
  margin-left: -360px; margin-top: -360px;
  animation: motifSpinReverse 110s linear infinite;
  opacity: 0.7;
}
.motif-star {
  position: absolute;
  left: 50%; top: 50%;
  width: 360px; height: 360px;
  margin-left: -180px; margin-top: -180px;
  animation: motifPulse 6s var(--ease-standard) infinite;
  filter: drop-shadow(0 0 30px rgba(212,172,76,0.20));
}

.motif-particles {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

@keyframes motifSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes motifSpinReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes motifPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.92; }
}

/* Brand block sitting over the motif */
.motif-brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: auto 0;
  animation: brandIn 900ms var(--ease-out-expo) 100ms both;
}
.motif-brand-logo {
  height: 124px;
  width: auto;
  margin-bottom: var(--sp-5);
  filter:
    drop-shadow(0 12px 28px rgba(0,0,0,0.40))
    drop-shadow(0 0 24px rgba(212,172,76,0.18));
}
.motif-brand-arabic {
  font-family: var(--font-arabic);
  font-size: 56px;
  color: var(--clr-gold-300);
  direction: rtl;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 14px rgba(0,0,0,0.30);
}
.motif-brand-rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,172,76,0.65), transparent);
  margin: var(--sp-3) auto;
}
.motif-brand-english {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  color: rgba(245,237,211,0.92);
  letter-spacing: 0.005em;
  margin-bottom: var(--sp-2);
}
.motif-brand-tag {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,237,211,0.45);
  font-weight: 500;
}

@keyframes brandIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.motif-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(245,237,211,0.55);
  letter-spacing: 0.02em;
}
.motif-footer-mark {
  font-family: var(--font-arabic);
  font-size: 22px;
  color: rgba(212,172,76,0.7);
}

/* ---- RIGHT: form pane --------------------------------------- */
.login-form-pane {
  position: relative;
  background: var(--clr-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7) var(--sp-6);
  overflow-y: auto;
}
.login-form-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 90%, rgba(212,172,76,0.06) 0%, transparent 50%),
    radial-gradient(circle at 95% 5%, rgba(17,95,103,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.login-form-inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  animation: formIn 700ms var(--ease-out-expo) 200ms both;
}
@keyframes formIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-form-header { margin-bottom: var(--sp-6); }
.login-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-gold-700);
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}
.login-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--clr-teal-900);
  margin: 0 0 var(--sp-3);
}
.login-subtitle {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--clr-ink-muted);
  margin: 0;
  line-height: 1.5;
}

.login-form { display: block; }

/* Override prior block-styled error to a softer inline one */
.login-error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  background: var(--clr-red-bg);
  border: 1px solid var(--clr-red-mid);
  border-radius: var(--r-md);
  color: var(--clr-red);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: 13px;
  font-family: var(--font-ui);
}
.login-error.visible { display: flex; }
.login-error svg { flex-shrink: 0; }

/* Login fields refined */
.login-field { margin-bottom: var(--sp-4); }
.login-field label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--clr-ink-muted);
}
.login-field input {
  font-family: var(--font-ui);
  font-size: 16px;
  height: 52px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
  letter-spacing: 0;
}
.login-field input::placeholder {
  color: var(--clr-ink-faint);
  font-style: italic;
}

.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  height: 56px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--clr-teal-700) 0%, var(--clr-teal-900) 100%);
  border: 1px solid rgba(245,237,211,0.06);
  margin-top: var(--sp-5);
  position: relative;
  overflow: hidden;
}
.btn-login::after {
  /* shine sweep on hover */
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(245,237,211,0.16), transparent);
  transition: left 600ms var(--ease-out-expo);
}
.btn-login:hover::after { left: 130%; }
.btn-login svg {
  transition: transform 200ms var(--ease-out-expo);
}
.btn-login:hover svg { transform: translateX(3px); }

.login-foot {
  text-align: center;
  margin-top: var(--sp-6);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--clr-ink-faint);
  text-transform: uppercase;
}

/* Login responsive: stack on small screens */
@media (max-width: 900px) {
  .login-split {
    grid-template-columns: 1fr;
  }
  .login-motif {
    min-height: 50vh;
    padding: var(--sp-6) var(--sp-5);
  }
  .motif-brand-logo { height: 88px; }
  .motif-brand-arabic { font-size: 42px; }
  .motif-brand-english { font-size: 22px; }
  .motif-ring-outer { width: 800px; height: 800px; margin-left: -400px; margin-top: -400px; }
  .motif-ring-mid { width: 520px; height: 520px; margin-left: -260px; margin-top: -260px; }
  .motif-star { width: 240px; height: 240px; margin-left: -120px; margin-top: -120px; }
  .login-form-pane {
    padding: var(--sp-6) var(--sp-5);
  }
  .login-title { font-size: 36px; }
}

@media (max-width: 480px) {
  .login-motif { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .motif-brand-logo { height: 72px; margin-bottom: var(--sp-3); }
  .motif-brand-arabic { font-size: 34px; }
  .motif-brand-english { font-size: 18px; }
  .motif-footer-text { font-size: 12px; }
}

/* Reduced motion: pause motif animations */
@media (prefers-reduced-motion: reduce) {
  .motif-ring-outer, .motif-ring-mid, .motif-star,
  .ambient-bg { animation: none !important; }
}

/* ============================================================
   Header sizing fix for new larger logo
   ============================================================ */
@media (max-width: 640px) {
  .app-header { height: 64px; padding: 0 var(--sp-4); }
  .brand-logo-frame { width: 48px; height: 48px; }
  .brand-logo { height: 36px; width: 36px; }
  .brand-arabic { font-size: 20px; }
  .brand-english { display: none; }
  .primary-nav-btn { font-size: 16px; padding: 0 var(--sp-3); }
}

/* Slightly tweaked record button: square in record mode */
.btn-record { width: 64px; height: 64px; }
.record-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
}
.record-timer { font-family: var(--font-ui); }

/* Verse card refinements */
.verse-card-ref, .dua-verse-ref {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* Page-wide editorial small caps */
.score-b-label { font-family: var(--font-ui); }

/* ============================================================
   IKHTEBAR — random verse-range button
   ============================================================ */
.ikhtebar-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.btn-ikhtebar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background:
    linear-gradient(135deg, var(--clr-gold-50) 0%, #fff 60%, var(--clr-teal-50) 100%);
  border: 1px solid rgba(212,172,76,0.45);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--clr-teal-900);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 6px 14px -8px rgba(212,172,76,0.32);
  transition:
    transform 200ms var(--ease-overshoot),
    box-shadow 200ms var(--ease-out-expo),
    border-color 200ms var(--ease-out-expo);
}
.btn-ikhtebar:hover {
  border-color: var(--clr-gold-400);
  transform: translateY(-1px) rotate(-0.4deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 12px 24px -10px rgba(212,172,76,0.40);
}
.btn-ikhtebar:active { transform: translateY(0); }
.btn-ikhtebar svg { color: var(--clr-gold-700); flex-shrink: 0; }

.ikhtebar-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--clr-ink-muted);
  font-style: italic;
}

/* ============================================================
   SCORE PANEL — penalty-rule chips beneath the big number
   ============================================================ */
.score-rule {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--clr-border-soft);
}
.score-rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--clr-border-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--clr-ink-muted);
}
.score-rule-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.score-rule-dot.dot-red    { background: var(--clr-red); }
.score-rule-dot.dot-yellow { background: var(--clr-yellow); }

/* ============================================================
   RANGE VERSE CARD — per-verse scores + audio + highlighter
   ============================================================ */
.range-verse-card {
  margin-bottom: var(--sp-4);
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(250,248,243,0.95) 100%);
  border-radius: var(--r-xl);
  border: 1px solid rgba(216,208,184,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 4px 14px -8px rgba(10,61,66,0.10),
    0 24px 48px -28px rgba(10,61,66,0.16);
  overflow: hidden;
  animation: resultPaneReveal 360ms var(--ease-out-expo) both;
}

.range-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background:
    linear-gradient(135deg, rgba(224,242,244,0.65) 0%, rgba(250,248,243,0.65) 100%);
  border-bottom: 1px solid var(--clr-border-soft);
}
.range-card-header .verse-card-ref {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--clr-teal-900);
  text-transform: none;
}

.range-card-scores {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.range-score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  border: 1px solid transparent;
}
.range-score-chip-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-ink-muted);
  margin-right: 2px;
}
.range-score-chip-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.range-score-chip-denom {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  color: var(--clr-ink-faint);
}

.range-score-b {
  background: linear-gradient(135deg, var(--clr-gold-50) 0%, #fff 100%);
  border-color: rgba(212,172,76,0.35);
}
.range-score-b .range-score-chip-value { color: var(--clr-teal-900); }

.range-score-a {
  background: linear-gradient(135deg, var(--clr-teal-50) 0%, #fff 100%);
  border-color: rgba(17,95,103,0.20);
}
.range-score-a .range-score-chip-value { color: var(--clr-teal-700); }

.range-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--clr-border-soft);
  background: rgba(250,248,243,0.55);
}
.range-card-breakdown {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.range-verse-card .playback-bar {
  margin: 0 var(--sp-4) var(--sp-4);
  border-radius: var(--r-md);
}

/* Make the range stack itself feel like an editorial column */
#qr-verse-stack {
  display: flex;
  flex-direction: column;
}

/* Stagger animation entries */
#qr-verse-stack > .range-verse-card:nth-child(1) { animation-delay:   0ms; }
#qr-verse-stack > .range-verse-card:nth-child(2) { animation-delay:  60ms; }
#qr-verse-stack > .range-verse-card:nth-child(3) { animation-delay: 120ms; }
#qr-verse-stack > .range-verse-card:nth-child(4) { animation-delay: 180ms; }
#qr-verse-stack > .range-verse-card:nth-child(5) { animation-delay: 240ms; }
#qr-verse-stack > .range-verse-card:nth-child(n+6) { animation-delay: 300ms; }

@media (max-width: 640px) {
  .range-card-header { padding: var(--sp-3); }
  .range-score-chip-value { font-size: 18px; }
  .range-score-chip-label  { font-size: 8px; }
  .range-card-scores { width: 100%; justify-content: flex-start; }
}

/* ============================================================
   END refinement section
   ============================================================ */