/* DENGLISH PRO — design system v1.0 (2026-10-16)
   Boss-approved redesign: indigo + highlighter yellow, Gabarito headings,
   Readex Pro body, proofreader-marks concept.
   This file OVERRODE the old pastel system. Loaded after style.css. */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;700;900&family=Readex+Pro:wght@400;500;600;700&display=swap');

:root{
  --indigo:#3B2FE8; --indigo-dark:#2A22B8; --indigo-soft:#EEECFF;
  --highlight:#FFE14D; --highlight-dark:#FFD91A;
  --ink:#1A1A2E; --paper:#FDFCF8; --muted:#6B6B80;
  --proof-red:#E84040; --ok-green:#4ADE80;
  --card-border:#E8E6DF;
  /* Override old pastel tokens so legacy components pick up the new palette */
  --vio:var(--indigo); --cy:var(--indigo); --pink:var(--indigo);
  --gold:var(--highlight-dark); --red:var(--proof-red); --grn:var(--ok-green);
  --cy-ink:var(--indigo-dark); --gold-ink:#8A6A26; --red-ink:#9E2B3C;
  --bg:var(--paper); --bg2:#F8F6F0; --card:#FFFFFF; --card2:#F8F6F0;
  --line:rgba(59,47,232,.14); --line2:rgba(59,47,232,.28);
  --mut:var(--muted); --dim:var(--muted); --ink2:#3A3A52;
  --grad:linear-gradient(135deg,#3B2FE8 0%,#6C63FF 100%);
  --grad-deep:linear-gradient(135deg,#3B2FE8,#2A22B8);
  --grad-soft:linear-gradient(135deg,rgba(59,47,232,.12),rgba(255,225,77,.18));
  --font:'Readex Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --disp:'Gabarito','Readex Pro',system-ui,sans-serif;
}

/* kill the pastel background wash */
body::before{display:none}
body{background:var(--paper);color:var(--ink);font-family:var(--font)}
::selection{background:var(--highlight)}

/* Headings: Gabarito */
h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em}
h1{font-weight:900}
h2{font-weight:900}
h3{font-weight:700}

/* Proofreader marks */
.strike{text-decoration:line-through;text-decoration-color:var(--proof-red);text-decoration-thickness:.12em}
.highlight{background:linear-gradient(transparent 55%,var(--highlight) 55%,var(--highlight) 95%,transparent 95%);font-weight:inherit}
.proof-mark{color:var(--proof-red);font-weight:700}
.correction{background:var(--highlight);padding:2px 8px;border-radius:4px;font-weight:600}

/* Eyebrow: indigo, no pastel bar */
.eyebrow{color:var(--indigo)}
.eyebrow::before{background:var(--indigo)}

/* Buttons: indigo primary */
.btn{background:var(--indigo);color:#fff;font-family:var(--disp);font-weight:700;border:none;cursor:pointer;
  box-shadow:0 8px 28px rgba(59,47,232,.22)}
.btn:hover{background:var(--indigo-dark);transform:translateY(-1px);box-shadow:0 12px 36px rgba(59,47,232,.32)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn.disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--indigo);border:2px solid var(--indigo)}
.btn-ghost:hover{background:var(--indigo-soft);transform:none}
/* Highlighter accent CTA — for the loudest funnel moments (e.g. the 90-second diagnostic CTA) */
.btn-hi{background:var(--highlight);color:var(--ink)}
.btn-hi:hover{background:var(--highlight-dark);color:var(--ink);box-shadow:0 12px 36px rgba(255,217,26,.45)}
.btn-sm{font-size:15px;padding:10px 24px}

/* Nav: visible language links */
.nav{background:rgba(253,252,248,.96);border-bottom:1px solid var(--card-border)}
.nav .brand{font-family:var(--disp);font-weight:900;color:var(--indigo);letter-spacing:-.5px}
.nav-links a{font-weight:500}
.nav-links a:hover{color:var(--indigo)}
.lang-links{display:flex;gap:4px;align-items:center}
.lang-links a{font-size:14px;font-weight:700;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px}
.lang-links a:hover,.lang-links a.active{color:var(--indigo);background:var(--indigo-soft)}
/* hide old globe dropdown when new links present */
.nav:has(.lang-links) .lang{display:none}

