/* =====================================================================
   tamoul.re — feuille de style autonome "Soleil-Temple" (rebuild).
   Indépendante de l'ancien app.css. Jour = papier crème · Nuit = indigo.
   ===================================================================== */
:root{
  --paper:#FBF1E3; --paper-2:#F4E7D1; --card:#FFF8EC;
  --ink:#2B1A10; --muted:#8A6A50; --line:rgba(43,26,16,.14);
  --vermilion:#DC3B22; --vermilion-deep:#A52410;
  --marigold:#F4A50A; --marigold-deep:#B5740A;
  --teal:#0E6E63; --teal-deep:#0A4E47;
  --ok-bg:#E8F4EC; --ok-tx:#0A4E47; --bad-bg:#FBE9E5; --bad-tx:#A52410;
  --r:18px; --r-sm:13px; --shadow:0 16px 36px -22px rgba(70,30,10,.5);
  --font-ui:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Fraunces",Georgia,serif;
  --font-tamil:"Noto Sans Tamil","Latha","Arial Unicode MS",sans-serif;
}
html[data-theme="dark"]{
  --paper:#0F1730; --paper-2:#1B2540; --card:#172138;
  --ink:#E8ECF7; --muted:#94A3C2; --line:rgba(232,236,247,.15);
  --vermilion:#FF5E43; --vermilion-deep:#C23420;
  --marigold:#FAB73E; --marigold-deep:#CC8A1E;
  --teal:#33C2AC; --teal-deep:#1E7E70;
  --ok-bg:rgba(51,194,172,.17); --ok-tx:#8FE6D6; --bad-bg:rgba(255,94,67,.17); --bad-tx:#FFB0A0;
  --shadow:0 20px 46px -20px rgba(0,0,0,.78);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-ui); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55; min-height:100vh;
  transition:background-color .35s,color .35s;
}
a{text-decoration:none;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tamil{font-family:var(--font-tamil)}

/* ---------------- App layout ---------------- */
.app{display:block}
.aside{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:40;background:var(--card);
  border:none;border-right:1px solid var(--line);border-radius:0;box-shadow:2px 0 24px -18px rgba(70,30,10,.5);
  padding:18px 14px;display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.aside .brand{display:flex;align-items:center;gap:11px;padding:6px 6px 14px}
.mark{width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--paper);display:grid;place-items:center;
  font-family:var(--font-tamil);font-weight:800;font-size:24px;transform:rotate(-4deg);box-shadow:var(--shadow);flex:none}
.brand b{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1}
.brand span{display:block;font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-weight:600;font-size:15px;border:1px solid transparent;color:var(--ink)}
.nav-item .ni{width:30px;height:30px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-tamil);font-weight:800;font-size:15px;color:var(--muted);flex:none}
.nav-item:hover{background:var(--paper-2)}
.nav-item.active{background:var(--vermilion);color:#fff;box-shadow:0 6px 0 var(--vermilion-deep)}
.nav-item.active .ni{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
.nav-sep{flex:1;min-height:10px}
.nav-profile-row{display:flex;align-items:stretch;gap:6px}
.nav-profile-row .nav-profile{flex:1;min-width:0}
.nav-logout{flex:none;width:38px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);color:var(--muted);font-size:16px;cursor:pointer}
.nav-logout:hover{color:var(--vermilion);border-color:var(--vermilion)}
.nav-profile{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line)}
.nav-profile .av{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.nav-profile b{font-size:14px}.nav-profile span{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.main{margin-left:240px;min-width:0;padding:26px clamp(20px,4vw,56px) 64px}
.main>*{max-width:1080px;margin-left:auto;margin-right:auto}

/* ---------------- Topbar ---------------- */
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:22px}
.topbrand{display:none;align-items:center;gap:10px;margin-right:auto}
.hud{display:flex;gap:9px}
.pill{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);padding:8px 13px;
  border-radius:999px;font-weight:800;font-size:14.5px}
