/* =========================================================================
   CLE Speech Studio  —  THEME: EMERALD MANUSCRIPT  (light · scholarly)
   Deep emerald + teal with warm gold on sage-cream — a quiet research library.
   ---------------------------------------------------------------------------
   Drop-in replacement for static/css/style.css.
   All original class names, components and behaviour are preserved — this
   file only changes palette, background liveliness and motion.
   Urdu typeface (Nafees Nastaleeq) is embedded below and used for every
   Urdu / RTL surface automatically. No template change required.
   ========================================================================= */

/* ---- Urdu typeface (already shipped in static/fonts/) ---- */
@font-face {
  font-family: "Nafees Nastaleeq";
  src: url("../fonts/Nafees_Nastaleeq.ttf") format("truetype");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

:root {
  --lapis-900: #13332b;
  --lapis-800: #185043;
  --lapis-700: #1f6b5a;
  --lapis-600: #2c8270;
  --lapis-500: #3f9a86;
  --lapis-400: #73b4a4;
  --azure-300: #a7cdc3;
  --azure-100: #dcebe6;
  --azure-50: #e9f3ef;
  --gold-600: #9a7a26;
  --gold-500: #c69a3e;
  --gold-400: #dab964;
  --gold-300: #e8d394;
  --gold-100: #f3edd6;
  --paper: #f3f5f0;
  --paper-card: #fffefb;
  --paper-sunk: #eaeee5;
  --ink: #1b2a25;
  --ink-soft: #33473f;
  --muted: #637068;
  --line: #e3e8df;
  --line-cool: #dce8e2;
  --ok: #1f7a5a;
  --warn: #8a6712;
  --err: #b24641;
  --ring-color: rgba(63,154,134,.2);
  --on-primary: #ffffff;
  --on-gold: #241d06;
  --header-bg: rgba(248,250,246,.84);
  --header-line: var(--line);
  --card-line: var(--line);
  --card-blur: none;
  --input-bg: var(--paper-card);
  --rule-line: var(--azure-50);
  --placeholder: #a6bcb3;
  --btn-primary-bg: linear-gradient(135deg, var(--lapis-700), var(--lapis-600));
  --btn-disabled: #b4c3bd;
  --btn-disabled-text: #eef3f0;
  --gold-gradient: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  --gilt-gradient: linear-gradient(100deg, var(--gold-600), var(--gold-400), #efe0a8, var(--gold-500));
  --thumb-ring: #ffffff;
  --audio-bg: linear-gradient(135deg, var(--lapis-800), var(--lapis-700));
  --audio-line: var(--lapis-700);
  --audio-text: #ffffff;
  --audio-glow: radial-gradient(60% 120% at 12% 0%, rgba(218,185,100,.22), transparent 60%);
  --audio-icon-ring: rgba(218,185,100,.35);
  --wave-bar: var(--lapis-600);
  --wave-glow: rgba(198,154,62,.6);
  --aura-one: var(--lapis-400);
  --aura-two: var(--gold-300);
  --ok-bg: #e4f3ea;
  --ok-line: #c1e0ce;
  --err-bg: #f8edec;
  --err-line: #e6cecb;
  --warn-line: #e6d6a8;

  /* ---- back-compat aliases (templates + JS reference these) ---- */
  --blue-900: var(--lapis-900);
  --blue-700: var(--lapis-700);
  --blue-600: var(--lapis-600);
  --blue-500: var(--lapis-500);
  --blue-300: var(--azure-300);
  --blue-100: var(--azure-100);
  --blue-50:  var(--azure-50);
  --surface:  var(--paper);

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(19,31,48,.05);
  --shadow:    0 1px 3px rgba(19,31,48,.05), 0 10px 22px -16px rgba(19,31,48,.16);
  --shadow-lg: 0 4px 12px rgba(19,31,48,.06), 0 22px 44px -28px rgba(19,31,48,.22);
  --ring:      0 0 0 3px var(--ring-color);

  --display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --urdu: "Nafees Nastaleeq", "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   LIVING BACKGROUND  —  the signature atmosphere for this theme
   ========================================================================= */

body::before {
  content: ""; position: fixed; inset: -25%; z-index: -2;
  background:
    radial-gradient(38% 42% at 14% 10%, rgba(31,107,90,.22), transparent 60%),
    radial-gradient(34% 38% at 88% 16%, rgba(198,154,62,.20), transparent 60%),
    radial-gradient(42% 46% at 74% 88%, rgba(44,130,112,.20), transparent 62%),
    radial-gradient(30% 34% at 36% 72%, rgba(115,180,164,.16), transparent 60%),
    var(--paper);
  background-size: 200% 200%;
  animation: aurora 28s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 50% at 82% 4%, rgba(198,154,62,.10), transparent 55%),
    radial-gradient(60% 50% at 2% 98%, rgba(31,107,90,.10), transparent 55%);
  background-size: 160% 160%;
  animation: aurora2 36s ease-in-out infinite alternate-reverse;
  mix-blend-mode: multiply; opacity: .9;
}
@keyframes aurora {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 30% 60%; }
  50%  { background-position: 22% 16%, 72% 28%, 64% 78%, 46% 50%; }
  100% { background-position: 8% 28%, 92% 8%, 40% 96%, 24% 72%; }
}
@keyframes aurora2 { 0% { background-position: 0% 0%, 100% 100%; } 100% { background-position: 100% 30%, 0% 70%; } }


a { color: var(--lapis-500); text-decoration: none; transition: color .15s; }
a:hover { color: var(--lapis-700); }

.urdu { font-family: var(--urdu); direction: rtl; line-height: 2.2; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--header-line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .bar {
  max-width: 1180px; margin: 0 auto;
  padding: 13px 26px; display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { height: 40px; width: auto; display: block; mix-blend-mode: multiply; }
.brand .titles { line-height: 1.1; }
.brand .titles strong {
  display: block; font-family: var(--display);
  font-size: 21px; font-weight: 600; letter-spacing: .2px; color: var(--lapis-800);
}
.brand .titles span { font-size: 11.5px; color: var(--muted); letter-spacing: .3px; }
.header-spacer { flex: 1; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav button {
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); background: transparent; border: 0;
  padding: 8px 13px; border-radius: 999px; cursor: pointer; transition: all .15s;
}
.nav a:hover, .nav button:hover { background: var(--azure-50); color: var(--lapis-700); }
.nav a.active { background: var(--azure-100); color: var(--lapis-700); font-weight: 700; }

.quota-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--azure-50);
  border: 1px solid var(--line-cool);
  color: var(--lapis-700); font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
}
.quota-pill b { color: var(--lapis-900); font-weight: 800; }

.lang-toggle {
  border: 1px solid var(--line-cool); border-radius: 999px;
  overflow: hidden; display: inline-flex; background: var(--paper-card);
}
.lang-toggle button { padding: 6px 13px; font-size: 12.5px; font-weight: 700; border-radius: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: all .15s; }
.lang-toggle button:hover { background: var(--azure-50); }
.lang-toggle button.active { background: var(--lapis-700); color: var(--on-primary); }

/* ---------------------------------------------------------------- layout */
.page { max-width: 1180px; margin: 0 auto; padding: 34px 26px 72px; position: relative; z-index: 1; }
.page-narrow { max-width: 480px; }

.card {
  background: var(--paper-card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  animation: rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.card + .card { margin-top: 22px; }
.card h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--lapis-800); letter-spacing: .2px; }
.card .sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }

