/* ══ دواي — design tokens ══ */
:root{
  --primary:#15803D; --primary-dark:#0F5132; --primary-light:#22C55E;
  --accent:#0369A1; --accent-light:#38BDF8;
  --bg:#EFF7F1; --surface:#FFFFFF; --surface-2:#F7FBF8;
  --fg:#14532D; --fg-soft:#3F6B54; --muted:#E8F0F1;
  --border:#CDE9D6; --border-strong:#A7D9B9;
  --danger:#DC2626; --danger-soft:#FEE2E2;
  --gold:#F59E0B; --gold-soft:#FEF3C7;
  --shadow-sm:0 1px 2px rgba(15,81,50,.06);
  --shadow:0 8px 24px rgba(15,81,50,.08);
  --shadow-lg:0 18px 48px rgba(15,81,50,.14);
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --font-body:'Noto Sans Arabic',system-ui,sans-serif;
  --font-head:'Noto Naskh Arabic','Noto Sans Arabic',serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
body.dark{
  --bg:#0B1712; --surface:#12241B; --surface-2:#0F1E17;
  --fg:#E7F6EC; --fg-soft:#A9CBB8; --muted:#172C22;
  --border:#1E3A2C; --border-strong:#2C5340;
  --shadow:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --primary-light:#34D399;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--fg);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  font-size:16px; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(34,197,94,.20), transparent 62%),
    radial-gradient(ellipse 60% 38% at 100% 100%, rgba(3,105,161,.10), transparent 60%);
}
body.dark::before{background:radial-gradient(ellipse 70% 40% at 50% 0%, rgba(34,197,94,.14), transparent 62%)}
h1,h2,h3,.head{font-family:var(--font-head);line-height:1.3}
button{font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit}
ul{list-style:none}

/* ══ shell ══ */
.phone-shell{
  position:relative; z-index:1; width:100%; max-width:520px; margin:0 auto;
  min-height:100dvh; display:flex; flex-direction:column;
  background:transparent;
}
@media (min-width:560px){
  body{padding:18px 0}
  .phone-shell{
    min-height:calc(100dvh - 36px); border-radius:38px; overflow:hidden;
    background:var(--bg); box-shadow:var(--shadow-lg); border:1px solid var(--border);
  }
}
.view{flex:1; padding:14px 16px 108px; overflow-y:auto; -webkit-overflow-scrolling:touch}
.view.no-scroll{overflow:hidden;padding-bottom:0}

/* ══ topbar ══ */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:12px 16px calc(12px + 0px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar.hidden{display:none}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.15rem}
.brand-mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));
  color:#fff; box-shadow:0 4px 12px rgba(21,128,61,.35); flex:none;
}
.spacer{flex:1}
.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:.82rem; font-weight:700;
  padding:5px 11px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-sm); white-space:nowrap;
}
.chip.gold{background:var(--gold-soft); border-color:#FDE68A; color:#92400E}
.chip.green{background:#DCFCE7; border-color:#A7F3D0; color:var(--primary-dark)}
body.dark .chip.gold{background:rgba(245,158,11,.16);color:#FCD34D;border-color:rgba(245,158,11,.3)}
body.dark .chip.green{background:rgba(34,197,94,.14);color:#6EE7B7;border-color:rgba(34,197,94,.25)}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center; cursor:pointer; flex:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.icon-btn:active{transform:scale(.94)}

/* ══ bottom tabbar ══ */
.tabbar{
  position:fixed; bottom:0; z-index:30;
  width:100%; max-width:520px; left:50%; transform:translateX(-50%);
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  padding:8px 10px calc(8px + var(--safe-b));
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
}
@media (min-width:560px){.tabbar{border-radius:0 0 38px 38px; max-width:518px}}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px;
  border:none; background:none; border-radius:14px; cursor:pointer;
  font-size:.68rem; font-weight:600; color:var(--fg-soft);
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.tab.active{color:var(--primary); background:#DCFCE7}
body.dark .tab.active{background:rgba(34,197,94,.14)}
.tab:active{transform:scale(.95)}

/* ══ buttons — Duolingo chunky ══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:var(--r); border:none; cursor:pointer;
  font-size:1rem; font-weight:700; text-decoration:none; width:100%;
  transition:transform .08s ease, box-shadow .08s ease, filter .18s ease;
}
.btn-primary{
  background:var(--primary-light); color:#052e16;
  box-shadow:0 5px 0 var(--primary-dark), 0 10px 22px rgba(21,128,61,.28);
}
.btn-primary:active:not(:disabled){transform:translateY(4px); box-shadow:0 1px 0 var(--primary-dark)}
.btn-accent{
  background:var(--accent-light); color:#06283a;
  box-shadow:0 5px 0 #075985, 0 10px 22px rgba(3,105,161,.25);
}
.btn-accent:active:not(:disabled){transform:translateY(4px); box-shadow:0 1px 0 #075985}
.btn-ghost{
  background:var(--surface); color:var(--fg); border:2px solid var(--border-strong);
  box-shadow:0 4px 0 var(--border); font-weight:600;
}
.btn-ghost:active:not(:disabled){transform:translateY(3px); box-shadow:none}
.btn-danger{background:var(--danger); color:#fff; box-shadow:0 5px 0 #991B1B}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; filter:grayscale(.2)}
.btn-sm{padding:10px 16px; font-size:.88rem; border-radius:14px}
.btn-auto{width:auto}

/* ══ cards ══ */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--shadow); position:relative;
}
.card.tight{padding:14px}
.card.flat{box-shadow:var(--shadow-sm)}
.card-press{cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.card-press:active{transform:translateY(2px) scale(.995)}
.stack{display:flex; flex-direction:column; gap:12px}
.row{display:flex; align-items:center; gap:12px}
.between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.muted{color:var(--fg-soft); font-size:.86rem}
.label-sm{font-size:.74rem; font-weight:700; letter-spacing:.04em; color:var(--fg-soft); text-transform:uppercase}
.divider{height:1px; background:var(--border); margin:14px 0; border:0}

/* ══ progress ══ */
.bar{height:12px; border-radius:999px; background:var(--muted); overflow:hidden; box-shadow:inset 0 1px 3px rgba(15,81,50,.10)}
.bar > i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--primary-light),var(--primary)); transition:width .5s cubic-bezier(.4,1.3,.5,1)}
.bar.gold > i{background:linear-gradient(90deg,#FCD34D,var(--gold))}
.bar.thin{height:8px}

/* ══ hero / home ══ */
.hero-card{
  background:linear-gradient(140deg,var(--primary-dark),var(--primary) 55%,var(--primary-light));
  color:#fff; border-radius:var(--r-xl); padding:20px; box-shadow:0 16px 40px rgba(15,81,50,.30);
  position:relative; overflow:hidden;
}
.hero-card::after{
  content:''; position:absolute; inset-inline-end:-40px; top:-50px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,255,255,.13);
}
.hero-card h2{font-size:1.5rem; margin-bottom:2px}
.hero-card .muted{color:rgba(255,255,255,.82)}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; position:relative; z-index:1}
.hero-stat{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:9px 6px; text-align:center; backdrop-filter:blur(6px)}
.hero-stat b{display:block; font-size:1.25rem; font-family:var(--font-head)}
.hero-stat span{font-size:.68rem; opacity:.9}

.stat-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:13px; box-shadow:var(--shadow-sm)}
.stat-tile b{display:block; font-size:1.5rem; font-family:var(--font-head); color:var(--primary-dark); line-height:1.2}
body.dark .stat-tile b{color:var(--primary-light)}
.stat-tile span{font-size:.74rem; color:var(--fg-soft)}

