/* ============================================================
   FLUENTLY.IO — REDESIGN LAYER (loaded last)
   Goal: premium 2026 SaaS feel. Less text, more live UI.
   Every section reads as a working app surface, contained in
   clean boxes with real depth. Branding tokens unchanged.
   ============================================================ */

:root{
  --glass: rgba(255,255,255,.62);
  --glass-line: rgba(255,255,255,.7);
  /* layered soft depth — a tight contact shadow + soft ambient, stacked */
  --depth-1: 0 1px 2px rgba(35,39,31,.06), 0 3px 8px -3px rgba(35,39,31,.10);
  --depth-2: 0 1px 2px rgba(35,39,31,.05), 0 8px 18px -10px rgba(35,39,31,.14), 0 20px 42px -24px rgba(35,39,31,.22);
  --depth-3: 0 2px 4px rgba(35,39,31,.06), 0 16px 32px -14px rgba(35,39,31,.18), 0 44px 84px -36px rgba(35,39,31,.32);
  /* crisp top-edge highlight that reads as a lit surface */
  --hi: inset 0 1px 0 rgba(255,255,255,.78);
  --grad-coral: #DD571C;
  --grad-edge: linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.35));
}

/* ---- breathing room: more whitespace between chapters ---- */
.chapter{ padding-block:clamp(84px,11vw,168px); }
.sec-top{ margin-bottom:clamp(30px,4vw,54px); }
/* one short line max under a heading */
.subglass{ font-size:clamp(1rem,1.4vw,1.18rem); color:var(--muted); font-weight:600; max-width:46ch; }

/* ---- universal card depth lift (soft, layered, floating) ---- */
.card{
  border:1px solid var(--line-soft);
  box-shadow:var(--depth-2), var(--hi);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--depth-3), var(--hi); }

/* a reusable little "UI label" — icon + title + one line, nothing else */
.uihead{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.uihead .ico{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:var(--sage); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--depth-1);
}
.uihead .ico svg{ width:18px; height:18px; }
.uihead b{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; }
.uihead .tag{ margin-left:auto; }