.section-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; }
.section-title h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 30px; color: var(--lapis-800); letter-spacing: .2px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 2.2px; font-size: 11px;
  color: var(--gold-600); font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ""; width: 18px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  background-size: 200% 100%;
  animation: shimmer-line 3.2s linear infinite;
}
@keyframes shimmer-line { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- forms */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; letter-spacing: .2px; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--line-cool);
  border-radius: var(--radius-sm); padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--lapis-500); box-shadow: var(--ring);
}
.field { margin-bottom: 17px; }
.field .hint, .hint { font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 5px; }

/* ---- the Urdu writing surface (signature element) ---- */
.compose {
  position: relative; border-radius: var(--radius);
  background: var(--paper-card);
  border: 1px solid var(--line-cool);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.compose:focus-within { border-color: var(--lapis-500); box-shadow: var(--ring); }
.compose textarea {
  border: 0; border-radius: 0; min-height: 210px; resize: vertical;
  padding: 24px 26px; font-family: var(--urdu); font-size: 31px; line-height: 2.45;
  direction: rtl; color: var(--ink);
  background: repeating-linear-gradient(transparent, transparent 65px, var(--rule-line) 65px, var(--rule-line) 66px);
}
.compose textarea::placeholder { color: var(--placeholder); }
.compose textarea:focus { box-shadow: none; }
.compose textarea.ltr { direction: ltr; font-family: var(--sans); font-size: 17px; line-height: 1.7; background: var(--paper-card); }
.compose .compose-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-top: 1px solid var(--line-cool);
  background: var(--azure-50); font-size: 12.5px; color: var(--muted);
}
.compose .compose-foot b { color: var(--lapis-700); font-weight: 800; }