.cat-row{display:flex; align-items:center; gap:12px}
.cat-ico{
  width:46px; height:46px; border-radius:15px; display:grid; place-items:center; flex:none;
  background:#DCFCE7; color:var(--primary-dark);
}
body.dark .cat-ico{background:rgba(34,197,94,.15); color:#6EE7B7}
.cat-ico.blue{background:#E0F2FE; color:#075985}
body.dark .cat-ico.blue{background:rgba(56,189,248,.15); color:#7DD3FC}
.cat-ico.gold{background:var(--gold-soft); color:#92400E}
body.dark .cat-ico.gold{background:rgba(245,158,11,.15); color:#FCD34D}
.cat-ico.violet{background:#EDE9FE; color:#5B21B6}
body.dark .cat-ico.violet{background:rgba(167,139,250,.15); color:#C4B5FD}
.cat-ico.rose{background:#FFE4E6; color:#9F1239}
body.dark .cat-ico.rose{background:rgba(251,113,133,.15); color:#FDA4AF}

/* ring */
.ring-wrap{position:relative; width:112px; height:112px; flex:none}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{stroke:var(--muted)}
.ring-fg{stroke:url(#ringGrad); stroke-linecap:round; transition:stroke-dashoffset .7s ease}
.ring-txt{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.ring-txt b{font-size:1.5rem; font-family:var(--font-head); color:var(--primary-dark); display:block; line-height:1}
body.dark .ring-txt b{color:var(--primary-light)}
.ring-txt span{font-size:.66rem; color:var(--fg-soft)}

/* ══ quiz session ══ */
.quiz{display:flex; flex-direction:column; min-height:calc(100dvh - 20px); gap:14px}
@media (min-width:560px){.quiz{min-height:calc(100dvh - 60px)}}
.quiz-head{display:flex; align-items:center; gap:10px}
.quiz-progress{flex:1; height:14px; border-radius:999px; background:var(--muted); overflow:hidden; box-shadow:inset 0 1px 3px rgba(15,81,50,.1)}
.quiz-progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--primary-light),var(--primary)); border-radius:999px; transition:width .35s ease}
.hearts{display:flex; gap:3px; color:var(--danger)}
.quiz-body{flex:1; display:flex; flex-direction:column; gap:16px; justify-content:center; padding:6px 0}
.q-title{font-family:var(--font-head); font-size:1.3rem; font-weight:600}
.q-ask{
  background:var(--surface); border:2px solid var(--border); border-radius:var(--r);
  padding:18px; text-align:center; box-shadow:var(--shadow-sm);
}
.q-ask .en{font-size:1.75rem; font-weight:700; letter-spacing:-.01em; direction:ltr; word-break:break-word}
.q-ask .ar{font-size:1.05rem; color:var(--fg-soft)}
.q-hint{font-size:.8rem; color:var(--fg-soft); text-align:center}

.options{display:flex; flex-direction:column; gap:10px}
.option{
  display:flex; align-items:center; gap:12px; width:100%; text-align:start;
  padding:15px 16px; border-radius:var(--r); background:var(--surface);
  border:2px solid var(--border); box-shadow:0 4px 0 var(--border); cursor:pointer;
  font-size:1.02rem; font-weight:600; transition:transform .08s ease, box-shadow .08s ease, border-color .18s ease, background .18s ease;
}
.option:active{transform:translateY(3px); box-shadow:none}
.option .en{direction:ltr; font-weight:700}
.option .key{
  width:26px; height:26px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--muted); font-size:.78rem; font-weight:700; color:var(--fg-soft);
}
.option.correct{border-color:var(--primary-light); background:#DCFCE7; box-shadow:0 4px 0 #86EFAC}
body.dark .option.correct{background:rgba(34,197,94,.16)}
.option.wrong{border-color:var(--danger); background:var(--danger-soft); box-shadow:0 4px 0 #FCA5A5}
body.dark .option.wrong{background:rgba(220,38,38,.18)}
.option.dim{opacity:.55}
.option.picked{border-color:var(--accent); box-shadow:0 4px 0 #7DD3FC}

.feedback{
  border-radius:var(--r) var(--r) 0 0; padding:14px 16px calc(14px + var(--safe-b));
  display:flex; flex-direction:column; gap:10px; animation:slideUp .25s ease;
}
.feedback.ok{background:#DCFCE7; border:2px solid #86EFAC; border-bottom:none}
.feedback.no{background:var(--danger-soft); border:2px solid #FCA5A5; border-bottom:none}
body.dark .feedback.ok{background:#0E2A1B; border-color:#166534}
body.dark .feedback.no{background:#2A1010; border-color:#7F1D1D}
.feedback .fb-head{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.05rem}
.feedback.ok .fb-head{color:var(--primary-dark)}
body.dark .feedback.ok .fb-head{color:#6EE7B7}
.feedback.no .fb-head{color:#991B1B}
body.dark .feedback.no .fb-head{color:#FCA5A5}
.fb-ans{direction:ltr; text-align:start; font-size:.95rem; font-weight:600}
@keyframes slideUp{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.shake{animation:shake .4s ease}
@keyframes pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .35s ease}

/* ══ typing exercise ══ */
.type-box{direction:ltr; text-align:center; font-size:1.5rem; font-weight:700; letter-spacing:.18em;
  padding:16px; border-radius:var(--r); border:2px dashed var(--border-strong); background:var(--surface-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all}
.type-input{
  width:100%; direction:ltr; text-align:center; font-size:1.35rem; font-weight:700;
  padding:14px; border-radius:var(--r); border:2px solid var(--border);
  background:var(--surface); color:var(--fg); outline:none; letter-spacing:.06em;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.type-input:focus{border-color:var(--primary-light); box-shadow:0 0 0 4px rgba(34,197,94,.16)}
.type-input.err{border-color:var(--danger); box-shadow:0 0 0 4px rgba(220,38,38,.14)}

.letters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; direction:ltr}
.letter{
  min-width:44px; height:48px; padding:0 12px; border-radius:14px; background:var(--surface);
  border:2px solid var(--border); box-shadow:0 4px 0 var(--border); font-size:1.1rem; font-weight:700;
  cursor:pointer; transition:transform .08s ease, box-shadow .08s ease;
}
.letter:active{transform:translateY(3px); box-shadow:none}
.letter.used{opacity:.35; pointer-events:none}
.slots{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; direction:ltr}
.slot{
  width:38px; height:46px; border-radius:11px; border:2px solid var(--border-strong);
  background:var(--surface-2); display:grid; place-items:center; font-size:1.2rem; font-weight:700;
  cursor:pointer;
}
.slot.filled{border-color:var(--primary-light); background:#DCFCE7}
body.dark .slot.filled{background:rgba(34,197,94,.16)}
.slot.wrong{border-color:var(--danger); background:var(--danger-soft)}
.slot.cursor{border-color:var(--accent); box-shadow:0 0 0 4px rgba(56,189,248,.20)}

/* ══ match game ══ */
.match-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.match-col{display:flex; flex-direction:column; gap:9px}
.match-item{
  padding:13px 10px; border-radius:15px; background:var(--surface); border:2px solid var(--border);
  box-shadow:0 4px 0 var(--border); font-weight:700; font-size:.92rem; cursor:pointer; text-align:center;
  transition:transform .08s ease, box-shadow .08s ease, border-color .18s, opacity .3s;
}
.match-item:active{transform:translateY(3px); box-shadow:none}
.match-item.sel{border-color:var(--accent); box-shadow:0 4px 0 #7DD3FC}
.match-item.done{border-color:var(--primary-light); background:#DCFCE7; opacity:.55; pointer-events:none; box-shadow:none}
body.dark .match-item.done{background:rgba(34,197,94,.16)}
.match-item.bad{border-color:var(--danger); background:var(--danger-soft); animation:shake .4s ease}
.match-mid{border-color:var(--accent-light); background:#E0F2FE}
body.dark .match-mid{background:rgba(56,189,248,.12)}

/* ══ dictionary ══ */
.search-wrap{position:relative}
.search-wrap svg{position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--fg-soft)}
.search-input{
  width:100%; padding:13px 44px; border-radius:16px; border:2px solid var(--border);
  background:var(--surface); font-size:.95rem; color:var(--fg); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.search-input:focus{border-color:var(--primary-light); box-shadow:0 0 0 4px rgba(34,197,94,.14)}
.pill-row{display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none}
.pill-row::-webkit-scrollbar{display:none}
.pill{
  padding:8px 14px; border-radius:999px; background:var(--surface); border:2px solid var(--border);
  font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; color:var(--fg-soft);
  transition:all .18s ease;
}
.pill.active{background:var(--primary); border-color:var(--primary); color:#fff}
.drug-item{display:flex; align-items:center; gap:12px; cursor:pointer}
.drug-item .en{font-weight:700; direction:ltr; display:block}
.drug-item .ar-sm{font-size:.78rem; color:var(--fg-soft)}
.dot{width:9px; height:9px; border-radius:50%; flex:none}
.dot.mastered{background:var(--primary-light)}
.dot.learning{background:var(--gold)}
.dot.new{background:var(--border-strong)}

/* ══ badges ══ */
.badge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.ach{text-align:center; padding:13px 6px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border); opacity:.45; filter:grayscale(1)}
.ach.on{opacity:1; filter:none; background:#DCFCE7; border-color:#86EFAC}
body.dark .ach.on{background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.3)}
.ach b{display:block; font-size:.74rem; margin-top:6px}
.ach-ico{width:38px; height:38px; margin:0 auto; border-radius:12px; display:grid; place-items:center; background:var(--surface); color:var(--primary)}
.ach.on .ach-ico{background:var(--primary); color:#fff}

/* ══ chart ══ */
.chart{display:flex; align-items:flex-end; gap:8px; height:132px; padding-top:8px}
.chart .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%}
.chart .col > i{width:100%; border-radius:9px 9px 4px 4px; background:linear-gradient(180deg,var(--primary-light),var(--primary)); min-height:6px; transition:height .6s cubic-bezier(.4,1.3,.5,1)}
.chart .col.today > i{background:linear-gradient(180deg,#FCD34D,var(--gold))}
.chart .col span{font-size:.66rem; color:var(--fg-soft)}

/* ══ overlay / modal ══ */
.overlay{
  position:fixed; inset:0; z-index:80; background:rgba(8,26,17,.55);
  backdrop-filter:blur(5px); display:flex; align-items:flex-end; justify-content:center; padding:0;
  animation:fadeIn .2s ease;
}
@media (min-width:560px){.overlay{align-items:center; padding:20px; border-radius:38px}}
.sheet{
  background:var(--surface); width:100%; max-width:520px; border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:22px 18px calc(22px + var(--safe-b)); box-shadow:var(--shadow-lg);
  animation:slideUp .3s cubic-bezier(.3,1.2,.5,1); max-height:88dvh; overflow-y:auto;
}
@media (min-width:560px){.sheet{border-radius:var(--r-xl)}}
.sheet-grip{width:44px; height:5px; border-radius:999px; background:var(--border-strong); margin:0 auto 14px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ══ toast ══ */
.toast-wrap{position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:0; right:0; z-index:120;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px}
.toast{
  max-width:460px; width:100%; padding:12px 16px; border-radius:16px; font-weight:700; font-size:.9rem;
  background:var(--surface); border:2px solid var(--border); box-shadow:var(--shadow-lg);
  animation:slideDown .3s ease; display:flex; align-items:center; gap:9px;
}
.toast.success{border-color:#86EFAC; background:#DCFCE7; color:var(--primary-dark)}
.toast.error{border-color:#FCA5A5; background:var(--danger-soft); color:#991B1B}
.toast.info{border-color:var(--accent-light); background:#E0F2FE; color:#075985}
body.dark .toast.success{background:#0E2A1B; color:#6EE7B7}
body.dark .toast.error{background:#2A1010; color:#FCA5A5}
body.dark .toast.info{background:#082430; color:#7DD3FC}
@keyframes slideDown{from{opacity:0; transform:translateY(-18px)}to{opacity:1; transform:none}}

/* ══ misc ══ */
.empty{text-align:center; padding:44px 18px; color:var(--fg-soft)}
.empty-ico{width:76px; height:76px; margin:0 auto 14px; border-radius:26px; display:grid; place-items:center;
  background:var(--surface-2); border:2px dashed var(--border-strong); color:var(--border-strong)}
.skeleton{background:linear-gradient(90deg,var(--muted) 25%,#f6faf7 50%,var(--muted) 75%); background-size:200% 100%;
  animation:shimmer 1.3s infinite; border-radius:14px}
body.dark .skeleton{background:linear-gradient(90deg,#172C22 25%,#1E3A2C 50%,#172C22 75%); background-size:200% 100%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.center{text-align:center}
.summary-ico{width:96px; height:96px; margin:0 auto 12px; border-radius:32px; display:grid; place-items:center;
  background:linear-gradient(140deg,#FCD34D,var(--gold)); color:#7C2D12; box-shadow:0 14px 34px rgba(245,158,11,.35)}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden}
.confetti i{position:absolute; width:9px; height:14px; border-radius:2px; animation:fall linear forwards}
@keyframes fall{from{transform:translateY(-12vh) rotate(0)}to{transform:translateY(108vh) rotate(620deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ══ شاشة الجلسة (إخفاء الهيكل) ══ */
body.in-session .topbar,body.in-session .tabbar{display:none}
body.in-session .view{padding:0;background:var(--bg)}
.quiz{padding:12px 16px 0;min-height:100dvh}
@media (min-width:560px){.quiz{min-height:calc(100dvh - 36px)}}
.quiz-foot{
  position:sticky; bottom:0; padding:12px 0 calc(12px + var(--safe-b));
  background:linear-gradient(180deg, transparent, var(--bg) 38%);
}
.feedback{position:sticky; bottom:0}
.feedback .btn{margin-top:2px}
.type-input.ok{border-color:var(--primary-light); background:#DCFCE7}
body.dark .type-input.ok{background:rgba(34,197,94,.14)}