:root{
  --bg:#F2F5F4; --surface:#FFFFFF; --fg:#10201F; --muted:#5C6F6D; --line:#D7E0DE;
  --accent:#E4572E; --accent-fg:#FFFFFF; --teal:#0E7C7B; --good:#1E8E5A;
  --c1:#0E7C7B; --c2:#E4572E; --c3:#3D5A99; --c4:#C79A1E; --c5:#7A4E9E; --c6:#4F8F3A;
  --display:"Lalezar","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1514; --surface:#142120; --fg:#E8F0EF; --muted:#93A9A6; --line:#27403D;
  --accent:#FF7A52; --accent-fg:#1A0B06; --teal:#3FC0BE; --good:#47C98C;
  --c1:#3FC0BE; --c2:#FF7A52; --c3:#7C9BE0; --c4:#E8BD45; --c5:#B98BDC; --c6:#86C86F; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--body);
  padding-block:20px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400}
.wrap{max-width:760px;margin:0 auto;display:grid;gap:18px}
.wrap.wide{max-width:1180px}
.brand{font:var(--dw,400) 30px/1.1 var(--display)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:clamp(16px,4vw,32px);display:grid;gap:18px;align-content:start}
.kind{font-size:13px;letter-spacing:.04em;color:var(--teal);font-weight:600}
.q{font:var(--dw,400) clamp(26px,5vw,42px)/1.25 var(--display);text-wrap:balance;overflow-wrap:anywhere}
.note{color:var(--muted);font-size:14px}
.ok{color:var(--good);font-size:14px;min-height:1.4em}
.err{color:var(--accent);font-size:14px;min-height:1.4em}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grow{flex:1;min-width:0}
.btn{cursor:pointer;border:1.5px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 16px;font-weight:500}
.btn:hover{border-color:var(--teal)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.small{padding:3px 10px;font-size:13px}
.btn.danger{color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:default}
:is(.btn,.opt,input,textarea,select,.up):focus-visible{outline:3px solid var(--teal);outline-offset:2px}
input[type=text],input[type=password],textarea,select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg)}
textarea{min-height:90px;resize:vertical}
label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
label.inline{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--fg)}
label.inline input{width:auto}
.opts{display:grid;gap:10px}
.opt{cursor:pointer;display:block;width:100%;text-align:start;padding:12px 16px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg);font-weight:500}
.opt:hover{border-color:var(--teal)}
.opt.mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.opt[disabled]{cursor:default;opacity:.6}
.scale5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.scale5 .opt{text-align:center;font:var(--dw,400) 22px/1 var(--display);padding:14px 0}
.stmt{display:grid;gap:6px;padding-block:6px}
.hint{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.empty{color:var(--muted);text-align:center;padding:36px 0}
/* results */
.results{display:grid;gap:12px}
.bar{display:grid;gap:4px}
.bar .top{display:flex;justify-content:space-between;gap:12px;font-weight:500;overflow-wrap:anywhere}
.bar .num{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}
.track{height:14px;background:var(--bg);border-radius:3px;overflow:hidden}
.fill{height:100%;border-radius:3px;transition:width .4s}
.cloud{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;align-items:center;padding:10px 0;line-height:1.2;font-family:var(--display)}
.avg{display:flex;align-items:baseline;gap:8px}
.avg b{font:var(--dw,400) 54px/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.dist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-items:end;height:48px}
.dist i{display:block;background:var(--teal);border-radius:2px 2px 0 0;min-height:2px}
.entries{display:grid;gap:8px}
.entry{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);overflow-wrap:anywhere}
.qa{display:grid;gap:10px}
.qaitem{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.qaitem.done{opacity:.55}
.qaitem p{margin:0;overflow-wrap:anywhere}
.up{cursor:pointer;display:grid;justify-items:center;min-width:46px;border:1.5px solid var(--line);border-radius:6px;padding:3px 6px;background:var(--surface);font-variant-numeric:tabular-nums}
.up.on{border-color:var(--accent);color:var(--accent)}
/* join page */
.code-in{font:var(--dw,400) 40px/1.1 var(--display);text-align:center;letter-spacing:.12em;direction:ltr;padding:16px}
/* admin */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.plist{display:grid;gap:10px}
.pitem{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.pitem b{font-weight:600}
.codepill{direction:ltr;font-variant-numeric:tabular-nums;color:var(--teal);font-weight:600}
.editor{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:820px){.editor{grid-template-columns:minmax(0,1fr)}}
.slides{display:grid;gap:8px}
.sl{display:grid;gap:4px;padding:10px 12px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;text-align:start}
.sl.on{border-color:var(--accent)}
.sl .t{font-weight:500;overflow-wrap:anywhere}
.types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.optrow{display:flex;gap:6px}
/* presenter */
body.present{padding:0;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.join{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.join .big{font:var(--dw,400) clamp(28px,4vw,44px)/1 var(--display);direction:ltr;color:var(--accent);letter-spacing:.06em}
.qr{width:96px;height:96px;background:#fff;border-radius:4px;padding:4px;cursor:pointer}
.qr.big{position:fixed;inset:0;margin:auto;width:min(80vmin,560px);height:min(80vmin,560px);z-index:5;padding:16px;box-shadow:0 0 0 100vmax rgba(0,0,0,.7)}
.pstage{padding:clamp(20px,4vw,48px) clamp(16px,6vw,80px);display:grid;gap:28px;align-content:start;max-width:1200px;width:100%;margin:0 auto}
.pstage .q{font-size:clamp(32px,5.5vw,64px)}
.pstage .bar .top{font-size:clamp(18px,2.2vw,28px)}
.pstage .track{height:clamp(18px,2.5vw,30px)}
.pstage .body{font-size:clamp(20px,2.6vw,32px);white-space:pre-wrap;overflow-wrap:anywhere}
.ctl{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 24px;background:var(--surface);border-top:1px solid var(--line)}
.counter{font-variant-numeric:tabular-nums;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.fill{transition:none}}
/* phase 2: ranking, points, grid, quiz, leaderboard */
.opt.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 16%,var(--bg))}
.opt.bad{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg));opacity:1}
.rankrow{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg)}
.rankrow .rn{font:var(--dw,400) 22px/1 var(--display);color:var(--accent);min-width:1.4em;text-align:center}
.rankrow .rl{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:500}
.budget{font-size:15px;color:var(--muted)}
.budget b{font:var(--dw,400) 34px/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.stmt .top{display:flex;justify-content:space-between;gap:12px}
input[type=range]{width:100%;accent-color:var(--accent);min-height:32px}
.chips{display:grid;gap:6px}
.gridwrap{display:grid;gap:4px}
.hint.ctr{justify-content:center}
.pad{position:relative;aspect-ratio:1;width:min(100%,420px);margin-inline:auto;border:1.5px solid var(--line);border-radius:6px;background:
  linear-gradient(var(--line),var(--line)) center/1.5px 100% no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1.5px no-repeat,var(--bg);touch-action:none;cursor:crosshair}
.dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;color:#fff;font:600 14px/30px var(--body);text-align:center;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.35)}
svg.grid2{width:min(100%,520px);margin-inline:auto;display:block}
svg.grid2.big{width:auto;height:min(62vh,640px);max-width:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:8px}
.legend span{display:flex;gap:6px;align-items:center;overflow-wrap:anywhere}
.legend i{display:inline-block;width:22px;height:22px;border-radius:50%;color:#fff;font:600 12px/22px var(--body);text-align:center;font-style:normal}
.timer{font:var(--dw,400) clamp(60px,12vw,140px)/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.timer.small{font-size:56px;text-align:center}
.answered{font-size:clamp(20px,3vw,34px);color:var(--muted)}
.answered b{font:var(--dw,400) clamp(48px,8vw,96px)/1 var(--display);color:var(--teal);margin-inline-end:12px}
.board{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:none}
.board li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font-weight:500;overflow-wrap:anywhere}
.board li:nth-child(1){border-color:var(--c4);background:color-mix(in srgb,var(--c4) 16%,var(--bg))}
.board li b{font:var(--dw,400) 24px/1 var(--display);color:var(--accent)}
.pstage .board li{font-size:clamp(18px,2.4vw,30px);padding:12px 20px}
.mine-rank{margin:0;text-align:center;font-weight:600;color:var(--teal)}
#input{display:grid;gap:12px}
/* phase 3: themes, logos, settings, online counter */
.card,.pstage{zoom:var(--scale,1)}
.plogo,.alogo{max-height:56px;max-width:140px;object-fit:contain;display:block}
.alogo{max-height:40px}
.top .row.lg{gap:12px;flex-wrap:nowrap}
.online{display:inline-flex;gap:6px;align-items:center;color:var(--good);font-weight:600}
.online::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.preset{cursor:pointer;display:flex;border:2px solid var(--line);border-radius:6px;overflow:hidden;padding:0;background:none;height:34px}
.preset.on{border-color:var(--accent)}
.preset i{display:block;width:16px}
.colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.colors input[type=color]{width:100%;height:34px;padding:2px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg)}
.tpreview{border:1px solid var(--line);border-radius:6px;padding:14px;background:var(--bg);color:var(--fg);display:grid;gap:10px;font-family:var(--body)}
.tpreview .q{font-size:22px}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.lg-item{cursor:pointer;border:2px solid var(--line);border-radius:6px;background:#fff;padding:6px;display:grid;place-items:center;aspect-ratio:1;position:relative;font-size:11px;color:#333;text-align:center}
.lg-item.on{border-color:var(--accent)}
.lg-item img{max-width:100%;max-height:100%;object-fit:contain}
.lg-item .x{position:absolute;top:1px;inset-inline-start:1px;font-size:11px;padding:0 5px}
.pitem .row{justify-content:flex-end}
.warn{color:var(--c4);font-size:14px;min-height:1.4em}
.thbody{display:grid;gap:10px}.thbody[hidden]{display:none}
.size-row{display:flex;gap:8px;align-items:center}
.size-row output{min-width:3.2em;text-align:center;font-variant-numeric:tabular-nums}