/* ============================================================================
   ZeroToEnglish — sistem de design v2

   Direcție: editorial și prețios, ca o carte de limbă bine tipărită.
   Albastru regal ca structură, auriu ca accent — auriul marchează ce ai
   câștigat, albastrul ce ai de făcut. Nu invers.

   Tipografie cu două voci, deliberat:
     - engleza (ce înveți) e cu SERIF, mare, tratată ca subiect;
     - româna (interfața) e cu sans, mai mică, tratată ca voce care explică.
   Distincția e vizibilă dintr-o privire, fără să scrie nimeni nimic.

   Transcrierea fonetică românească e cetățean de rang întâi în design, nu o
   notă de subsol: e singurul lucru care îi spune unui începător CUM se zice.

   Mobil întâi. Fără framework, fără pas de build.
   ========================================================================= */

:root {
  color-scheme: dark light;

  /* --- întuneric (implicit) --- */
  --bg:         #0a0e1a;
  --bg-deep:    #060911;
  --surface:    #121829;
  --surface-2:  #1a2237;
  --surface-3:  #222c46;
  --line:       #26314c;
  --line-soft:  #1c2438;

  --ink:        #eef2fb;
  --ink-2:      #a7b2cc;
  --ink-3:      #6d7896;

  /* Albastru regal — structura, acțiunea, ce urmează */
  --royal:      #3f6fe8;
  --royal-2:    #5b86ff;
  --royal-soft: #14203f;
  --on-royal:   #ffffff;

  /* Auriu — ce ai câștigat, accentul, accentul tonic */
  --gold:       #e8b950;
  --gold-2:     #f5d489;
  --gold-soft:  #2a2113;
  --on-gold:    #171208;

  --good:       #4fc79a;
  --good-soft:  #10261f;
  --warn:       #e8b950;
  --warn-soft:  #2a2113;
  --bad:        #ef7a63;
  --bad-soft:   #2e1712;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
  --glow-gold: 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring:   cubic-bezier(.34, 1.56, .64, 1);
  --fast: 150ms; --base: 260ms; --slow: 460ms;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:         #f2eee4;
    --bg-deep:    #e6e0d2;
    --surface:    #fffdf8;
    --surface-2:  #f6f2e8;
    --surface-3:  #eee8da;
    --line:       #ddd5c3;
    --line-soft:  #e9e2d3;

    --ink:        #10192f;
    --ink-2:      #45526f;
    --ink-3:      #7c8699;

    --royal:      #1f47ad;
    --royal-2:    #2f5ccc;
    --royal-soft: #e3e9fa;
    --on-royal:   #ffffff;

    --gold:       #a97a15;
    --gold-2:     #c99b2c;
    --gold-soft:  #f7ecd5;
    --on-gold:    #ffffff;

    --good:       #1c7a5a;
    --good-soft:  #dcf0e8;
    --warn:       #a97a15;
    --warn-soft:  #f7ecd5;
    --bad:        #b3402a;
    --bad-soft:   #f8e3dd;

    --shadow-sm: 0 1px 2px rgba(16,25,47,.06);
    --shadow-md: 0 4px 16px rgba(16,25,47,.08);
    --shadow-lg: 0 20px 50px rgba(16,25,47,.12);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fundal: o boltă discretă + un strat de unde, ecoul motivului din materialele
   pe care le-am luat ca referință. Nu se vede conștient; se simte. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 55% at 50% -8%, color-mix(in srgb, var(--royal) 16%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed; left: 0; right: 0; bottom: 0; height: 40vh; z-index: -1;
  opacity: .5; pointer-events: none;
  background-repeat: repeat-x;
  background-size: 220px 60px;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 8px,
      color-mix(in srgb, var(--royal) 22%, transparent) 8px 9px);
  mask-image: linear-gradient(to top, #000, transparent);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
}

/* --- structură ----------------------------------------------------------- */

.shell { width: 100%; max-width: 32rem; margin: 0 auto; padding: 1rem 1rem 3.5rem; }
@media (min-width: 48rem) { .shell { max-width: 36rem; padding-top: .5rem; } }

.wordmark {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.4rem 0 .2rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3);
  animation: fade var(--slow) var(--ease-out) both;
}
.wordmark::before, .wordmark::after {
  content: ""; width: 1.6rem; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.6rem 1.3rem;
  box-shadow: var(--shadow-lg);
  animation: rise var(--slow) var(--ease-out) both;
  overflow: hidden;
}
/* Fir auriu pe muchia de sus: semnătura discretă a fiecărui panou. */
.panel::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: .8;
}
@media (min-width: 48rem) { .panel { padding: 2.2rem 2rem; } }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  0% { transform: scale(.4) rotate(-12deg); opacity: 0; }
  65% { transform: scale(1.12) rotate(3deg); }
  100% { transform: none; opacity: 1; }
}