/* ---- buttons ---- */
.btn {
  font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .2px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 11px 22px; cursor: pointer;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, filter .18s;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  position: relative; overflow: hidden;
}
/* sheen sweep on hover */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-primary-bg); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-primary:disabled { background: var(--btn-disabled); color: var(--btn-disabled-text); cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
.btn-primary:disabled::after { display: none; }
.btn-ghost { background: var(--paper-card); border-color: var(--line-cool); color: var(--lapis-700); }
.btn-ghost:hover { background: var(--azure-50); border-color: var(--azure-300); transform: translateY(-1px); }
.btn-danger { background: var(--paper-card); border-color: var(--err-line); color: var(--err); }
.btn-danger:hover { background: var(--err-bg); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-gold { background: var(--gold-gradient); color: var(--on-gold); box-shadow: var(--shadow-sm); }
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---- parameter panel ---- */
.params { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }
.param {
  border: 1px solid var(--line-cool); border-radius: var(--radius-sm);
  padding: 14px 16px; background: var(--paper-card);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.param:hover { border-color: var(--azure-300); box-shadow: var(--shadow-sm); }
.param.locked { opacity: .5; }
.param .phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.param .phead span { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.param .lock { font-size: 11px; color: var(--muted); }
.param .val { font-variant-numeric: tabular-nums; color: var(--lapis-700); font-weight: 700; font-size: 13px; }

/* refined range slider */
.param input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 999px; background: var(--azure-300); outline: none; }
.param input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--lapis-700); border: 2px solid var(--thumb-ring); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s; }
.param input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.param input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--lapis-700); border: 2px solid var(--thumb-ring); cursor: pointer; }

/* ---- result / audio ---- */
.result { margin-top: 22px; display: none; }
.result.show { display: block; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.audio-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--audio-bg);
  border: 1px solid var(--audio-line);
  border-radius: var(--radius); padding: 18px 20px; color: var(--audio-text);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.audio-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--audio-glow);
  opacity: .9;
}
.audio-card > * { position: relative; z-index: 1; }
.audio-card .ac-icon {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--gold-gradient);
  display: grid; place-items: center; color: var(--on-gold); font-size: 17px;
  box-shadow: 0 0 0 4px var(--audio-icon-ring);
  animation: pulse-icon 2.4s ease-in-out infinite;
}
@keyframes pulse-icon { 0%,100% { box-shadow: 0 0 0 4px var(--audio-icon-ring); } 50% { box-shadow: 0 0 0 9px transparent; } }
.audio-card audio { flex: 1; height: 40px; }
.audio-card .btn-ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.audio-card .btn-ghost:hover { background: rgba(255,255,255,.24); }

