/* Layout: sidebar (desktop) + content column; bottom bar on mobile. Night-blue / off-white, bright violet primary, turquoise for success. */
:root{
  --bg:#F4F3FA; --bg-glow:#EAE4FF; --surface:#FFFFFF; --surface-2:#F0EDFA; --surface-3:#E6E1F7;
  --ink:#1A1736; --ink-2:#5A5680; --ink-3:#8A86AD; --line:#E2DEF2;
  --primary:#7445F5; --primary-2:#9168FF; --primary-ink:#FFFFFF; --primary-soft:#EDE6FF;
  --teal:#0AA6A0; --teal-ink:#05504D; --teal-soft:#D5F4F2;
  --amber:#C9810F; --amber-soft:#FFF0D6; --rose:#D24C72; --rose-soft:#FDE3EA;
  --stu-body:#FFFFFF; --stu-shade:#E4E1F2; --stu-line:#2A2650;
  --shadow:0 1px 2px rgba(40,30,90,.06),0 6px 20px -8px rgba(60,40,140,.18);
  --shadow-lg:0 20px 50px -20px rgba(60,40,140,.35);
  --f-display:"Bricolage Grotesque","Nunito",system-ui,sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-ar:"Noto Naskh Arabic","Geeza Pro","Arial",serif;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --side:248px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0E2A; --bg-glow:#1C1758; --surface:#141842; --surface-2:#1B2052; --surface-3:#252B66;
  --ink:#EEECFF; --ink-2:#AAA8D6; --ink-3:#7C7AAE; --line:#2A2F68;
  --primary:#9670FF; --primary-2:#B496FF; --primary-ink:#FFFFFF; --primary-soft:#2B2475;
  --teal:#34D6D0; --teal-ink:#A8F2EF; --teal-soft:#103E4C;
  --amber:#F2B44C; --amber-soft:#3E2F17; --rose:#F07C9C; --rose-soft:#43213A;
  --stu-body:#FFFFFF; --stu-shade:#D9D6EE; --stu-line:#1A1736;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B0E2A; --bg-glow:#1C1758; --surface:#141842; --surface-2:#1B2052; --surface-3:#252B66;
  --ink:#EEECFF; --ink-2:#AAA8D6; --ink-3:#7C7AAE; --line:#2A2F68;
  --primary:#9670FF; --primary-2:#B496FF; --primary-ink:#FFFFFF; --primary-soft:#2B2475;
  --teal:#34D6D0; --teal-ink:#A8F2EF; --teal-soft:#103E4C;
  --amber:#F2B44C; --amber-soft:#3E2F17; --rose:#F07C9C; --rose-soft:#43213A;
  --stu-body:#FFFFFF; --stu-shade:#D9D6EE; --stu-line:#1A1736;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-20% -10% auto auto;width:60vw;height:60vw;background:radial-gradient(closest-side,var(--bg-glow),transparent);opacity:.7;pointer-events:none;z-index:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,3.2vw,2.15rem);font-weight:700}
h2{font-size:1.3rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid var(--primary-2);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:.85rem}
.tiny{font-size:.75rem}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
[dir="rtl"],.rtl{font-family:var(--f-ar)}

/* ---------- shell ---------- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:6px;padding:20px 14px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(12px);overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;cursor:pointer;border:0;background:none;text-align:left}
.brand svg{flex:none}
.wordmark{font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1}
.wordmark b{color:var(--primary);font-weight:800}
.brand .tag{display:block;font-size:.7rem;color:var(--ink-3);font-weight:700;margin-top:3px;letter-spacing:.02em}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-label{padding:14px 12px 4px}
.nav-btn{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:0;border-radius:12px;background:none;color:var(--ink-2);font-weight:700;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.nav-btn svg{width:20px;height:20px;flex:none}
.nav-btn:hover{background:var(--surface-2);color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--primary-soft);color:var(--primary)}
:root[data-theme="dark"] .nav-btn[aria-current="page"]{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav-btn[aria-current="page"]{color:var(--ink)}}
.side-foot{margin-top:auto;padding:12px;border-radius:var(--r);background:var(--surface-2);display:flex;flex-direction:column;gap:6px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:12px;padding:12px 28px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.topbar.scrolled{border-bottom-color:var(--line)}
.search{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-3);cursor:text}
.search input{border:0;background:none;outline:none;flex:1;min-width:0;color:var(--ink)}
.chip-stat{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:800;font-size:.9rem;white-space:nowrap}
.chip-stat svg{width:18px;height:18px}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink-2);flex:none}
.icon-btn:hover{color:var(--ink);border-color:var(--primary-2)}
.icon-btn svg{width:20px;height:20px}
.mobile-brand{display:none}

.view{padding:24px 28px 120px;max-width:1180px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:22px;animation:rise .35s ease both}
@keyframes rise{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.view-head p{max-width:62ch}

.bottombar{display:none}
.fab{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:8px;padding:10px 16px 10px 10px;border-radius:999px;border:0;background:var(--primary);color:var(--primary-ink);font-weight:800;box-shadow:var(--shadow-lg);cursor:pointer}
.fab .mini-stu{width:34px;height:34px;border-radius:50%;background:var(--surface);display:grid;place-items:center;overflow:hidden}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .topbar{padding:10px 16px}
  .mobile-brand{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0;cursor:pointer}
  .mobile-brand .wordmark{font-size:1.1rem}
  .search{display:none}
  .search.open{display:flex;position:absolute;left:12px;right:12px;top:8px;max-width:none;z-index:2}
  .hide-m{display:none!important}
  .view{padding:16px 16px 130px}
  .bottombar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;padding:6px;border-radius:22px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .bb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;background:none;color:var(--ink-3);font-size:.68rem;font-weight:800;cursor:pointer;border-radius:14px}
  .bb svg{width:22px;height:22px}
  .bb[aria-current="page"]{color:var(--primary);background:var(--primary-soft)}
  :root[data-theme="dark"] .bb[aria-current="page"]{color:var(--ink)}
  .bb.center{color:var(--primary-ink)}
  .bb.center span.disc{display:grid;place-items:center;width:46px;height:46px;margin-top:-22px;border-radius:16px;background:var(--primary);box-shadow:var(--shadow-lg)}
  .fab{bottom:calc(92px + env(safe-area-inset-bottom,0px));right:16px;padding:8px}
  .fab .lbl{display:none}
}
@media (min-width:901px){.show-m{display:none!important}}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);min-width:0}
.card.flat{box-shadow:none}
.card.tint{background:var(--surface-2);box-shadow:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media (max-width:1050px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.nowrap{flex-wrap:nowrap}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.stack.tight{gap:6px}
.grow{flex:1;min-width:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:14px;border:1px solid transparent;background:var(--surface-2);color:var(--ink);font-weight:800;cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;white-space:nowrap;text-decoration:none}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--primary) 60%,#000)}
.btn.primary:hover{background:var(--primary-2)}
.btn.primary:active{box-shadow:0 2px 0 color-mix(in srgb,var(--primary) 60%,#000);transform:translateY(2px)}
.btn.teal{background:var(--teal);color:#032B2A}
.btn.ghost{background:none;border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--rose-soft);color:var(--rose)}
.btn.sm{padding:7px 12px;border-radius:11px;font-size:.88rem}
.btn.lg{padding:14px 22px;font-size:1.05rem;border-radius:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn.block{width:100%}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:800;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pill.violet{background:var(--primary-soft);color:var(--primary)}
.pill.teal{background:var(--teal-soft);color:var(--teal-ink)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.rose{background:var(--rose-soft);color:var(--rose)}
:root[data-theme="dark"] .pill.violet{color:var(--primary-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.violet{color:var(--primary-2)}}

label.field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.88rem;color:var(--ink-2);min-width:0}
.input,select.input,textarea.input{width:100%;padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s}
.input:focus{border-color:var(--primary)}
textarea.input{resize:vertical;min-height:90px;line-height:1.5}
.input.mono{font-size:.9rem}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-2);border-radius:14px}
.seg button{border:0;background:none;padding:7px 12px;border-radius:10px;font-weight:800;font-size:.85rem;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);padding:7px 13px;border-radius:999px;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--ink-2)}
.chip:hover{border-color:var(--primary-2);color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:var(--ink)}

.bar{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar.teal>i{background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 60%,#fff))}
.ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p)*1%),var(--surface-3) 0);display:grid;place-items:center;flex:none}
.ring>span{width:50px;height:50px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:.85rem}

.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--amber-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)}
.notice.info{background:var(--teal-soft);border-color:color-mix(in srgb,var(--teal) 30%,transparent)}
.notice.violet{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.notice svg{flex:none;width:20px;height:20px;margin-top:2px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:34px 18px}
.empty p{max-width:44ch}
.list{display:flex;flex-direction:column}
.list>.li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line);min-width:0}
.list>.li:first-child{border-top:0}
.li-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--primary-soft);color:var(--primary)}
.li-icon svg{width:20px;height:20px}
.clickable{cursor:pointer}
.clickable:hover{background:var(--surface-2);border-radius:12px}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subj-dot{width:10px;height:10px;border-radius:50%;flex:none}
.spinner{width:20px;height:20px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--primary);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px;height:14px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- dashboard ---------- */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 26px;border-radius:28px;background:linear-gradient(135deg,var(--primary) 0%,color-mix(in srgb,var(--primary) 55%,#1B1660) 100%);color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:28px solid rgba(255,255,255,.07)}
.hero .stu-wrap{width:118px;height:128px}
.hero h1{color:#fff}
.hero .say{font-size:1.02rem;opacity:.95;max-width:52ch}
.hero .btn.light{background:#fff;color:#2A1A7A;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.hero .btn.glass{background:rgba(255,255,255,.14);color:#fff}
.hero .btn.glass:hover{background:rgba(255,255,255,.22)}
@media (max-width:760px){.hero{grid-template-columns:auto minmax(0,1fr);padding:18px}.hero .stu-wrap{width:84px;height:92px}.hero .hero-side{grid-column:1/-1}}
.stat-tile{display:flex;flex-direction:column;gap:4px}
.stat-tile .num{font-family:var(--f-display);font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.goal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.goal .check{width:26px;height:26px;border-radius:9px;border:2px solid var(--line);display:grid;place-items:center}
.goal.done .check{background:var(--teal);border-color:var(--teal);color:#032B2A}
.quick{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:transform .15s,border-color .15s;box-shadow:var(--shadow)}
.quick:hover{transform:translateY(-2px);border-color:var(--primary-2)}
.quick .qi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}
.quick .qi svg{width:22px;height:22px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wd{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;font-weight:800;color:var(--ink-3)}
.wd i{width:30px;height:30px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-style:normal;color:var(--ink-3)}
.wd.on i{background:var(--teal);color:#032B2A}
.wd.today i{outline:2px solid var(--primary)}

/* ---------- import / courses ---------- */
.drop{border:2px dashed color-mix(in srgb,var(--primary) 45%,var(--line));border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:color-mix(in srgb,var(--primary-soft) 45%,var(--surface));transition:background .15s,border-color .15s}
.drop.over{background:var(--primary-soft);border-color:var(--primary)}
.file-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.page-box{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.page-box header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2);flex-wrap:wrap}
.page-box textarea{border:0;border-radius:0;min-height:160px;font-size:.92rem}
.flag{background:var(--amber-soft);color:var(--amber);padding:0 4px;border-radius:4px;font-weight:800}
.course-card{display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:transform .15s,border-color .15s}
.course-card:hover{transform:translateY(-2px);border-color:var(--primary-2)}
.course-cover{height:84px;border-radius:14px;display:flex;align-items:flex-end;padding:10px 12px;color:#fff;font-family:var(--f-display);font-weight:800;position:relative;overflow:hidden}
.course-cover svg.deco{position:absolute;right:-6px;top:-6px;width:90px;height:90px;opacity:.25}
.doc-text{white-space:pre-wrap;font-size:.95rem;line-height:1.65;max-height:60vh;overflow:auto;padding:16px;border-radius:var(--r);background:var(--surface-2)}

/* ---------- chat ---------- */
.chat{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;min-height:calc(100dvh - 170px)}
@media (max-width:1000px){.chat{grid-template-columns:minmax(0,1fr)}.chat-side{display:none}.chat-side.open{display:flex}}
.chat-side{display:flex;flex-direction:column;gap:10px}
.chat-main{display:flex;flex-direction:column;min-height:60vh;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.chat-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;max-height:62vh}
.msg{display:flex;gap:10px;max-width:88%;min-width:0}
.msg .bubble{padding:12px 15px;border-radius:18px;background:var(--surface-2);min-width:0;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bubble{background:var(--primary);color:var(--primary-ink);border-bottom-right-radius:6px}
.msg.ai .bubble{border-bottom-left-radius:6px}
.msg .av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.msg-tools{display:flex;gap:4px;margin-top:6px}
.msg-tools button{border:0;background:none;color:var(--ink-3);cursor:pointer;padding:4px;border-radius:8px}
.msg-tools button:hover{color:var(--primary);background:var(--surface-3)}
.msg-tools svg{width:16px;height:16px}
.composer{border-top:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px}
.composer .row textarea{flex:1;min-height:48px;max-height:180px}
.typing span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--ink-3);animation:bl 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.25;transform:translateY(-3px)}}

/* ---------- markdown ---------- */
.md{min-width:0}
.md>*+*{margin-top:.6em}
.md h1,.md h2,.md h3{font-size:1.08rem;margin-top:1em}
.md h1{font-size:1.25rem}
.md ul,.md ol{padding-left:1.3em;margin:0}
.md li+li{margin-top:.25em}
.md code{font-family:var(--f-mono);font-size:.88em;background:var(--surface-3);padding:1px 5px;border-radius:5px}
.msg.me .md code{background:rgba(255,255,255,.18)}
.md pre{background:var(--surface-3);padding:10px 12px;border-radius:10px;overflow-x:auto}
.md pre code{background:none;padding:0}
.md blockquote{margin:0;padding:6px 12px;border-left:3px solid var(--teal);background:var(--teal-soft);border-radius:0 10px 10px 0}
.md table{border-collapse:collapse;font-size:.9rem;display:block;overflow-x:auto;max-width:100%}
.md td,.md th{border:1px solid var(--line);padding:6px 10px;text-align:left}
.md th{background:var(--surface-2)}
.src{display:inline-block;font-size:.72rem;font-weight:800;padding:1px 7px;border-radius:999px;vertical-align:1px}
.src.cours{background:var(--teal-soft);color:var(--teal-ink)}
.src.plus{background:var(--primary-soft);color:var(--primary)}
:root[data-theme="dark"] .src.plus{color:var(--primary-2)}

/* ---------- exercises ---------- */
.q-card{display:flex;flex-direction:column;gap:14px}
.q-prompt{font-size:1.12rem;font-weight:700;line-height:1.45}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;border-radius:14px;border:2px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font-weight:700;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--primary-2)}
.opt .k{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);font-family:var(--f-mono);font-size:.85rem;flex:none}
.opt[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.opt.ok{border-color:var(--teal);background:var(--teal-soft)}
.opt.ko{border-color:var(--rose);background:var(--rose-soft)}
.feedback{padding:16px;border-radius:var(--r);display:flex;flex-direction:column;gap:10px}
.feedback.ok{background:var(--teal-soft)}
.feedback.ko{background:var(--rose-soft)}
.feedback.info{background:var(--surface-2)}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:6px;padding:0;margin:0;list-style:none}
.steps li{counter-increment:s;display:flex;gap:10px}
.steps li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:7px;background:var(--surface);font-size:.75rem;font-weight:800;display:grid;place-items:center}
.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.progress-dots{display:flex;gap:5px;flex-wrap:wrap}
.progress-dots i{width:22px;height:8px;border-radius:9px;background:var(--surface-3)}
.progress-dots i.ok{background:var(--teal)}
.progress-dots i.ko{background:var(--rose)}
.progress-dots i.cur{background:var(--primary)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:800;color:var(--teal-ink)}
.unverified{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:800;color:var(--amber)}

/* ---------- flashcards ---------- */
.flash{perspective:1200px;height:280px;cursor:pointer}
.flash-in{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flash.flipped .flash-in{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:26px;padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-lg);overflow:auto}
.flash-face.back{transform:rotateY(180deg);background:var(--surface-2)}
.flash-face .big{font-family:var(--f-display);font-size:1.35rem;font-weight:700}
.rate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.rate{grid-template-columns:repeat(2,1fr)}}

/* ---------- concepts / kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1050px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kanban{grid-template-columns:minmax(0,1fr)}}
.col{background:var(--surface-2);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col h3{display:flex;align-items:center;gap:8px;padding:4px 6px}
.concept{background:var(--surface);border-radius:14px;padding:11px 12px;border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;cursor:pointer}
.concept:hover{border-color:var(--primary-2)}

/* ---------- planner ---------- */
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media (max-width:900px){.days{grid-template-columns:minmax(0,1fr)}}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:130px;min-width:0}
.day.today{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.task{padding:8px 10px;border-radius:11px;background:var(--surface-2);font-size:.84rem;display:flex;gap:8px;align-items:flex-start}
.task.done{opacity:.55;text-decoration:line-through}
.task input{margin-top:3px;accent-color:var(--teal)}

/* ---------- exam ---------- */
.exam-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);z-index:10;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);flex-wrap:wrap}
.timer{font-family:var(--f-mono);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.timer.low{color:var(--rose)}
.qnav{display:flex;flex-wrap:wrap;gap:6px}
.qnav button{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:800;cursor:pointer;font-family:var(--f-mono)}
.qnav button.answered{background:var(--primary-soft);border-color:var(--primary-2)}
.qnav button.cur{border-color:var(--primary);outline:2px solid var(--primary)}
.qnav button.ok{background:var(--teal-soft);border-color:var(--teal)}
.qnav button.ko{background:var(--rose-soft);border-color:var(--rose)}
.grade{font-family:var(--f-display);font-size:3.2rem;font-weight:800;line-height:1}

/* ---------- badges & stu ---------- */
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px 10px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.badge .medal{width:64px;height:64px}
.badge.locked .medal{filter:grayscale(1);opacity:.35}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:var(--r);border:2px solid var(--line);background:var(--surface);cursor:pointer;text-align:center}
.shop-item[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.shop-item.locked{opacity:.55;cursor:not-allowed}
.stu-float{animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}
.stu-svg .blink{animation:blink 5s infinite;transform-origin:center;transform-box:fill-box}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.speech{position:relative;background:var(--surface);color:var(--ink);padding:12px 14px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);font-weight:700}