.stagger > * { animation: rise var(--base) var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:30ms}.stagger > *:nth-child(2){animation-delay:70ms}
.stagger > *:nth-child(3){animation-delay:110ms}.stagger > *:nth-child(4){animation-delay:150ms}
.stagger > *:nth-child(5){animation-delay:190ms}.stagger > *:nth-child(6){animation-delay:230ms}
.stagger > *:nth-child(7){animation-delay:270ms}.stagger > *:nth-child(8){animation-delay:310ms}

/* --- text ---------------------------------------------------------------- */

h1 { margin: 0 0 .35rem; font: 600 1.6rem/1.18 var(--serif); letter-spacing: -.01em; }
h2 {
  display: flex; align-items: center; gap: .7rem;
  margin: 2rem 0 .8rem; font: 700 .7rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
.lede { color: var(--ink-2); }
.muted { color: var(--ink-3); font-size: .85rem; line-height: 1.5; }
.eyebrow {
  margin: 0 0 .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
a { color: var(--royal-2); text-underline-offset: 3px; }

.back {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem;
  font-size: .85rem; color: var(--ink-3); text-decoration: none;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.back:hover { color: var(--ink); transform: translateX(-2px); }

/* --- cardul cuvântului: eroul aplicației --------------------------------- */

.word {
  text-align: center;
  padding: 1.4rem 0 1.2rem;
  animation: rise var(--slow) var(--ease-out) both;
}
.word__en {
  margin: 0; font: 600 clamp(1.9rem, 8vw, 2.7rem)/1.15 var(--serif);
  letter-spacing: -.015em; color: var(--ink);
}
.word__rule {
  display: block; width: min(72%, 15rem); height: 3px; margin: .55rem auto .85rem;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  transform-origin: center;
  animation: sweep var(--slow) var(--ease-out) 120ms both;
}
@keyframes sweep { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* Transcrierea românească: element principal, nu notă de subsol. */
.word__say {
  display: inline-block; margin: 0 0 .7rem; padding: .3rem .85rem;
  font: 400 clamp(1.1rem, 5vw, 1.4rem)/1.3 var(--serif);
  color: var(--gold); background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--r-pill);
  animation: rise var(--base) var(--ease-out) 200ms both;
}
.word__ro { margin: 0; font: 400 1.05rem/1.4 var(--serif); color: var(--ink-2); }

.say-inline {
  display: inline-block; font-family: var(--serif); color: var(--gold);
  font-size: .96rem;
}

/* --- butoane ------------------------------------------------------------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; margin-top: .65rem; padding: 1rem 1.1rem;
  font: 600 1rem/1 var(--sans); text-align: center; text-decoration: none;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  background: var(--royal); color: var(--on-royal); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--royal-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-2); }

.btn--ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-3); border-color: var(--royal); }

.btn--quiet {
  width: auto; margin: 1.6rem auto 0; padding: .45rem .9rem; background: none;
  color: var(--ink-3); font-weight: 400; font-size: .85rem; box-shadow: none;
}
.btn--quiet:hover { color: var(--ink); background: var(--surface-2); transform: none; }

.btn--rec { background: var(--bad); }
.btn--rec.is-on { background: var(--gold); color: var(--on-gold); animation: throb 1.5s ease-in-out infinite; }
@keyframes throb { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--gold) 16%, transparent); } }

/* --- carduri de acțiune (ecranul principal) ------------------------------ */

.actions { display: grid; gap: .7rem; margin-top: 1.2rem; }

.action {
  position: relative; display: flex; align-items: center; gap: .95rem;
  padding: 1rem 1.05rem; text-decoration: none; color: inherit;
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.action:hover { transform: translateY(-2px); border-color: var(--royal); background: var(--surface-3); }
.action:active { transform: scale(.99); }
.action--primary {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--royal) 24%, var(--surface-2)),
              var(--surface-2));
  border-color: var(--royal);
}
.action--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
}
.action__icon {
  flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  color: var(--royal-2); font: 600 1.1rem/1 var(--serif);
}
.action--primary .action__icon { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.action__title { font-weight: 600; font-size: 1rem; }
.action__hint { display: block; margin-top: .12rem; font-size: .8rem; color: var(--ink-3); line-height: 1.4; }
.action__badge {
  margin-left: auto; flex: none; padding: .18rem .5rem; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 700; background: var(--gold-soft); color: var(--gold);
}

/* --- nivel / progres ----------------------------------------------------- */

.level {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem; margin-top: 1.1rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.ring { position: relative; flex: none; width: 4.6rem; height: 4.6rem; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--line); stroke-width: 6; }
.ring__value {
  fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dasharray var(--slow) var(--ease-out);
  animation: ring var(--slow) var(--ease-out) both;
}
@keyframes ring { from { stroke-dasharray: 0 999; } }
.ring__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 1.15rem/1 var(--sans); color: var(--gold); font-variant-numeric: tabular-nums;
}
.level__body { min-width: 0; }
.level__title { font-weight: 600; }
.level__hint { font-size: .83rem; color: var(--ink-3); line-height: 1.45; margin-top: .15rem; }