/* ---- on-screen Urdu keyboard ---- */
.keyboard { margin-top: 16px; border: 1px solid var(--line-cool); border-radius: var(--radius); background: linear-gradient(var(--paper-sunk), var(--paper-card)); padding: 14px; display: none; }
.keyboard.show { display: block; animation: rise .35s ease both; }
.kb-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; flex-wrap: wrap; }
.kb-key {
  min-width: 42px; height: 44px; padding: 0 11px;
  border: 1px solid var(--line-cool); background: var(--paper-card); border-radius: 10px;
  font-family: var(--urdu); font-size: 22px; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
  transition: transform .1s, background .12s, border-color .12s;
}
.kb-key:hover { background: var(--azure-50); border-color: var(--azure-300); transform: translateY(-2px); box-shadow: var(--shadow); }
.kb-key:active { transform: translateY(0); }
.kb-key.wide { min-width: 92px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--lapis-700); }
.kb-key.space { flex: 1; max-width: 320px; }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--paper-card); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; background: var(--azure-50); color: var(--lapis-800);
  font-weight: 600; padding: 12px 15px; border-bottom: 1px solid var(--line-cool); white-space: nowrap;
  letter-spacing: .2px;
}
tbody td { padding: 11px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--azure-50); }

/* ---- badges ---- */
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .2px; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-pending { background: var(--gold-100); color: var(--gold-600); }
.badge-err { background: var(--err-bg); color: var(--err); }
.badge-muted { background: var(--azure-50); color: var(--muted); }
.badge-admin { background: var(--lapis-700); color: var(--on-primary); }

/* ---- stats grid ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat {
  position: relative; background: var(--paper-card); border: 1px solid var(--card-line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .18s, box-shadow .18s;
  animation: rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-gradient); }
.stat .n { font-family: var(--display); font-size: 40px; font-weight: 600; color: var(--lapis-700); letter-spacing: -.5px; line-height: 1; }
.stat .l { font-size: 12.5px; color: var(--muted); margin-top: 8px; font-weight: 500; }
.stats .stat:nth-child(2) { animation-delay: .05s; }
.stats .stat:nth-child(3) { animation-delay: .1s; }
.stats .stat:nth-child(4) { animation-delay: .15s; }
.stats .stat:nth-child(5) { animation-delay: .2s; }
.stats .stat:nth-child(6) { animation-delay: .25s; }

/* ---- flash ---- */
.flashes { max-width: 1180px; margin: 18px auto 0; padding: 0 26px; position: relative; z-index: 1; }
.flash { padding: 12px 17px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 13.5px; border: 1px solid; font-weight: 500; animation: rise .4s ease both; }
.flash.success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash.error   { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.flash.warning { background: var(--gold-100); border-color: var(--warn-line); color: var(--warn); }

/* ---- misc ---- */
.row { display: flex; gap: 17px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }
.divider { height: 1px; background: var(--line); margin: 22px 0; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar .header-spacer { flex: 1; }
.inline-form { display: inline; }
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 10px 17px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--lapis-700); border-bottom-color: var(--gold-500); }
.tabs a:hover { color: var(--lapis-700); }

.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   LANDING (sign-in) — hero with the script→voice signature
   ===================================================================== */
.landing { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.landing-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 22px 30px;
}
.landing-top .brand .titles strong { color: var(--lapis-800); }
.landing-top .header-spacer { flex: 1; }

