/* ============================================================
   styles.css — تمارين أون لاين : styles existants + ajouts des templates
   ============================================================ */
:root{
  --bg:#eaf2f9; --surface:#ffffff; --surface2:#f3f8fc; --ink:#12304a; --muted:#56728c; --line:#d3e1ee;
  --deep:#14436f; --primary:#1f5f9e; --on-primary:#ffffff; --accent:#f2b134; --on-accent:#3a2a00;
  --good:#1f8a5b; --good-bg:#dff3e8; --bad:#c9443f; --bad-bg:#fbe3e1; --warn-bg:#fdf1d2;
  --shadow:0 1px 2px rgba(18,48,74,.08),0 6px 18px rgba(18,48,74,.06);
  --f-display:"Baloo Bhaijaan 2","Segoe UI",Tahoma,sans-serif; --f-body:"Tajawal","Segoe UI",Tahoma,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0b1b2b; --surface:#12283d; --surface2:#17314a; --ink:#e7f1fa; --muted:#93acc4; --line:#27445f;
  --deep:#0a2540; --primary:#5aa6e6; --on-primary:#06223a; --accent:#f2b134; --on-accent:#3a2a00;
  --good:#46c28a; --good-bg:#12402e; --bad:#ef7a74; --bad-bg:#4a1f1f; --warn-bg:#3d3216;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.25); color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--deep);z-index:10}
h1,h2,h3{font-family:var(--f-display);line-height:1.25;margin:0;text-wrap:balance}
h2{font-size:1.5rem}h3{font-size:1.15rem}
button,input,select,textarea{font:inherit;color:inherit}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));
  padding-inline:max(16px,env(safe-area-inset-left,0px));height:64px;color:#fff;pointer-events:none}