/* Cards */
.card{background:#fff;border:2px solid var(--card-border);border-radius:16px}
.card:hover{border-color:var(--indigo)}

/* Stats */
.stat b{font-family:var(--disp);color:var(--indigo)}

/* Focus */
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}

/* Demo / chat bubbles (playground, diagnostic) */
.demo-jake p,.jake-bubble{background:var(--indigo-soft);border-radius:4px 16px 16px 16px}
.demo-you p,.you-bubble{background:#FFF8E1;border-radius:16px 4px 16px 16px}
.demo-xp{background:var(--indigo);color:#fff}

/* XP / gamification accents */
.xp-badge,.demo-xp{background:var(--indigo);color:#fff}

/* Links */
a{color:var(--indigo)}

/* RTL: logical properties already in use; ensure base direction support */
[dir="rtl"]{text-align:start}

/* === Loading / error / empty states (2026-10-16 rebrand pass) === */
/* Audio "Loading..." spinner: indigo, inherits button font (Gabarito on
   .btn, Readex Pro elsewhere). Uses the existing spin keyframes. */
.hear-btn.is-loading::before{content:"";width:13px;height:13px;flex:none;
  border:2.5px solid rgba(59,47,232,.25);border-top-color:var(--indigo);
  border-radius:50%;animation:spin .8s linear infinite}
.hear-btn.is-loading{opacity:.92}

/* ================= CARDS & CONTENT BLOCKS (rebrand 2026-10-16) ================
   Unified card system: 2px #E8E6DF border, 16px radius, indigo border on hover.
   This file loads AFTER style.css, so these rules override the legacy card
   styles. Locale pages (de/fr/ar) share this stylesheet, so every locale
   picks the new system up automatically — no re-bake needed.
   :not() guards protect JS-driven status states (.sel/.done/.right/.wrong)
   so quiz/mode/collection feedback visuals are never broken by hover. */

/* base normalization — every card-like component */
.tier,.kpi,.m-card,.demo-card,.orb-card,.cel-card,
.art-card,.art-cta,.cmp,.acc,.opt,.qz-opt{
  border:2px solid var(--card-border);
  border-radius:16px;
}
/* hover: indigo border */
.tier:hover,.kpi:hover,.m-card:not(.done):hover,.demo-card:hover,.orb-card:hover,
.cel-card:hover,.art-card:hover,.art-cta:hover,.cmp:hover,.acc:hover,
.opt:not(.sel):not(.right):not(.wrong):hover,.qz-opt:not(.right):not(.wrong):hover{
  border-color:var(--indigo);
}
/* game cards + game-library hero live in per-page <style> blocks that come
   AFTER this stylesheet, so they join the system via extra specificity */
body .g-card{border:2px solid var(--card-border);border-radius:16px}
body .g-card:hover{border-color:var(--indigo)}
body .g-hero{background:linear-gradient(135deg,var(--indigo-soft),rgba(255,225,77,.22));
  border:2px solid var(--card-border);border-radius:16px}
body .demo-card{border-radius:16px}

/* ---------- pricing tiers ---------- */
.tier{background:#fff}
.tier .price{font-family:var(--disp)}
/* recommended tier: indigo border + indigo wash + indigo-tinted lift shadow */
.tier.hot{
  border-color:var(--indigo);
  background:linear-gradient(180deg,var(--indigo-soft),#fff 70%);
  box-shadow:0 16px 44px -16px rgba(59,47,232,.30);
}
.tier.hot:hover{border-color:var(--indigo-dark)}
/* "Most popular" flag: highlighter badge. (Was dark text on an indigo
   gradient — unreadable after the token remap — now fixed.) */
.flag{background:var(--highlight);color:var(--ink)}

/* ---------- dashboard widgets ---------- */
.kpi{background:#fff}
.kpi .n{font-family:var(--disp)}
/* celebration XP number: token remap turned --gold bright yellow (#FFD91A),
   unreadable at 44px on white — bronze keeps it legible */
.cel-xp{color:var(--gold-ink)}

/* ---- mobile (rebrand, 2026-10-16): tap targets + nav safety ----
   Complements style.css mobile rules; denglish-pro had zero @media before. */
/* lang pills: 44px tap targets at every viewport */
.lang-links a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:1100px){
  /* desktop links are hidden by style.css here; the burger (injected by
     app.js) brings them back. Move the lang pills into that drawer too so
     the bar never overflows at 375px: bar = brand + CTA + burger only. */
  .nav-in{gap:12px}
  .nav:has(.lang-links) .nav-in>.lang-links{display:none}
  .nav-mobile .lang-links{display:flex;gap:8px;padding:12px 10px 4px}
  .nav-mobile .lang-links a{font-size:15px}
}

/* ---- mobile nav, static markup (2026-10-20 hamburger fix) ----
   The burger + drawer are shipped IN the page HTML (first/last child of
   .nav-in) and toggled by js/nav.js — no JS injection. This block is the
   complete rule set so pages loading denglish-pro.css WITHOUT style.css
   (e.g. dictionary) still get a working menu; where style.css is also
   loaded the values are identical. */
.nav-in{position:relative}
.nav-burger{display:none;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:20px;line-height:1;padding:9px 13px;cursor:pointer;color:var(--ink)}
.nav-mobile{display:none}
@media(max-width:1100px){
  .nav-links{display:none}
  .nav-burger{display:block;flex:0 0 auto}
  .nav-mobile{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 14px;z-index:60;flex-direction:column;box-shadow:0 18px 40px rgba(20,16,40,.14)}
  .nav-mobile.open{display:flex}
  .nav-mobile a{padding:13px 10px;border-radius:12px;font-size:16px;color:var(--ink);font-weight:600;text-decoration:none}
  .nav-mobile a:active{background:var(--card2)}
  .nav-close{align-self:flex-end;background:none;border:0;font-size:19px;line-height:1;padding:8px 10px;cursor:pointer;color:var(--ink)}
  [dir="rtl"] .nav-in{flex-direction:row-reverse}
}

/* ============ FORMS — rebrand layer (2026-10-16 deep-dive) ============
   Form overrides live here so the new design system wins the cascade over
   style.css without touching legacy rules, markup, or any form-submission JS. */

/* Indigo focus rings: visible for mouse AND keyboard focus */
.field input:focus,
textarea.ta:focus,
.ac-row input:focus{
  border-color:var(--indigo);
  box-shadow:0 0 0 4px rgba(59,47,232,.16);
}

/* Labels: ink (not muted), roomier rhythm, Readex Pro inherited via --font */
.field{margin-bottom:20px}
.field label{color:var(--ink)}
.field .tiny{margin-top:8px}

/* Per-field validation hooks (opt-in classes; no JS changes required) */
.field input.invalid,
textarea.ta.invalid,
.ac-row input.invalid{
  border-color:var(--proof-red);
  box-shadow:0 0 0 4px rgba(232,64,64,.14);
}
.field input.valid,
textarea.ta.valid,
.ac-row input.valid{
  border-color:var(--ok-green);
  box-shadow:0 0 0 4px rgba(74,222,128,.16);
}
.field-err{display:block;color:#B02E2E;font-size:13.5px;font-weight:600;margin-top:8px}
.field-ok{display:block;color:#1E7A4C;font-size:13.5px;font-weight:600;margin-top:8px}

/* Auth banners: proof-red errors, ok-green success
   (was legacy rgba(255,90,90)+#9E2B3C borders and rgba(60,200,120) tints) */
.auth-msg.err{background:rgba(232,64,64,.10);border-color:rgba(232,64,64,.45);color:#B02E2E}
.auth-msg.ok{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.50);color:#1E7A4C}

/* Diagnostic / quiz selection states: indigo tint (was legacy mint rgba(181,234,214)) */
.opt.sel{border-color:var(--indigo);background:var(--indigo-soft)}
.chip.sel{border-color:var(--indigo);background:var(--indigo-soft);color:var(--indigo-dark)}
.sub.sel{color:var(--indigo-dark);background:var(--indigo-soft)}
.qz-opt.right{border-color:var(--ok-green);background:rgba(74,222,128,.16)}
.qz-opt.wrong{border-color:var(--proof-red);background:rgba(232,64,64,.10)}

/* Account-center success accents: exact ok-green tints (was rgba(60,200,120)) */
.ac-banner.is-on{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.45)}
.ac-badge.is-on{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.40)}

/* Contrast repair: dark #2F2A3D text on the new indigo gradient was unreadable */
.msg.user{color:#fff}
.nav-avatar{color:#fff}

@media(max-width:640px){
  .ac-row input{font-size:16px} /* no iOS zoom-on-focus on 2FA code inputs */
}

/* AFTER-CLASS REPORT (Boss, 2026-10-20) — like Preply's post-lesson report */
.rep-sec{padding:4px 0}
.rep-h{font-family:var(--disp);font-weight:900;font-size:24px;letter-spacing:-.5px;margin-bottom:6px}
.rep-meta{font-size:14px;color:var(--mut);margin-bottom:14px}
.rep-line{font-size:15px;margin:10px 0}
.rep-sub{font-family:var(--disp);font-weight:700;font-size:17px;margin:18px 0 8px}
.rep-corr{font-size:15px;padding:8px 12px;background:#FFF8E1;border-radius:10px;margin-bottom:6px}
.rep-corr s{color:#9E2B3C}
.rep-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rep-word{font-size:14px;background:#F0EEFF;padding:6px 12px;border-radius:12px}
.rep-praise{background:#F0EEFF;border-radius:14px;padding:14px 18px;margin:16px 0;font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rep-play{font-size:16px;border:2px solid var(--indigo);background:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer;color:var(--indigo)}
.rep-next{display:block;font-size:15px;font-weight:600;color:var(--indigo);text-decoration:none;padding:10px 14px;border:2px solid #E8E6DF;border-radius:12px;margin-bottom:8px}
.rep-next:hover{border-color:var(--indigo)}
.rep-loading{opacity:.6;font-style:italic}
.rep-ex{background:#fff;border:2px solid #E8E6DF;border-radius:14px;padding:16px 18px;margin-bottom:12px}
.rep-ex-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rep-ex-top b{font-family:var(--disp);font-size:17px}
.rep-ex-type{font-size:12px;font-weight:700;padding:3px 10px;border-radius:10px;background:#EEECFF;color:var(--indigo)}
.rep-ex-type.deep{background:#E8F5E9;color:#1E7A4C}
.rep-ex-focus{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.rep-ex p{font-size:15px;margin-bottom:8px}
.rep-ex ul{margin:0 0 0 20px;font-size:15px}
.rep-ex li{margin-bottom:4px}
.rep-ans{color:#1E7A4C;font-weight:600;font-size:13px}

/* lexicon add button on vocab cards (chat) — one tap, 44px touch target */
.lex-add{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;
  border:2px solid var(--indigo);background:#fff;color:var(--indigo);border-radius:50%;
  font-size:16px;cursor:pointer;margin-inline-start:6px;vertical-align:middle}
.lex-add.saved{background:var(--indigo);color:#fff}
@media(max-width:640px){.lex-add{min-width:44px;min-height:44px}}

/* Plan toggle (pricing pages, 2026-10-22): Weekly / Monthly / Yearly.
   Amounts are rendered by js/geo-price.js from /api/geo-price. */
.plan-toggle{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px auto 0;max-width:780px}
.plan-toggle-btn{font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  padding:10px 20px;border-radius:999px;border:2px solid #d9dcf5;background:#fff;color:#23233a}
.plan-toggle-btn:hover{border-color:#3B2FE7}
.plan-toggle-btn:focus-visible{outline:3px solid #3B2FE7;outline-offset:2px}
.plan-toggle-btn.is-active{background:#3B2FE7;border-color:#3B2FE7;color:#fff}
.plan-save{display:inline-block;margin-inline-start:8px;background:#FFEB45;color:#23233a;
  font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;vertical-align:1px}
.plan-toggle-btn.is-active .plan-save{background:#FFEB45;color:#23233a}