.bars { list-style: none; padding: 0; margin: 0; }
.bars li { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
.bars li:last-child { border-bottom: none; }
.bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bar__name { font-weight: 600; font-size: .95rem; }
.bar__num { font: 700 1.15rem/1 var(--sans); color: var(--royal-2); font-variant-numeric: tabular-nums; }
.bars li.is-weak .bar__num { color: var(--gold); }
.bar__track { height: 5px; margin: .5rem 0 .35rem; border-radius: var(--r-pill);
              background: var(--line); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: var(--r-pill);
             background: linear-gradient(to right, var(--royal), var(--royal-2));
             animation: grow var(--slow) var(--ease-out) both; }
.bars li.is-weak .bar__fill { background: linear-gradient(to right, var(--gold), var(--gold-2)); }
@keyframes grow { from { width: 0 !important; } }
.bar__hint { font-size: .8rem; color: var(--ink-3); line-height: 1.45; }
.chip {
  display: inline-block; margin-top: .45rem; padding: .18rem .55rem;
  font-size: .7rem; font-weight: 700; border-radius: var(--r-pill);
  background: var(--gold-soft); color: var(--gold);
}

.meter { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; }
.meter__track { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: var(--r-pill);
               background: linear-gradient(to right, var(--gold), var(--gold-2));
               transition: width var(--slow) var(--ease-out); }
.meter__text { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p0{width:0}.p1{width:10%}.p2{width:20%}.p3{width:30%}.p4{width:40%}.p5{width:50%}
.p6{width:60%}.p7{width:70%}.p8{width:80%}.p9{width:90%}.p10{width:100%}

/* --- formulare ----------------------------------------------------------- */

label { display: block; margin: 1rem 0 .3rem; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
input[type=text], input[type=password], input:not([type]) {
  width: 100%; padding: .85rem .95rem; font: inherit; font-size: 1.05rem;
  color: var(--ink); background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input:focus {
  outline: none; border-color: var(--royal); background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--royal) 16%, transparent);
}

.alert {
  margin: 1rem 0 0; padding: .8rem .95rem; font-size: .92rem;
  background: var(--bad-soft); color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  border-radius: var(--r-md); animation: shake 400ms var(--ease);
}
@keyframes shake { 20%,60%{transform:translateX(-3px)} 40%,80%{transform:translateX(3px)} }

/* --- alegeri (obiective, minute) ----------------------------------------- */

.choices { display: grid; gap: .6rem; margin-top: .5rem; }
.pick {
  position: relative; display: flex; gap: .85rem; align-items: flex-start;
  padding: .95rem 1rem; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.pick:hover { border-color: color-mix(in srgb, var(--royal) 50%, var(--line)); }
.pick:active { transform: scale(.99); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { background: var(--royal-soft); border-color: var(--royal); }
.pick:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.pick__icon {
  flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  font: 600 1rem/1 var(--serif); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--royal-2);
}
.pick:has(input:checked) .pick__icon { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.pick__title { display: block; font-weight: 600; font-size: .97rem; line-height: 1.35; }
.pick__hint { display: block; margin-top: .15rem; font-size: .83rem; color: var(--ink-3); line-height: 1.45; }

.segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .4rem; }
.segment {
  position: relative; text-align: center; padding: .7rem .25rem; cursor: pointer;
  font-size: .9rem; font-weight: 600;
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment:has(input:checked) { background: var(--royal); border-color: var(--royal); color: var(--on-royal); }
.segment small { display: block; font-weight: 400; font-size: .7rem; opacity: .8; }

/* --- sunet --------------------------------------------------------------- */

.sound {
  position: relative; margin-top: 1.1rem; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.sound canvas { display: block; width: 100%; height: 82px; }
.sound__btn {
  position: absolute; inset: 0; width: 100%; margin: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: none; border: none; cursor: pointer;
  font: 600 .98rem/1 var(--sans); color: var(--ink);
  transition: background var(--fast) var(--ease);
}
.sound__btn > * { position: relative; z-index: 1; }
.sound__btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13rem; height: 2.6rem;
  transform: translate(-50%, -50%); border-radius: var(--r-pill);
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--surface-2) 94%, transparent) 55%, transparent);
}
.sound__btn:hover { background: color-mix(in srgb, var(--royal) 10%, transparent); }
.sound.is-playing .sound__btn { opacity: 0; pointer-events: none; }

/* Caseta microfonului ar arăta goală până la prima apăsare. */
.sound__idle {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .82rem; color: var(--ink-3); text-align: center; padding: 0 1rem;
  pointer-events: none; transition: opacity var(--fast) var(--ease);
}
.sound.is-recording .sound__idle { opacity: 0; }

.rate { margin-top: .9rem; }
.rate__head { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: var(--ink-2); }
.rate__value { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; margin-top: .45rem; -webkit-appearance: none; appearance: none; background: none; height: 22px; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: var(--line); }
input[type=range]::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: var(--line); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--surface); box-shadow: var(--shadow-sm); cursor: grab;
  transition: transform var(--fast) var(--spring);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold);
  border: 3px solid var(--surface); box-shadow: var(--shadow-sm); cursor: grab;
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); cursor: grabbing; }