.pill.fire{color:var(--vermilion-deep)}.pill.xp{color:var(--marigold-deep)}.pill.heart{color:var(--vermilion)}
html[data-theme="dark"] .pill.fire,html[data-theme="dark"] .pill.heart{color:var(--vermilion)}
html[data-theme="dark"] .pill.xp{color:var(--marigold)}
.toggle{cursor:pointer;color:var(--ink);font-size:1.1rem;line-height:1;padding:8px 12px}
.toggle:hover{border-color:var(--marigold);color:var(--marigold-deep)}

/* ---------------- Shared ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);position:relative;overflow:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.cta{font-family:inherit;font-weight:800;font-size:16px;color:#fff;background:var(--vermilion);border:none;border-radius:999px;
  padding:13px 28px;cursor:pointer;box-shadow:0 6px 0 var(--vermilion-deep);transition:transform .1s,box-shadow .1s}
.cta:hover{transform:translateY(-1px)}.cta:active{transform:translateY(4px);box-shadow:0 2px 0 var(--vermilion-deep)}
.cta:disabled{opacity:.55;cursor:default;box-shadow:0 6px 0 var(--vermilion-deep)}
.ghost{font-family:inherit;font-weight:700;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:11px 18px;cursor:pointer}
.ghost:hover{border-color:var(--marigold);color:var(--marigold-deep)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}

/* ---------------- Page hero ---------------- */
.phero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.phero h1{font-size:30px;line-height:1.05;margin-top:4px}
.chips{display:flex;gap:8px;flex:none}
.chip{font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.chip.combo{background:var(--vermilion);color:#fff;border-color:transparent}

/* ---------------- Leçon ---------------- */
.dots{display:flex;gap:6px;margin:0 auto 22px}
.dots i{height:7px;flex:1;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.dots i.done{background:var(--teal);border-color:transparent}.dots i.cur{background:var(--marigold);border-color:transparent}
.grid{display:grid;grid-template-columns:1.55fr .95fr;gap:20px}
.ex{padding:28px}
.skills{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.skills span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);padding:6px 11px;border-radius:999px}
.skills span.on{color:#fff;background:var(--teal);border-color:transparent}
.glyphwrap{position:relative;display:grid;place-items:center;padding:14px 0 6px}
.sun{position:absolute;width:280px;height:280px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(244,165,10,.18) 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 38%,transparent 62%);mask:radial-gradient(circle,#000 38%,transparent 62%);animation:spin 60s linear infinite;z-index:0}
@keyframes spin{to{transform:rotate(360deg)}}
.glyph{position:relative;z-index:1;font-family:var(--font-tamil);font-weight:800;font-size:clamp(40px,9vw,80px);line-height:1.15;max-width:100%;text-align:center;overflow-wrap:normal;text-shadow:0 6px 0 rgba(220,59,34,.12)}
/* Consigne en français dans l'emplacement du glyphe (construire/écrire/dialogue) : sobre, pas géant */
.glyph.fr{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,4.5vw,32px);line-height:1.3;text-shadow:none}
.listen{position:relative;z-index:1;margin-top:6px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:11px 20px;font-family:inherit;font-weight:800;font-size:14px}
.q{font-family:var(--font-display);font-size:22px;font-weight:500;text-align:center;margin:14px 6px 4px;line-height:1.25}
.latin{text-align:center;color:var(--muted);font-weight:700;letter-spacing:.04em;margin-bottom:20px;font-size:17px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{font-family:inherit;font-size:17px;font-weight:600;text-align:left;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:15px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:54px;transition:transform .12s,border-color .12s,background .12s}
/* Options en écriture tamoule (construire / dialogue) : plus grandes, aérées */
.choices.ta .choice{font-family:var(--font-tamil);font-size:21px;line-height:1.5;font-weight:700}
/* Identifier : lettres seules → grosses tuiles centrées */
.choices.ta.glyphs{grid-template-columns:repeat(4,minmax(0,1fr))}
.choices.ta.glyphs .choice{justify-content:center;text-align:center;font-size:32px;padding:14px 6px;gap:0}
.choices.ta.glyphs .choice .k{display:none}
.choice .k{width:26px;height:26px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--muted);flex:none}
.choice:hover:not([disabled]){transform:translateY(-2px);border-color:var(--teal)}
.choice.correct{background:var(--ok-bg);border-color:var(--teal);color:var(--ok-tx)}
.choice.correct .k{background:var(--teal);color:#fff;border-color:transparent}
.choice.wrong{background:var(--bad-bg);border-color:var(--vermilion);color:var(--bad-tx)}
.choice.wrong .k{background:var(--vermilion);color:#fff;border-color:transparent}
.foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;flex-wrap:wrap}
/* Leçon sur mobile : options tamoules pleine largeur, bouton Continuer plein pied */
@media(max-width:560px){
  .ex{padding:20px 16px}
  .choices.ta{grid-template-columns:1fr}
  .choices.ta.glyphs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot{flex-direction:column;align-items:stretch}
  .foot .cta{width:100%;text-align:center}
  .feedback{text-align:center}
}
.feedback{font-weight:600;color:var(--muted);font-size:16px}
.feedback.good{color:var(--teal)}.feedback.bad{color:var(--bad-tx)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.typebox{display:flex;flex-direction:column;gap:12px}
.typebox input{font:inherit;font-family:var(--font-tamil);font-size:20px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);width:100%}
.typebox input:focus{outline:none;border-color:var(--teal)}
.kb{display:flex;flex-wrap:wrap;gap:6px}
.kb button{font-family:var(--font-tamil);font-size:19px;min-width:40px;padding:9px 8px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);cursor:pointer;font-weight:700}
.kb button:hover{border-color:var(--marigold)}
.kb button.util{font-family:var(--font-ui);font-size:12.5px;color:var(--muted)}
/* Banc de tuiles (écriture par graphèmes) */
.compose{min-height:52px;font-size:24px;padding:12px 16px;border:1.5px dashed var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);letter-spacing:2px}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tiles button{font-family:var(--font-tamil);font-size:23px;min-width:52px;padding:11px 13px;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer;font-weight:700;transition:transform .08s ease}
.tiles button:hover:not(:disabled){border-color:var(--marigold);transform:translateY(-1px)}
.tiles button:disabled{opacity:.35;cursor:default}
/* Dialogue avec Puli (bulles) */
.scene{display:flex;flex-direction:column;gap:8px;margin:2px 0 10px}
.scene:empty{display:none}
.scene .bub{max-width:85%;padding:10px 14px;border-radius:16px;border:1px solid var(--line);background:var(--paper)}
.scene .bub b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.scene .bub .tamil{font-size:20px;font-weight:700;display:block}
.scene .bub small{color:var(--muted)}
.scene .bub.puli{align-self:flex-start;border-bottom-left-radius:4px;background:var(--card)}
.scene .bub.me{align-self:flex-end;border-bottom-right-radius:4px;background:color-mix(in srgb, var(--marigold) 12%, var(--paper))}
/* Parrainage */
.invite-row{display:flex;gap:8px;flex-wrap:wrap}
.invite-row input{flex:1;min-width:200px;font:inherit;font-size:13.5px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--muted)}
/* Parcours verrouillé */
.unit-card.lockedu{opacity:.55;filter:grayscale(.5);cursor:not-allowed;position:relative}
.unit-card.lockedu .lock{margin-left:auto;font-size:15px;flex:none}
/* Accueil : CTA + lien placement côte à côte */
.welcome .cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.welcome .cta-row .cta{margin-top:0}
.welcome .cta-row .ghost{text-decoration:none;font-size:13.5px;padding:10px 14px}
.reward{padding:34px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.reward-stars{font-size:42px;color:var(--marigold);letter-spacing:6px;line-height:1}
.reward h2{font-size:24px}
.reward-sub{color:var(--muted);max-width:38ch}
.reward-grid{display:flex;gap:12px;margin:14px 0 6px;flex-wrap:wrap;justify-content:center}
.reward-grid>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 18px;min-width:86px}
.reward-grid b{font-family:var(--font-display);font-size:24px;font-weight:600;display:block;line-height:1}
.reward-grid span{font-size:11.5px;color:var(--muted);font-weight:700}
.reward .cta{margin-top:14px}

/* ---------------- Pages de contenu (cours, alphabet, révision, défis…) ---------------- */
.page-head{margin-bottom:22px}
.page-head .eyebrow{margin-bottom:6px}
.page-head h1{font-size:clamp(26px,3.4vw,34px);line-height:1.05}
.page-head p{color:var(--muted);margin-top:8px;max-width:60ch}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 16px}
.metric b{font-family:var(--font-display);font-size:26px;font-weight:600;display:block;line-height:1}
.metric span{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.03em}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ccard{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.ccard .tags{display:flex;gap:6px;flex-wrap:wrap}
.ccard .tags span{font-size:11px;font-weight:700;color:var(--teal-deep);background:var(--paper-2);border-radius:999px;padding:3px 9px}
html[data-theme="dark"] .ccard .tags span{color:var(--teal)}
.ccard h3{font-size:16px}
.ccard p{color:var(--muted);font-size:13.5px;flex:1}
.ccard .cta{align-self:flex-start;padding:10px 18px;font-size:14px}
.glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.glyph-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 6px;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s}
.glyph-card:hover{transform:translateY(-2px);border-color:var(--marigold)}
.glyph-card .g{font-family:var(--font-tamil);font-size:32px;font-weight:800;line-height:1.2}
.glyph-card small{color:var(--muted);font-weight:700;font-size:12px}
.subhead{font-family:var(--font-display);font-weight:600;font-size:18px;margin:6px auto 12px}
.syll-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.syll{border-collapse:collapse;width:100%;min-width:640px}
.syll th,.syll td{border:1px solid var(--line);padding:7px 4px;text-align:center;font-size:13px}
.syll thead th{background:var(--paper-2);font-weight:800;color:var(--muted)}
.syll tbody th{background:var(--paper-2);font-family:var(--font-tamil);font-size:18px}
.syll td{font-family:var(--font-tamil);font-size:17px;cursor:pointer}
.syll td:hover{background:var(--ok-bg)}
.rows{display:flex;flex-direction:column;gap:10px}
.row-card{display:flex;align-items:center;gap:13px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.row-card .ic{width:40px;height:40px;border-radius:11px;background:var(--paper-2);display:grid;place-items:center;font-family:var(--font-tamil);font-weight:800;font-size:18px;line-height:1;overflow:hidden;color:var(--muted);flex:none}
.row-card .ic.done{background:var(--teal);color:#fff}
.row-card b{font-size:14.5px;display:block}.row-card small{color:var(--muted);font-size:12.5px}
.row-card .pill-end{margin-left:auto;font-weight:800;font-size:12.5px;color:var(--muted);flex:none}
.review-cta{display:flex;justify-content:center;margin:6px auto 22px}
.intro{padding:20px 22px;margin-bottom:22px;position:relative;border-left:4px solid var(--vermilion)}
.intro h2{font-size:19px;margin:4px 0 6px}
.intro p{color:var(--muted);max-width:64ch}
.intro-x{position:absolute;top:12px;right:14px;background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1}
.intro-x:hover{color:var(--vermilion)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:80;background:var(--ink);color:var(--paper);
  font-weight:800;font-size:14.5px;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:880px){.toast{bottom:88px}}
.record{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:4px}
.rec-btn{padding:11px 22px}
.rec-result{color:var(--muted);font-size:13px;text-align:center}
.side{display:flex;flex-direction:column;gap:20px}
.puli{padding:20px;display:flex;gap:13px;align-items:center}
.puli .bubble b{font-family:var(--font-display);font-weight:600;font-size:16px}
.puli .bubble p{color:var(--muted);font-size:13.5px;margin-top:2px}
/* ---- Mascotte Puli ---- */
.puli-img{flex:none;display:block}
.puli .puli-img{width:60px;height:auto}
.puli-svg{width:60px;height:60px}
.puli-reward{width:96px;height:auto;margin:0 auto 6px}
.puli-pop{animation:puliPop .42s ease}
@keyframes puliPop{0%{transform:scale(1)}35%{transform:scale(1.13) rotate(-4deg)}100%{transform:scale(1)}}
.welcome{position:relative;overflow:hidden}
.welcome>.eyebrow,.welcome>h1,.welcome>p,.welcome>.cta,.welcome>.cta-row{position:relative;z-index:1}
.puli-hero{position:absolute;right:10px;bottom:-4px;width:132px;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 8px 12px rgba(43,26,16,.16))}
@media(min-width:621px){.home-hero .welcome{padding-right:150px}}
@media(max-width:620px){.puli-hero{display:none}}
.goal{padding:20px}
.goal h3{font-size:16px;margin-bottom:3px}.goal .sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.ring{--p:0;width:120px;height:120px;margin:0 auto 14px;border-radius:50%;position:relative;background:conic-gradient(var(--marigold) calc(var(--p)*1%),var(--paper-2) 0)}
.ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:var(--font-display);z-index:1}
.ring b i{font-style:normal;font-size:29px;font-weight:600;display:block;line-height:1}.ring b small{color:var(--muted);font-size:12px;font-weight:700}
.streakrow{display:flex;gap:10px}
.streakrow .s{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px;text-align:center}
.streakrow .s i{font-style:normal;font-family:var(--font-display);font-size:21px;font-weight:600;display:block}
.streakrow .s span{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.04em}