/* ---------- overlays ---------- */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(10,8,40,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{width:min(620px,100%);max-height:88vh;overflow:auto;background:var(--surface);border-radius:26px;padding:22px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:16px;animation:rise .25s}
.modal.wide{width:min(900px,100%)}
.sheet-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sheet-list button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:16px;border:1px solid var(--line);background:var(--surface);font-weight:800;font-size:.8rem;cursor:pointer;color:var(--ink-2)}
.sheet-list svg{width:24px;height:24px;color:var(--primary)}
.toasts{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(440px,calc(100% - 32px))}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;background:var(--ink);color:var(--bg);font-weight:800;box-shadow:var(--shadow-lg);animation:rise .25s}
.toast.xp{background:var(--teal);color:#032B2A}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:150}
.focus-overlay{position:fixed;inset:0;z-index:120;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center}
.focus-overlay .clock{font-family:var(--f-mono);font-size:clamp(3.5rem,14vw,7rem);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.mindmap{overflow-x:auto;padding:8px}
.mm-node{display:inline-block;padding:6px 12px;border-radius:12px;background:var(--surface-2);font-weight:700;margin:3px 0}
.mm-root{background:var(--primary);color:var(--primary-ink);font-family:var(--f-display);font-size:1.1rem}
.mm ul{list-style:none;margin:0;padding-left:26px;border-left:2px solid var(--line)}
.mm li{position:relative;padding-left:8px}
.mm li::before{content:"";position:absolute;left:-26px;top:20px;width:30px;height:2px;background:var(--line)}
.hl{background:color-mix(in srgb,var(--amber) 30%,transparent);border-radius:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.side,.topbar,.bottombar,.fab{display:none!important}.app{display:block}}

/* ---------- flammes ---------- */
.flame{display:inline-block;font-size:1.05em;line-height:1;filter:drop-shadow(0 2px 4px rgba(242,120,40,.35))}
.flame.off{filter:grayscale(1);opacity:.45}
.flame.lg{font-size:2rem}
#streak-chip{font-weight:800;color:var(--ink)}
.wd.on i.flame-dot{background:var(--amber-soft);font-size:1rem}
.flame-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 18px;border-radius:var(--r-lg);background:linear-gradient(160deg,#FFE7C2,#FFD0A8);color:#5A2A06;text-align:center;max-width:240px}
.flame-card .mono{font-size:1.8rem;font-weight:800;font-family:var(--f-display)}
.flame-card.pending{background:var(--surface-2);color:var(--ink-2)}
.flame-pop{position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);animation:fade .25s}
.flame-big{font-size:clamp(5rem,22vw,8rem);line-height:1;animation:flameIn .7s cubic-bezier(.2,1.6,.4,1) both}
.flame-num{font-size:3rem;font-weight:800;color:#E2512A;font-family:var(--f-display)}
@keyframes flameIn{from{transform:scale(.2) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- aventure : matières ---------- */
.adv-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.adv-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.subj-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;min-height:190px;padding:18px;border-radius:28px;border:0;cursor:pointer;text-align:left;color:var(--ink);background:color-mix(in srgb,var(--sc) 20%,var(--surface));box-shadow:0 6px 0 color-mix(in srgb,var(--sc) 35%,var(--surface-3));transition:transform .15s}
.subj-card:hover{transform:translateY(-3px)}
.subj-card:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--sc) 35%,var(--surface-3))}
.subj-card h2{font-size:1.45rem}
.subj-card .ring{--p:0;background:conic-gradient(var(--sc) calc(var(--p)*1%),var(--surface-3) 0)}
.subj-card .ring svg{width:20px;height:20px;color:var(--sc)}
.subj-card::after{content:"";position:absolute;right:-50px;bottom:-60px;width:200px;height:200px;border-radius:50%;border:26px solid color-mix(in srgb,var(--sc) 14%,transparent)}
.go-arrow{position:absolute;left:18px;bottom:16px;width:40px;height:40px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow);z-index:1}
.go-arrow svg{width:20px;height:20px}
.subj-stu{position:absolute;right:6px;bottom:-4px;z-index:1}