.top::before{content:"";position:absolute;inset:0 0 auto 0;height:64px;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.11' stroke-width='1.2'%3E%3Crect x='10' y='10' width='28' height='28'/%3E%3Crect x='10' y='10' width='28' height='28' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E");transition:height .3s ease,background-color .3s ease;pointer-events:none;z-index:0}
.top.compact::before{height:52px;background-color:color-mix(in srgb,var(--deep) 92%,transparent)}
.bar{max-width:960px;margin:auto;height:64px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0;position:relative;z-index:1;pointer-events:auto;transition:height .3s ease}
.top.compact .bar{height:52px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.35rem;background:none;border:0;color:#fff;cursor:pointer;padding:0;user-select:none}
.brand svg{width:30px;height:30px;flex:none}
.brand{transition:gap .3s ease}
.btxt{display:inline-block;max-width:12em;overflow:hidden;white-space:nowrap;transition:max-width .3s ease,opacity .3s ease}
.top.compact .brand{gap:0}
.top.compact .btxt{max-width:0;opacity:0}
.hamb{width:44px;height:44px;flex:none;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.hamb:hover{background:rgba(255,255,255,.24)}
.menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;width:min(320px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(5,15,28,.38),0 4px 12px rgba(5,15,28,.18);overflow:hidden;padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
.menu.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .5s ease,transform .5s ease,visibility 0s}
.mhead{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:default}
.mhead .mav{width:42px;height:42px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;font-size:1.3rem;flex:none}
.mhead b{display:block;font-family:var(--f-display);font-size:1.05rem;line-height:1.3;overflow-wrap:anywhere}
.mhead small{color:var(--muted)}
.msep{border:0;border-top:1px solid var(--line);margin:6px 0}
.mi{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 16px;background:none;border:0;color:var(--ink);cursor:pointer;font-size:1rem;text-align:start}
.mi:hover,.mi:focus-visible{background:var(--surface2)}
.mi:focus-visible{outline-offset:-3px}
.mi .mi-i{width:26px;text-align:center;font-size:1.2rem;flex:none}
.mi.danger{color:var(--bad);font-weight:700;border-top:1px solid var(--line);margin-top:4px;padding-top:14px}
@media (max-width:480px){.menu{inset-inline:0;width:auto}}
@media (prefers-reduced-motion:reduce){.menu,.menu.open,.top::before,.bar,.brand,.btxt{transition:none}}
.acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
main{max-width:960px;margin:auto;padding-block:20px 90px;display:flex;flex-direction:column;gap:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);min-width:0}
.gcard,.scard{display:flex;flex-direction:column;gap:10px;text-align:start;cursor:pointer;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow);min-height:132px;transition:border-color .15s,transform .15s}
.gcard:hover,.scard:hover{border-color:var(--gc);transform:translateY(-2px)}
.gtop{display:flex;align-items:center;gap:12px}
.gnum{flex:none;width:56px;height:56px;border-radius:16px;background:var(--gc);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:2rem;line-height:1}
.gname{font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1.3}
.gmeta{color:var(--muted);font-size:.9rem}
.resume{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--deep);color:#fff;border-radius:20px;padding:16px 18px}
.resume b{font-family:var(--f-display);font-size:1.15rem}
.resume small{display:block;opacity:.85}
.steps{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;align-items:center}
.steps b{color:var(--ink)}
.seq{flex:none;width:38px;height:38px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-variant-numeric:tabular-nums}
.item.done .seq{background:var(--good-bg);color:var(--good);border-color:var(--good)}
.chip.good{background:var(--good-bg);color:var(--good);border-color:var(--good)}
.chip.mid{background:var(--warn-bg);color:var(--on-accent);border-color:var(--accent)}
.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.opt .mk{margin-inline-start:auto;font-weight:800;font-size:1.2rem}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pcard{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.pcard h2 {font-size: 1.25rem; margin-bottom: 5px;}
.btn{border:0;background:var(--primary);color:var(--on-primary);border-radius:12px;padding:10px 18px;min-height:44px;cursor:pointer;font-weight:700}
.btn:hover{filter:brightness(1.08)}
.btn.alt{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.btn.acc{background:var(--accent);color:var(--on-accent)}
.btn.big{padding:13px 26px;font-size:1.1rem;border-radius:14px}
.btn.sm{padding:5px 12px;min-height:38px;font-size:.88rem;border-radius:10px}
.btn.danger{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)}
.btn:disabled, .opt:disabled {opacity:.6;cursor:not-allowed;pointer-events:none;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:1px 10px;font-size:.8rem;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.chip.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.muted{color:var(--muted)}
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;min-height:64px;cursor:pointer;text-align:start;width:100%;min-width:0}
.item:hover{border-color:var(--primary)}
.item .ico{font-size:1.6rem;flex:none}
.item .grow{flex:1;min-width:0}
.prog{height:10px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);overflow:hidden;direction:rtl}
.prog>i{display:block;height:100%;background:var(--gc,var(--primary));border-radius:999px}
.prog.good>i{background:var(--good)}.prog.bad>i{background:var(--bad)}.prog.mid>i{background:var(--accent)}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;background:#9aa9b8;flex:none}
.dot.on{background:#2fc77a;box-shadow:0 0 0 4px rgba(47,199,122,.25)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stat b{display:block;font-family:var(--f-display);font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 16px;cursor:pointer;font-weight:700;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.cnt{background:var(--bad);color:#fff;border-radius:999px;padding:0 8px;font-size:.78rem;margin-inline-start:6px}
.qbox{font-family:var(--f-display);font-size:1.45rem;font-weight:700;line-height:1.5;padding:6px 0 14px}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;min-height:60px;cursor:pointer;font-size:1.15rem;text-align:start;width:100%}
.opt:hover:not(:disabled){border-color:var(--primary)}
.opt .l{width:32px;height:32px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-weight:700;flex:none;border:1px solid var(--line)}
.opt.ok{border-color:var(--good);background:var(--good-bg)}
.opt.no{border-color:var(--bad);background:var(--bad-bg);border-style:dashed}
.opt.ok .mk{color:var(--good)}.opt.no .mk{color:var(--bad)}
.ltr{direction:ltr;text-align:left}
.qbox.ltr,.opt.ltr{direction:ltr;text-align:left}
input[type=password],input[type=email],input[type=date],input[autocomplete=username],#rCode,#lcode{direction:ltr;text-align:left}
.fb{border-radius:12px;padding:10px 14px;font-weight:700}
.fb.ok{background:var(--good-bg);color:var(--good)}.fb.no{background:var(--bad-bg);color:var(--bad)}
.pts{font-family:var(--f-display);font-weight:800;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:2px 14px;font-variant-numeric:tabular-nums;display:inline-block;transition:transform 0.2s;}
.stars{font-size:2.4rem;letter-spacing:6px;color:var(--accent);}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface);text-align:center;display:flex;flex-direction:column;gap:2px}
.badge .e{font-size:2rem}
.badge.lock{filter:grayscale(1);opacity:.55}
.badge small{color:var(--muted)}
table{border-collapse:collapse;width:100%;min-width:480px}
th,td{padding:8px 10px;text-align:start;border-bottom:1px solid var(--line);font-size:.92rem}
th{color:var(--muted);font-weight:500}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.note{background:var(--warn-bg);border-radius:12px;padding:10px 14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.notif{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.notif.unread{border-color:var(--bad);background:var(--bad-bg)}
label.f{display:flex;flex-direction:column;gap:4px;font-weight:500}
input[type=text],input[type=password],input[type=email],input[type=date],select,textarea{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;width:100%;min-width:0}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.form .full{grid-column:1/-1}
.modal{position:fixed;inset:0;background:rgba(5,15,28,.6);display:grid;place-items:center;z-index:50;padding:20px}
.modal .box{background:var(--surface);border-radius:22px;padding:28px 24px;max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;animation:pop .35s ease}
.modal .box.txt{text-align:start;align-items:stretch;max-height:80vh;overflow:auto}
.modal .big{font-size:4rem;line-height:1}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.toast{position:fixed;inset-inline:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;z-index:60;pointer-events:none}
.toast span{background:var(--ink);color:var(--bg);padding:9px 18px;border-radius:999px;font-weight:700}
.empty{text-align:center;padding:26px 12px;color:var(--muted)}
.err{color:var(--bad);font-weight:700;min-height:1.4em}
.okmsg{color:var(--good);font-weight:700}
.lbr{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.lbr.me{background:var(--warn-bg);border-color:var(--accent)}
.lbk{width:38px;text-align:center;font-family:var(--f-display);font-weight:800;font-size:1.3rem;flex:none}
.lbav{font-size:1.6rem;line-height:1;flex:none}
.lbn{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.drop{border:2px dashed var(--primary);border-radius:16px;padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface2)}
.drop.over{background:var(--warn-bg);border-color:var(--accent)}
.modal .box.wide{max-width:680px}
.game-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin-top:14px}.game-mode{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:start;padding:16px;border:2px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);cursor:pointer;min-height:150px}.game-mode:hover{border-color:var(--primary);transform:translateY(-1px)}.game-mode .gm-ico{font-size:2rem}.game-mode b{font-family:var(--f-display);font-size:1.15rem}.game-mode small{color:var(--muted)}.timer-wrap{display:flex;align-items:center;gap:8px;min-width:100px}.timer-track{height:8px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:1;min-width:50px;direction:rtl}.timer-track i{display:block;height:100%;width:100%;background:var(--good);transition:width .2s linear}.timer-track i.low{background:var(--bad)}.game-label{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.errs{margin:0;padding-inline-start:22px;color:var(--bad);font-weight:700;display:flex;flex-direction:column;gap:4px}
.lhero{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:center;border-radius:26px;padding:34px 30px;color:#fff;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='1.4'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");box-shadow:var(--shadow)}
.lhero h1{font-size:clamp(2.4rem,7vw,3.8rem);font-weight:800}
.lhero p{margin:10px 0 22px;font-size:1.2rem;max-width:34ch;opacity:.95}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}
.why .w{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.why .tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--good-bg);color:var(--good);display:grid;place-items:center;font-weight:800}
.foot{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:.9rem}
.link{background:none;border:0;color:var(--primary);cursor:pointer;padding:0;text-decoration:underline;font-size:inherit}
.authwrap{max-width:560px;width:100%;margin:auto}
.rolepick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rolecard{position:relative;cursor:pointer}
.rolecard input{position:absolute;opacity:0;inset:0;cursor:pointer}
.rolecard .rc{display:flex;flex-direction:column;gap:2px;border:2px solid var(--line);border-radius:16px;padding:14px;background:var(--surface);height:100%}
.rolecard .rc b{font-family:var(--f-display);font-size:1.2rem}
.rolecard .rc small{color:var(--muted)}
.rolecard input:checked+.rc{border-color:var(--primary);background:var(--surface2);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}
.avs{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.av{font-size:1.8rem;line-height:1;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:8px;cursor:pointer}
.av.on{border-color:var(--accent);background:var(--warn-bg)}
.codebox{font-family:var(--f-display);font-weight:800;font-size:1.8rem;letter-spacing:.25em;direction:ltr;text-align:center;background:var(--surface2);border:2px dashed var(--primary);border-radius:14px;padding:8px 14px}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--primary)}
.big-av{font-size:2.4rem;line-height:1}
body[data-band=young]{font-size:18px}
body[data-band=young] .opt{min-height:60px;font-size:1.15rem;padding:10px 14px}
body[data-band=young] .qbox{font-size:1.35rem;padding:4px 0 10px}
.dsec{display:flex;flex-direction:column;gap:12px}
.dhero{display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:22px;padding:18px 20px;color:#fff;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='1.4'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");box-shadow:var(--shadow)}
.dhero h2{font-size:clamp(1.4rem,5.4vw,2rem);font-weight:800}
.dwho{font-size:.9rem;opacity:.9;margin-bottom:2px}
.gpill{display:inline-block;margin-top:8px;background:var(--accent);color:var(--on-accent);border-radius:16px;padding:2px 14px;font-weight:700;line-height:1.5}
.dav{flex:none;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:2.4rem;line-height:1}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dcard{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:start;cursor:pointer;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);min-height:172px;min-width:0;transition:border-color .15s,transform .15s}
.dcard:hover:not(:disabled){border-color:var(--gc);transform:translateY(-2px)}
.dcard:disabled{cursor:not-allowed;opacity:.7;box-shadow:none;color:var(--ink)}
.dcard .prog{width:100%;margin-top:auto}
.dic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none}
.dic svg{width:32px;height:32px}
.dn{font-family:var(--f-display);font-weight:800;font-size:1.15rem;line-height:1.25}
.dd{color:var(--muted);font-size:.9rem;line-height:1.35}
.jny{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.jstep{position:relative;display:flex;justify-content:center}
.jstep:not(:last-child)::after{content:"";position:absolute;top:27px;right:calc(50% + 30px);width:calc(100% - 60px);height:5px;border-radius:5px;background:var(--line)}
.jstep.jlinked:not(:last-child)::after{background:var(--good)}
.jbtn{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:none;border:0;padding:0 2px;min-width:0;width:100%;cursor:pointer;color:inherit;position:relative;z-index:1}
div.jbtn{cursor:default}
.jnode{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;background:var(--surface2);border:3px solid var(--line)}
.jbtn b{font-family:var(--f-display);font-size:1rem}
.jbtn small{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.jstep.done .jnode{background:var(--good-bg);border-color:var(--good)}
.jstep.current .jnode{background:var(--accent);border-color:var(--deep);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.jstep.next .jnode{border-style:dashed;border-color:var(--primary)}
.jstep.locked .jbtn{opacity:.55;filter:grayscale(1)}
button.jbtn:hover .jnode{border-color:var(--primary)}
.jcap{margin:14px 0 0;text-align:center;color:var(--muted)}
.dsum{grid-template-columns:repeat(3,minmax(0,1fr))}
.dsum2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dsum2 .stat{padding:12px 8px;text-align:center;font-size:.9rem;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:96px}
.dsum2 .stat.stat-sm b{font-size:1.05rem;line-height:1.4}
.stat-month{background:var(--surface);border:2px solid var(--accent)}
.stat-month b{color:#a86b00}
.stat-gold{background:linear-gradient(135deg,rgba(242,177,52,.18),rgba(242,177,52,.05));border:2px solid var(--accent)}
.stat-silver{background:linear-gradient(135deg,rgba(176,176,176,.18),rgba(176,176,176,.05));border:2px solid #b0b0b0}
.stat-bronze{background:linear-gradient(135deg,rgba(205,127,50,.18),rgba(205,127,50,.05));border:2px solid #cd7f32}
:root[data-theme="dark"] .stat-month{background:var(--surface)}
:root[data-theme="dark"] .stat-month b{color:var(--accent)}
:root[data-theme="dark"] .stat-gold{background:linear-gradient(135deg,rgba(242,177,52,.12),rgba(242,177,52,.03))}
:root[data-theme="dark"] .stat-silver{background:linear-gradient(135deg,rgba(176,176,176,.12),rgba(176,176,176,.03));border-color:#8a96a2}
:root[data-theme="dark"] .stat-bronze{background:linear-gradient(135deg,rgba(205,127,50,.14),rgba(205,127,50,.03));border-color:#b87333}
.searchbox{display:flex;flex-direction:column;gap:10px}
.searchbox input[type=search],.searchbox input[type=text]{font-size:1.05rem;min-height:46px}
.dsum .stat{padding:10px 6px;text-align:center;font-size:.85rem}
.dsum .stat b{font-size:1.35rem}
details.dbd summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.lesson-tree{display:flex;flex-direction:column;gap:10px}
.lesson-node{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.lesson-node summary{cursor:pointer;display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:44px}
.exercise-node{margin:8px 0 0 20px;padding:8px;background:var(--surface2);border-radius:10px}
.exercise-node summary{cursor:pointer;font-weight:700;min-height:40px;display:flex;align-items:center}
.question-preview{margin:8px 0 0 16px;padding:8px;background:var(--surface);border-radius:8px}
@media (min-width:700px){.dgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.play-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);padding:8px 12px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:8px}
.pt-right,.pt-left{display:flex;align-items:center;gap:8px}
.pt-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:0.9rem;font-weight:700;color:var(--ink);cursor:pointer;transition:background 0.2s,border-color 0.2s}
.pt-btn:hover{background:var(--line)}
.pt-btn.finish-btn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line));background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
.pt-btn.finish-btn:hover{background:color-mix(in srgb,var(--bad) 15%,var(--surface))}
.sticky-next{position:fixed;bottom:0;left:0;right:0;padding:12px max(16px,env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px));background:linear-gradient(to top,var(--bg) 60%,transparent);z-index:20;display:flex;justify-content:center}
.sticky-next .btn{max-width:960px;width:100%;box-shadow:0 4px 12px rgba(5,15,28,.25)}
.pcard .stats{grid-template-columns:repeat(3,1fr);gap:8px}
.pcard .stat{padding:10px 4px}
.pcard .stat b{font-size:1.4rem}
.acts2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:15px}
.acts2 .btn-main{grid-column:1/-1}
.acts2 .btn{width:100%;margin:0}
.res-cheer{font-size:1.6rem!important;margin:0!important}
.res-main{font-size:1.15rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;width:100%}
.res-main b{font-family:var(--f-display);font-size:1.6rem}
.learn-box{width:100%;text-align:start;background:var(--good-bg);border:1px solid var(--good);border-radius:14px;padding:12px 16px}
.learn-box h3{margin:0 0 6px;font-size:1.05rem}
.rank-details{width:100%}
.rank-details summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 14px}
.rank-details[open] summary{margin-bottom:6px}
.pfield-hint{display:block;margin:-4px 0 4px;padding-inline-start:30px;line-height:1.5}
.pname-preview{background:var(--surface2);border-radius:12px;padding:8px 12px}
.fb-dot{position:fixed;bottom:calc(8px + env(safe-area-inset-bottom,0px));left:8px;
  width:14px;height:14px;border-radius:50%;background:#9aa9b8;z-index:40;
  box-shadow:0 0 0 3px rgba(0,0,0,.15);transition:background .3s}
.fb-dot.on{background:#2fc77a}
.fb-dot.off{background:#c9443f}
.fb-dot.saving{background:#f2b134;animation:fbPulse 1s infinite}
@keyframes fbPulse{50%{opacity:.35}}

/* ✨ مؤثرات العملة والاهتزاز */
@keyframes flyToScore {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  50% { transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.2) rotate(360deg); opacity: 0; }
}
.flying-coin {
  position: fixed;
  font-size: 4rem;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
  animation: flyToScore 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes pulsePts {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); background: var(--good); color: white; }
  100% { transform: scale(1); }
}
.pts-bump {
  animation: pulsePts 0.4s ease;
}
@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(31, 138, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); }
}
.opt.ok {
  animation: pulseGreen 0.5s ease;
}
@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pulseBtn {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 177, 52, 0.7); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(242, 177, 52, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 177, 52, 0); }
}
/* تنسيق المفكرة اليومية (Daily Timeline) */
.daily-timeline { display: flex; flex-direction: column; gap: 12px; position: relative; padding-right: 10px; }
.daily-timeline::before { content: ''; position: absolute; top: 10px; bottom: 10px; right: 20px; width: 3px; background: var(--line); z-index: 0; border-radius: 3px; }
.daily-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0; position: relative; z-index: 1; box-shadow: var(--shadow); overflow: hidden; margin-right: 30px; }
.daily-card summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; background: var(--surface); }
.daily-card summary::-webkit-details-marker { display: none; }
.daily-card[open] summary { border-bottom: 1px solid var(--line); background: var(--surface2); }
.daily-card summary::before { content: ''; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 3px solid var(--bg); z-index: 2; }
.daily-card[open] summary::before { background: var(--accent); }
.dc-date { display: flex; flex-direction: column; gap: 2px; }
.dc-date b { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); }
.dc-total { font-size: 0.8rem; color: var(--muted); }
.dc-points { font-family: var(--f-display); font-weight: 800; color: var(--good); background: var(--good-bg); padding: 4px 12px; border-radius: 999px; font-size: 1rem; }
.dc-body { padding: 14px 16px; background: var(--surface); }
.dc-subjects { font-size: 0.9rem; color: var(--deep); font-weight: 700; background: var(--surface2); padding: 6px 12px; border-radius: 8px; display: inline-block; }
.dc-item { background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
/* ============================================================
   إضافات القوالب الستة / Ajouts pour les 6 templates
   (variables existantes uniquement / variables existantes)
   ============================================================ */
.chip.type{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.fb small{display:block;margin-top:6px;font-weight:500;opacity:.9}
.tpl-hint{color:var(--muted);font-size:.9rem;margin:6px 0}
.tpl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* --- fill_letters --- */
.fill-sentence{font-size:1.25rem;line-height:2.4;font-weight:700;color:var(--ink)}
.fill-boxes{display:inline-flex;gap:6px;vertical-align:middle;margin:0 6px;direction:ltr;flex-wrap:wrap}
.fill-box{min-width:42px;height:46px;border:2px dashed var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:800 1.3rem var(--f-display,inherit);cursor:pointer;padding:0 6px}
.fill-box.filled{border-style:solid;border-color:var(--primary);background:var(--surface)}
.fill-box.ok{border-color:var(--good);background:var(--good-bg,var(--surface));color:var(--good)}
.fill-box.no{border-color:var(--bad);color:var(--bad)}
.letters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px;direction:ltr}
.letter{min-width:46px;height:50px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:800 1.3rem var(--f-display,inherit);cursor:pointer;transition:opacity .15s}
.letter:active{transform:scale(.94)}
.letter.hidden{opacity:.28;pointer-events:none}

/* --- word_order --- */
.word-context{background:#fff3c4;color:#5c4400;border:1px solid var(--accent);border-radius:12px;padding:10px 14px;font-weight:700;margin-bottom:8px}
:root[data-theme="dark"] .word-context{background:rgba(242,177,52,.15);color:var(--ink)}
.word-instr{font-weight:800;color:var(--primary);margin-bottom:8px}
.word-answer-zone{min-height:58px;border:2px solid var(--primary);border-radius:14px;background:var(--surface);padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.word-answer-zone.empty{border-style:dashed;border-color:var(--line);background:var(--surface2)}
.word-placeholder{color:var(--muted);font-size:.9rem;width:100%;text-align:center}
.word-pool{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.word-chip{padding:8px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface2);color:var(--ink);font:700 1.05rem var(--f-body,inherit);cursor:pointer}
.word-chip.placed{border-color:var(--primary);background:var(--surface)}
.word-chip.used{opacity:.28;pointer-events:none}
.word-answer-zone.ok{border-color:var(--good)}.word-answer-zone.no{border-color:var(--bad)}

/* --- matching --- */
.matching-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.matching-col{display:flex;flex-direction:column;gap:8px}
.matching-item{padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--surface2);color:var(--ink);font:700 1rem var(--f-body,inherit);cursor:pointer;text-align:center}
.matching-item.sel{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent)}
.matching-item.linked{font-weight:800}
.matching-item.ok{border-color:var(--good)}.matching-item.no{border-color:var(--bad)}
.matching-connections{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.matching-link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 12px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:700 .95rem var(--f-body,inherit);cursor:pointer}
.matching-link.correct{background:var(--good-bg,var(--surface));border-color:var(--good)}
.matching-link.incorrect{border-color:var(--bad);color:var(--bad)}

/* --- multi_select --- */
.multi-text{display:flex;flex-wrap:wrap;gap:6px;font-size:1.2rem;line-height:2}
.multi-word{padding:2px 8px;border-radius:8px;border:2px solid transparent;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.multi-word.selected{background:var(--accent);border-color:var(--primary)}
.multi-word.correct{background:var(--good-bg,var(--surface));border-color:var(--good);color:var(--good)}
.multi-word.incorrect{background:var(--bad-bg,var(--surface));border-color:var(--bad);color:var(--bad)}
.multi-word.incorrect-missed{border-color:var(--bad);animation:tplBlink .8s ease-in-out infinite}
@keyframes tplBlink{50%{background:var(--bad-bg,var(--surface2))}}

/* --- select_classify --- */
.classify-sentence{display:flex;flex-wrap:wrap;gap:6px;font-size:1.25rem;line-height:2}
.classify-word{padding:2px 8px;border-radius:8px;border:2px solid transparent;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.classify-word.target{background:var(--accent);border-color:var(--primary);font-weight:800}
.classify-cats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.classify-cat-btn{flex:1;min-width:120px;padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--surface2);color:var(--ink);font:800 1rem var(--f-body,inherit);cursor:pointer}
.classify-cat-btn.ok{border-color:var(--good);background:var(--good-bg,var(--surface))}
.classify-cat-btn.no{border-color:var(--bad);color:var(--bad)}

/* --- admin: édition JSON d'un item / تحرير عنصر --- */
.edit-item-json{width:100%;min-height:90px;font:13px/1.5 monospace;direction:ltr;text-align:left}

@media (max-width:400px){
  .matching-grid{gap:8px}.matching-item{padding:10px 6px;font-size:.9rem}
  .fill-box{min-width:36px;height:42px}.letter{min-width:40px;height:44px}
  .classify-cat-btn{min-width:100px}
}