/* Sirat : identité visuelle. Vert nuit, or, sable ; Baloo 2 (titres), Nunito (texte), Amiri (arabe). */
:root{
  --bg:#edf3ef;--surface:#fff;--surface2:#f5f9f6;--ink:#10231c;--muted:#5a6f66;--line:#dbe6df;
  --green:#0f8a5f;--green-d:#0a6546;--green-l:#d7f2e5;--night:#0a2a23;--night2:#14483b;
  --gold:#f4b836;--gold-d:#c98d10;--gold-l:#fff0c8;--coral:#e5584a;--coral-l:#fde3df;--ok-l:#d9f4e4;
  --sea:#cfe3ee;--land:#efe6cf;--coast:#b9a97e;--lbl:#6b5d3a;--lbls:#4a7a94;--shadow:0 2px 0 rgba(16,35,28,.05),0 10px 26px rgba(16,35,28,.08);
  --r:20px;--fd:"Baloo 2","Nunito",system-ui,sans-serif;--fb:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--far:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1511;--surface:#13231d;--surface2:#182c25;--ink:#e8f3ee;--muted:#95ada3;--line:#243a32;--green:#21b27c;--green-d:#0f7a55;--green-l:#15382d;--gold-l:#3a2f12;--coral-l:#3a1d19;--ok-l:#153a29;--sea:#16303d;--land:#2c3a2f;--coast:#4d6b55;--lbl:#9fb89a;--lbls:#6fa0b8;--shadow:0 2px 0 rgba(0,0,0,.25),0 10px 26px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a1511;--surface:#13231d;--surface2:#182c25;--ink:#e8f3ee;--muted:#95ada3;--line:#243a32;--green:#21b27c;--green-d:#0f7a55;--green-l:#15382d;--gold-l:#3a2f12;--coral-l:#3a1d19;--ok-l:#153a29;--sea:#16303d;--land:#2c3a2f;--coast:#4d6b55;--lbl:#9fb89a;--lbls:#6fa0b8;--shadow:0 2px 0 rgba(0,0,0,.25),0 10px 26px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.55;padding-bottom:96px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.15;margin:0;letter-spacing:.005em}
h2{font-size:1.65rem;font-weight:800}h3{font-size:1.15rem;font-weight:700}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.ic{flex:none;vertical-align:middle}
main{max-width:560px;margin:0 auto;padding:14px 16px 24px;animation:page .35s ease-out}
@keyframes page{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.muted{color:var(--muted);font-size:.92rem}.small{font-size:.85rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.gap{display:flex;gap:10px;align-items:center}
.sp{height:14px}.sp2{height:24px}

/* Barre du haut et navigation */
#top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tb{max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--green)}
.brand svg{width:26px;height:26px}
.chips-top{display:flex;align-items:center;gap:6px}
.tchip{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.tchip.flame{color:#ef7b1a}.tchip.moon{color:#e0a82e}.tchip.snd{color:var(--muted);padding:6px 9px}
#nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:center;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
#nav .ni{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;max-width:108px;padding:4px 0;font-size:.72rem;font-weight:800;color:var(--muted);letter-spacing:.01em}
#nav .ni span.b{display:flex;align-items:center;justify-content:center;width:52px;height:32px;border-radius:14px;transition:.2s}
#nav .ni.on{color:var(--green)}#nav .ni.on span.b{background:var(--green-l);transform:translateY(-1px)}
body.focus #nav,body.focus #top{display:none}body.focus{padding-bottom:290px}

/* Composants */
.card{background:var(--surface);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--shadow);border:1px solid var(--line)}
.card.flat{box-shadow:none}
a.card{display:block;transition:transform .12s}a.card:active{transform:scale(.985)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--green);color:#fff;border:0;border-bottom:5px solid var(--green-d);border-radius:16px;padding:13px 16px;font-family:var(--fd);font-weight:700;font-size:1.1rem;cursor:pointer;margin-top:10px;transition:transform .08s,border-bottom-width .08s;letter-spacing:.02em;text-transform:uppercase}
.btn:active{transform:translateY(3px);border-bottom-width:2px}
.btn.sec{background:var(--surface);color:var(--green);border:2px solid var(--line);border-bottom-width:5px;box-shadow:none}
.btn.gold{background:var(--gold);color:#3a2700;border-bottom-color:var(--gold-d)}
.btn.sm{width:auto;padding:9px 16px;font-size:.95rem;margin:0}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.pill{border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 15px;cursor:pointer;font-weight:800;font-size:.92rem;margin:0 6px 6px 0;display:inline-flex;align-items:center;gap:6px}
.pill.on{border-color:var(--green);background:var(--green-l);color:var(--green)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--green-l);color:var(--green);margin-right:6px}
.tag.gold{background:var(--gold-l);color:var(--gold-d)}
.bar{height:12px;background:var(--line);border-radius:8px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#3fd39a);border-radius:8px;transition:width .5s}
.bar.gold i{background:linear-gradient(90deg,var(--gold-d),var(--gold))}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}.sec-h a{color:var(--green);font-weight:800;font-size:.9rem}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:800;font-size:.9rem;margin-bottom:10px}
.ar{font-family:var(--far);direction:rtl;text-align:right;font-size:1.9rem;line-height:2.1;color:var(--ink)}
.ph{font-style:italic;color:var(--muted);margin-top:4px}
.src{font-size:.85rem;color:var(--muted);margin-top:6px}.src b{color:var(--ink)}
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ring svg{transform:rotate(-90deg)}.ring .rt{position:absolute;font-family:var(--fd);font-weight:800;line-height:1;text-align:center}
.switch{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:.2s;flex:none;border:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:.2s}
.switch:checked{background:var(--green)}.switch:checked::after{transform:translateX(20px)}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.set:last-child{border-bottom:0}
input[type=range]{accent-color:var(--green);width:52%}
select,input[type=text],input[type=time],input[type=number],input[type=email],input[type=password],input[type=search]{width:100%;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700}
input:focus,select:focus{outline:none;border-color:var(--green)}

/* Sirâj */
.sj{display:inline-block;width:var(--s,110px);height:calc(var(--s,110px)*1.25);flex:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.22))}
.sj svg{width:100%;height:100%;overflow:visible}
.sj .glow{transform-box:fill-box;transform-origin:center;animation:pulse 3s ease-in-out infinite}
.sj .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
.sj.float{animation:float 3.2s ease-in-out infinite}.sj.jump{animation:jump .9s ease-out 1}.sj.shake{animation:shake .6s ease-in-out 1}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes jump{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.1,.88)}55%{transform:translateY(-34px) scale(.94,1.08)}80%{transform:translateY(0) scale(1.08,.92)}100%{transform:translateY(0) scale(1)}}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.sj .inner{opacity:0}.sj .sparks .sp{opacity:0;transform-box:fill-box;transform-origin:center}.sj .hand{transform-box:view-box;transform-origin:138px 158px}
.sj.intro{animation:appear .7s cubic-bezier(.2,1.4,.4,1) both,float 3.2s ease-in-out 1.2s infinite}
.sj.intro .hand{animation:handwave 1s ease-in-out .7s 3 both}.sj.intro .pu{animation:look 4s ease-in-out 2.8s 2 both}
.sj.intro .inner{animation:flare 2.4s ease-in-out 3.2s 1 both}.sj.intro .glow{animation:glowup 2.4s ease-in-out 3.2s 1 both,pulse 3s ease-in-out 5.6s infinite}
.sj.intro .sp{animation:twinkle 1.6s ease-in-out 3.3s 2 both}.sj.intro .s2{animation-delay:3.6s}.sj.intro .s3{animation-delay:3.9s}
@keyframes appear{from{transform:scale(.3) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes handwave{0%,100%{transform:rotate(0)}25%{transform:rotate(-32deg)}50%{transform:rotate(18deg)}75%{transform:rotate(-28deg)}}
@keyframes look{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,-2px)}45%{transform:translate(5px,-2px)}70%{transform:translate(3px,3px)}}
@keyframes flare{0%,100%{opacity:0}40%{opacity:1}}
@keyframes glowup{0%,100%{transform:scale(1);opacity:.75}45%{transform:scale(1.35);opacity:1}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(40deg)}}
.bubble{position:relative;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:18px;padding:11px 15px;font-weight:700;flex:1;box-shadow:0 3px 0 var(--line)}
.bubble::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-8px;border:8px solid transparent;border-right-color:var(--line);border-left:0}
.bubble.c{text-align:center;flex:none;font-size:1.12rem}.bubble.c::before{left:50%;top:-10px;margin:0 0 0 -8px;border:8px solid transparent;border-bottom-color:var(--line);border-top:0}
.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}.pop2{animation:pop .45s cubic-bezier(.2,1.4,.4,1) .9s both}.pop3{animation:pop .4s ease-out 1.6s both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.confetti{position:fixed;top:-12px;width:9px;height:14px;z-index:60;pointer-events:none;animation:fall 1.9s ease-in forwards}
@keyframes fall{to{transform:translate3d(var(--dx),105vh,0) rotate(720deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){.sj,.sj *,.confetti,main,.pop,.pop2,.pop3{animation:none!important}}

/* Illustrations */
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.art{position:relative;overflow:hidden;border-radius:var(--r);color:#fff;isolation:isolate}
.art::after{content:"";position:absolute;inset:0;background:var(--pat);background-size:60px;opacity:.06;z-index:0;mix-blend-mode:screen;pointer-events:none}
.art>.in{position:relative;z-index:1}

/* Accueil */
.hero{padding:0;margin-bottom:14px}
.hero .in{padding:18px 16px 16px;background:linear-gradient(180deg,rgba(6,28,23,.05),rgba(6,28,23,.55) 55%,rgba(6,28,23,.8))}
.hello{font-family:var(--fd);font-weight:800;font-size:1.55rem;text-shadow:0 2px 10px rgba(0,0,0,.35)}.hello small{display:block;font-family:var(--fb);font-weight:700;font-size:.92rem;opacity:.9;text-shadow:none}
.guide{display:flex;align-items:center;gap:6px;margin:6px 0}
.guide .bubble{font-size:.98rem}
.week{display:flex;justify-content:space-between;gap:6px;margin:10px 0 4px}
.wd{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;font-weight:800;opacity:.95;flex:1}
.wd i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);color:#fff}
.wd.on i{background:var(--gold);border-color:#ffd876;color:#3a2700}.wd.today i{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 6px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--fd);font-size:1.45rem;line-height:1.1}.stat span{font-size:.74rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.goal{display:flex;align-items:center;gap:16px}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.tile{flex:none;width:248px;min-height:190px;border-radius:22px;padding:16px;scroll-snap-align:start;color:#fff;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.tile h4{font-size:1rem;opacity:.95;display:flex;align-items:center;gap:6px}.tile .t-ar{font-family:var(--far);font-size:1.35rem;line-height:1.9;direction:rtl;text-align:right}
.tile p{margin:0;font-size:.92rem;line-height:1.45}.tile .ref{margin-top:auto;font-size:.8rem;font-weight:800;opacity:.85}
.tile.v{background:linear-gradient(150deg,#0f8a5f,#0a4f3a)}.tile.h{background:linear-gradient(150deg,#d99a1c,#8a5a0a)}.tile.s{background:linear-gradient(150deg,#1a5f73,#0a2f45)}.tile.c{background:linear-gradient(150deg,#6b4bb5,#33206b)}.tile.d{background:linear-gradient(150deg,#e5584a,#9c2f27)}
.tile::after{content:"";position:absolute;inset:0;background:var(--pat);background-size:54px;opacity:.07;pointer-events:none}
.tile>*{position:relative;z-index:1}
.next{display:flex;gap:14px;align-items:center}
.next .node{flex:none}
.subgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.subc{display:flex;flex-direction:column;gap:10px;padding:14px}
.subc .ic-b{width:44px;height:44px;border-radius:14px;background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center}

/* Parcours */
.stageb{position:relative;height:118px;border-radius:22px;overflow:hidden;margin:26px 0 18px;color:#fff;box-shadow:var(--shadow)}
.stageb .in{position:relative;z-index:1;height:100%;padding:14px 16px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(90deg,rgba(4,22,18,.7),rgba(4,22,18,0) 70%)}
.stageb h3{font-size:1.25rem;text-shadow:0 2px 8px rgba(0,0,0,.4)}.stageb small{font-weight:800;opacity:.92}
.lvl{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;position:relative}
.lvl .lb{font-size:.76rem;font-weight:800;color:var(--muted);text-align:center;max-width:150px;margin-top:8px;line-height:1.25}
.lvl .bub{position:absolute;top:-34px;background:var(--surface);border:2px solid var(--gold);color:var(--gold-d);font-family:var(--fd);font-weight:800;font-size:.85rem;padding:3px 12px;border-radius:12px;animation:float 2.4s ease-in-out infinite;white-space:nowrap}
.lvl .bub::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-7px;border:7px solid transparent;border-top-color:var(--gold);border-bottom:0}
.node{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:1.5rem;background:var(--surface);color:var(--green);border:4px solid var(--green);box-shadow:0 6px 0 var(--green-d);position:relative;transition:transform .1s}
.node:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d)}
.node.done{background:var(--green);color:#fff;border-color:#34c88d}.node.done::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--gold);opacity:.9}
.node.cur{background:var(--gold);color:#3a2700;border-color:#ffd876;box-shadow:0 6px 0 var(--gold-d);width:82px;height:82px}
.node.cur::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:3px solid var(--gold);animation:ripple 1.8s ease-out infinite}
@keyframes ripple{from{transform:scale(.85);opacity:.9}to{transform:scale(1.25);opacity:0}}
.node.lock{background:var(--surface2);color:var(--muted);border-color:var(--line);box-shadow:0 6px 0 var(--line)}
.node.exam{border-radius:26px;transform:rotate(0)}
.lvl .dots{width:4px;height:26px;background:radial-gradient(circle,var(--line) 2px,transparent 2.4px) 0 0/4px 10px repeat-y;margin:10px 0 -14px}

/* Niveau, chapitre, leçon */
.lhero{height:150px;border-radius:24px;margin-bottom:14px}.lhero .in{height:100%;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(4,22,18,.8),rgba(4,22,18,0) 65%)}
.lhero h2{text-shadow:0 2px 8px rgba(0,0,0,.45)}.lhero small{font-weight:800;opacity:.92}
.chcard{display:flex;align-items:center;gap:14px}
.chcard .ic-b{width:48px;height:48px;border-radius:16px;background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.chcard.lockd{opacity:.55}
.steps{position:relative;margin:4px 0 4px}
.stp{display:flex;gap:14px;align-items:center;padding:12px 14px;margin-bottom:10px}
.stp .n{width:38px;height:38px;border-radius:50%;background:var(--green-l);color:var(--green);font-family:var(--fd);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.stp.dn .n{background:var(--green);color:#fff}
.fun{background:linear-gradient(135deg,var(--gold-l),transparent);border:2px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.fun h3{display:flex;gap:8px;align-items:center}.fun p{margin:6px 0 0}
details.srcs summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.srcs summary::-webkit-details-marker{display:none}
.lesson .dotsr{display:flex;gap:6px;margin-bottom:12px}.lesson .dotsr i{flex:1;height:8px;border-radius:5px;background:var(--line)}.lesson .dotsr i.on{background:var(--green)}
.lesson h2{margin-bottom:12px}
.ltext{font-size:1.14rem;line-height:1.75}.ltext p{margin:0 0 .8rem}
.arcard{background:linear-gradient(160deg,var(--night),var(--night2));color:#fff;border-radius:22px;padding:18px;margin:14px 0;position:relative;overflow:hidden}
.arcard::after{content:"";position:absolute;inset:0;background:var(--pat);background-size:54px;opacity:.06}
.arcard>*{position:relative;z-index:1}.arcard .ar{color:#fff}.arcard .ph{color:#b7d8cb}.arcard .tr{margin:10px 0 0;color:#e8f3ee;font-size:.98rem}.arcard .src{color:#9fc6b7}.arcard .src b{color:#fff}
.audio{display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;cursor:pointer;margin:10px 0;width:100%;font-weight:800;color:var(--ink);text-align:left}
.audio .pb{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--green-d);flex:none}
.audio small{display:block;color:var(--muted);font-weight:700;font-size:.78rem}
.audio.pl .pb{animation:ripple2 1.2s ease-out infinite}@keyframes ripple2{0%{box-shadow:0 0 0 0 rgba(15,138,95,.5)}100%{box-shadow:0 0 0 14px rgba(15,138,95,0)}}
.sticky{position:sticky;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:5}

/* Session de questions */
.stop{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.stop .x{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px}
.stop .bar{flex:1;height:16px;margin:0}
.qcard{padding:20px 18px}.qcard h3{font-size:1.3rem;margin-bottom:14px}
.qkind{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--green);margin-bottom:6px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:13px 16px;margin:10px 0;font:inherit;font-weight:800;font-size:1.02rem;cursor:pointer;transition:.12s}
.opt .k{width:30px;height:30px;border-radius:9px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.9rem;color:var(--muted);flex:none}
.opt:active{transform:translateY(2px);border-bottom-width:3px}
.opt.sel{border-color:var(--green);background:var(--green-l);color:var(--green)}.opt.sel .k{border-color:var(--green);color:var(--green)}
.opt.ok{border-color:var(--green);background:var(--ok-l);color:var(--green)}.opt.ko{border-color:var(--coral);background:var(--coral-l);color:var(--coral)}
.locked-q{pointer-events:none}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin:10px 0}.pair b{font-weight:800}
.picked{min-height:56px;border:2px dashed var(--line);border-radius:16px;padding:8px;margin:10px 0;display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--surface);border:2px solid var(--line);border-bottom-width:4px;border-radius:12px;padding:9px 13px;cursor:pointer;font-weight:800;font-size:.95rem;color:var(--ink);font-family:inherit}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:2px solid var(--line);padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));transition:background .2s}
.dock .in{max-width:560px;margin:0 auto}
.dock.ok{background:var(--ok-l);border-top-color:var(--green)}.dock.ko{background:var(--coral-l);border-top-color:var(--coral)}
.dock .fbh{display:flex;gap:10px;align-items:center;margin-bottom:2px;animation:pop .3s ease-out}
.dock .fbt{font-family:var(--fd);font-weight:800;font-size:1.2rem}.dock.ok .fbt{color:var(--green)}.dock.ko .fbt{color:var(--coral)}
.dock .fbx{font-size:.92rem;margin-top:4px}
.dock .btn{margin-top:10px}.dock.ko .btn{background:var(--coral);border-bottom-color:#a83c31}
.score{font-family:var(--fd);font-size:3rem;font-weight:800;text-align:center;color:var(--green);line-height:1}
.resc{text-align:center}
.lvlup{background:linear-gradient(135deg,var(--gold),#ffd876);color:#3a2700;border-radius:20px;padding:14px;margin:12px 0;font-family:var(--fd);font-weight:800;font-size:1.15rem;text-align:center;box-shadow:0 5px 0 var(--gold-d);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.xpchip{display:inline-flex;gap:6px;align-items:center;background:var(--gold-l);color:var(--gold-d);font-family:var(--fd);font-weight:800;padding:6px 14px;border-radius:999px;margin:8px 0}

/* Cartes de révision */
.flip{perspective:1000px;height:300px;margin:12px 0;cursor:pointer}
.flip .fi{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.2,.5,1)}
.flip.fl .fi{transform:rotateY(180deg)}
.fc{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;box-shadow:var(--shadow)}
.fc.f{background:linear-gradient(160deg,var(--night),var(--night2));color:#fff}.fc.f::after{content:"";position:absolute;inset:0;border-radius:26px;background:var(--pat);background-size:54px;opacity:.06}
.fc.b{background:var(--surface);border:2px solid var(--line);transform:rotateY(180deg)}
.fc .big{font-family:var(--far);font-size:3.4rem;line-height:1.6}.fc .bigf{font-family:var(--fd);font-size:1.8rem;font-weight:800}
.fc .hint{position:absolute;bottom:14px;font-size:.8rem;font-weight:800;opacity:.7}
.lex{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;margin-bottom:8px}.lex .ar{font-size:1.5rem;line-height:1.5;text-align:right;min-width:90px}

/* Explorer, matières, assistant */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xt{border-radius:22px;padding:16px;min-height:118px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
.xt::after{content:"";position:absolute;inset:0;background:var(--pat);background-size:54px;opacity:.07}.xt>*{position:relative;z-index:1}
.xt h3{font-size:1.1rem}.xt small{font-weight:700;opacity:.9}.xt .ico{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.chat .msg{display:flex;gap:10px;align-items:flex-end;margin:12px 0}.chat .msg.me{justify-content:flex-end}
.chat .mb{background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:12px 14px;max-width:88%;box-shadow:var(--shadow)}
.chat .me .mb{background:var(--green);color:#fff;border-color:var(--green);border-radius:18px 18px 6px 18px}
.askbar{display:flex;gap:8px;margin-top:10px}.askbar input{flex:1}.askbar .btn{width:auto;margin:0;padding:10px 20px}
.nuance{background:var(--gold-l);border-radius:14px;padding:10px 12px;margin:10px 0;font-size:.92rem}

/* Carte */
svg.map{width:100%;height:auto;background:var(--sea);border-radius:22px;display:block;box-shadow:var(--shadow)}
.lbl-land{fill:var(--lbl);opacity:.55;font-weight:800;letter-spacing:.08em}.lbl-sea{fill:var(--lbls);font-style:italic}
.pin{cursor:pointer}.pin circle{fill:var(--green);stroke:#fff}.pin.on circle{fill:var(--gold)}.pin text{fill:var(--ink);font-weight:800;paint-order:stroke;stroke:var(--bg);stroke-width:3px}

/* Profil */
.phead{display:flex;align-items:center;gap:14px}
.wbars{display:flex;align-items:flex-end;gap:8px;height:110px;margin-top:10px}.wb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.wb i{display:block;width:100%;border-radius:8px 8px 4px 4px;background:var(--green-l);min-height:6px;transition:height .5s}.wb.on i{background:linear-gradient(0deg,var(--green),#3fd39a)}.wb span{font-size:.72rem;font-weight:800;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.bdg{text-align:center;padding:12px 6px;border-radius:18px;background:var(--surface2);border:1px solid var(--line);font-size:.78rem;font-weight:800}.bdg b{display:block;font-size:1.8rem}.bdg.off{opacity:.4;filter:grayscale(1)}

/* Introduction */
body.onb #nav,body.onb #top{display:none}body.onb{padding-bottom:20px}
.onbw{min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.onbw .dots{display:flex;gap:6px;justify-content:center}.onbw .dots i{width:26px;height:6px;border-radius:3px;background:var(--line)}.onbw .dots i.on{background:var(--green)}
.hero-s{text-align:center}.opt.multi .k{border-radius:8px}.opt.multi.sel .k::before{content:"✓"}
.slide{animation:slide .35s ease-out}@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
#toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.3s;z-index:70;max-width:90%;text-align:center;font-weight:800;font-size:.92rem}#toast.show{opacity:1;transform:translateX(-50%)}
/* Correctifs de mise en page des cartes-liens */
.card.row,.card.chcard,.card.stp,.card.next,.card.goal,.card.phead,.card.lex{display:flex}
.card.subc{display:flex;flex-direction:column}
.lhero .in .tag{align-self:flex-start}
.card.stp{margin-bottom:10px}
body.focus #toast{bottom:auto;top:24px}
.pair{grid-template-columns:1fr;gap:6px}

/* Sirâj dans les quiz */
.mascot{display:flex;align-items:center;gap:6px;margin:0 0 12px;position:relative;min-height:100px}
.mascot .bubble{font-size:.98rem}
.spk{position:absolute;left:60px;top:48px;width:14px;height:14px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spk .9s ease-out forwards;pointer-events:none}
@keyframes spk{from{transform:translate(0,0) scale(.3);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(120deg);opacity:0}}
.sweat{position:absolute;left:92px;top:14px;width:10px;height:15px;background:#6ec7ff;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:sweat 1.2s ease-in forwards;pointer-events:none}
@keyframes sweat{from{transform:translateY(0);opacity:1}to{transform:translateY(46px);opacity:0}}
.qcard.shk{animation:shakeX .5s ease-in-out}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.spk,.sweat,.qcard.shk{animation:none!important}}

#nav .ni.center span.b{width:58px;height:46px;border-radius:18px;margin-top:-18px;background:var(--green);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.18)}
#nav .ni.center.on span.b{background:var(--green);transform:translateY(-1px)}
#nav .ni.center{color:var(--green)}
.plat{display:inline-block;color:#fff;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:99px}

.feed{height:calc(100dvh - 250px);min-height:420px;overflow-y:auto;scroll-snap-type:y mandatory;border-radius:20px;margin-bottom:12px;overscroll-behavior:contain}
.fi{height:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:0 0 8px}
.fcard{height:100%;border-radius:20px;color:#fff;padding:14px;display:flex;flex-direction:column;overflow:hidden}
.fcard h3{color:#fff;font-size:1.05rem;margin-top:8px}
.fvid{flex:1;min-height:0;border-radius:14px;overflow:hidden;background:#0007}.fvid iframe{width:100%;height:100%;border:0}
.fbig{flex:1;display:flex;align-items:center;justify-content:center}
.fcard .favb{color:#fff}
.fcard .favb{background:#ffffff22;border-radius:12px;padding:8px;border:0}.fcard .favb.on{color:#f4b836}

.rkc{display:block;margin-bottom:12px}.rkc .row{margin-bottom:6px}

/* ---- Animations ---- */
.rise{animation:rise .45s cubic-bezier(.2,.8,.25,1) both}@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.fxgain{position:fixed;z-index:80;transform:translateX(-50%);font-family:var(--fd);font-weight:800;font-size:1.5rem;color:var(--gold-d);background:#fff;border:3px solid var(--gold);border-radius:999px;padding:6px 16px;box-shadow:0 8px 24px rgba(0,0,0,.2);pointer-events:none;animation:fxgain 1.4s ease-out forwards}
@keyframes fxgain{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}30%{transform:translate(-50%,-6px) scale(1)}100%{opacity:0;transform:translate(-50%,-110px) scale(1)}}
.tchip.bump{animation:bump .6s ease-out}@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-4deg)}60%{transform:scale(.95)}100%{transform:scale(1)}}
.fxstar{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-50%);animation:starfly .85s ease-out forwards}
@keyframes starfly{0%{opacity:1;transform:translate(-50%,-50%) scale(.3) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(180deg)}}
.opt.ok{animation:okpop .55s cubic-bezier(.3,1.6,.5,1)}@keyframes okpop{0%{transform:scale(1)}40%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(39,183,124,.25)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(39,183,124,0)}}
.opt.ko{animation:shakeX .5s ease-out}
.fxrank{position:fixed;inset:0;z-index:90;background:rgba(7,28,22,.9);display:flex;align-items:center;justify-content:center;animation:fadein .3s ease-out;overflow:hidden}
.fxrank.out{animation:fadeout .35s ease-in forwards}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{to{opacity:0}}
.fxrank .rays{position:absolute;width:160vmax;height:160vmax;background:repeating-conic-gradient(from 0deg,rgba(244,184,54,.22) 0 10deg,transparent 10deg 20deg);animation:spin 14s linear infinite;mask-image:radial-gradient(circle,#000 0,transparent 55%);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%)}
@keyframes spin{to{transform:rotate(360deg)}}
.fxrank .box{position:relative;text-align:center;color:#fff;padding:20px;animation:rankpop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes rankpop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.fxrank .big{font-family:var(--fd);font-size:6rem;line-height:1;color:var(--gold);text-shadow:0 6px 0 rgba(0,0,0,.25),0 0 40px rgba(244,184,54,.7);animation:glowtxt 1.6s ease-in-out infinite}
@keyframes glowtxt{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.fxrank h2{color:#fff;margin:6px 0 18px}
.tchip.flame svg{animation:flick 1.6s ease-in-out infinite;transform-origin:50% 90%}@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.15) rotate(3deg)}}
.btn{transition:transform .12s,box-shadow .12s}.btn:active{transform:translateY(3px) scale(.98)}
.card.row:active,.chcard:active,.tile:active{transform:scale(.98)}
#nav .ni.on span.b{animation:tabpop .4s cubic-bezier(.3,1.6,.5,1)}@keyframes tabpop{from{transform:scale(.7)}to{transform:translateY(-1px)}}
.lvlup{animation:rankpop .6s cubic-bezier(.3,1.5,.5,1)}
.xpchip{animation:rankpop .5s .2s cubic-bezier(.3,1.5,.5,1) both}
.bar i{transition:width .9s cubic-bezier(.2,.8,.25,1)}
@media (prefers-reduced-motion:reduce){.rise,.fxgain,.fxstar,.fxrank *,.tchip.flame svg,.opt.ok,.opt.ko{animation:none!important}}

/* ---- 3D ---- */
.s3d{display:inline-block;width:var(--s,110px);height:var(--s,110px);position:relative;flex:none}
.s3d .h3c{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:2;cursor:pointer;touch-action:manipulation}
.s3d.on3d>:not(canvas){visibility:hidden}
.fxrank .duo{display:flex;align-items:center;justify-content:center;gap:4px}
.hero,.card.next,.rkc{transform-style:preserve-3d;perspective:900px}
.tilt3d{transition:transform .15s ease-out;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
main.p3d{animation:p3d .5s cubic-bezier(.2,.8,.25,1)}@keyframes p3d{from{opacity:0;transform:perspective(1100px) rotateX(7deg) translateY(16px)}to{opacity:1;transform:none}}
.btn{box-shadow:0 5px 0 rgba(0,0,0,.2),0 10px 18px rgba(0,0,0,.14)}
.opt{box-shadow:0 3px 0 rgba(0,0,0,.05),0 8px 16px rgba(0,0,0,.06)}
.node{box-shadow:0 6px 0 rgba(0,0,0,.18),0 12px 20px rgba(0,0,0,.14)}

/* ---- Carte et parcours en relief ---- */
.m3w{perspective:900px;margin:6px 0 4px}
.m3w.m3 svg.map{transform:rotateX(34deg) scale(.96);transform-origin:50% 70%;box-shadow:0 1px 0 #0003,0 2px 0 #0003,0 3px 0 #0003,0 4px 0 #0003,0 5px 0 #0003,0 6px 0 #0002,0 22px 30px rgba(0,0,0,.28);transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.m3w.m3{margin-top:-18px;margin-bottom:-26px}
.m3w svg.map{transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.node{transform:perspective(500px) rotateX(14deg);background-image:radial-gradient(circle at 35% 25%,rgba(255,255,255,.35),transparent 55%)}
.node.cur{animation:nodebob 2.6s ease-in-out infinite}
@keyframes nodebob{0%,100%{transform:perspective(500px) rotateX(14deg) translateY(0)}50%{transform:perspective(500px) rotateX(14deg) rotateY(10deg) translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.node.cur{animation:none}}
.mascot .s3d{margin-right:4px}

/* Sirâj en pseudo-3D : profondeur, inclinaison qui suit le doigt, tour complet au toucher */
.sj3dw{display:inline-block;width:var(--s,110px);height:var(--s,110px);position:relative;flex:none;cursor:pointer;transform-style:preserve-3d}
.sj3dw .sj{filter:drop-shadow(0 12px 7px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(244,184,54,.35))}
.sj3dw.tilt3d{transition:transform .12s ease-out}
.sj3dw.spin3d{animation:spin3d .8s cubic-bezier(.3,1.3,.5,1)}
@keyframes spin3d{from{transform:perspective(600px) rotateY(0)}to{transform:perspective(600px) rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.sj3dw.spin3d{animation:none}}

/* ---- Fin de séance ---- */
.endscr{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px calc(24px + env(safe-area-inset-bottom));text-align:center;animation:fadein .35s ease-out}
.endscr.out{animation:fadeout .3s ease-in forwards}
.endscr.light{background:var(--bg);color:var(--ink)}
.endscr.dark{background:#1f2c34;color:#fff}
.endscr .eh{margin-bottom:10px}
.endscr .et{font-family:var(--fd);font-size:1.7rem;line-height:1.1;color:var(--gold);margin:6px 0 4px;animation:rankpop .6s cubic-bezier(.3,1.5,.5,1)}
.endscr .es{color:var(--muted);font-size:1.1rem;margin:0 0 22px}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:420px;margin-bottom:26px}
.sc{border-radius:20px;border:3px solid var(--c);background:var(--c);overflow:hidden;opacity:0;animation:cardin .5s var(--d,0s) cubic-bezier(.3,1.5,.5,1) forwards}
.sc.gold{--c:#f4b836}.sc.green{--c:#27b77c}.sc.blue{--c:#4aa8f0}
.sc .sh{color:#fff;font-weight:800;font-size:.68rem;letter-spacing:.04em;padding:6px 2px}
.sc .sb{background:var(--surface);color:var(--c);font-family:var(--fd);font-weight:800;font-size:1.35rem;padding:14px 4px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:14px 14px 0 0}
@keyframes cardin{from{opacity:0;transform:translateY(40px) scale(.7)}to{opacity:1;transform:none}}
.ebar{display:flex;gap:10px;width:100%;max-width:420px;margin-top:auto}
.ebar .btn{flex:1;margin:0}
.sharebtn{width:56px;flex:none;border-radius:16px;border:2px solid var(--line);border-bottom-width:5px;background:var(--surface);color:var(--blue,#4aa8f0);display:flex;align-items:center;justify-content:center;cursor:pointer}
.endscr.light{justify-content:flex-start;padding-top:8vh}
.flwrap{position:relative;width:200px;height:240px;margin-top:6vh;touch-action:none;transition:transform .25s}
.flm{width:100%;height:100%;overflow:visible}
.flm .fb{fill:#141f25}.flm .fi{fill:#f8d96a;opacity:0}.flm .fc{fill:#fff;opacity:0}
.glow{position:absolute;left:50%;top:60%;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,60,.9),rgba(255,160,30,0) 70%);transform:translate(-50%,-50%) scale(1.4);animation:glowtxt 1.8s ease-in-out infinite}
.endscr.dark .et2{font-family:var(--fd);font-size:1.5rem;margin:30px 10px 20px}
.endscr.dark .btn{max-width:260px}
.endscr.dark.lit .fb{fill:url(#fg);animation:flick 1.2s ease-in-out infinite;transform-origin:50% 90%}
.endscr.dark.lit .fi,.endscr.dark.lit .fc{opacity:1}
.endscr.dark.lit .glow{transform:translate(-50%,-50%) scale(7);opacity:.7;transition:transform .9s ease-out}
.endscr.dark.lit .et2,.endscr.dark.lit .btn{opacity:0;transition:opacity .3s}
.bub{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:14px 18px;min-height:76px;max-width:340px;width:100%;font-size:1.05rem;font-weight:700;text-align:left;margin-bottom:12px}
.bub::after{content:"";position:absolute;left:50%;bottom:-10px;width:16px;height:16px;background:var(--surface);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.daysn{font-family:var(--fd);font-size:7rem;line-height:1;font-weight:800;background:linear-gradient(#f4b836,#f08a24);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:6px}
.daysl{font-family:var(--fd);font-size:2rem;color:#f4b836;font-weight:800;margin-bottom:16px;animation:rankpop .6s .5s both}
.wk2{width:100%;max-width:380px;margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.sc,.endscr .et,.daysl{animation:none!important;opacity:1}}
.rkc .ic,.xpchip .ic{color:#e0a82e}

/* ---- Profil, inscription, classement ---- */
.av{border-radius:50%;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--gold);background:var(--surface)}
.av.ph{background:linear-gradient(135deg,var(--green),#27b77c);color:#fff;font-family:var(--fd);font-weight:800;border-color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.card.prof{display:flex;align-items:center;gap:12px}
.phrow{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.phbtn{position:relative;border:0;background:none;padding:0;cursor:pointer}
.phbtn .cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#3a2700;display:flex;align-items:center;justify-content:center;border:3px solid var(--surface)}
.fl{display:block;font-weight:800;font-size:.85rem;color:var(--muted);margin-bottom:12px}
.fl input{display:block;width:100%;margin-top:4px}
.pw{position:relative;display:block}.pw input{padding-right:46px}.pwt{position:absolute;right:6px;top:50%;transform:translateY(-35%);border:0;background:none;color:var(--muted);padding:8px;cursor:pointer}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;margin:6px 0 14px;color:var(--ink)}.chk input{margin-top:3px;width:20px;height:20px;flex:none}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);margin:14px 0}.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line)}
.rkrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.rkrow:last-child{border:0}
.rkrow.me{background:var(--green-l)}.rkrow .pos{width:28px;text-align:center;font-family:var(--fd)}
.rkrow .nm{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rkrow .xp{color:#e0a82e;display:flex;gap:4px;align-items:center;font-family:var(--fd)}