/* --- răspunsuri ---------------------------------------------------------- */

.answers { display: grid; gap: .6rem; margin-top: 1.2rem; }
.answer-btn {
  width: 100%; margin: 0; padding: 1.05rem .8rem; cursor: pointer;
  font: 600 1.3rem/1.2 var(--serif); letter-spacing: -.005em;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.answer-btn small { display: block; margin-top: .25rem; font: 400 .85rem/1.2 var(--serif); color: var(--gold); }
.answer-btn:hover { border-color: var(--royal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.answer-btn:active { transform: scale(.98); }

/* --- feedback ------------------------------------------------------------ */

.result { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
          animation: rise var(--base) var(--ease-out) both; }
.result__verdict { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem;
                   font: 600 1.05rem/1.3 var(--sans); }
.result--ok .result__verdict { color: var(--good); }
.result--bad .result__verdict { color: var(--bad); }
.result--unsure .result__verdict { color: var(--warn); }
.badge { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
         display: grid; place-items: center; font-size: .9rem; font-weight: 700;
         animation: pop var(--slow) var(--spring) both; }
.result--ok .badge { background: var(--good-soft); color: var(--good); }
.result--bad .badge { background: var(--bad-soft); color: var(--bad); }
.result--unsure .badge { background: var(--warn-soft); color: var(--warn); }

.diff { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 1rem; }
.tok { padding: .2rem .45rem; border-radius: var(--r-sm); font: 500 .98rem/1.5 var(--serif);
       animation: rise 240ms var(--ease-out) both; }
.diff .tok:nth-child(1){animation-delay:20ms}.diff .tok:nth-child(2){animation-delay:50ms}
.diff .tok:nth-child(3){animation-delay:80ms}.diff .tok:nth-child(4){animation-delay:110ms}
.diff .tok:nth-child(5){animation-delay:140ms}.diff .tok:nth-child(6){animation-delay:170ms}
.diff .tok:nth-child(7){animation-delay:200ms}.diff .tok:nth-child(8){animation-delay:230ms}
.tok--ok { color: var(--ink-2); }
.tok--wrong { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.tok--missing { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.tok--extra { background: var(--surface-2); color: var(--ink-3); }
.tok s { opacity: .55; margin-right: .25rem; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .8rem; }
.legend .tok { font-size: .74rem; font-family: var(--sans); }

/* Comparația „ce trebuia" / „ce am auzit", pe românește. */
.compare { display: grid; gap: .5rem; margin: .9rem 0 0; }
.compare__row {
  display: flex; align-items: baseline; gap: .7rem; padding: .6rem .8rem;
  background: var(--surface-2); border-radius: var(--r-md);
  border-left: 3px solid var(--line);
}
.compare__row.is-target { border-left-color: var(--gold); }
.compare__row.is-heard { border-left-color: var(--bad); }
.compare__label { flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
                  text-transform: uppercase; color: var(--ink-3); min-width: 5.2rem; }
.compare__value { font: 400 1.05rem/1.35 var(--serif); }
.compare__row.is-target .compare__value { color: var(--gold); }

.notes { margin: .5rem 0 0; padding-left: 1.1rem; }
.notes li { margin: .5rem 0; animation: rise 300ms var(--ease-out) both; }
.notes li:nth-child(2){animation-delay:80ms}.notes li:nth-child(3){animation-delay:160ms}

.caveat { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px dashed var(--line);
          font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* --- familia ------------------------------------------------------------- */

.today { list-style: none; padding: 0; margin: 0; }
.today li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0;
            border-bottom: 1px solid var(--line-soft);
            animation: rise var(--base) var(--ease-out) both; }
.today li:nth-child(2){animation-delay:50ms}.today li:nth-child(3){animation-delay:100ms}
.today li:nth-child(4){animation-delay:150ms}
.today li:last-child { border-bottom: none; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dot.is-on { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.who { font-weight: 500; }
.who.is-me { color: var(--gold); }

/* --- sfaturi ------------------------------------------------------------- */

.tips { display: grid; gap: .7rem; margin-top: .3rem; }
.tip {
  padding: 1rem 1.05rem; text-decoration: none; color: inherit; display: block;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  border-left: 3px solid var(--gold);
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.tip:hover { transform: translateX(3px); background: var(--surface-3); }
.tip__title { font-weight: 600; font-size: .98rem; }
.tip__body { margin-top: .3rem; font-size: .87rem; color: var(--ink-2); line-height: 1.55; }
.tip__pair {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem;
  font-family: var(--serif); font-size: .95rem;
}
.tip__pair span {
  padding: .25rem .6rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
}
.tip__pair b { color: var(--gold); font-weight: 600; }

.stat { text-align: center; padding: 1.3rem 0; border-block: 1px solid var(--line-soft); margin: 1.1rem 0; }
.stat__num { display: block; font: 700 2.7rem/1 var(--sans); letter-spacing: -.03em;
             color: var(--gold); font-variant-numeric: tabular-nums; }
.stat__label { display: block; margin-top: .35rem; font-size: .78rem; color: var(--ink-3); }

.contrasts { list-style: none; padding: 0; margin: 0; }
.contrasts li { padding: .9rem 0; border-bottom: 1px solid var(--line-soft); }
.contrasts li:last-child { border-bottom: none; }
.contrasts .row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.contrasts .score { font-size: .86rem; font-weight: 700; color: var(--royal-2);
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
.contrasts .score.is-empty { color: var(--ink-3); font-weight: 400; }

.recap { list-style: none; padding: 0; margin: 0; }
.recap li { display: flex; gap: .7rem; padding: .5rem 0; font-size: .93rem;
            border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.recap li:last-child { border-bottom: none; }
.recap .txt { font-family: var(--serif); color: var(--ink-2); }

.credit { margin-top: 1.5rem; font-size: .72rem; color: var(--ink-3); }

/* --- utilitare ----------------------------------------------------------- */

.u-center { text-align: center; }
.u-flush { margin: 0; }
.u-gap-sm { margin-top: .55rem; }
.u-gap { margin-top: .9rem; }
.u-gap-lg { margin-top: 1.4rem; }
.u-status { min-height: 1.4em; margin-top: .55rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --- teme (de ce ai primit propoziția asta) ------------------------------ */
.topics { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; }
.topic {
  padding: .2rem .6rem; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  background: var(--royal-soft); color: var(--royal-2);
  border: 1px solid color-mix(in srgb, var(--royal) 30%, transparent);
}

/* Cuvântul în care a apărut problema de pronunție. */
.in-word { font-family: var(--serif); font-weight: 600; color: var(--gold); font-size: 1.05em; }