/* ---------- aventure : chemin ---------- */
.path-top{display:flex;align-items:center;gap:12px}
.path-top h2{flex:1;text-align:center}
.path-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px;border-radius:28px;color:#fff;background:linear-gradient(140deg,var(--sc),color-mix(in srgb,var(--sc) 55%,#140F45))}
.path-hero h1{color:#fff;font-size:2.4rem}
.path-hero .bar{width:min(280px,100%)}
.hero-stu{flex:none}
@media (max-width:520px){.hero-stu svg{width:84px;height:91px}}
.btn.light{background:#fff;color:#22176B;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.btn.light:hover{background:#F4F1FF}
.unit{display:flex;flex-direction:column;gap:8px}

.unit-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:22px;color:#fff;background:var(--sc);box-shadow:0 5px 0 color-mix(in srgb,var(--sc) 65%,#000)}
.unit-banner h2{color:#fff}
.road{position:relative;width:min(360px,100%);margin:0 auto}
.road svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.road-base{fill:none;stroke:var(--surface-3);stroke-width:46;stroke-linecap:round;opacity:.8}
.road-done{fill:none;stroke-width:46;stroke-linecap:round;opacity:.35}
.node{position:absolute;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--surface);color:var(--ink-3);box-shadow:0 7px 0 var(--surface-3),0 10px 18px -8px rgba(30,20,90,.35);transition:transform .12s;z-index:2}
.node svg{width:30px;height:30px}
.node.done{background:var(--sc);color:#fff;box-shadow:0 7px 0 color-mix(in srgb,var(--sc) 60%,#000)}
.node.cur{width:84px;height:84px;background:var(--sc);color:#fff;box-shadow:0 8px 0 color-mix(in srgb,var(--sc) 60%,#000),0 0 0 8px color-mix(in srgb,var(--sc) 25%,transparent);animation:pulse 1.8s ease-in-out infinite}
.node.cur svg{width:36px;height:36px}
.node.locked{cursor:not-allowed;opacity:.85}
.node.boss{border-radius:26px}
.node:active:not(.locked){transform:translate(-50%,-46%)}
@keyframes pulse{50%{box-shadow:0 8px 0 color-mix(in srgb,var(--sc) 60%,#000),0 0 0 16px color-mix(in srgb,var(--sc) 10%,transparent)}}
.start-bubble{position:absolute;transform:translate(52px,-50%);z-index:3;padding:8px 14px;border-radius:14px;background:var(--surface);color:var(--primary);font-family:var(--f-display);font-weight:800;letter-spacing:.04em;font-size:.95rem;box-shadow:0 4px 0 var(--surface-3);white-space:nowrap;pointer-events:none}
.start-bubble.left{transform:translate(calc(-100% - 52px),-50%)}
.path-stu{position:absolute;transform:translate(-190%,-70%);z-index:1;pointer-events:none}
.path-stu.left{transform:translate(90%,-70%)}
.node-label{position:absolute;transform:translate(-50%,46px);font-size:.72rem;font-weight:800;color:var(--ink-3);white-space:nowrap;pointer-events:none;z-index:2}
@media (max-width:420px){.path-stu{display:none}}

/* ---------- leçon ---------- */
body.immersive .side,body.immersive .topbar,body.immersive .bottombar,body.immersive .fab{display:none!important}
body.immersive .app{grid-template-columns:minmax(0,1fr)}
body.immersive .view{max-width:760px;padding-bottom:170px}
.les-top{display:flex;align-items:center;gap:14px}
.les-bar{height:16px}
.les-bar>i{background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 60%,#fff))}
.les-body{display:flex;flex-direction:column;gap:18px;padding-top:10px}
.les-prompt{font-size:1.12rem;font-weight:700}
.les-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.les-opts{grid-template-columns:minmax(0,1fr)}}
.opt{box-shadow:0 4px 0 var(--line)}
.opt.big{justify-content:center;font-size:1.15rem;padding:20px}
.les-foot{position:fixed;left:0;right:0;bottom:0;z-index:50;border-top:2px solid var(--line);background:var(--surface);padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.les-foot.ok{background:var(--teal-soft);border-top-color:transparent;color:var(--teal-ink)}
.les-foot.ko{background:var(--rose-soft);border-top-color:transparent;color:var(--rose)}
.les-foot-in{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.les-foot .stack{color:var(--ink)}
.les-verdict{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:1.3rem}
.les-foot.ok .les-verdict{color:var(--teal-ink)}.les-foot.ko .les-verdict{color:var(--rose)}
.les-verdict svg{width:24px;height:24px}
.btn.danger-solid{background:var(--rose);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--rose) 60%,#000)}
.btn.teal{box-shadow:0 4px 0 color-mix(in srgb,var(--teal) 55%,#000)}
.tile{border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 var(--line);font-size:1rem}
.tile:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}
.tile.used{visibility:hidden}
.tile.sel{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 4px 0 var(--primary-2)}
.tile.matched{opacity:.35;border-color:var(--teal);background:var(--teal-soft);box-shadow:none}
.tile.bad{border-color:var(--rose);background:var(--rose-soft);animation:shake .3s}
.tile[disabled]{cursor:default}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match-grid .tile{width:100%;min-height:54px}
.order{display:flex;flex-direction:column;gap:18px}
.order-line{min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 4px;border-bottom:2px solid var(--line);border-top:2px solid var(--line)}
.order-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.les-end{align-items:center;text-align:center;padding-top:30px}
.end-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;max-width:620px}
@media (max-width:560px){.end-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.end-tile{border:2px solid var(--c);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.end-tile span{background:var(--c);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px}
.end-tile b{padding:12px 6px;font-size:1.3rem}

/* ---------- biomes ---------- */
.biome{position:relative;padding:14px 14px 34px;border-radius:32px;background:linear-gradient(180deg,var(--b1),var(--b2));box-shadow:inset 0 -10px 0 rgba(0,0,0,.08);overflow:hidden}
.biome .unit-banner{position:relative;z-index:3}
.biome .road svg{overflow:hidden}
.biome .road-base{stroke:var(--road);opacity:1;stroke-width:42}
.road-edge{fill:none;stroke:rgba(0,0,0,.14);stroke-width:52;stroke-linecap:round}
.biome .road-done{opacity:.55;stroke-width:42}
.biome .node-label{background:rgba(255,255,255,.9);color:#2A2650;padding:2px 8px;border-radius:999px;transform:translate(-50%,48px)}
.biome.dark .node-label{background:rgba(20,16,60,.8);color:#EEECFF}
.biome .node.locked{background:#F3F1FA;color:#9A97BC;box-shadow:0 7px 0 #CFCBE6}
.biome.dark .node.locked{background:#4A4680;color:#A9A6D8;box-shadow:0 7px 0 #2C2960}
.biome.locked .road svg{opacity:.55}
.biome.locked .unit-banner::after{content:"Verrouillé";position:absolute;right:14px;bottom:-12px;padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:.72rem;font-weight:800;box-shadow:var(--shadow)}
@media (prefers-reduced-motion:no-preference){.biome .road svg g{transform-box:fill-box}}

/* ---------- récompenses, villages, quêtes ---------- */
.coin{display:inline-block;line-height:1}
.coin-card{background:linear-gradient(160deg,#FFF1BF,#FFD970);color:#5A3E06}
.chest{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;z-index:2;filter:drop-shadow(0 4px 0 rgba(0,0,0,.15))}
.chest.ready{animation:bob 1.4s ease-in-out infinite}
.chest.ready::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,110,.55),transparent);z-index:-1}
.chest.opened{opacity:.6}
.chest.locked{filter:grayscale(.6) drop-shadow(0 4px 0 rgba(0,0,0,.15))}
@keyframes bob{50%{transform:translate(-50%,-62%)}}
.chest-pop svg{width:120px;height:108px;animation:flameIn .6s cubic-bezier(.2,1.6,.4,1) both}
.reward{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border-radius:16px;background:var(--surface-2);font-weight:800;min-width:90px}
.reward small{font-size:.72rem;color:var(--ink-2)}
.village-btn{position:absolute;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;cursor:pointer;z-index:2}
.village-btn:hover svg{transform:scale(1.04)}
.village-btn svg{transition:transform .15s}
.village-btn.locked{cursor:not-allowed}
.bang{position:absolute;top:-4px;right:6px;width:24px;height:24px;border-radius:50%;background:#F2B035;color:#3A2400;font-weight:900;display:grid;place-items:center;box-shadow:0 3px 0 #C98A12;animation:bob2 1.2s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-4px)}}
.village-scene{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 14px 26px}
.village-art svg{width:min(340px,90vw);height:auto}
.villager{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;padding:4px}
.villager:hover svg{transform:translateY(-3px)}
.villager svg{transition:transform .15s}
.quest{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--surface-2)}
.quest .q-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--primary-soft);color:var(--primary);font-weight:900;font-family:var(--f-display)}
.quest .q-ic svg{width:18px;height:18px}
.quest.hidden-q{border:2px dashed var(--line);background:none}
.quest.hidden-q .q-ic{background:var(--surface-3);color:var(--ink-3)}
.quest.ready{background:var(--amber-soft)}
.quest.ready .q-ic{background:#F2B035;color:#3A2400}
.quest.claimed{opacity:.65}
.quest.claimed .q-ic{background:var(--teal);color:#032B2A}
.shop-stu{flex:none;width:80px;display:grid;place-items:center;background:var(--surface-2);border-radius:18px;padding:4px}

/* ---------- personnages / photo de profil ---------- */
.avatar-svg{border-radius:50%;flex:none;display:block}
.avatar-btn{border:0;padding:0;background:none;cursor:pointer;border-radius:50%;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary-2);line-height:0}
.side-profile{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;margin-top:auto;text-align:left;color:var(--ink)}
.side-profile:hover{border-color:var(--primary-2)}
.side-profile+.side-foot{margin-top:8px}
.avatar-big .avatar-svg{box-shadow:0 0 0 4px var(--surface),0 0 0 7px var(--primary)}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.avatar-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:22px;border:2px solid var(--line);background:var(--surface);cursor:pointer;text-align:center;color:var(--ink);box-shadow:0 4px 0 var(--line);transition:transform .12s}
.avatar-card:hover{transform:translateY(-2px)}
.avatar-card.on{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 4px 0 var(--primary-2)}
.av-wrap{position:relative;line-height:0}
.avatar-card.locked .avatar-svg{filter:grayscale(1) brightness(.75);opacity:.6}
.av-lock{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}

/* ---------- mode classé ---------- */
.rank-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;padding:24px;border-radius:30px;color:#fff;background:radial-gradient(circle at 20% 30%,#5A3AD8,#1B1650 70%);box-shadow:var(--shadow-lg)}
.rank-hero h1{color:#fff}
.rank-hero .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.rank-hero .chip[aria-pressed="true"]{background:#fff;color:#2B2475;border-color:#fff}
@media (max-width:640px){.rank-hero{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.rank-hero .stack{align-items:center}}
.rank-emblem svg{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.ladder{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px}
.ladder-step{flex:none;width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px 4px;border-radius:18px}
.ladder-step.cur{background:var(--primary-soft);box-shadow:0 0 0 2px var(--primary)}
.ladder-step.locked svg{filter:grayscale(1);opacity:.4}
.rm-timer{height:10px}
.rm-timer>i{background:linear-gradient(90deg,var(--teal),var(--primary));transition:width .2s linear}
.rm-timer.low>i{background:var(--rose)}
.rank-delta{font-size:2.4rem;font-weight:800;font-family:var(--f-display)}
.rank-delta.up{color:var(--teal)}.rank-delta.down{color:var(--rose)}
.rank-pop svg{animation:flameIn .8s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4))}
.ranked-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:24px;border:0;cursor:pointer;color:#fff;background:radial-gradient(circle at 10% 50%,#5A3AD8,#1B1650 75%);box-shadow:0 5px 0 #0B0930}
.ranked-banner svg:last-child{width:22px;height:22px}
.pct-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;margin-top:10px}
.pct-table>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;background:var(--surface-2)}
.pct-table>div.up b{color:var(--teal-ink)}
.pct-table>div.up{background:var(--teal-soft)}
.pct-table>div.down b{color:var(--rose)}
.pct-table>div.down{background:var(--rose-soft)}

/* ---------- garde-robe ---------- */
.me-av{display:inline-block;border-radius:50%;overflow:hidden;line-height:0}
.me-av svg{width:100%;height:100%}
.ward{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.ward{grid-template-columns:minmax(0,1fr)}}
.ward-stage{position:sticky;top:84px;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:28px;background:radial-gradient(circle at 50% 35%,var(--primary-soft),var(--surface-2) 70%);border:1px solid var(--line)}
#stage3d{display:grid;place-items:center;min-height:300px;cursor:grab}
#stage3d:active{cursor:grabbing}
#stage3d canvas{max-width:100%}
.ward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.ward-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:18px;border:2px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);text-align:center;box-shadow:0 3px 0 var(--line)}
.ward-item.on{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 3px 0 var(--primary-2)}
.ward-item.locked svg{filter:grayscale(.9);opacity:.55}
.ward-item svg{height:70px;width:auto}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--line);cursor:pointer}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--primary)}
#stage3d{min-height:380px}
.ward-item svg{height:88px}
.stage-row{display:flex;align-items:flex-end;justify-content:center;gap:16px;flex-wrap:wrap}
#stage2d svg{filter:drop-shadow(0 10px 14px rgba(30,20,90,.2))}
.stage-bust{display:flex;flex-direction:column;align-items:center;gap:4px}
.stage-bust svg{border-radius:50%;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--primary-2)}

/* ---------- barre du haut compacte, à droite ---------- */
.topbar{justify-content:flex-end;padding:8px 20px;gap:8px}
.mobile-brand{margin-right:auto}
.tools{display:flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.tools .search{display:none;position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);width:min(320px,70vw);max-width:none;padding:7px 12px;box-shadow:var(--shadow);z-index:3}
.tools .search.open{display:flex}
.tools .search svg{width:16px;height:16px;flex:none}
.tool-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:0;background:none;color:var(--ink-2);cursor:pointer;flex:none}
.tool-btn:hover{background:var(--surface-2);color:var(--ink)}
.tool-btn svg{width:16px;height:16px}
.tool-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 9px;border-radius:999px;border:0;background:none;font-weight:800;font-size:.8rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.tool-chip:hover{background:var(--surface-2)}
.tool-chip svg{width:14px;height:14px}
.tool-chip .flame{font-size:.95em}
.tools .avatar-btn{box-shadow:0 0 0 2px var(--primary-2);margin-left:2px}
@media (max-width:900px){.topbar{padding:8px 12px}.tools .search.open{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 54px);transform:none;width:auto}}
/* barre du haut : plus petite, calée à droite */
.topbar{padding:6px 16px;gap:6px}
.topbar .mobile-brand{margin-right:auto}
.tools{gap:2px;padding:2px}
.tool-btn{width:26px;height:26px}
.tool-btn svg{width:14px;height:14px}
.tool-chip{height:26px;padding:0 7px;font-size:.74rem}
.tool-chip svg{width:12px;height:12px}
.tools .avatar-btn .avatar-svg,.tools .avatar-btn .me-av{width:26px!important;height:26px!important}

/* ---------- mode prof : classes ---------- */
.class-cta{display:flex;align-items:center;gap:16px;padding:20px;border-radius:26px;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 6px 0 color-mix(in srgb,var(--c2) 70%,#000);transition:transform .15s}
.class-cta:hover{transform:translateY(-2px)}
.class-cta b{font-family:var(--f-display);font-size:1.25rem}
.cta-ic{width:52px;height:52px;flex:none;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.cta-ic svg{width:26px;height:26px}
.code-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:18px;background:var(--surface-2);border:2px dashed var(--primary-2)}
.code-box b{font-size:1.6rem;letter-spacing:.12em;color:var(--primary)}
.code-box.big b{font-size:2.1rem}
.class-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px;border-radius:28px;color:#fff;background:linear-gradient(135deg,#7445F5,#2B1A7A);box-shadow:var(--shadow-lg)}
.class-hero h1{color:#fff}
.code-pill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 16px;border-radius:18px;border:2px dashed rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.code-pill b{font-size:1.2rem;letter-spacing:.1em}

/* ---------- classement et chat de classe ---------- */
.class-tabs{align-self:flex-start}
.class-tabs button{display:inline-flex;align-items:center;gap:6px}
.class-tabs svg{width:15px;height:15px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;max-width:520px;margin:0 auto;width:100%}
.pod{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.pod-av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1.4rem;color:#3A2400;background:var(--m);box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--m)}
.pod-1 .pod-av{width:70px;height:70px;font-size:1.7rem}
.pod-step{width:100%;border-radius:16px 16px 6px 6px;background:linear-gradient(180deg,var(--m),color-mix(in srgb,var(--m) 60%,#000));display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.6rem;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.pod-1 .pod-step{height:110px}.pod-2 .pod-step{height:80px}.pod-3 .pod-step{height:60px}
.pos{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:var(--surface-2);flex:none}
.me-row{background:var(--primary-soft);border-radius:12px}
.chat-wrap{display:flex;flex-direction:column;gap:10px}
.chat-msgs{display:flex;flex-direction:column;gap:10px;height:min(58vh,560px);overflow-y:auto;padding:6px 2px}
.cmsg{display:flex;gap:8px;max-width:86%;align-items:flex-end}
.cmsg.mine{align-self:flex-end;flex-direction:row-reverse}
.cav{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface-3);color:var(--ink-2);font-size:.9rem}
.cbody{padding:8px 12px;border-radius:16px;background:var(--surface-2);min-width:0}
.cmsg.mine .cbody{background:var(--primary);color:var(--primary-ink)}
.cmsg.mine .cmeta,.cmsg.mine .cmeta .tiny{color:rgba(255,255,255,.8)}
.cmeta{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-2);flex-wrap:wrap}
.ctext{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.cdel{border:0;background:none;color:inherit;opacity:.5;cursor:pointer;padding:0;line-height:0}
.cdel:hover{opacity:1}
.cdel svg{width:13px;height:13px}
.cmsg.prof .cav{background:linear-gradient(135deg,#FFE58A,#D9A21E);box-shadow:0 0 0 2px #F2C94C}
.cmsg.prof .cbody{background:linear-gradient(135deg,#FFF1BA,#F2C94C 60%,#D9A21E);color:#3A2400;box-shadow:0 4px 14px -6px rgba(217,162,30,.8);border:1px solid #E8B830}
.cmsg.prof .cmeta,.cmsg.prof .cmeta .tiny{color:#5A3E06}
.prof-tag{padding:1px 8px;border-radius:999px;background:#3A2400;color:#FFE58A;font-weight:800;font-size:.68rem;letter-spacing:.03em}
.chat-input textarea{flex:1;min-height:44px;max-height:120px}
.btn.gold{background:linear-gradient(135deg,#FFE58A,#D9A21E);color:#3A2400;box-shadow:0 4px 0 #9A6A0A}

/* ---------- quiz en direct ---------- */
.quiz-live{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,#E2512A,#7445F5);box-shadow:0 5px 0 #3A1E7A}
.live-dot{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:livep 1.4s infinite;flex:none}
@keyframes livep{70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.quiz-top{display:flex;align-items:center;gap:10px}
.quiz-stage{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:10px 0 40px}
.quiz-q{font-size:clamp(1.4rem,4vw,2.1rem);max-width:24ch}
.quiz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:720px}
@media (max-width:560px){.quiz-opts{grid-template-columns:minmax(0,1fr)}}
.qopt{position:relative;display:flex;align-items:center;gap:12px;min-height:76px;padding:14px 16px;border-radius:20px;border:0;cursor:pointer;color:#fff;font-weight:800;font-size:1.05rem;text-align:left;background:var(--qc);box-shadow:0 6px 0 color-mix(in srgb,var(--qc) 60%,#000);transition:transform .1s}
.qopt:active:not([disabled]){transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--qc) 60%,#000)}
.qopt[disabled]{cursor:default}
.qopt.picked{outline:4px solid var(--ink);outline-offset:3px}
.qopt.wrong{opacity:.35}
.qopt.right{box-shadow:0 0 0 5px #fff,0 0 0 9px var(--teal)}
.qk{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none;font-family:var(--f-display)}
.qcount{margin-left:auto;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.25)}
.quiz-timer{position:relative;width:76px;height:76px}
.quiz-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.qt-bg{fill:none;stroke:var(--surface-3);stroke-width:5}
.qt-fg{fill:none;stroke:var(--primary);stroke-width:5;stroke-linecap:round;stroke-dasharray:119.4;transition:stroke-dashoffset .25s linear}
.quiz-timer b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem}
.lobby-names{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:640px}

/* ---------- contrôles de classe ---------- */
.grade-chip{display:inline-flex;align-items:baseline;gap:4px;padding:4px 12px;border-radius:999px;font-weight:800;white-space:nowrap;color:#fff}
.grade-chip b{font-size:1.1rem;font-family:var(--f-display)}
.grade-chip span{font-size:.8rem;opacity:.9}
.grade-chip.big{padding:10px 22px;border-radius:22px}
.grade-chip.big b{font-size:2.6rem}
.grade-chip.big span{font-size:1.1rem}
.g-red{background:#D23C3C}
.g-orange{background:#E08A1E}
.g-lgreen{background:#5CBF6A;color:#0E3A18}
.g-dgreen{background:#1F7A3A}
.tq{padding:10px 0;border-top:1px solid var(--line)}
.tq:first-of-type{border-top:0}
.test-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 46px);z-index:10;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.ct-q.is-ok{border-left:5px solid var(--teal)}
.ct-q.is-ko{border-left:5px solid var(--rose)}
.watch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.screen{display:flex;flex-direction:column;border-radius:20px;border:2px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--shadow);min-width:0}
.screen-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.screen-body{padding:12px;min-width:0}
.screen.live{border-color:var(--teal)}
.screen.alert{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-soft)}
.screen.done{border-color:var(--primary-2)}
.screen.idle{opacity:.7}
.mirror{padding:10px;border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px;min-width:0}
.mirror-ans{padding:6px 8px;border-radius:8px;background:var(--surface);border:1px dashed var(--line);overflow-wrap:anywhere;font-family:var(--f-mono)}
.ellipsis2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- mode CEB 100 % ---------- */
.ceb-intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,#2B3A9A,#0B0E2A 70%);color:#fff;transition:opacity .35s}
.ceb-intro.out{opacity:0}
.ceb-skip{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:5;background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important;box-shadow:none!important}
.ceb-scene{position:relative;width:min(560px,92vw);height:min(560px,80vh);display:grid;place-items:center}
.ceb-flag{position:absolute;width:min(240px,56vw);aspect-ratio:3/2;display:grid;grid-template-columns:repeat(3,1fr);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45);animation:flagWave 1.6s ease-in-out infinite}
.ceb-flag i:nth-child(1){background:#1A1A1A}.ceb-flag i:nth-child(2){background:#FAE042}.ceb-flag i:nth-child(3){background:#ED2939}
@keyframes flagWave{50%{transform:skewY(-3deg) scale(1.03)}}
.ceb-orbit{position:absolute;width:min(380px,84vw);height:min(380px,84vw);animation:orbit 2.4s linear infinite}
.ceb-orbiter{position:absolute;left:50%;top:-10px;transform:translateX(-50%);animation:counter 2.4s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes counter{to{transform:translateX(-50%) rotate(-360deg)}}
.ceb-bubble{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;text-align:center;padding:14px 20px;border-radius:22px;background:#fff;color:#141A3A;font-family:var(--f-display);font-weight:800;font-size:clamp(1.05rem,3.6vw,1.45rem);box-shadow:0 6px 0 rgba(0,0,0,.25);animation:bubbleIn .5s cubic-bezier(.2,1.6,.4,1) both .3s}
@keyframes bubbleIn{from{transform:translateX(-50%) scale(.4);opacity:0}}
.ceb-boom{position:fixed;inset:0;pointer-events:none}
.ceb-word{position:absolute;display:flex;gap:.1em;font-family:var(--f-display);font-weight:900;opacity:0;transform:scale(.3);transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .3s,gap .7s cubic-bezier(.2,.8,.2,1)}
.ceb-word .w{display:inline-flex;align-items:baseline}
.ceb-word b{font-size:clamp(4rem,20vw,9rem);line-height:1;background:linear-gradient(180deg,#FFF6B0,#F2C431);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));transition:font-size .6s}
.ceb-word em{font-style:normal;font-size:0;opacity:0;color:#fff;transition:font-size .6s,opacity .6s}
.ceb-intro.boom .ceb-flag,.ceb-intro.boom .ceb-orbit,.ceb-intro.boom .ceb-bubble{transition:opacity .2s,transform .3s;opacity:0;transform:scale(1.6)}
.ceb-intro.ceb .ceb-word{opacity:1;transform:scale(1)}
.ceb-intro.expand .ceb-word{flex-direction:column;align-items:center;gap:.05em}
.ceb-intro.expand .ceb-word b{font-size:clamp(2.6rem,10vw,4.6rem)}
.ceb-intro.expand .ceb-word em{font-size:clamp(1.7rem,6.5vw,3rem);opacity:1}
.ceb-intro.counting .ceb-word{opacity:0;transform:translateY(-40px)}
.ceb-count{position:absolute;font-family:var(--f-display);font-weight:900;font-size:clamp(5rem,26vw,12rem);color:#fff;text-shadow:0 8px 0 rgba(0,0,0,.35)}
.ceb-count.pop{animation:countPop .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes countPop{from{transform:scale(2.2);opacity:0}40%{opacity:1}to{transform:scale(1);opacity:1}}
.ceb-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:22px;border-radius:30px;color:#fff;background:linear-gradient(135deg,#2F5BE0,#141A3A);box-shadow:0 6px 0 #0B0E2A}
.ceb-hero h1{color:#fff}.ceb-hero .say{opacity:.92;max-width:56ch}
.ceb-badge{align-self:flex-start;padding:4px 12px;border-radius:999px;background:#F2C431;color:#3A2400;font-weight:900;font-size:.8rem;letter-spacing:.06em}
.ceb-flagmini{position:absolute;right:-30px;top:-30px;width:150px;height:100px;display:grid;grid-template-columns:repeat(3,1fr);transform:rotate(18deg);opacity:.22}
.ceb-flagmini i:nth-child(1){background:#1A1A1A}.ceb-flagmini i:nth-child(2){background:#FAE042}.ceb-flagmini i:nth-child(3){background:#ED2939}
@media (max-width:640px){.ceb-hero{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.ceb-hero .row{justify-content:center}}
.ceb-years{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ceb-year{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;border:2px solid var(--edge,var(--line));background:var(--surface);box-shadow:0 4px 0 var(--edge,var(--line))}
.ceb-year.has{border-color:#2F5BE0}
.ceb-y{font-family:var(--f-display);font-size:1.3rem}
.ceb-tag{align-self:flex-start;padding:3px 10px;border-radius:9px;background:#141A3A;color:#F2C431;font-weight:900;font-size:.78rem;letter-spacing:.02em;font-family:var(--f-display)}
.ceb-tag.big{font-size:1.1rem;padding:6px 14px;border-radius:12px}
.ceb-exc{display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;color:var(--ink)}
.ceb-exhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 50%,#141A3A));box-shadow:0 5px 0 color-mix(in srgb,var(--c) 45%,#000)}
.qi-big{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;flex:none}
.qi-big svg{width:30px;height:30px}
.ceb-vid{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.vid-thumb{height:92px;border-radius:14px;display:grid;place-items:center;color:#fff}
.vid-thumb svg{width:40px;height:40px}
.ceb-sel{border-color:#2F5BE0;box-shadow:0 0 0 3px color-mix(in srgb,#2F5BE0 30%,transparent)}
@media (prefers-reduced-motion:reduce){.ceb-orbit,.ceb-orbiter,.ceb-flag{animation:none}}
.ceb-year{cursor:pointer;text-align:left;color:var(--ink);font:inherit}
.ceb-year.off{opacity:.7;cursor:default}
.ceb-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ceb-part{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;text-decoration:none;color:#fff;font-weight:900;font-size:1.05rem;background:var(--c);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 55%,#000);transition:transform .08s}
.ceb-part span{flex:1}
.ceb-part svg{width:22px;height:22px;flex:none}
.ceb-part{flex-direction:column;align-items:stretch;gap:12px;cursor:default}
.ceb-part-act{display:flex;gap:8px}
.ceb-pbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:14px;border:0;background:#fff;color:var(--c);font:inherit;font-weight:900;font-size:.95rem;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.ceb-pbtn.ghost{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.ceb-pbtn:active{transform:translateY(2px);box-shadow:none}
.ceb-pbtn svg{width:18px!important;height:18px!important}
.ceb-subj .chip svg{width:16px!important;height:16px!important;flex:none}
.ceb-subj .chip{display:inline-flex;align-items:center;gap:6px}
/* garde-robe : l'aperçu reste en haut, opaque et au-dessus des vêtements */
.ward-stage{z-index:15;background:radial-gradient(circle at 50% 35%,var(--primary-soft),var(--surface-2) 70%),var(--surface);isolation:isolate;box-shadow:0 10px 24px -14px rgba(30,20,90,.35)}
@media (max-width:860px){
  .ward-stage{top:var(--ward-top,64px);flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-radius:22px}
  .ward-stage .stage-row{flex:1;flex-wrap:nowrap;gap:10px;align-items:center;justify-content:flex-start}
  #stage2d svg{width:auto;height:118px}
  .stage-bust svg{width:58px;height:58px}
  .stage-bust .tiny{display:none}
  .ward-stage .btn.block{width:auto;flex:0 1 150px;font-size:.82rem;padding:10px 12px;white-space:normal;line-height:1.15}
  .ward-stage .btn.block svg{display:none}
}
/* champ fichier invisible posé sur son bouton (voir fixFilePickers) */
.file-pick{position:relative;overflow:hidden}
.file-pick input.file-overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:200px;z-index:2}

/* ---------- mode Brevet (Brevette) ---------- */
.ceb-intro.brv{background:radial-gradient(circle at 50% 40%,#D9579A,#24092F 70%)}
.ceb-intro.brv .ceb-flag i:nth-child(1),.brv .ceb-flagmini i:nth-child(1){background:#0055A4}
.ceb-intro.brv .ceb-flag i:nth-child(2),.brv .ceb-flagmini i:nth-child(2){background:#FFFFFF}
.ceb-intro.brv .ceb-flag i:nth-child(3),.brv .ceb-flagmini i:nth-child(3){background:#EF4135}
.ceb-intro.brv .ceb-word .w:nth-child(1) b{background-image:linear-gradient(180deg,#9CC3FF,#2F6BE0)}
.ceb-intro.brv .ceb-word .w:nth-child(2) b{background-image:linear-gradient(180deg,#FFFFFF,#FFD3E6)}
.ceb-intro.brv .ceb-word .w:nth-child(3) b{background-image:linear-gradient(180deg,#FF9C9C,#EF4135)}
.ceb-intro.brv .ceb-bubble{color:#3E1556}
.ceb-hero.brv{background:linear-gradient(135deg,#F06AA8,#6B2A8E);box-shadow:0 6px 0 #3E1556}
.ceb-badge.brv{background:#fff;color:#C2286E}
.ceb-tag.brv{background:#3E1556;color:#FF9CC9}
.ceb-year.brvy{border-color:#E0457B}
.brv-epreuves{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.brv-ep{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--c) 14%,transparent);border:2px solid var(--c)}
.brv-ep b{color:var(--c);font-size:.9rem}.brv-ep span{font-family:var(--f-display);font-size:1.2rem}
.dict-corr{line-height:2;font-size:1.05rem}
.dict-bad{background:color-mix(in srgb,#E2405A 14%,transparent);border-radius:8px;padding:1px 6px}
.dict-bad s{color:#B3263E;opacity:.75}.dict-bad b{color:#1F8A4C}

/* ---------- mode CE1D (Ceddy) ---------- */
.ceb-intro.c1d{background:radial-gradient(circle at 50% 40%,#8A5A2A,#160C06 70%)}
.ceb-hero.c1d{background:linear-gradient(135deg,#B8742E,#3A2414);box-shadow:0 6px 0 #1E120A}
.ceb-badge.c1d{background:#F2C431;color:#3A2400}
.ceb-tag.c1d{background:#3A2414;color:#F2C431}
.ceb-year.c1dy.has{border-color:#B8742E}

/* ---------- boutique et mode admin ---------- */
body:not(.is-admin) .nav-btn[data-nav="admin"]{display:none}
.nav-btn[data-nav="admin"] svg{background:#D43B4E!important}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#2A1E2E,#D43B4E);box-shadow:0 5px 0 #6E1424}
.admin-head h1{color:#fff}
.admin-tabs .chip.on{background:var(--primary);color:#fff}
.admin-users{display:flex;flex-direction:column;gap:8px}
.admin-user{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:18px;background:var(--surface);border:2px solid var(--line)}
.admin-user.banned{opacity:.75;border-color:#D43B4E}
.admin-user .dot{width:10px;height:10px;border-radius:50%;background:#B8B4C8;flex:none}.admin-user .dot.on{background:#2EB85C;box-shadow:0 0 0 3px rgba(46,184,92,.25)}
.admin-act{gap:6px;flex-wrap:wrap}
.admin-outfit{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.admin-prev{padding:8px;border-radius:18px;background:var(--surface-2,rgba(0,0,0,.04))}
.gift-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;max-height:60vh;overflow:auto}
.gift-item{display:flex;align-items:center;gap:8px;text-align:left;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.gift-item:hover{border-color:var(--primary)}
.gift-prev{flex:none;display:grid;place-items:center}
.ban-screen{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 40%,#5A1420,#12060A 75%);color:#fff;text-align:center}
.ban-card{max-width:440px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ban-card h1{color:#fff}
input[type=color].input{height:48px;padding:4px 6px;cursor:pointer}
.paste-zone{padding:14px;border:2px dashed var(--primary);border-radius:16px;font-weight:700;color:var(--muted);min-height:56px;outline:none}
.paste-zone:focus{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.side-logout{display:none;align-items:center;gap:10px;margin:4px 0;padding:10px 12px;border-radius:14px;border:2px solid color-mix(in srgb,#D43B4E 35%,transparent);background:transparent;color:#D43B4E;font:inherit;font-weight:800;cursor:pointer}
body.has-account .side-logout{display:flex}
.side-logout:hover{background:color-mix(in srgb,#D43B4E 10%,transparent)}
.side-logout svg{width:20px;height:20px}

/* ---------- confort de lecture ---------- */
html[data-textsize="grand"]{font-size:18px}html[data-textsize="grand"] body{font-size:17px}
html[data-textsize="tresgrand"]{font-size:20px}html[data-textsize="tresgrand"] body{font-size:19px}
html.easy-font{--f-body:"Lexend",system-ui,sans-serif;--f-display:"Lexend",system-ui,sans-serif}
html.easy-font body{letter-spacing:.03em;word-spacing:.08em;line-height:1.75}
/* ---------- menu simplifié ---------- */
body.nav-simple .side .nav-btn.nav-extra{display:none}
body.nav-simple .side .nav-group:not(:has(.nav-btn:not(.nav-extra))){display:none}
.nav-toggle{display:flex;align-items:center;gap:10px;margin:2px 0 6px;padding:9px 12px;border-radius:14px;border:2px dashed var(--line);background:transparent;color:var(--ink-2,var(--ink));font:inherit;font-weight:800;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
/* ---------- visite guidée ---------- */
.tour{position:fixed;inset:0;z-index:9000}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(20,14,40,.62);outline:3px solid #FFD45A;transition:all .3s;pointer-events:none}
.tour-dim{position:fixed;inset:0;background:rgba(20,14,40,.62)}
.tour-box{position:fixed;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;background:var(--surface,#fff);color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.35);animation:celPop .35s both}
/* ---------- espace parents, signalements ---------- */
.par-chart{display:flex;gap:8px;align-items:flex-end;height:130px;padding-top:6px}
.par-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.par-bars{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.par-bars i{display:block;width:40%;min-height:2px;border-radius:6px 6px 2px 2px}
.rep-done{opacity:.6}

/* ---------- boîte de réception admin ---------- */
.inbox{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.inbox-item{border-bottom:1px solid var(--line)}.inbox-item:last-child{border-bottom:0}
.inbox-row{width:100%;display:grid;grid-template-columns:12px minmax(90px,150px) minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;background:transparent;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.inbox-row:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.inbox-from{display:flex;flex-direction:column;min-width:0}.inbox-from b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-dot{width:9px;height:9px;border-radius:50%;background:transparent}.inbox-item.unread .inbox-dot{background:var(--primary)}
.inbox-item.unread .inbox-txt{font-weight:800}.inbox-item.done{opacity:.72}
.inbox-body{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px 36px}
.inbox-n{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:#E2405A;color:#fff;font-size:.72rem;text-align:center}
@media (max-width:560px){.inbox-row{grid-template-columns:12px minmax(0,1fr) auto}.inbox-txt{grid-column:2/4}}
/* ---------- assistant IA admin ---------- */
.admai-msgs{max-height:56vh;min-height:200px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:6px}
.admai-in{display:flex;gap:8px;align-items:flex-end}.admai-in textarea{flex:1;resize:vertical}
.admai-imgs{gap:6px;margin-bottom:6px}.admai-pend{gap:8px}
.admai-thumb{position:relative;display:inline-block;width:64px;height:64px;border-radius:12px;overflow:hidden;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/12px 12px;border:2px solid var(--line)}
.admai-thumb img{width:100%;height:100%;object-fit:contain}
.admai-thumb b{position:absolute;left:3px;top:2px;padding:0 5px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem}
.admai-thumb button{position:absolute;right:2px;top:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;cursor:pointer}
.admai-logs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
/* ---------- annonce sur l'accueil ---------- */
.announce{display:flex;gap:12px;align-items:center;padding:12px 16px;margin-bottom:12px;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#1A1736));box-shadow:0 4px 0 color-mix(in srgb,var(--ac) 50%,#000)}
.announce-e{font-size:1.8rem}

/* ---------- nouveaux modes et style admin ---------- */
body:not(.has-mods) .nav-btn[data-nav="mods"]{display:none}
.mode-frame{width:100%;border:0;border-radius:20px;background:#fff;box-shadow:var(--shadow);display:block}
.mode-card{border-left:5px solid var(--mc)}
.css-try{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9500;display:flex;gap:14px;align-items:center;justify-content:space-between;width:min(560px,calc(100% - 24px));padding:12px 14px;border-radius:18px;background:#1A1736;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.css-try .btn.ghost{color:#fff!important;border-color:rgba(255,255,255,.4)!important;background:transparent!important}
.css-pre{max-height:220px;overflow:auto;font-size:.75rem;background:var(--surface-2,rgba(0,0,0,.05));padding:10px;border-radius:12px;white-space:pre-wrap}
.coop-diag{background:var(--surface-2,rgba(0,0,0,.04));border-radius:12px;padding:8px 10px}.coop-diag table{width:100%;margin-top:6px;border-collapse:collapse}.coop-diag td{padding:3px 4px;border-top:1px solid var(--line)}

/* =========================================================
   Style « jeu éducatif » : gros boutons qu'on enfonce, cartes
   bien délimitées, icônes colorées, texte plus grand.
   Couche purement visuelle : aucun texte ni comportement changé.
   ========================================================= */
:root{
  --edge:#DCD7EE; --edge-2:#C9C2E6;
  --press:4px; --chunk:0 var(--press) 0 var(--edge);
  --c-home:#7445F5; --c-ceb:#ED2939; --c-adventure:#E2512A; --c-courses:#2F6BE0; --c-ai:#9A5CE6; --c-exercises:#E0A020; --c-scan:#D24C72; --c-classes:#0AA6A0;
  --c-fiches:#2E9E5B; --c-cards:#E86AA0; --c-exam:#D23C3C; --c-planner:#2F8FD8; --c-wardrobe:#F07F3C; --c-ranked:#5A3AD8; --c-concepts:#C9810F; --c-errors:#8A5A2B; --c-progress:#E0A81E; --c-writing:#3A7A5A; --c-favorites:#E2405A; --c-settings:#6E6A92;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--edge:#2E3470;--edge-2:#3A4290}}
:root[data-theme="dark"]{--edge:#2E3470;--edge-2:#3A4290}

body{font-size:16px;line-height:1.6}
h1{font-weight:800;letter-spacing:-.015em}
h2,h3{font-weight:800}
.muted{color:var(--ink-2)}
.eyebrow{font-size:.78rem;font-weight:900;letter-spacing:.06em}

/* ----- boutons : épais, arrondis, on les « enfonce » ----- */
.btn{border-radius:16px;padding:12px 20px;font-weight:900;font-size:1rem;border:2px solid var(--edge);background:var(--surface);color:var(--ink);box-shadow:var(--chunk);transition:transform .08s,box-shadow .08s,background .15s}
.btn:hover{background:var(--surface-2)}
.btn:active:not([disabled]){transform:translateY(var(--press));box-shadow:0 0 0 var(--edge)}
.btn.primary{border-color:transparent;background:var(--primary);color:var(--primary-ink);box-shadow:0 var(--press) 0 color-mix(in srgb,var(--primary) 55%,#000)}
.btn.primary:hover{background:var(--primary-2)}
.btn.primary:active:not([disabled]){box-shadow:0 0 0 transparent}
.btn.teal{border-color:transparent;box-shadow:0 var(--press) 0 color-mix(in srgb,var(--teal) 50%,#000)}
.btn.danger{border-color:color-mix(in srgb,var(--rose) 35%,transparent);box-shadow:0 var(--press) 0 color-mix(in srgb,var(--rose) 35%,transparent)}
.btn.ghost{background:var(--surface);border-color:var(--edge)}
.btn.light,.hero .btn.light{border:0;box-shadow:0 var(--press) 0 rgba(0,0,0,.22)}
.hero .btn.glass{border:2px solid rgba(255,255,255,.35);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn.lg{padding:15px 26px;font-size:1.1rem;border-radius:18px}
.btn.sm{padding:8px 14px;font-size:.9rem;border-radius:13px;--press:3px}
.btn svg{width:20px;height:20px}
.btn[disabled]{box-shadow:none;transform:none;filter:grayscale(.4)}
.hero .btn.light{animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,88%,100%{transform:none}92%{transform:translateY(-3px)}96%{transform:translateY(0)}}

/* ----- cartes : bord épais + petite marche en dessous ----- */
.card{border:2px solid var(--edge);border-radius:24px;box-shadow:var(--chunk)}
.card.flat{box-shadow:none}
.card.tint{border-color:transparent;box-shadow:none}
.course-card:hover,.quick:hover,.subj-card:hover{transform:translateY(-2px)}
.quick{border:2px solid var(--edge);border-radius:22px;box-shadow:var(--chunk);padding:18px;gap:12px}
.quick:active{transform:translateY(var(--press));box-shadow:0 0 0 var(--edge)}
.quick .qi{width:54px;height:54px;border-radius:16px}
.quick .qi svg{width:28px;height:28px}
.quick b{font-size:1.05rem}

/* ----- menu latéral : une couleur et une grosse icône par section ----- */
.side{gap:4px}
.nav-btn{padding:8px 10px;border-radius:16px;font-size:1rem;font-weight:800;color:var(--ink);border:2px solid transparent;gap:12px}
.nav-btn svg{width:36px;height:36px;padding:7px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);flex:none;transition:transform .15s}
.nav-btn:hover svg{transform:scale(1.08) rotate(-4deg)}
.nav-btn[aria-current="page"]{background:var(--primary-soft);border-color:var(--primary-2);color:var(--ink)}
.nav-label{font-size:.72rem}
.nav-btn[data-nav] svg{color:#fff}
.nav-btn[data-nav="home"] svg{background:var(--c-home)} .nav-btn[data-nav="ce1d"] svg{background:linear-gradient(135deg,#B8742E,#5A3416)} .nav-btn[data-nav="brevet"] svg{background:linear-gradient(135deg,#F06AA8,#B0307A)} .nav-btn[data-nav="ceb"] svg{background:linear-gradient(90deg,#1A1A1A 33%,#F2C431 33% 66%,#ED2939 66%)} .nav-btn[data-nav="adventure"] svg{background:var(--c-adventure)} .nav-btn[data-nav="courses"] svg{background:var(--c-courses)} .nav-btn[data-nav="ai"] svg{background:var(--c-ai)}
.nav-btn[data-nav="exercises"] svg{background:var(--c-exercises)} .nav-btn[data-nav="scan"] svg{background:var(--c-scan)} .nav-btn[data-nav="classes"] svg{background:var(--c-classes)} .nav-btn[data-nav="fiches"] svg{background:var(--c-fiches)}
.nav-btn[data-nav="cards"] svg{background:var(--c-cards)} .nav-btn[data-nav="exam"] svg{background:var(--c-exam)} .nav-btn[data-nav="planner"] svg{background:var(--c-planner)} .nav-btn[data-nav="wardrobe"] svg{background:var(--c-wardrobe)}
.nav-btn[data-nav="ranked"] svg{background:var(--c-ranked)} .nav-btn[data-nav="concepts"] svg{background:var(--c-concepts)} .nav-btn[data-nav="errors"] svg{background:var(--c-errors)} .nav-btn[data-nav="progress"] svg{background:var(--c-progress)}
.nav-btn[data-nav="writing"] svg{background:var(--c-writing)} .nav-btn[data-nav="favorites"] svg{background:var(--c-favorites)} .nav-btn[data-nav="settings"] svg{background:var(--c-settings)}
.sheet-list button{border:2px solid var(--edge);border-radius:20px;box-shadow:var(--chunk);font-size:.85rem;color:var(--ink);padding:16px 6px}
.sheet-list svg{width:30px;height:30px}

/* ----- barre du bas (téléphone) : grosses icônes faciles à toucher ----- */
@media (max-width:900px){
  .bottombar{border:2px solid var(--edge);border-radius:24px;box-shadow:0 5px 0 var(--edge),var(--shadow-lg);padding:6px 4px}
  .bb{font-size:.74rem;color:var(--ink-2);padding:6px 2px;border-radius:16px;border:2px solid transparent}
  .bb svg{width:26px;height:26px}
  .bb[aria-current="page"]{border-color:var(--primary-2);background:var(--primary-soft);color:var(--primary)}
  .bb.center span.disc{width:54px;height:54px;border-radius:18px;margin-top:-26px;box-shadow:0 5px 0 color-mix(in srgb,var(--primary) 55%,#000)}
  .bb.center svg{width:28px;height:28px}
}

/* ----- champs, choix, puces ----- */
.input,select.input,textarea.input{border:2px solid var(--edge);border-radius:16px;padding:13px 15px;font-size:1rem;background:var(--surface)}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
label.field{font-size:.95rem;color:var(--ink)}
.chip{border:2px solid var(--edge);border-radius:999px;padding:9px 16px;font-weight:800;font-size:.95rem;color:var(--ink);box-shadow:0 3px 0 var(--edge)}
.chip:active{transform:translateY(3px);box-shadow:none}
.chip[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 3px 0 color-mix(in srgb,var(--primary) 55%,#000)}
.seg{border:2px solid var(--edge);border-radius:18px;padding:5px}
.seg button{padding:9px 14px;border-radius:13px;font-size:.92rem;font-weight:900}
.seg button[aria-pressed="true"]{box-shadow:0 3px 0 var(--edge);border:2px solid var(--primary-2)}
.pill{padding:4px 12px;font-size:.8rem;font-weight:900}
.opt{border:2px solid var(--edge);border-radius:18px;padding:15px 16px;font-size:1.02rem;box-shadow:0 4px 0 var(--edge)}
.opt:active:not([disabled]){transform:translateY(4px);box-shadow:none}
.opt .k{width:32px;height:32px;border-radius:10px;border:2px solid var(--edge);background:var(--surface)}
.opt[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 4px 0 color-mix(in srgb,var(--primary) 60%,#000)}
.opt.ok{border-color:var(--teal);box-shadow:0 4px 0 color-mix(in srgb,var(--teal) 60%,#000)}
.opt.ko{border-color:var(--rose);box-shadow:0 4px 0 color-mix(in srgb,var(--rose) 60%,#000)}
.tile{border-width:2px}

/* ----- barres de progression : épaisses avec un reflet ----- */
.bar{height:16px;border-radius:99px}
.bar>i{position:relative}
.bar>i::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:9px;background:rgba(255,255,255,.35)}
.ring{width:68px;height:68px}

/* ----- titres de page, héros, listes ----- */
.view{gap:24px}
.view-head h1{font-size:clamp(1.7rem,3.6vw,2.3rem)}
.hero{border-radius:30px;box-shadow:0 6px 0 color-mix(in srgb,var(--primary) 50%,#000),var(--shadow-lg)}
.class-hero,.rank-hero,.path-hero{box-shadow:0 6px 0 rgba(0,0,0,.25)}
.list>.li{padding:14px 6px}
.li-icon{width:46px;height:46px;border-radius:14px}
.li-icon svg{width:24px;height:24px}
.notice{border-width:2px;border-radius:20px;padding:16px 18px}
.empty h2{font-size:1.4rem}
.empty .btn{min-width:180px}
.stat-tile .num{font-size:2rem}
.goal .check{width:30px;height:30px;border-radius:10px;border-width:3px}
.wd i{width:34px;height:34px;border-radius:12px}

/* ----- fenêtres ----- */
.modal{border:2px solid var(--edge);border-radius:30px;box-shadow:0 6px 0 var(--edge),var(--shadow-lg)}
.toast{border-radius:18px;font-size:1rem;padding:12px 18px;box-shadow:0 4px 0 rgba(0,0,0,.25)}

/* ----- éléments de classe, contrôles, chat ----- */
.screen,.quiz-live,.class-cta{border-radius:24px}
.screen{box-shadow:var(--chunk)}
.code-box{border-width:3px;border-radius:22px}
.cbody{border-radius:18px}
.grade-chip{box-shadow:0 3px 0 rgba(0,0,0,.18)}

/* ----- lisibilité : grandes zones de clic sur petit écran ----- */
@media (max-width:640px){
  body{font-size:16.5px}
  .btn{min-height:48px}
  .quick{padding:16px}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.hero .btn.light{animation:none}}
.flame-card{border:2px solid rgba(0,0,0,.06);border-radius:22px;box-shadow:0 4px 0 rgba(0,0,0,.08)}
@media (max-width:640px){.adv-head>.row{width:100%;flex-wrap:nowrap}.adv-head .flame-card{flex:1;max-width:none;min-width:0}}
/* correction : les icônes des étapes du chemin restent centrées dans leur cercle */
.road .node svg,.road .chest svg,.road .village-btn svg,.road .path-stu svg{position:static;inset:auto;width:auto;height:auto;overflow:visible}
.road .node svg{width:30px;height:30px}
.road .node.cur svg{width:36px;height:36px}
.road .village-btn svg{width:170px;height:104px}
/* coin des rigolos */
.rigolo .chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.meme{position:relative;width:100%;max-width:380px;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,var(--b1),var(--b2));display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 12px;box-shadow:0 5px 0 rgba(0,0,0,.18);border:3px solid #fff}
.meme-txt{font-family:Impact,"Anton","Arial Black","Bricolage Grotesque",sans-serif;font-weight:900;text-transform:uppercase;color:#fff;text-align:center;font-size:clamp(1.05rem,4.6vw,1.45rem);line-height:1.08;letter-spacing:.5px;-webkit-text-stroke:1.5px #111;paint-order:stroke fill;text-shadow:0 2px 0 #111,2px 0 0 #111,-2px 0 0 #111,0 -2px 0 #111;z-index:2}
.meme-actor{position:relative;display:grid;place-items:center;flex:1}
.meme-actor svg{filter:drop-shadow(0 6px 0 rgba(0,0,0,.15))}
.meme-fx{position:absolute;top:2px;right:-30px;font-size:2.3rem;animation:memeWobble 1.4s ease-in-out infinite;white-space:nowrap}
@keyframes memeWobble{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(10deg) scale(1.15)}}
.meme-duo{width:100%;max-width:420px;display:grid;border-radius:20px;overflow:hidden;border:3px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.meme-row{display:flex;align-items:center;gap:14px;padding:12px 14px;font-size:1.05rem}
.meme-row.no{background:#FDE3EA}.meme-row.yes{background:#D9F7DF}
.meme-row.no b{opacity:.7;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#D24C72}
.meme-face{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.meme-tag{font-weight:900;font-size:.8rem}
.meme-exp{width:100%;max-width:440px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.meme-exp .meme{aspect-ratio:auto;justify-content:flex-start;gap:6px;padding:10px 8px}
.meme-lab{background:#111;color:#fff;font-weight:900;font-size:.8rem;padding:3px 10px;border-radius:999px}
.meme-cap{font-weight:900;text-align:center;font-size:.9rem;background:rgba(255,255,255,.85);border-radius:10px;padding:4px 6px;color:#1A1736}
.joke-a{background:#FFF0D6!important;font-weight:900;animation:jokePop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes jokePop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.laugh-burst{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.laugh-burst span{position:absolute;bottom:-60px;font-size:2.6rem;animation:laughUp 1.9s ease-out forwards}
@keyframes laughUp{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-110vh) rotate(360deg);opacity:.2}}
.village-scene.dance .villager svg{animation:villDance .3s ease-in-out infinite alternate}
.village-scene.dance .villager:nth-child(2n) svg{animation-delay:.15s}
.village-scene.dance .village-art svg{animation:villShake .25s ease-in-out infinite alternate}
@keyframes villDance{0%{transform:translateY(0) rotate(-12deg) scaleY(.92)}100%{transform:translateY(-16px) rotate(12deg) scaleY(1.06)}}
@keyframes villShake{0%{transform:rotate(-1.5deg)}100%{transform:rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.meme-fx,.village-scene.dance .villager svg,.village-scene.dance .village-art svg,.laugh-burst span{animation:none}}
/* amis */
.mycode .code-big,.code-big{font-size:1.7rem;font-weight:900;letter-spacing:3px;text-align:center;background:var(--surface-2);border-radius:16px;padding:10px;border:2px dashed var(--line)}
.qr-box{background:#fff;padding:10px;border-radius:16px;min-width:200px;min-height:200px;display:grid;place-items:center}
.qr-box svg{width:220px;height:220px}
.fr-av{position:relative;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.fr-av .dot,.online-av .dot{position:absolute;right:2px;bottom:2px;width:13px;height:13px;border-radius:50%;background:#B8B4CC;border:2px solid var(--surface)}
.dot.on{background:#2EC46B!important}
.online-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.online-av{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;cursor:pointer;min-width:64px}
.online-av svg{border-radius:50%;background:var(--surface-2)}
.fr-prof{background:var(--surface-2);border-radius:24px;padding:8px 20px}
.inv-banner{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:9000;background:var(--surface);border:3px solid var(--primary);border-radius:20px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:min(520px,calc(100% - 24px));animation:jokePop .35s}
/* mode jeu */
.game-banner{display:flex;align-items:center;gap:14px;width:100%;border:0;cursor:pointer;color:#fff;text-align:left;padding:16px 18px;border-radius:22px;background:linear-gradient(120deg,#7445F5,#E86AA0 60%,#F2B035);box-shadow:0 6px 0 #4A2AA8;margin-bottom:14px;font:inherit}
.game-banner b{font-size:1.25rem}.game-banner .gb-ic{font-size:2.2rem}.game-banner svg{margin-left:auto;width:26px;height:26px}
.game-banner:active{transform:translateY(4px);box-shadow:0 2px 0 #4A2AA8}
.game-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.game-level{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;min-height:150px;border-radius:20px;border:3px solid #fff;cursor:pointer;background:linear-gradient(180deg,var(--s1),var(--s2) 70%,var(--gr) 70%);box-shadow:0 5px 0 rgba(0,0,0,.2);font:inherit;color:#1A1736;text-align:left}
.game-level.dark{color:#fff}
.game-level.locked{filter:saturate(.3);opacity:.7;cursor:not-allowed}
.gl-num{background:#1A1736;color:#fff;font-weight:900;border-radius:999px;padding:2px 10px}
.gl-vill{display:flex;align-items:center;gap:4px;margin-top:auto}.gl-vill small{font-weight:800;font-size:.72rem}
.gl-stars{position:absolute;right:10px;top:10px;color:#F2B035;font-size:1.1rem;text-shadow:0 1px 0 #000}
.game-wrap{display:flex;flex-direction:column;gap:8px}
.game-stage{position:relative;width:100%;max-width:1000px;margin:0 auto;border-radius:18px;overflow:hidden;border:3px solid #1A1736;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.game-stage canvas{display:block;width:100%;height:auto;touch-action:none;image-rendering:auto}
.gm-over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,8,30,.55);padding:12px;overflow:auto}
.gm-over>div{background:var(--surface);border-radius:20px;padding:16px;width:min(520px,100%);max-height:100%;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.gm-stars{font-size:2.4rem;color:#F2B035;letter-spacing:4px}
.game-pad{display:flex;gap:10px;max-width:1000px;margin:0 auto;width:100%}
.pad-b{width:74px;height:64px;border-radius:18px;border:3px solid #1A1736;background:var(--surface);font-size:1.6rem;font-weight:900;box-shadow:0 4px 0 #1A1736;touch-action:none;user-select:none;-webkit-user-select:none}
.pad-b.jump{width:96px;background:#F2B035}
.pad-b:active{transform:translateY(3px);box-shadow:0 1px 0 #1A1736}
@media (hover:hover) and (pointer:fine){.game-pad{display:none}}
.rap-lines{max-height:300px;overflow:auto;background:#1B0F3A;border-radius:16px;padding:12px}
.rap-lines p{color:#B9A8E8;font-weight:800;margin:6px 0;transition:all .2s}
.rap-lines p.on{color:#fff;font-size:1.15rem;text-shadow:0 0 12px #FF4FD8}
.coop-on{border:3px solid #2EC46B}
.gm-over[hidden]{display:none!important}
.rap-card .li,button.li{width:100%;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
/* mode jeu plein écran */
body.gaming{overflow:hidden}
.game-full{position:fixed;inset:0;z-index:8000;background:#0B0820;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.game-full canvas{display:block;box-shadow:0 0 60px rgba(0,0,0,.5)}
.gm-hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));pointer-events:none;z-index:2}
.gm-hud>*{pointer-events:auto}
.gm-hbtn{width:44px;height:44px;border-radius:14px;border:2px solid rgba(255,255,255,.7);background:rgba(15,12,40,.55);color:#fff;font-size:1.2rem;cursor:pointer;backdrop-filter:blur(6px);display:grid;place-items:center}
.gm-hbtn:active{transform:scale(.94)}
.gm-title{display:flex;flex-direction:column;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);line-height:1.15;pointer-events:none}
.gm-title b{font-size:1.05rem}.gm-title span{font-size:.78rem;opacity:.9}
.gm-peers{display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.gm-mate{background:rgba(63,224,255,.85);color:#06222A;font-weight:900;font-size:.78rem;border-radius:999px;padding:4px 10px}
.gm-toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(15,12,40,.85);color:#fff;font-weight:800;padding:8px 16px;border-radius:999px;z-index:3;animation:jokePop .3s}
.game-full .game-pad{position:absolute;left:0;right:0;bottom:0;max-width:none;margin:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));pointer-events:none;z-index:2}
.game-full .pad-l{display:flex;gap:12px}
.game-full .pad-b{pointer-events:auto;width:76px;height:76px;border-radius:50%;border:3px solid rgba(255,255,255,.8);background:rgba(15,12,40,.45);color:#fff;font-size:1.8rem;box-shadow:none;backdrop-filter:blur(4px)}
.game-full .pad-b.jump{width:92px;height:92px;background:rgba(242,176,53,.8);color:#1A1736}
.game-full .pad-b:active{transform:scale(.93);background:rgba(255,255,255,.35)}
@media (hover:hover) and (pointer:fine){.game-full .game-pad{display:none}}
.game-full .gm-over{position:absolute;inset:0;z-index:4;background:rgba(8,6,25,.6);backdrop-filter:blur(3px)}
.game-full .gm-over>div{max-width:min(560px,94vw);max-height:90vh;overflow:auto;border:3px solid #fff}
.gm-pause .btn{min-width:240px;justify-content:center}
body.gaming .toasts{z-index:9600}
body.gaming .inv-banner{z-index:9500}
/* discussions entre amis */
.dm-wrap{display:flex;flex-direction:column;gap:10px;height:calc(100vh - 140px);min-height:420px}
.dm-head{background:var(--surface);border-radius:20px;padding:10px 12px;gap:10px;border:2px solid var(--line)}
.dm-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--surface-2);border-radius:20px}
.dm{display:flex;flex-direction:column;align-items:flex-start;max-width:78%}
.dm.mine{align-self:flex-end;align-items:flex-end}
.dm-b{background:var(--surface);border:2px solid var(--line);border-radius:18px 18px 18px 4px;padding:8px 12px;font-weight:600;word-break:break-word}
.dm.mine .dm-b{background:var(--primary);color:#fff;border-color:var(--primary);border-radius:18px 18px 4px 18px}
.dm-t{font-size:.68rem;color:var(--ink-3);margin:2px 6px}
.dm-form{gap:8px}
.chat-btn{position:relative;font-size:1.1rem}
.chat-btn .unread{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#FF4F6E;border:2px solid var(--surface)}
@media (max-width:760px){.dm-wrap{height:calc(100vh - 250px);min-height:360px}.dm-head .btn.sm{padding:6px 10px}}
.gm-emotes{position:absolute;top:66px;right:12px;z-index:3;display:flex;gap:6px;background:rgba(15,12,40,.7);padding:8px;border-radius:18px;backdrop-filter:blur(6px)}
.gm-emotes button{width:46px;height:46px;border-radius:14px;border:0;background:rgba(255,255,255,.15);font-size:1.5rem;cursor:pointer}
.gm-emotes button:active{transform:scale(.9)}
.gm-meme{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.gm-meme .meme{max-width:260px}
.gm-meme .meme-duo,.gm-meme .meme-exp{max-width:320px}
.gm-emotes[hidden]{display:none!important}
/* pseudo en or (Pro / Max) */
.pseudo.gold{background:linear-gradient(90deg,#B8860B,#FFD45A,#E8A317,#FFE89A,#B8860B);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.pseudo.max{animation:goldShine 2.4s linear infinite}
@keyframes goldShine{to{background-position:200% center}}
.plan-ic{-webkit-text-fill-color:initial;color:initial;margin-left:4px;font-size:.85em}
/* abonnements */
.sub-card{border-radius:24px;border:3px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:0 5px 0 var(--line)}
.sub-card.on{border-color:var(--c1)}
.sub-tag{background:linear-gradient(90deg,var(--c1),var(--c2));color:#fff;font-weight:900;letter-spacing:1px;padding:10px 20px;font-size:.95rem}
.sub-body{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.sub-body h2{margin:0}
.sub-price b{font-size:1.8rem;font-weight:900}.sub-price span{color:var(--ink-3);font-weight:700;margin-left:2px}
.sub-ic{font-size:3rem;filter:drop-shadow(0 4px 0 rgba(0,0,0,.15))}
.sub-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sub-perks li{display:flex;gap:10px;align-items:center;font-weight:700}
.sub-perks li span{width:26px;text-align:center}
.sub-perks li.soon{opacity:.6}.sub-perks em{font-size:.75rem;background:var(--surface-2);border-radius:999px;padding:2px 8px;font-style:normal}
.sub-btn{border:3px solid var(--line);background:var(--surface);color:#2F8CF0;font-weight:900;font-size:1.05rem;letter-spacing:.5px;text-transform:uppercase;border-radius:18px;padding:14px;cursor:pointer;box-shadow:0 4px 0 var(--line);font-family:inherit}
.sub-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.sub-card.free{border-style:dashed}
.gift-box{font-size:4rem;animation:memeWobble 1s ease-in-out infinite}
/* appel avec Stu */
.call-screen{background:linear-gradient(180deg,#1B1440,#3A1F7A);border-radius:28px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:calc(100vh - 160px)}
.call-top{display:flex;justify-content:space-between;width:100%;color:#fff}
.call-stu{position:relative;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center}
.call-ring{position:absolute;inset:-8px;border-radius:50%;border:4px solid rgba(91,227,138,.0)}
.call-stu.talk .call-ring{border-color:rgba(91,227,138,.8);animation:ringPulse 1s ease-out infinite}
.call-stu.talk svg{animation:memeWobble .6s ease-in-out infinite}
@keyframes ringPulse{0%{transform:scale(.95);opacity:1}100%{transform:scale(1.15);opacity:0}}
.call-log{width:100%;max-width:560px;flex:1;min-height:120px;max-height:36vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.call-log .dm-b{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.call-in{width:100%;max-width:560px;gap:8px}
.call-b{width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center}
.call-b.start{background:#2EC46B;width:72px;height:72px}.call-b.end{background:#E2434B;width:72px;height:72px;transform:rotate(135deg)}
.call-b.rec{background:#E2434B;animation:ringPulse 1s infinite}
/* événements */
.ev-ic{font-size:2.4rem}
/* bienvenue */
body.onboard .side,body.onboard .bottom-nav,body.onboard .topbar,body.onboard #fab,body.onboard .mnav,body.onboard header{display:none!important}
.welcome{position:fixed;inset:0;z-index:7000;overflow:auto;background:linear-gradient(160deg,#7445F5,#3A1E9A 55%,#16B8B1);display:flex;align-items:flex-start;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 16px 40px}
.wel-card{position:relative;width:min(460px,100%);margin:auto 0;background:var(--surface);border-radius:28px;padding:28px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 0 rgba(0,0,0,.18);text-align:center}
.wel-card .field{text-align:left}
.wel-back{position:absolute;top:14px;left:14px}
.wel-stu{display:grid;place-items:center}
.wel-main{width:100%;justify-content:center}
.lang-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lang-b{display:flex;align-items:center;gap:10px;padding:14px;border-radius:18px;border:3px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;font-size:1.05rem;box-shadow:0 4px 0 var(--line)}
.lang-b span{font-size:1.6rem}
.lang-b:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.pw-rules{display:flex;flex-direction:column;gap:2px;text-align:left;font-size:.82rem;color:var(--ink-3);font-weight:700}
.pw-rules .ok{color:#1F9D57}
body.rtl .view,body.rtl .wel-card{direction:rtl}
/* appel entre amis */
.fcall{position:fixed;inset:0;z-index:9800;background:linear-gradient(180deg,#0E2A24,#123B33 50%,#0B1F1B);display:flex;align-items:center;justify-content:center;color:#fff}
.fcall-in{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;width:min(420px,100%);height:100%;justify-content:space-between;padding-top:max(30px,env(safe-area-inset-top));padding-bottom:max(40px,env(safe-area-inset-bottom))}
.fcall-top{font-size:.85rem;opacity:.75}
.fcall-av{width:150px;height:150px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.1);display:grid;place-items:center;margin-top:40px}
.fcall-av.pulse{animation:ringPulse2 1.6s ease-out infinite}
@keyframes ringPulse2{0%{box-shadow:0 0 0 0 rgba(91,227,138,.6)}100%{box-shadow:0 0 0 30px rgba(91,227,138,0)}}
.fcall h2{color:#fff;margin:0}
.fcall-st{font-size:1.1rem;opacity:.85;text-align:center;max-width:320px}
.fcall-btns{display:flex;gap:60px;margin-top:auto}
.fcall .call-b{width:72px;height:72px;font-size:1.6rem}
.fcall .call-b.off{background:#fff;color:#123B33}
/* badge PRO (or) / MAX (néon) à côté du logo */
.plan-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:8px;font-family:var(--f-display);font-weight:900;font-size:.8rem;letter-spacing:1.5px;vertical-align:middle;line-height:1.3}
.plan-badge[hidden]{display:none!important}
body.is-pro .plan-badge{color:#7A4A00;background:linear-gradient(135deg,#FFE89A,#F2B035 45%,#C98A10 55%,#FFE08A);border:2px solid #B8860B;box-shadow:0 2px 0 #8A6200,inset 0 1px 0 rgba(255,255,255,.7);text-shadow:0 1px 0 rgba(255,255,255,.6)}
body.is-max .plan-badge{color:#fff;background:#120A2E;border:2px solid #FF4FD8;text-shadow:0 0 4px #FF4FD8,0 0 10px #FF4FD8,0 0 18px #3FE0FF;box-shadow:0 0 8px #FF4FD8,0 0 16px rgba(63,224,255,.6),inset 0 0 8px rgba(255,79,216,.5);animation:neonFlicker 3s infinite}
@keyframes neonFlicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
.brand .plan-badge{margin-left:6px}
.mobile-brand .plan-badge{font-size:.72rem;padding:1px 6px}
.sv-stu svg{animation:memeWobble 1.4s ease-in-out infinite}
/* appel avec Stu : petits points pendant que la phrase arrive */
.say-dots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.say-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:sayDot 1s infinite}
.say-dots i:nth-child(2){animation-delay:.15s}.say-dots i:nth-child(3){animation-delay:.3s}
@keyframes sayDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.9;transform:translateY(-3px)}}
/* ===== Événement LDC / Europa / Conférence ===== */
.ldc-feature{display:flex;align-items:center;gap:16px;width:100%;padding:14px 16px;border-radius:24px;border:2px solid #9FD8FF;background:linear-gradient(120deg,#E6F6FF,#F2EEFF);cursor:pointer;color:var(--ink);box-shadow:0 4px 0 #9FD8FF;margin-bottom:6px;font:inherit}
.ldc-feature:active{transform:translateY(2px);box-shadow:0 2px 0 #9FD8FF}
.ldc-logo svg{display:block;border-radius:18px;box-shadow:0 8px 20px -10px rgba(27,63,168,.6)}
.ldc-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px;border-radius:26px;background:linear-gradient(120deg,#E6F6FF,#F2EEFF);border:1px solid #BFE3FF}
.ldc-pred{border-left:6px solid var(--ldc)}
.ldc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ldc-club{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:18px;border:2px solid var(--line);background:var(--surface);text-align:center}
.ldc-club.on{border-color:var(--primary);background:var(--primary-soft)}
.ldc-kits svg{filter:drop-shadow(0 4px 6px rgba(30,20,90,.18))}
.ldc-show{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding:10px;border-radius:20px;background:radial-gradient(circle at 50% 30%,var(--primary-soft),var(--surface-2))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ldc-feature,:root:not([data-theme="light"]) .ldc-hero{background:linear-gradient(120deg,#16234A,#231A44);border-color:#2E4A86;box-shadow:none}}
:root[data-theme="dark"] .ldc-feature,:root[data-theme="dark"] .ldc-hero{background:linear-gradient(120deg,#16234A,#231A44);border-color:#2E4A86;box-shadow:none}
/* niveaux */
.pk-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.pk-lv{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:18px;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;box-shadow:0 3px 0 var(--line)}
.pk-lv b{font-size:1.4rem}
.pk-lv.done{border-color:#F2B035;background:#FFF6DC}
.pk-lv.next{border-color:var(--primary);background:var(--primary-soft);animation:pkPulse 1.6s infinite}
.pk-lv:disabled{opacity:.45;cursor:not-allowed;animation:none}
@keyframes pkPulse{50%{transform:scale(1.04)}}
/* scène du penalty */
.pk-wrap{display:flex;flex-direction:column;gap:10px;max-width:640px;margin:0 auto}
.pk-hud{display:flex;align-items:center;gap:10px}
.pk-dots{display:flex;gap:5px}.pk-dots i{width:14px;height:14px;border-radius:50%;background:var(--line);border:2px solid var(--surface)}
.pk-dots i.ok{background:#2E9E5B}.pk-dots i.ko{background:#E2405A}
.pk-scene{position:relative;width:100%;aspect-ratio:4/3.3;border-radius:24px;overflow:hidden;background:linear-gradient(#20306A 0 22%,#2E8B3E 22% 100%);isolation:isolate}
.pk-scene::before{content:"";position:absolute;inset:22% 0 0;background:repeating-linear-gradient(#2E8B3E 0 9%,#349A45 9% 18%);z-index:-1}
.pk-scene::after{content:"";position:absolute;left:12%;right:12%;top:46%;height:2px;background:rgba(255,255,255,.7);box-shadow:0 0 0 0 #fff}
.pk-crowd{position:absolute;inset:0 0 78% 0;background:radial-gradient(circle,#F2C94C 1.5px,transparent 2px) 0 0/14px 12px,radial-gradient(circle,#E86AA0 1.5px,transparent 2px) 7px 6px/14px 12px,#1A2556;opacity:.8}
.pk-goal{position:absolute;left:14%;width:72%;top:14%;height:33%;z-index:1}
.pk-scene.net .pk-goal{animation:pkNet .5s}
@keyframes pkNet{30%{transform:scaleY(1.05) translateY(-2%)}60%{transform:scaleY(.98)}}
.pk-keeper{position:absolute;left:50%;top:26%;width:16%;transform:translate(-50%,0);z-index:3;transition:transform .45s cubic-bezier(.3,.7,.4,1)}
.pk-keeper svg{width:100%;height:auto}
.pk-keeper{animation:pkSway 1.4s ease-in-out infinite}
.pk-keeper.dive{animation:none;transform:translate(calc(-50% + var(--kx,0)),6%) rotate(var(--kr,0))}
@keyframes pkSway{50%{transform:translate(-42%,0)}}
.pk-spot{position:absolute;left:50%;top:79%;width:3%;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:.8}
.pk-ball{position:absolute;left:50%;top:77%;width:7%;transform:translate(-50%,-50%);z-index:4;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.pk-ball svg{width:100%;height:auto}
.pk-ball.fly{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.55) rotate(540deg)}
.pk-ball.fly.bounce{transition:transform .5s ease-out;transform:translate(calc(-50% + var(--bx2)),calc(-50% + var(--by2))) scale(.7) rotate(900deg)}
.pk-player{position:absolute;left:22%;top:62%;width:15%;z-index:5;transform:translate(-50%,0);transition:left 1.1s cubic-bezier(.4,.1,.5,1),top 1.1s cubic-bezier(.4,.1,.5,1)}
.pk-player svg{width:100%;height:auto;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}
.pk-player.run{left:41%;top:58%;animation:pkRun .22s infinite alternate}
.pk-player.ready{left:41%;top:58%}
.pk-player.kick{left:44%;top:57%;transition-duration:.2s}
@keyframes pkRun{to{margin-top:-1.5%}}
.pk-msg{position:absolute;left:50%;bottom:4%;transform:translate(-50%,20px);width:min(92%,460px);padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.95);color:#1E1A2E;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;opacity:0;pointer-events:none;transition:.3s;z-index:6;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.pk-msg.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pk-msg.goal b:first-child{color:#1E8E4E;font-size:1.3rem}
.pk-msg.save b:first-child,.pk-msg.post b:first-child,.pk-msg.out b:first-child{color:#C2304A;font-size:1.15rem}
.pk-q{display:flex;flex-direction:column;gap:10px}
.pk-prompt{font-size:1.05rem;line-height:1.35}
.pk-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pk-o{white-space:normal;min-height:48px;font-size:1rem}
.pk-time{height:8px;border-radius:6px;background:var(--line);overflow:hidden}.pk-time i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#E2405A,#F2B035,#2E9E5B);transition:width .1s linear}
@media (prefers-reduced-motion:reduce){.pk-keeper{animation:none}.pk-lv.next{animation:none}}
.pk-q[hidden],.pk-msg[hidden]{display:none!important}
/* LDC : bouton Prédiction, cartes maillots, liste de pronostic */
.ldc-predbtn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:22px;border:2px solid var(--ldc);border-left-width:8px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 4px 0 color-mix(in srgb,var(--ldc) 40%,transparent)}
.ldc-predbtn:active{transform:translateY(2px);box-shadow:none}
.ldc-predic{font-size:28px;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--ldc) 14%,var(--surface))}
button.ldc-club{font:inherit;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--line)}
button.ldc-club:active{transform:translateY(2px);box-shadow:none}
.ldc-club.won{border-color:#2E9E5B;background:color-mix(in srgb,#2E9E5B 8%,var(--surface))}
.ldc-kits{position:relative}
.ldc-lock{position:absolute;right:-6px;bottom:0;font-size:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.ldc-bar{display:block;width:80%;height:6px;border-radius:4px;background:var(--line);overflow:hidden}.ldc-bar i{display:block;height:100%;background:linear-gradient(90deg,#F2B035,#2E9E5B)}
.ldc-plist{display:flex;flex-direction:column;gap:8px}
.ldc-prow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.ldc-prow.on{border-color:var(--primary);background:var(--primary-soft)}
.ldc-prow:disabled{opacity:.6;cursor:default}
.ldc-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none}
.ldc-prow.on .ldc-radio{border:6px solid var(--primary)}
.ldc-predbtn>svg{width:22px;height:22px;flex:none}.ldc-predbtn .grow{flex:1;min-width:0}
.ldc-bannerwrap{border-radius:26px;overflow:hidden;box-shadow:0 14px 30px -18px rgba(27,63,168,.7);margin-bottom:10px}
.ldc-banner{display:block;width:100%;height:auto;aspect-ratio:400/240}
@media (prefers-reduced-motion:no-preference){
  .ldc-banner .lb-net{animation:lbNet 2.6s ease-in-out infinite;transform-origin:20% 55%}
  .ldc-banner .lb-c{animation:lbFall 3.2s ease-in-out infinite alternate}
  .ldc-banner .lb-c:nth-of-type(3n){animation-delay:-1.2s}.ldc-banner .lb-c:nth-of-type(3n+1){animation-delay:-2.1s}
  .ldc-banner .lb-s{animation:lbTw 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .ldc-banner .lb-ribbons{animation:lbRib 4s ease-in-out infinite alternate}
}
@keyframes lbNet{50%{transform:scale(1.03,1.05)}}
@keyframes lbFall{to{transform:translateY(8px)}}
@keyframes lbTw{50%{opacity:.3;transform:scale(.6)}}
@keyframes lbRib{to{transform:translateY(-3px)}}
.pk-ball svg{display:block}.pk-ball{line-height:0}
.call-stu.warm{animation:callWarm 1s ease-in-out infinite}@keyframes callWarm{50%{transform:scale(1.06) rotate(-3deg)}}
/* ===== Événements du calendrier ===== */
.season-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:14px;border-radius:26px;background:linear-gradient(120deg,var(--s1),var(--s2));color:#fff;cursor:pointer;box-shadow:0 14px 30px -16px var(--s1)}
.season-banner .sb-sky{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
.season-banner .sb-stu{flex:none;position:relative;z-index:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.season-banner .sb-title{font-family:var(--f-display);font-size:1.45rem;line-height:1.15;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.season-banner .sb-sub{font-size:.92rem;opacity:.9}
.season-banner .sb-q{display:inline-block;margin-top:4px;font-size:.8rem;font-weight:800;background:rgba(255,255,255,.18);border-radius:999px;padding:4px 10px;width:max-content;max-width:100%}
.season-banner .sb-go{position:relative;z-index:1;flex:none}.season-banner .sb-go svg{width:22px;height:22px}
.season-banner.compact .sb-title{font-size:1.15rem}
.season-q{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;border:2px solid var(--line)}
.season-q.done{border-color:#2E9E5B;background:color-mix(in srgb,#2E9E5B 8%,var(--surface))}
.season-items{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
#season-fx{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
#season-fx{transition:opacity 1.5s ease}#season-fx.out{opacity:0}
#season-fx span{position:absolute;top:-40px;opacity:.55;animation:seasonFall linear infinite}
@keyframes seasonFall{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(110vh) rotate(260deg)}}
body.gaming #season-fx,body.onboard #season-fx,body.immersive #season-fx{display:none}
@media (prefers-reduced-motion:reduce){#season-fx{display:none}}
body[data-season="ramadan"] .hero,body[data-season^="aid"] .hero{background:linear-gradient(120deg,#1E1B4E,#3B2F8F);color:#fff}
body[data-season="noel"] .hero{background:linear-gradient(120deg,#145C3E,#B42A2A);color:#fff}
body[data-season="halloween"] .hero{background:linear-gradient(120deg,#2A1240,#8A3A0E);color:#fff}
body[data-season="patrick"] .hero{background:linear-gradient(120deg,#145C32,#2E9E5B);color:#fff}
body[data-season="valentin"] .hero{background:linear-gradient(120deg,#9E1E4A,#E8457A);color:#fff}
body[data-season="chinois"] .hero{background:linear-gradient(120deg,#7A1010,#D63A3A);color:#fff}
body[data-season="ramadan"] .hero .say,body[data-season^="aid"] .hero .say,body[data-season="noel"] .hero .say,body[data-season="halloween"] .hero .say{color:#EFEAFF}
.season-adv{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;margin-bottom:14px;border-radius:22px;border:0;background:linear-gradient(120deg,var(--s1),var(--s2));color:#fff;font:inherit;cursor:pointer;box-shadow:0 10px 24px -14px var(--s1)}
.season-adv .sa-emo{font-size:34px}.season-adv>svg{width:22px;height:22px;flex:none}
.season-defi{border:2px solid var(--primary)}

/* ---------- écrans de fin « célébration » ---------- */
.cel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:100%}
.cel-art{position:relative;padding:10px 40px 4px;display:flex;flex-direction:column;align-items:center}
.cel-stu{animation:celPop .6s cubic-bezier(.2,1.6,.4,1) both, celBob 3s ease-in-out .6s infinite;filter:drop-shadow(0 10px 14px rgba(40,20,90,.18))}
@keyframes celPop{from{transform:scale(.3) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes celBob{50%{transform:translateY(-6px)}}
.cel-spark{position:absolute;width:calc(22px*var(--s));height:calc(22px*var(--s));background:#F2B035;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:celTw 1.6s ease-in-out infinite}
.cel-spark:nth-child(even){background:#34D6D0}.cel-spark:nth-child(3n){background:#E86AA0}
@keyframes celTw{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1) rotate(45deg);opacity:1}}
.cel-say{position:relative;margin-top:-6px;background:#fff;color:#3B2A7A;border:2.5px solid var(--stu-line,#2b2350);border-radius:16px;padding:6px 14px;font-weight:900;font-size:.95rem;animation:celPop .5s .4s both}
.cel-say::before{content:'';position:absolute;top:-9px;left:50%;margin-left:-8px;border:8px solid transparent;border-bottom-color:var(--stu-line,#2b2350);border-top:0}
.cel-title{font-size:clamp(1.9rem,6vw,2.6rem);font-weight:900;margin:6px 0 0;letter-spacing:-.01em;color:#F2A500}
.cel-great{color:#2EB85C}.cel-ok{color:var(--primary,#7445F5)}.cel-low{color:#E2512A}
.cel-msg{color:var(--muted);font-weight:700;font-size:1.05rem;max-width:440px;margin:0 0 10px}
.cel-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:520px}
.cel-tile{border:3px solid var(--c);background:var(--c);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;animation:celPop .5s both}
.cel-tile:nth-child(2){animation-delay:.12s}.cel-tile:nth-child(3){animation-delay:.24s}
.cel-tile span{color:#fff;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:6px 4px}
.cel-tile b{background:var(--card,#fff);border-radius:14px;padding:12px 4px;font-size:1.25rem;font-weight:900;color:var(--c);white-space:nowrap}
.cel-tile.xp{--c:#F2B035}.cel-tile.acc{--c:#2EB85C}.cel-tile.time{--c:#2F9BE0}
@media (max-width:420px){.cel-tile b{font-size:1.05rem}.cel-tile span{font-size:.62rem}}
.cel-foot{gap:10px}.cel-foot .cel-cta{flex:1;text-transform:uppercase;letter-spacing:.04em}
.cel-share{width:56px;padding:0;justify-content:center}
.cel-card{display:flex;flex-direction:column;align-items:center;gap:10px}
@media (prefers-reduced-motion:reduce){.cel-stu,.cel-spark,.cel-tile,.cel-say{animation:none}}
body:not([data-view="home"]) #season-fx{display:none}
.game-level.boss{box-shadow:0 0 0 3px #FF4F6E,0 6px 0 #6E1424!important}.game-level.boss b{color:#fff}

/* écran de connexion / paiement (avant l'appli) */
#gate{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 600px at 10% -10%,#ffe7f2 0,transparent 60%),radial-gradient(900px 500px at 110% 10%,#e3f7f5 0,transparent 55%),var(--bg,#fbf8f3)}
.g-wrap{width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px;align-items:center}
.g-logo{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:2rem;letter-spacing:-.02em;color:#3b2c6b;display:flex;align-items:center;gap:10px}
.g-logo span{font-size:2.2rem}
.g-tag{margin:-8px 0 0;color:#6b6480;font-weight:700}
#gate-card{width:100%;background:#fff;border-radius:22px;padding:22px 20px;box-shadow:0 10px 40px rgba(60,40,110,.12);display:flex;flex-direction:column;gap:12px}
#gate-card h1{margin:0;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:1.5rem;color:#2a2140}
.g-form{display:flex;flex-direction:column;gap:10px}
.g-form .input{width:100%;box-sizing:border-box}
.g-wide{width:100%;justify-content:center}
.g-sub{margin:0;color:#5c566e;font-size:.95rem;line-height:1.45}
.g-err{background:#ffe8e6;color:#a3261b;border-radius:12px;padding:10px 12px;font-weight:700;font-size:.92rem}
.g-info{background:#e6f7f4;color:#11655f;border-radius:12px;padding:10px 12px;font-weight:700;font-size:.92rem}
.g-link{background:none;border:0;color:#7445F5;font-weight:800;cursor:pointer;padding:4px;font:inherit;font-weight:800}
.g-sep{height:1px;background:#eee8f5;margin:4px 0}
.g-check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:#4a4560;line-height:1.4}
.g-check input{margin-top:3px;width:18px;height:18px;flex:none}
.g-code{text-align:center;font-size:1.6rem;letter-spacing:.4em;font-weight:800}
.g-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-plan{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;border:2px solid #ece6f7;background:#fff;border-radius:16px;padding:12px;cursor:pointer;font:inherit}
.g-plan:hover{border-color:#7445F5}
.g-plan.star{border-color:#F2B035;background:#fffaf0}
.g-price{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:1.15rem;color:#2a2140}
.g-note{font-size:.8rem;color:#6b6480}
.g-legal{margin:6px 0 0;text-align:center;font-size:.78rem;color:#8a8499}
.g-legal a{color:#8a8499}
@media (max-width:380px){.g-plans{grid-template-columns:1fr}}