.hero {
  flex: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 12px 30px 40px;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -.4px;
  color: var(--lapis-900); margin: 0 0 22px;
}
.hero h1 em { font-style: italic; color: var(--lapis-600); }
.hero h1 .gilt {
  background: var(--gilt-gradient);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gilt-sweep 6s linear infinite;
}
@keyframes gilt-sweep { to { background-position: 220% center; } }
.hero .lead { font-size: 18px; color: var(--ink-soft); max-width: 30em; margin: 0 0 30px; }
.hero .features { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero .feature { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.hero .feature .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-100); animation: dot-pulse 2.6s ease-in-out infinite; }
.hero .feature:nth-child(2) .dot { animation-delay: .3s; }
.hero .feature:nth-child(3) .dot { animation-delay: .6s; }
.hero .feature:nth-child(4) .dot { animation-delay: .9s; }
@keyframes dot-pulse { 0%,100% { box-shadow: 0 0 0 3px var(--gold-100); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* sign-in card */
.signin {
  position: relative; z-index: 2;
  background: var(--paper-card);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg); padding: 32px 30px;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.signin h2 { font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--lapis-800); margin: 0 0 4px; }
.signin .s { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.signin .auth-foot { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* the waveform signature */
.wave-stage { position: relative; margin: 26px 0 2px; padding: 22px 0 4px; }
.wave-script {
  font-family: var(--urdu); direction: rtl; text-align: center;
  font-size: 38px; line-height: 1.6; color: var(--lapis-800); margin-bottom: 6px;
}
.waveform { display: flex; align-items: center; justify-content: center; gap: 4px; height: 70px; }
.waveform .bar {
  width: 4px; border-radius: 999px;
  background: var(--wave-bar);
  animation: wave 1.5s ease-in-out infinite; transform-origin: center;
}
.waveform .bar.gilt { background: var(--gold-gradient); box-shadow: 0 0 10px var(--wave-glow); }
@keyframes wave { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }

.wave-cap { text-align: center; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 14px; font-weight: 700; }

/* ambient drifting orbs behind the hero */
.landing .aura { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; }
.landing .aura.one { width: 460px; height: 460px; background: radial-gradient(var(--aura-one), transparent 70%); top: -120px; right: -70px; opacity: .42; animation: drift 16s ease-in-out infinite alternate; }
.landing .aura.two { width: 380px; height: 380px; background: radial-gradient(var(--aura-two), transparent 70%); bottom: -130px; left: -60px; opacity: .36; animation: drift 20s ease-in-out infinite alternate-reverse; }
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(70px, 50px) scale(1.12); }
}
.landing-foot { text-align: center; padding: 18px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); position: relative; z-index: 2; }

/* studio purpose strip */
.studio-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.studio-intro .lead { max-width: 46em; color: var(--muted); font-size: 14.5px; margin: 8px 0 0; }
.studio-intro h1 { font-family: var(--display); font-weight: 600; font-size: 31px; color: var(--lapis-800); margin: 0; letter-spacing: .2px; }

/* legacy auth-wrap (kept for any fallback) */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo img { height: 60px; mix-blend-mode: multiply; }
.auth-logo .t { margin-top: 10px; font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--lapis-800); }
.auth-logo .s { font-size: 12.5px; color: var(--muted); }
.auth-foot { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }

/* in-card notices (used inside sign-in / register cards) */
.note { font-size: 13px; padding: 10px 13px; border-radius: 10px; margin-bottom: 16px; border: 1px solid; }
.note-success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.note-error   { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.note-warning { background: var(--gold-100); border-color: var(--warn-line); color: var(--warn); }

/* permission row (admin user page) */
.perm-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-cool); border-radius: var(--radius-sm); background: var(--paper-card); margin: 0; font-weight: 400; }
.perm-row input { margin-top: 3px; }
.perm-row b { color: var(--ink); font-size: 13.5px; }

/* the اردو toggle label itself reads better in Nastaliq */
.lang-toggle button[data-lang="ur"] { font-family: var(--urdu); }

/* ===================================================================
   URDU MODE — when the whole UI flips to Urdu, every surface uses the
   Nastaliq face (Nafees Nastaleeq, with Noto Nastaliq as fallback).
   Latin-only bits (mono IDs, timestamps) stay in the mono face.
   =================================================================== */
body[dir="rtl"] { font-family: var(--urdu); }
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3,
body[dir="rtl"] .section-title h1, body[dir="rtl"] .studio-intro h1,
body[dir="rtl"] .hero h1, body[dir="rtl"] .signin h2, body[dir="rtl"] .card h2,
body[dir="rtl"] .brand .titles strong, body[dir="rtl"] .stat .n,
body[dir="rtl"] .lead, body[dir="rtl"] .sub, body[dir="rtl"] .signin .s,
body[dir="rtl"] label, body[dir="rtl"] .btn, body[dir="rtl"] .nav a, body[dir="rtl"] .nav button,
body[dir="rtl"] .eyebrow, body[dir="rtl"] .feature, body[dir="rtl"] .wave-cap,
body[dir="rtl"] .badge, body[dir="rtl"] th, body[dir="rtl"] td,
body[dir="rtl"] input, body[dir="rtl"] textarea, body[dir="rtl"] select,
body[dir="rtl"] .quota-pill, body[dir="rtl"] .note, body[dir="rtl"] .flash,
body[dir="rtl"] .perm-row, body[dir="rtl"] .perm-row b, body[dir="rtl"] .tabs a,
body[dir="rtl"] .auth-foot, body[dir="rtl"] .landing-foot, body[dir="rtl"] p {
  font-family: var(--urdu);
}
/* Nastaliq is tall — give headings room to breathe */
body[dir="rtl"] h1, body[dir="rtl"] .hero h1, body[dir="rtl"] .section-title h1,
body[dir="rtl"] .studio-intro h1, body[dir="rtl"] .signin h2, body[dir="rtl"] .card h2 { line-height: 1.7; }
body[dir="rtl"] .eyebrow { line-height: 2; }
/* keep machine data in latin mono even in Urdu mode */
body[dir="rtl"] .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* CRITICAL: letter-spacing and uppercase break Nastaliq letter-joining.
   Reset them everywhere Urdu is shown so characters connect correctly. */