/* tiny coral icon variants */
.ico.ico-coral{ background:var(--coral-tint); color:var(--coral-deep); }
.ico.ico-lime{ background:#F2F6D4; color:#6f7d12; }
.ico.ico-butter{ background:#FBF1CF; color:#a07d12; }
.ico.ico-sky{ background:#E4EEF6; color:#3b6f96; }

/* ============================================================
   02 · GROW — one modular product bento (replaces 5 tiles)
   ============================================================ */
.moddash{
  display:grid; gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;
  /* uniform 2×4 bento — every cell equal, no orphans, no voids */
  grid-template-areas:
    "convo memory translate vocab"
    "grammar pron goal progress";
}
.mod{
  position:relative; overflow:hidden;
  background:var(--cream-raise);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--depth-2), var(--hi);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.mod:hover{ transform:translateY(-4px); box-shadow:var(--depth-3), var(--hi); }
.mod .uihead b{ font-size:.96rem; }
.mod .ico{ width:30px; height:30px; border-radius:9px; }
.mod .ico svg{ width:16px; height:16px; }
/* the main content of each card grows to fill the cell evenly (no voids) */
.mod > .uihead{ flex:none; }
.mini-convo, .vbars, .pron, .tline, .gram, .memlist, .pgrid{ flex:1 1 auto; }
.tline, .pron{ display:flex; align-items:center; }
/* gram stays inline text (flex would eat the spaces) — just centre it vertically */
.gram{ display:block; margin-block:auto; }
.vbars{ justify-content:center; }
.memlist{ align-items:center; }   /* chips keep their pill height, don't stretch */
.mini-ring{ margin-block:auto; }

/* named areas → even, predictable placement */
.mod--convo{ grid-area:convo; }
.mod--memory{ grid-area:memory; }
.mod--translate{ grid-area:translate; }
.mod--vocab{ grid-area:vocab; }
.mod--grammar{ grid-area:grammar; }
.mod--pron{ grid-area:pron; }
.mod--goal{ grid-area:goal; }
.mod--progress{ grid-area:progress; }

/* inner micro-UIs ------------------------------------------------ */
/* conversation */
.mini-convo{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.mini-bubble{ font-size:.92rem; font-weight:700; padding:9px 13px; border-radius:14px; max-width:84%; line-height:1.35; }
.mini-bubble.me{ align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:5px; }
.mini-bubble.them{ align-self:flex-start; background:var(--sage); color:var(--ink); border-bottom-left-radius:5px; }
.mini-bubble .hl2{ color:var(--coral-deep); font-weight:800; }
.mini-fix{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:800;
  color:#3f7d4e; background:#E9F3E6; border:1px solid #cfe6cf; padding:5px 11px; border-radius:999px; }
.mini-fix s{ opacity:.5; }
.mini-convo .row{ display:flex; align-items:center; gap:8px; margin-top:2px; }

/* memory checklist */
.memlist{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.memchk{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:800;
  background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 13px; box-shadow:var(--depth-1); }
.memchk .c{ width:16px; height:16px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:#56c08a; color:#fff; font-size:.62rem; font-weight:900; }
.mod .foot{ margin-top:auto; padding-top:12px; font-size:.78rem; font-weight:800; color:var(--muted); display:flex; align-items:center; gap:6px; }
.mod .foot .dot{ width:6px; height:6px; border-radius:50%; background:#56c08a; box-shadow:0 0 0 4px rgba(86,192,138,.18); }

/* translation toggle */
.tline{ display:flex; align-items:center; gap:10px; margin-top:4px; font-weight:800; }
.tline .lang{ display:inline-flex; align-items:center; gap:7px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:9px 12px; box-shadow:var(--depth-1); font-size:.95rem; }
.tline .ar{ color:var(--coral); font-weight:900; }
.tline .lang.to{ background:var(--coral-tint); border-color:var(--coral-soft); color:var(--coral-deep); }

/* vocabulary growth */
.vbars{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.vbar{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:.88rem; font-weight:800; }
.vbar .track{ height:8px; border-radius:999px; background:var(--sage-deep); overflow:hidden; }
.vbar .track i{ display:block; height:100%; border-radius:999px; background:var(--grad-coral); }
.vbar .pct{ color:var(--muted); font-variant-numeric:tabular-nums; }

/* grammar */
.gram{ margin-top:4px; font-size:1rem; font-weight:800; line-height:1.5; }
.gram .ok{ border-bottom:3px solid #56c08a; }
.gram s{ color:var(--muted-soft); }
.gram b{ color:var(--coral-deep); }

/* pronunciation */
.pron{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.pron .wv{ flex:1; display:flex; align-items:center; gap:4px; height:38px; }
.pron .wv i{ flex:1; min-width:4px; height:100%; border-radius:999px; background:var(--grad-coral); transform-origin:center; animation:pwave 1.1s var(--ease) infinite; }
/* reset the leftover circular .score from v5.css */
.pron .score{ width:auto; height:auto; border-radius:0; background:none; display:inline-flex; align-items:baseline;
  font-size:1.6rem; font-weight:900; letter-spacing:-.03em; color:var(--ink); }
.pron .score::before{ content:none; }
.pron .score span{ position:static; font-size:.8rem; color:var(--muted); margin-left:1px; }
@keyframes pwave{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
.pron .wv i:nth-child(2n){ animation-delay:.15s; } .pron .wv i:nth-child(3n){ animation-delay:.3s; }
.pron .wv i:nth-child(4n){ animation-delay:.45s; } .pron .wv i:nth-child(5n){ animation-delay:.2s; }

/* daily goal mini ring */
.mini-ring{ position:relative; width:108px; height:108px; margin:6px auto 0; }
.mini-ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.mini-ring circle{ fill:none; stroke-width:6.5; }
.mini-ring .tk{ stroke:var(--sage-deep); }
/* r=19 → circumference ≈ 119.4; 3/5 = 60% filled → offset ≈ 48 */
.mini-ring .fl{ stroke:var(--coral); stroke-linecap:round; stroke-dasharray:119.4; stroke-dashoffset:48; }
.mini-ring .c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.mini-ring .c b{ font-size:1.35rem; font-weight:900; letter-spacing:-.03em; }
.mini-ring .c span{ font-size:.7rem; font-weight:800; color:var(--muted); }

/* progress strip */
.pgrid{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
/* value + label on ONE compact line */
.pcell{ background:var(--paper); border:1px solid var(--line-soft); border-radius:14px; padding:10px 12px; box-shadow:var(--depth-1);
  display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.pcell .n{ font-size:1.2rem; font-weight:900; letter-spacing:-.03em; line-height:1; }
.pcell .l{ font-size:.74rem; font-weight:800; color:var(--muted); }
.pcell .n.coral{ color:var(--coral); }

/* ============================================================
   AI MEMORY — dedicated section (new)
   Yesterday's chat  →  Fluent recalls it inside today's chat
   ============================================================ */
.memshow{
  display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2vw,28px);
  align-items:center;
}
.mempanel{
  background:var(--cream-raise); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(18px,2vw,26px); box-shadow:var(--depth-2), var(--hi); position:relative; overflow:hidden;
}
.mempanel.today{ background:linear-gradient(180deg,#fff,var(--coral-tint)); border-color:var(--coral-soft); }
.mempanel .day{ font-size:.76rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.mempanel.today .day{ color:var(--coral-deep); }
.memtags{ display:flex; flex-wrap:wrap; gap:9px; }
.memtag{ font-size:.95rem; font-weight:800; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:8px 14px; box-shadow:var(--depth-1); }
.memtag.recall{ background:#fff; border-color:#bfe6cd; color:#2f7d4e; display:inline-flex; align-items:center; gap:8px; }
.memtag.recall .c{ width:16px; height:16px; border-radius:50%; background:#56c08a; color:#fff; display:grid; place-items:center; font-size:.6rem; font-weight:900; }
.memtag.dim{ opacity:.5; }
.memarrow{ display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:var(--grad-coral); color:#fff; box-shadow:var(--sh-coral); font-size:1.3rem; }
.mempanel .recall-bubble{ margin-top:14px; background:#fff; border:1px solid var(--coral-soft); border-radius:16px;
  border-bottom-left-radius:5px; padding:11px 14px; font-weight:700; font-size:.95rem; box-shadow:var(--depth-1); }
.mempanel .recall-bubble b{ color:var(--coral-deep); }

/* ============================================================
   ONE-LINE CONTENT + TWO-TONE TITLES
   Every label/title stays on a single line; same-type chip rows
   never wrap. Section titles use ink + coral (.coral-text).
   ============================================================ */
.h-sec, .sec-h, .subglass, .eyebrow,
.uihead b, .gram, .pcell .l, .pcell .n,
.tline, .vbar > span:first-child, .mini-fix, .mini-bubble,
.memchk, .memtag, .mempanel .day{ white-space:nowrap; }
/* chip groups wrap into a tidy block (showing every chip beats clipping) */
.memlist, .memtags{ flex-wrap:wrap; gap:8px; }
.memlist .memchk{ font-size:.84rem; padding:6px 11px; }
/* stat chips: value + label on one line, never stacked */
.dstats{ flex-wrap:nowrap; overflow:hidden; }
.dstats .dstat{ white-space:nowrap; }
.dstat .k{ margin-left:3px; }

/* ============================================================
   INTERACTIVE — each card lets you USE the feature
   Clear affordance: pointer, hover lift, pressed state.
   ============================================================ */
.tap{ cursor:pointer; user-select:none; transition:transform .18s var(--ease-back), box-shadow .25s var(--ease), background .2s, border-color .2s; }
.tap:hover{ transform:translateY(-2px); }
.tap:active{ transform:translateY(0) scale(.97); }
.tap:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
/* a small persistent "use it" cue so the function is visible */
.mod .use{ margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; font-weight:800; color:var(--coral-deep); }
.mod .use::before{ content:"›"; font-weight:900; transition:transform .2s var(--ease); }
.mod:hover .use::before{ transform:translateX(3px); }

/* translate flip button */
#tflip.flip .lang{ animation:flipPop .4s var(--ease-back); }
@keyframes flipPop{ 0%{ transform:rotateX(70deg); opacity:.3; } 100%{ transform:rotateX(0); opacity:1; } }

/* conversation: tap word to save */
.mini-convo .saveword{ cursor:pointer; }
.mini-convo .saveword.saved .c{ background:#56c08a; }
.mini-convo .saveword .c{ background:var(--coral); }
.mini-convo .saveword.saved{ border-color:#bfe6cd; color:#2f7d4e; }

/* pronunciation replay pulse */
.mod--pron.playing .wv i{ animation-duration:.7s; }

/* daily goal: advances on tap */
.mini-ring .fl{ transition:stroke-dashoffset .6s var(--ease); }

/* memory: tap a yesterday chip → it recalls into today */
.memtag.pick{ cursor:pointer; }
.memtag.pick.used{ background:var(--coral-tint); border-color:var(--coral-soft); color:var(--coral-deep); }
.memrecall-slot{ display:flex; flex-wrap:nowrap; gap:9px; min-height:0; }
.memrecall-slot .memtag{ animation:recallIn .4s var(--ease-back); }
@keyframes recallIn{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

/* ============================================================
   REFINEMENT — one design system, per-feature accents,
   header(icon+title+badge) / body(real UI) / footer(interaction)
   ============================================================ */
:root{
  --c-coral:#DD571C;  --t-coral:#FBEDDE;
  --c-green:#3F9E6E;  --t-green:#E7F4EC;
  --c-blue:#4E83D8;   --t-blue:#E8EFFB;
  --c-purple:#8366CF; --t-purple:#ECE7FA;
  --c-amber:#C98A1E;  --t-amber:#FAF0D6;
  --c-mint:#2FA58E;   --t-mint:#E2F4F0;
}
/* per-card accent */
.mod{ --a:var(--c-coral); --at:var(--t-coral); padding:15px; border-radius:var(--r); gap:0; }
.mod--memory{ --a:var(--c-blue);   --at:var(--t-blue); }
.mod--translate{ --a:var(--c-mint); --at:var(--t-mint); }
.mod--vocab{ --a:var(--c-purple); --at:var(--t-purple); }
.mod--grammar{ --a:var(--c-amber); --at:var(--t-amber); }
.mod--pron{ --a:var(--c-blue);    --at:var(--t-blue); }
.mod--progress{ --a:var(--c-green); --at:var(--t-green); }

/* standardized header */
.mod .uihead{ margin-bottom:11px; }
.mod .ico{ background:var(--at); color:var(--a); }
.uihead .badge{ margin-left:auto; font-size:.64rem; font-weight:900; letter-spacing:.02em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:var(--at); color:var(--a); white-space:nowrap; }
/* standardized body + footer */
.modbody{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:0; }
.modfoot{ margin-top:11px; display:inline-flex; align-items:center; gap:6px; font-size:.73rem; font-weight:800; color:var(--muted); white-space:nowrap; }
.modfoot .dot{ width:6px; height:6px; border-radius:50%; background:var(--a); box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 16%, transparent); }
.modfoot.act{ color:var(--a); cursor:pointer; }

/* conversation refined: bubbles + audio + confidence */
.cv-bub{ font-size:.9rem; font-weight:700; padding:8px 12px; border-radius:13px; max-width:88%; line-height:1.34; }
.cv-bub.me{ align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
.cv-bub.them{ align-self:flex-start; background:var(--sage); color:var(--ink); border-bottom-left-radius:4px; display:inline-flex; align-items:center; gap:8px; }
.cv-bub .hl2{ color:var(--c-coral); font-weight:800; }
.cv-audio{ width:18px; height:18px; flex:none; border-radius:50%; background:var(--c-coral); color:#fff; display:inline-grid; place-items:center; font-size:.6rem; }
.cv-fix{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800;
  color:var(--c-green); background:var(--t-green); border-radius:999px; padding:4px 10px; }
.cv-fix s{ opacity:.55; }
.cv-conf{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:800; color:var(--muted); }
.cv-conf .bar{ width:46px; height:5px; border-radius:999px; background:var(--sage-deep); overflow:hidden; }
.cv-conf .bar i{ display:block; height:100%; background:var(--c-green); }

/* memory refined: saved word pills */
.memlist .memchk{ background:var(--paper); border-color:var(--line); }
.memlist .memchk .c{ background:var(--c-blue); }

/* translate refined: input → swap → output → tools */
.trbox{ display:flex; flex-direction:column; gap:7px; width:100%; }
.trfield{ display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-weight:800; font-size:.92rem; white-space:nowrap; }
.trfield.out{ background:var(--at); border-color:transparent; color:var(--a); }
.trfield .mut{ margin-left:auto; font-size:.72rem; color:var(--muted-soft); font-weight:800; }
.trfield.out .mut{ color:var(--a); opacity:.7; }
.trswap{ align-self:center; width:28px; height:28px; border-radius:50%; background:var(--at); color:var(--a); display:grid; place-items:center; font-weight:900; box-shadow:var(--depth-1); }
.trtools{ display:flex; gap:7px; margin-top:1px; }
.trtools span{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:.76rem; font-weight:800;
  padding:7px; border-radius:10px; background:var(--paper); border:1px solid var(--line); color:var(--ink); }

/* vocabulary refined: status-coloured bars + legend */
.vbar .track i{ background:var(--bar, var(--c-purple)); }
.vbar.known{ --bar:var(--c-green); } .vbar.learning{ --bar:var(--c-coral); } .vbar.weak{ --bar:var(--c-amber); }
.vlegend{ display:flex; gap:10px; margin-top:2px; font-size:.68rem; font-weight:800; color:var(--muted); }
.vlegend span{ display:inline-flex; align-items:center; gap:4px; }
.vlegend i{ width:8px; height:8px; border-radius:3px; }

/* grammar refined: before → after → success */
.grm{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; width:100%; }
.grm-row{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:800; padding:7px 11px; border-radius:11px; white-space:nowrap; }
.grm-row.wrong{ background:#fbe9e6; color:#b5462f; }
.grm-row.wrong s{ text-decoration:line-through; opacity:.8; }
.grm-row.right{ background:var(--t-green); color:var(--c-green); }
.grm-row .x{ font-weight:900; }
.grm-ar{ align-self:center; color:var(--muted-soft); font-weight:900; line-height:.8; }

/* pronunciation refined: waveform + mic + gauge */
.pron .wv i{ background:var(--c-blue); }
.pron .score{ color:var(--ink); }
.pron .mic{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--c-blue); color:#fff; display:grid; place-items:center; box-shadow:var(--depth-1); }
.pron .mic svg{ width:16px; height:16px; }

/* daily goal refined: ring + task dots */
.mini-ring .fl{ stroke:var(--c-coral); }
.gtasks{ display:flex; gap:6px; justify-content:center; margin-top:8px; }
.gtasks i{ width:12px; height:12px; border-radius:5px; background:var(--sage-deep); }
.gtasks i.done{ background:var(--c-coral); }

/* progress refined: colourful stat pills */
.ppills{ display:flex; flex-direction:column; gap:7px; }
.ppill{ display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line-soft); border-radius:11px; padding:7px 10px; box-shadow:var(--depth-1); white-space:nowrap; }
.ppill .pi{ width:8px; height:8px; border-radius:50%; flex:none; }
.ppill b{ font-size:1.05rem; font-weight:900; letter-spacing:-.02em; }
.ppill span{ font-size:.74rem; font-weight:800; color:var(--muted); }

/* ============================================================
   HERO DASHBOARD REFINEMENT — colourful stat pills, thicker
   progress, bigger quick-actions (no structural change)
   ============================================================ */
.dstats .dstat{ border-radius:999px !important; font-weight:800; padding:6px 12px; }
.dstats .dstat:nth-child(1){ background:var(--t-coral); color:var(--c-coral); }
.dstats .dstat:nth-child(2){ background:var(--t-blue);  color:var(--c-blue); }
.dstats .dstat:nth-child(3){ background:var(--t-purple);color:var(--c-purple); }
.dstats .dstat:nth-child(4){ background:var(--t-green); color:var(--c-green); }
.dstats .dstat .k{ color:inherit; opacity:.72; }
.dash .prog{ height:9px; border-radius:999px; }
.dash .qa button{ padding:13px 8px; border-radius:15px; box-shadow:var(--depth-1); transition:transform .2s var(--ease-back), box-shadow .25s; }
.dash .qa button:hover{ transform:translateY(-2px); box-shadow:var(--depth-2); }

/* ---- responsive ------------------------------------------------ */
@media (max-width:900px){
  .moddash{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "convo memory"
      "translate vocab"
      "grammar pron"
      "goal progress";
  }
  .memshow{ grid-template-columns:1fr; }
  .memarrow{ transform:rotate(90deg); margin-inline:auto; }
}
@media (max-width:560px){
  .moddash{ grid-template-columns:1fr; grid-template-areas:none; }
  .mod{ grid-area:auto !important; }
}