/* ---------------- Accueil / parcours ---------------- */
.home-hero{display:grid;grid-template-columns:1.4fr .9fr;gap:20px;margin-bottom:22px}
.welcome{padding:24px;display:flex;flex-direction:column;justify-content:center}
.welcome .eyebrow{margin-bottom:8px}
.welcome h1{font-size:clamp(28px,4vw,40px);line-height:1.02}
.welcome p{color:var(--muted);margin-top:10px;max-width:46ch}
.welcome .cta{margin-top:18px;align-self:flex-start}
.streak-card{padding:22px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(150deg,var(--vermilion),var(--marigold));color:#fff;border:none}
.streak-card .big{font-family:var(--font-display);font-size:46px;font-weight:600;line-height:1}
.streak-card small{font-weight:800;letter-spacing:.04em;opacity:.92}
.streak-card .xpbar{height:9px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden}
.streak-card .xpbar i{display:block;height:100%;width:var(--xpp,0);background:#fff;border-radius:999px}
.module-block{margin-bottom:22px}
.module-head{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 12px}
.module-head h2{font-size:20px}.module-head span{font-size:12.5px;font-weight:800;color:var(--muted)}
.section-switch{display:flex;align-items:baseline;justify-content:flex-start;gap:14px;margin:2px auto 10px}
.section-switch .eyebrow{margin:0}
.switch-link{font-weight:800;font-size:13px;color:var(--teal);text-decoration:none;white-space:nowrap}
.switch-link:hover{text-decoration:underline}
.unit-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.unit-card{display:flex;align-items:center;gap:13px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);transition:transform .12s,border-color .12s;cursor:pointer}
.unit-card:hover{transform:translateY(-2px);border-color:var(--teal)}
.unit-card .ic{width:48px;height:48px;border-radius:13px;background:var(--paper-2);display:grid;place-items:center;font-family:var(--font-tamil);font-weight:800;font-size:22px;line-height:1;overflow:hidden;color:var(--ink);flex:none}
.unit-card.next .ic{background:var(--vermilion);color:#fff}
.unit-card.done .ic{background:var(--teal);color:#fff}
.unit-card b{font-size:15px;display:block}.unit-card small{color:var(--muted);font-size:12.5px}
.unit-card .stars{margin-left:auto;color:var(--marigold);font-size:13px;letter-spacing:1px;flex:none}
.unit-card.locked{opacity:.5;cursor:default}.unit-card.locked:hover{transform:none;border-color:var(--line)}

/* ---- Rétention : statut série, quêtes, révision, mot du jour, badges ---- */
.streak-status{font-weight:800;font-size:12.5px;padding:5px 0}
.streak-status.ok{color:#fff;opacity:.95}.streak-status.risk{color:#fff;opacity:.95}
.daily-row{display:grid;grid-template-columns:1.6fr .9fr;gap:20px;margin-bottom:22px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.card-head h2{font-size:18px}
.quests{padding:20px}
.q-count{font-weight:800;color:var(--teal);font-size:13px}
.quest{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.quest:first-of-type{border-top:none}
.q-ic{width:30px;height:30px;border-radius:9px;background:var(--paper-2);display:grid;place-items:center;font-family:var(--font-tamil);font-weight:800;flex:none;color:var(--muted)}
.quest.done .q-ic{background:var(--teal);color:#fff}
.q-body{flex:1;min-width:0}.q-body b{font-size:14px;display:block;margin-bottom:5px}
.q-bar{height:7px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.q-bar i{display:block;height:100%;background:var(--marigold);border-radius:999px;transition:width .4s}
.quest.done .q-bar i{background:var(--teal)}
.q-num{font-weight:800;font-size:12.5px;color:var(--muted);flex:none}
.review-nudge{padding:20px;display:flex;flex-direction:column;gap:4px}
.review-nudge .big-num{font-family:var(--font-display);font-size:46px;font-weight:600;line-height:1;color:var(--vermilion)}
.review-nudge p{color:var(--muted);font-size:13px;flex:1}
.review-nudge .ghost{align-self:flex-start;margin-top:6px}
.word-day{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;
  background:linear-gradient(135deg,var(--card),var(--paper-2))}
.wd-tamil{font-family:var(--font-tamil);font-weight:800;font-size:40px;line-height:1.1;margin:6px 0 2px}
.word-day p{color:var(--muted)}
.badges-strip{margin-bottom:22px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.badge{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 6px;text-align:center;opacity:.45;filter:grayscale(.7)}
.badge.on{opacity:1;filter:none;border-color:var(--marigold)}
.badge .b-ic{font-size:24px;display:block;line-height:1}
.badge small{font-size:11px;font-weight:700;color:var(--muted);display:block;margin-top:4px}
@media(max-width:880px){.daily-row{grid-template-columns:1fr}}

/* ---- Compte ---- */
.account-pill{text-decoration:none;font-size:14px}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.auth-card{padding:22px;display:flex;flex-direction:column;gap:12px}
.auth-card .subhead{margin:0 0 4px}
.auth-card input{font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.auth-card input:focus{outline:none;border-color:var(--teal)}
.auth-card .cta{margin-top:4px}
.auth-err{color:var(--bad-tx);font-size:13px;font-weight:600}
.auth-me{display:flex;align-items:center;gap:14px}
.av-lg{width:54px;height:54px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:24px;flex:none}
.auth-me b{font-family:var(--font-display);font-size:18px;display:block}.auth-me span{color:var(--muted);font-size:13.5px}
@media(max-width:880px){.auth-grid{grid-template-columns:1fr}}

/* ---------------- Tabbar (mobile) ---------------- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -12px 30px -16px rgba(70,30,10,.5);padding:7px 6px calc(7px + env(safe-area-inset-bottom));justify-content:space-around}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;padding:5px 0;color:var(--muted);font-weight:800;font-size:10.5px}
.tab .ti{font-family:var(--font-tamil);font-weight:800;font-size:19px;line-height:1}
.tab.active{color:var(--vermilion-deep)}
html[data-theme="dark"] .tab.active{color:var(--vermilion)}

.reveal{opacity:0;transform:translateY(12px);animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:880px){
  .aside{display:none}
  .main{margin-left:0;padding:18px 14px 90px}
  .main>*{max-width:none}
  .tabbar{display:flex}
  .topbrand{display:flex}
  .topbar{justify-content:space-between}
  .grid,.home-hero{grid-template-columns:1fr}
  .phero h1{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.sun{animation:none}.reveal{animation:none;opacity:1;transform:none}}