body[dir="rtl"] *, .urdu, .wave-script, .compose textarea { letter-spacing: normal !important; }
body[dir="rtl"] .eyebrow, body[dir="rtl"] .wave-cap, body[dir="rtl"] .nav a,
body[dir="rtl"] .badge, body[dir="rtl"] th { text-transform: none; }
/* belt-and-braces: anything in RTL inherits the Urdu face unless it's mono */
body[dir="rtl"] *:not(.mono) { font-family: var(--urdu); }

/* Gradient-clipped text must stay solid in Urdu so Nastaliq renders crisp
   and the letter-joining is never affected by background-clip. */
body[dir="rtl"] .hero h1 .gilt {
  -webkit-text-fill-color: var(--gold-600); color: var(--gold-600);
  background: none; animation: none;
}

/* RTL layout flips */
body[dir="rtl"] .nav { flex-direction: row-reverse; }
body[dir="rtl"] thead th, body[dir="rtl"] tbody td { text-align: right; }
body[dir="rtl"] .eyebrow::before { background: linear-gradient(270deg, var(--gold-500), transparent); }
body[dir="rtl"] .stat::after { left: auto; right: 0; }
body[dir="rtl"] .hero { grid-template-columns: .85fr 1.15fr; }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
  body[dir="rtl"] .hero { grid-template-columns: 1fr; }
  .signin { order: 2; }
  .site-header .bar { flex-wrap: wrap; gap: 10px 14px; }
  .nav { flex-wrap: wrap; row-gap: 6px; }
  .studio-intro { flex-direction: column; align-items: stretch; }
}
@media (max-width: 720px) {
  .nav a, .nav button { padding: 7px 9px; font-size: 13px; }
  .compose textarea { font-size: 24px; padding: 18px 18px; line-height: 2.2; }
  .page { padding: 24px 16px 56px; }
  .card { padding: 20px 18px; }
  .landing-top, .hero { padding-left: 18px; padding-right: 18px; }
  .landing-top { flex-wrap: wrap; row-gap: 10px; }
  .wave-script { font-size: 28px; }
  .hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .hero .lead { font-size: 16px; }
  .params { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .quota-pill { font-size: 12px; padding: 5px 11px; }
  .signin { padding: 24px 20px; }
  .audio-card { flex-wrap: wrap; }
  .audio-card audio { width: 100%; flex: 1 1 100%; order: 3; }
}
@media (max-width: 440px) {
  .brand .titles strong { font-size: 17px; }
  .brand .titles span { display: none; }
  .stats { grid-template-columns: 1fr; }
  .kb-key { min-width: 34px; height: 40px; font-size: 19px; padding: 0 7px; }
  .kb-key.wide { min-width: 70px; }
  .hero .features { gap: 8px 16px; }
}

/* Accessibility: honour reduced-motion — kill every ambient animation. */
@media (prefers-reduced-motion: reduce) {
  *, body::before, body::after { animation: none !important; transition: none !important; }
  .waveform .bar { transform: scaleY(.6); }
  .hero h1 .gilt { -webkit-text-fill-color: var(--gold-600); color: var(--gold-600); background: none; }
}