/* مِحَكّ — نظام التصميم */
:root{
  --primary:#3B2FC9; --primary-2:#5B4FF0; --primary-soft:#ECEAFE; --primary-ink:#fff;
  --accent:#E8A317; --accent-soft:#FDF3DC;
  --bg:#F7F6F2; --surface:#FFFFFF; --surface-2:#F1EFEA; --surface-3:#E8E5DE;
  --ink:#16142B; --ink-2:#3C3A55; --muted:#6E6C82; --line:#E3E0D8; --line-2:#D3CFC4;
  --ok:#14945F; --ok-soft:#E1F5EC; --bad:#D23C3C; --bad-soft:#FCE8E8; --warn:#C27A06; --warn-soft:#FDF1DB; --info:#2563EB; --info-soft:#E3ECFD;
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(22,20,43,.06),0 1px 1px rgba(22,20,43,.04);
  --sh-2:0 6px 24px -8px rgba(22,20,43,.14),0 2px 6px rgba(22,20,43,.05);
  --sh-3:0 24px 60px -20px rgba(22,20,43,.28);
  --f-body:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --f-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --fs:16px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --primary:#8B82FF; --primary-2:#A39CFF; --primary-soft:#24214A; --primary-ink:#0E0C22;
    --accent:#F2B640; --accent-soft:#3A2E12;
    --bg:#0F0E19; --surface:#181726; --surface-2:#1F1E30; --surface-3:#2A2940;
    --ink:#F1F0F8; --ink-2:#CFCDE0; --muted:#9896AE; --line:#2C2B42; --line-2:#3A3954;
    --ok:#3DD39A; --ok-soft:#10301F; --bad:#FF7272; --bad-soft:#3A1717; --warn:#F5B547; --warn-soft:#382A0F; --info:#7AA7FF; --info-soft:#15244A;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 28px -8px rgba(0,0,0,.6); --sh-3:0 30px 70px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --primary:#8B82FF; --primary-2:#A39CFF; --primary-soft:#24214A; --primary-ink:#0E0C22;
  --accent:#F2B640; --accent-soft:#3A2E12;
  --bg:#0F0E19; --surface:#181726; --surface-2:#1F1E30; --surface-3:#2A2940;
  --ink:#F1F0F8; --ink-2:#CFCDE0; --muted:#9896AE; --line:#2C2B42; --line-2:#3A3954;
  --ok:#3DD39A; --ok-soft:#10301F; --bad:#FF7272; --bad-soft:#3A1717; --warn:#F5B547; --warn-soft:#382A0F; --info:#7AA7FF; --info-soft:#15244A;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 28px -8px rgba(0,0,0,.6); --sh-3:0 30px 70px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* وضع الوصول الميسر */
:root[data-a11y="1"]{ --fs:18px; --muted:var(--ink-2); --line:var(--line-2); }
:root[data-a11y="1"] *{ animation:none!important; transition:none!important; }
:root[data-a11y="1"] a{ text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:var(--fs); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--f-body); background:var(--bg); color:var(--ink); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,video{ max-width:100%; height:auto; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--f-display); line-height:1.3; margin:0 0 .5em; color:var(--ink); font-weight:600; letter-spacing:-.01em; }
h1{ font-size:clamp(1.9rem,4.5vw,3.1rem); } h2{ font-size:clamp(1.45rem,3vw,2.1rem); } h3{ font-size:1.2rem; } h4{ font-size:1.02rem; }
p{ margin:0 0 1em; }
hr{ border:0; border-top:1px solid var(--line); margin:1.5rem 0; }
:focus-visible{ outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent); outline-offset:2px; border-radius:6px; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; top:-50px; right:12px; background:var(--primary); color:var(--primary-ink); padding:8px 14px; border-radius:8px; z-index:200; }
.skip:focus{ top:10px; }

.container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:16px; }
@media(min-width:768px){ .container{ padding-inline:28px; } }
.narrow{ max-width:760px; } .wide{ max-width:1400px; }
.stack>*+*{ margin-top:var(--gap,1rem); }
.row{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.row.between{ justify-content:space-between; } .row.end{ justify-content:flex-end; } .row.top{ align-items:flex-start; } .row.nowrap{ flex-wrap:nowrap; }
.grow{ flex:1 1 auto; min-width:0; }
.grid{ display:grid; gap:1.1rem; }
.g2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.g3{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.g4{ grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); }
.muted{ color:var(--muted); } .small{ font-size:.875rem; } .tiny{ font-size:.78rem; } .center{ text-align:center; } .nowrap{ white-space:nowrap; }
.mt0{margin-top:0}.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.75rem}.mt4{margin-top:3rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}.mb3{margin-bottom:1.75rem}
.hide{ display:none!important; }
@media(max-width:767px){ .hide-sm{ display:none!important; } }
@media(min-width:768px){ .only-sm{ display:none!important; } }
.num{ font-variant-numeric:tabular-nums; }
.ltr{ direction:ltr; unicode-bidi:isolate; }

/* الأيقونات */
.ic{ width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ic-lg{ width:1.6em; height:1.6em; }

/* الأزرار */
.btn{ --b:var(--surface); --c:var(--ink); --bd:var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:42px; padding:.5em 1.05em; border-radius:12px;
  border:1px solid var(--bd); background:var(--b); color:var(--c); font:600 .95rem/1.2 var(--f-body); cursor:pointer; text-decoration:none!important;
  transition:transform .15s var(--ease),background .15s,box-shadow .15s,border-color .15s; white-space:nowrap; user-select:none; }
.btn:hover{ border-color:var(--primary); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn[disabled],.btn.disabled{ opacity:.5; pointer-events:none; }
.btn-primary{ --b:var(--primary); --c:var(--primary-ink); --bd:transparent; box-shadow:0 6px 18px -8px color-mix(in srgb,var(--primary) 70%,transparent); }
.btn-primary:hover{ --b:var(--primary-2); }
.btn-accent{ --b:var(--accent); --c:#1d1400; --bd:transparent; }
.btn-ghost{ --b:transparent; --bd:transparent; }
.btn-ghost:hover{ --b:var(--surface-2); border-color:transparent; }
.btn-soft{ --b:var(--primary-soft); --c:var(--primary); --bd:transparent; }
.btn-danger{ --b:var(--bad-soft); --c:var(--bad); --bd:transparent; }
.btn-danger:hover{ --b:var(--bad); --c:#fff; }
.btn-ok{ --b:var(--ok); --c:#fff; --bd:transparent; }
.btn-sm{ min-height:34px; padding:.35em .75em; font-size:.85rem; border-radius:10px; }
.btn-lg{ min-height:54px; padding:.7em 1.6em; font-size:1.05rem; border-radius:16px; }
.btn-icon{ width:40px; padding:0; }
.btn-sm.btn-icon{ width:34px; }
.btn-block{ width:100%; }
.link-btn{ background:none; border:0; padding:0; color:var(--primary); cursor:pointer; font:inherit; }

/* البطاقات */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--sh-1); }
.card.pad-lg{ padding:2rem; }
.card.flat{ box-shadow:none; }
.card.hover{ transition:transform .2s var(--ease),box-shadow .2s,border-color .2s; }
.card.hover:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.card-head h2,.card-head h3{ margin:0; }
.section{ padding-block:clamp(3rem,7vw,6rem); }
.section-title{ text-align:center; max-width:720px; margin:0 auto 2.5rem; }
.eyebrow{ display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:600; color:var(--primary); background:var(--primary-soft); padding:.25em .8em; border-radius:99px; margin-bottom:.9rem; }

/* الشارات */
.badge{ display:inline-flex; align-items:center; gap:.3em; font-size:.76rem; font-weight:600; padding:.18em .65em; border-radius:99px; background:var(--surface-2); color:var(--ink-2); white-space:nowrap; line-height:1.6; }
.badge.ok{ background:var(--ok-soft); color:var(--ok); } .badge.bad{ background:var(--bad-soft); color:var(--bad); }
.badge.warn{ background:var(--warn-soft); color:var(--warn); } .badge.info{ background:var(--info-soft); color:var(--info); }
.badge.pri{ background:var(--primary-soft); color:var(--primary); } .badge.acc{ background:var(--accent-soft); color:var(--warn); }

/* النماذج */
.field{ display:block; margin-bottom:1.05rem; }
.field>label,.label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:var(--ink-2); }
.hint{ font-size:.8rem; color:var(--muted); margin-top:.3rem; }
.input,select.input,textarea.input{ width:100%; min-height:44px; padding:.6em .9em; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--ink);
  font:inherit; font-size:.97rem; transition:border-color .15s,box-shadow .15s; }
textarea.input{ min-height:96px; resize:vertical; line-height:1.7; }
.input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent); }
.input.sm{ min-height:36px; padding:.35em .7em; font-size:.88rem; border-radius:10px; }
.input[type=color]{ padding:4px; width:60px; }
.input-group{ display:flex; gap:.5rem; } .input-group .input{ flex:1; }
.check{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; padding:.2rem 0; }
.check input{ width:18px; height:18px; margin-top:.3em; accent-color:var(--primary); flex:none; }
.switch{ position:relative; display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .track{ width:44px; height:26px; background:var(--surface-3); border-radius:99px; position:relative; transition:background .2s; flex:none; }
.switch .track::after{ content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:transform .2s var(--ease); }
.switch input:checked+.track{ background:var(--primary); }
.switch input:checked+.track::after{ transform:translateX(-18px); }
.switch input:focus-visible+.track{ outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent); outline-offset:2px; }
.form-error{ color:var(--bad); font-size:.85rem; margin-top:.3rem; }
fieldset{ border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; margin:0 0 1rem; }
legend{ font-weight:700; padding:0 .4rem; font-family:var(--f-display); }

/* التنبيهات */
.alert{ display:flex; gap:.7rem; align-items:flex-start; padding:.85rem 1rem; border-radius:var(--r); background:var(--info-soft); color:var(--ink); border:1px solid color-mix(in srgb,var(--info) 25%,transparent); margin-bottom:1rem; font-size:.94rem; }
.alert .ic{ color:var(--info); margin-top:.2em; }
.alert.ok{ background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 25%,transparent); } .alert.ok .ic{ color:var(--ok); }
.alert.bad{ background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 25%,transparent); } .alert.bad .ic{ color:var(--bad); }
.alert.warn{ background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 25%,transparent); } .alert.warn .ic{ color:var(--warn); }
.toasts{ position:fixed; bottom:18px; left:18px; z-index:300; display:flex; flex-direction:column; gap:.5rem; max-width:min(380px,calc(100vw - 36px)); }
.toast{ background:var(--ink); color:var(--bg); padding:.75rem 1rem; border-radius:12px; box-shadow:var(--sh-3); font-size:.92rem; animation:toastIn .3s var(--ease); display:flex; gap:.6rem; align-items:center; }
.toast.bad{ background:var(--bad); color:#fff; } .toast.ok{ background:var(--ok); color:#fff; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } }

/* الترويسة */
.site-header{ position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.site-header .bar{ display:flex; align-items:center; gap:1rem; min-height:66px; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--ink); text-decoration:none!important; }
.brand img{ height:34px; width:auto; }
.brand .mark{ width:34px; height:34px; flex:none; }
.nav{ display:flex; gap:.25rem; align-items:center; margin-inline-start:1rem; }
.nav a{ color:var(--ink-2); padding:.45rem .75rem; border-radius:10px; font-weight:500; font-size:.95rem; text-decoration:none; }
.nav a:hover,.nav a.active{ background:var(--surface-2); color:var(--ink); }
.header-actions{ margin-inline-start:auto; display:flex; gap:.5rem; align-items:center; }
.menu-toggle{ display:none; }
@media(max-width:900px){
  .nav{ display:none; position:absolute; top:66px; inset-inline:0; background:var(--surface); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:.75rem 16px 1rem; margin:0; box-shadow:var(--sh-2); }
  .nav.open{ display:flex; }
  .nav a{ padding:.75rem; }
  .menu-toggle{ display:inline-flex; }
  .header-actions .hide-sm-nav{ display:none; }
}
.avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--primary-soft); color:var(--primary); display:inline-grid; place-items:center; font-weight:700; flex:none; overflow:hidden; font-size:.9rem; }
.avatar.lg{ width:84px; height:84px; font-size:1.8rem; }
.dropdown{ position:relative; }
.dropdown-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3); padding:.4rem; display:none; z-index:120; }
.dropdown.open .dropdown-menu{ display:block; animation:toastIn .18s var(--ease); }
.dropdown-menu a,.dropdown-menu button{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.55rem .7rem; border-radius:9px; color:var(--ink); background:none; border:0; font:inherit; font-size:.92rem; cursor:pointer; text-align:start; text-decoration:none; }
.dropdown-menu a:hover,.dropdown-menu button:hover{ background:var(--surface-2); }
.dropdown-menu hr{ margin:.35rem 0; }
.notif-dot{ position:absolute; top:6px; left:6px; width:9px; height:9px; border-radius:50%; background:var(--bad); border:2px solid var(--bg); }
.announce{ background:var(--accent-soft); color:var(--ink); font-size:.9rem; text-align:center; padding:.5rem 1rem; border-bottom:1px solid var(--line); }
.announce.success{ background:var(--ok-soft); } .announce.warning{ background:var(--warn-soft); }

/* التذييل */
.site-footer{ border-top:1px solid var(--line); background:var(--surface); margin-top:4rem; padding:3rem 0 1.5rem; font-size:.92rem; }
.footer-grid{ display:grid; grid-template-columns:2fr repeat(3,1fr); gap:2rem; }
@media(max-width:767px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-grid>:first-child{ grid-column:1/-1; } }
.site-footer h4{ font-size:.95rem; margin-bottom:.8rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.site-footer a{ color:var(--muted); } .site-footer a:hover{ color:var(--ink); }
.footer-bottom{ border-top:1px solid var(--line); margin-top:2rem; padding-top:1.2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.85rem; }

/* البطل */
.hero{ position:relative; overflow:hidden; padding:clamp(3rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem); }
.hero::before{ content:""; position:absolute; inset:-30% -10% auto; height:120%; background:
  radial-gradient(40% 50% at 80% 20%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 70%),
  radial-gradient(35% 40% at 15% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%); z-index:-1; filter:blur(10px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.hero h1 .hl{ background:linear-gradient(120deg,var(--primary),var(--primary-2) 50%,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ font-size:clamp(1.05rem,2vw,1.22rem); color:var(--ink-2); max-width:560px; }
.hero-ctas{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.8rem; }
.hero-proof{ display:flex; gap:1.6rem; margin-top:2rem; flex-wrap:wrap; color:var(--muted); font-size:.9rem; }
.hero-proof strong{ display:block; font-family:var(--f-display); font-size:1.4rem; color:var(--ink); }
.demo-stage{ position:relative; }
.demo-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3); padding:1.5rem; position:relative; z-index:2; }
.demo-float{ position:absolute; z-index:3; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-2); padding:.7rem .9rem; display:flex; gap:.6rem; align-items:center; font-size:.85rem; animation:floaty 6s ease-in-out infinite; }
.demo-float.a{ top:-18px; left:-12px; } .demo-float.b{ bottom:-22px; right:-14px; animation-delay:-3s; }
@media(max-width:600px){ .demo-float.a{ left:4px; } .demo-float.b{ right:4px; } }
@keyframes floaty{ 50%{ transform:translateY(-8px); } }
.qr-mini{ width:44px; height:44px; border-radius:8px; background:var(--surface-2); display:grid; place-items:center; }

/* بطاقات المميزات */
.feature{ position:relative; padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); transition:transform .2s var(--ease),box-shadow .2s; }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.feature .fi{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); margin-bottom:1rem; }
.feature.acc .fi{ background:var(--accent-soft); color:var(--warn); }
.feature.ok .fi{ background:var(--ok-soft); color:var(--ok); }
.feature h3{ font-size:1.08rem; margin-bottom:.35rem; }
.feature p{ color:var(--muted); font-size:.93rem; margin:0; }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:1.2rem; counter-reset:st; }
.step{ position:relative; padding:1.6rem 1.4rem 1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.step::before{ counter-increment:st; content:counter(st); position:absolute; top:-16px; right:20px; width:36px; height:36px; border-radius:12px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:700; font-family:var(--f-display); }

/* بطاقة الاختبار */
.qcard{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .2s var(--ease),box-shadow .2s; color:var(--ink); text-decoration:none!important; }
.qcard:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.qcard .cover{ aspect-ratio:16/8; background:linear-gradient(135deg,var(--primary),var(--primary-2)); position:relative; overflow:hidden; }
.qcard .cover img{ width:100%; height:100%; object-fit:cover; }
.qcard .cover .glyph{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.9); font-family:var(--f-display); font-size:2.6rem; font-weight:700; }
.qcard .body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.qcard h3{ font-size:1.02rem; margin:0; }
.qcard .meta{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:auto; padding-top:.4rem; }

/* الأسئلة الشائعة */
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 1.2rem; margin-bottom:.7rem; }
.faq summary{ cursor:pointer; padding:1rem 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.3rem; line-height:1; color:var(--primary); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details>div{ padding-bottom:1rem; color:var(--ink-2); }

/* لوحة التحكم */
.dash{ display:grid; grid-template-columns:250px 1fr; gap:1.5rem; padding-block:1.5rem 3rem; align-items:start; }
@media(max-width:960px){ .dash{ grid-template-columns:1fr; } }
.side{ position:sticky; top:84px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:.6rem; }
@media(max-width:960px){ .side{ position:static; display:flex; overflow-x:auto; gap:.25rem; padding:.4rem; scrollbar-width:none; } .side::-webkit-scrollbar{ display:none; } .side .side-title{ display:none; } }
.side a{ display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem; border-radius:11px; color:var(--ink-2); font-size:.93rem; font-weight:500; text-decoration:none; white-space:nowrap; }
.side a:hover{ background:var(--surface-2); color:var(--ink); }
.side a.active{ background:var(--primary-soft); color:var(--primary); font-weight:600; }
.side a .count{ margin-inline-start:auto; font-size:.75rem; background:var(--surface-3); padding:0 .5em; border-radius:99px; }
.side-title{ font-size:.74rem; color:var(--muted); font-weight:700; padding:.8rem .75rem .3rem; letter-spacing:.02em; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.page-head h1{ font-size:clamp(1.45rem,3vw,1.9rem); margin:0; }
.page-head p{ margin:.2rem 0 0; color:var(--muted); }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem 1.2rem; }
.stat .k{ color:var(--muted); font-size:.85rem; display:flex; gap:.45rem; align-items:center; }
.stat .v{ font-family:var(--f-display); font-size:1.85rem; font-weight:600; line-height:1.2; margin-top:.3rem; }
.stat .s{ font-size:.8rem; color:var(--muted); }
.meter{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.meter>span{ display:block; height:100%; background:var(--primary); border-radius:99px; transition:width .4s var(--ease); }
.meter.warn>span{ background:var(--warn); } .meter.bad>span{ background:var(--bad); } .meter.ok>span{ background:var(--ok); }

/* الجداول */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
table.table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.table th,.table td{ padding:.75rem .9rem; text-align:start; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th{ font-weight:600; color:var(--muted); font-size:.8rem; background:var(--surface-2); white-space:nowrap; }
.table tr:last-child td{ border-bottom:0; }
.table tr:hover td{ background:color-mix(in srgb,var(--surface-2) 50%,transparent); }
.toolbar{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.toolbar .input{ width:auto; min-width:150px; flex:1 1 150px; }
.pagination{ display:flex; gap:.35rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; }
.pagination a,.pagination span{ min-width:38px; height:38px; display:inline-grid; place-items:center; border-radius:10px; border:1px solid var(--line); background:var(--surface); padding:0 .6rem; font-size:.9rem; color:var(--ink); }
.pagination .cur{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }

/* التبويبات */
.tabs{ display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:1.3rem; overflow-x:auto; scrollbar-width:none; }
.tabs a,.tabs button{ padding:.7rem 1rem; color:var(--muted); border:0; background:none; font:inherit; font-weight:600; font-size:.93rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; text-decoration:none; }
.tabs a.active,.tabs button.active{ color:var(--primary); border-color:var(--primary); }

/* الحالات الفارغة */
.empty{ text-align:center; padding:3rem 1.5rem; border:1.5px dashed var(--line-2); border-radius:var(--r-lg); background:color-mix(in srgb,var(--surface) 60%,transparent); }
.empty .art{ width:88px; height:88px; margin:0 auto 1rem; border-radius:26px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.empty h3{ margin-bottom:.3rem; }
.empty p{ color:var(--muted); max-width:420px; margin:0 auto 1.2rem; }

/* النافذة المنبثقة */
.modal-back{ position:fixed; inset:0; background:rgba(10,9,20,.55); backdrop-filter:blur(3px); z-index:250; display:flex; align-items:center; justify-content:center; padding:16px; animation:fade .2s; }
@keyframes fade{ from{ opacity:0; } }
.modal{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3); width:100%; max-width:560px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; animation:pop .25s var(--ease); }
.modal.lg{ max-width:900px; }
@keyframes pop{ from{ opacity:0; transform:scale(.96) translateY(8px); } }
.modal-head{ padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.modal-head h3{ margin:0; }
.modal-body{ padding:1.3rem; overflow-y:auto; }
.modal-foot{ padding:1rem 1.3rem; border-top:1px solid var(--line); display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }

/* المصادقة */
.auth-wrap{ min-height:calc(100vh - 66px); display:grid; place-items:center; padding:2rem 16px; }
.auth-card{ width:100%; max-width:440px; }
.auth-card .card{ padding:2rem; }
.divider{ display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.85rem; margin:1.2rem 0; }
.divider::before,.divider::after{ content:""; flex:1; border-top:1px solid var(--line); }

/* الخطوات الإرشادية (مصنع الاختبارات) */
.wizard-steps{ display:flex; gap:.5rem; margin-bottom:1.6rem; }
.wizard-steps .ws{ flex:1; height:6px; border-radius:99px; background:var(--surface-3); }
.wizard-steps .ws.on{ background:var(--primary); }
.choice-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:.75rem; }
.tile{ position:relative; display:block; cursor:pointer; }
.tile input{ position:absolute; opacity:0; }
.tile .t{ display:block; height:100%; border:1.5px solid var(--line); border-radius:var(--r); padding:1rem; background:var(--surface); transition:border-color .15s,background .15s; }
.tile .t strong{ display:block; margin-bottom:.15rem; }
.tile .t span{ font-size:.82rem; color:var(--muted); }
.tile input:checked+.t{ border-color:var(--primary); background:var(--primary-soft); }
.tile input:focus-visible+.t{ outline:3px solid color-mix(in srgb,var(--primary) 50%,transparent); }
.tile.locked .t{ opacity:.55; }

/* المحرر */
.editor-layout{ display:grid; grid-template-columns:270px 1fr; gap:1.3rem; align-items:start; padding-block:1.2rem 4rem; }
@media(max-width:1000px){ .editor-layout{ grid-template-columns:1fr; } }
.editor-top{ position:sticky; top:66px; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.editor-top .bar{ display:flex; align-items:center; gap:.6rem; min-height:58px; flex-wrap:wrap; padding-block:.5rem; }
.save-state{ font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; }
.save-state .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); }
.save-state.saving .dot{ background:var(--warn); animation:pulse 1s infinite; } .save-state.error .dot{ background:var(--bad); }
@keyframes pulse{ 50%{ opacity:.3; } }
.qnav{ position:sticky; top:136px; max-height:calc(100vh - 150px); overflow:auto; }
@media(max-width:1000px){ .qnav{ position:static; max-height:none; } }
.qnav-item{ display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border-radius:10px; cursor:pointer; font-size:.87rem; border:1px solid transparent; }
.qnav-item:hover{ background:var(--surface-2); }
.qnav-item.active{ background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 30%,transparent); }
.qnav-item .n{ width:26px; height:26px; border-radius:8px; background:var(--surface-3); display:grid; place-items:center; font-size:.78rem; font-weight:700; flex:none; }
.qnav-item.err .n{ background:var(--bad-soft); color:var(--bad); }
.qnav-item .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.drag-handle{ cursor:grab; color:var(--muted); padding:.2rem; display:inline-flex; touch-action:none; }
.sortable-ghost{ opacity:.35; }
.qedit{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:1rem; box-shadow:var(--sh-1); scroll-margin-top:140px; }
.qedit.active{ border-color:color-mix(in srgb,var(--primary) 45%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent),var(--sh-2); }
.qedit-head{ display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.qedit-head .qn{ font-family:var(--f-display); font-weight:700; }
.qedit-body{ padding:1.1rem; }
.qedit.collapsed .qedit-body{ display:none; }
.opt-row{ display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.opt-row .mark{ flex:none; }
.opt-row .mark input{ width:20px; height:20px; accent-color:var(--ok); cursor:pointer; }
.opt-row .input{ flex:1; }
.opt-img{ width:46px; height:46px; border-radius:8px; object-fit:cover; border:1px solid var(--line); flex:none; }
.type-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:.5rem; }
.type-picker button{ display:flex; gap:.6rem; align-items:center; text-align:start; padding:.7rem .8rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; font:inherit; font-size:.88rem; color:var(--ink); }
.type-picker button:hover{ border-color:var(--primary); background:var(--primary-soft); }
.type-picker .grp{ grid-column:1/-1; font-size:.78rem; font-weight:700; color:var(--muted); margin-top:.6rem; }
.media-list{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.media-chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--surface-2); border-radius:10px; padding:.3rem .55rem; font-size:.82rem; max-width:100%; }
.media-chip img{ width:28px; height:28px; object-fit:cover; border-radius:6px; }
.hotspot-editor{ position:relative; display:inline-block; max-width:100%; user-select:none; touch-action:none; cursor:crosshair; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.hotspot-editor img{ display:block; max-width:100%; pointer-events:none; }
.hs-region{ position:absolute; border:2px solid var(--ok); background:color-mix(in srgb,var(--ok) 25%,transparent); border-radius:4px; }
.hs-region button{ position:absolute; top:-10px; left:-10px; width:22px; height:22px; border-radius:50%; border:0; background:var(--bad); color:#fff; cursor:pointer; font-size:12px; line-height:1; }
.quality-item{ display:flex; gap:.6rem; padding:.6rem .7rem; border-radius:10px; margin-bottom:.4rem; background:var(--surface-2); font-size:.88rem; cursor:pointer; }
.quality-item.error{ background:var(--bad-soft); } .quality-item.warn{ background:var(--warn-soft); }

/* صفحة الحل */
.play-shell{ min-height:100vh; display:flex; flex-direction:column; }
.play-top{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.play-top .bar{ display:flex; align-items:center; gap:1rem; min-height:60px; }
.timer{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-display); font-weight:600; font-variant-numeric:tabular-nums; padding:.35rem .8rem; border-radius:99px; background:var(--surface-2); }
.timer.warn{ background:var(--warn-soft); color:var(--warn); animation:pulse 1.2s infinite; } .timer.bad{ background:var(--bad); color:#fff; }
.progress{ height:6px; background:var(--surface-3); }
.progress>span{ display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); transition:width .35s var(--ease); }
.play-main{ flex:1; padding:clamp(1.5rem,4vw,3rem) 0 7rem; }
.qbox{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.2rem,3.5vw,2.2rem); box-shadow:var(--sh-2); animation:slideIn .35s var(--ease); }
@keyframes slideIn{ from{ opacity:0; transform:translateX(-14px); } }
.qbox .qmeta{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; color:var(--muted); font-size:.85rem; }
.qprompt{ font-size:clamp(1.12rem,2.4vw,1.4rem); font-family:var(--f-display); font-weight:500; line-height:1.6; margin-bottom:1.3rem; white-space:pre-wrap; }
.stimulus{ background:var(--surface-2); border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:1.2rem; }
.stimulus.passage{ max-height:340px; overflow:auto; white-space:pre-wrap; line-height:2; }
.stimulus table{ border-collapse:collapse; width:100%; font-size:.92rem; background:var(--surface); }
.stimulus th,.stimulus td{ border:1px solid var(--line); padding:.45rem .6rem; text-align:center; }
.stimulus th{ background:var(--surface-3); }
.opts{ display:grid; gap:.7rem; }
.opts.images{ grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); }
.opt{ position:relative; display:flex; align-items:center; gap:.85rem; padding:.95rem 1.1rem; border:1.5px solid var(--line); border-radius:16px; background:var(--surface); cursor:pointer; transition:border-color .15s,background .15s,transform .1s; font-size:1.02rem; min-height:58px; }
button.opt{ width:100%; font:inherit; color:var(--ink); text-align:start; }
.opt:hover{ border-color:var(--line-2); background:var(--surface-2); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt .key{ width:32px; height:32px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--surface-2); font-weight:700; font-size:.85rem; border:1px solid var(--line); }
.opt.sel{ border-color:var(--primary); background:var(--primary-soft); }
.opt.sel .key{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
.opt:focus-within{ outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent); outline-offset:2px; }
.opt.right{ border-color:var(--ok); background:var(--ok-soft); } .opt.right .key{ background:var(--ok); color:#fff; }
.opt.wrong{ border-color:var(--bad); background:var(--bad-soft); } .opt.wrong .key{ background:var(--bad); color:#fff; }
.opt.imgopt{ flex-direction:column; align-items:stretch; padding:.6rem; }
.opt.imgopt img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.sort-list{ display:grid; gap:.55rem; }
.sort-item{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border:1.5px solid var(--line); background:var(--surface); border-radius:14px; cursor:grab; touch-action:none; }
.sort-item .pos{ width:28px; height:28px; border-radius:8px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-weight:700; font-size:.85rem; flex:none; }
.sort-item .mv{ margin-inline-start:auto; display:flex; gap:.2rem; }
.match-grid{ display:grid; gap:.6rem; }
.match-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:.6rem; align-items:center; }
@media(max-width:600px){ .match-row{ grid-template-columns:1fr; } .match-row .arrow{ display:none; } }
.match-row .left{ padding:.75rem 1rem; background:var(--surface-2); border-radius:12px; font-weight:500; }
.cat-board{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:.8rem; }
.cat-col{ border:1.5px dashed var(--line-2); border-radius:16px; padding:.8rem; min-height:120px; background:var(--surface-2); }
.cat-col h4{ font-size:.92rem; margin-bottom:.6rem; text-align:center; }
.cat-pool{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.8rem; border-radius:14px; border:1px solid var(--line); margin-bottom:1rem; min-height:56px; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:99px; background:var(--surface); border:1.5px solid var(--line-2); cursor:grab; font-size:.92rem; touch-action:none; }
.chip.sel{ border-color:var(--primary); background:var(--primary-soft); }
.chip select{ border:0; background:transparent; font:inherit; font-size:.8rem; color:var(--primary); }
.blank-text{ font-size:1.12rem; line-height:2.6; }
.blank-text input,.blank-text select{ display:inline-block; width:auto; min-width:120px; margin:0 .25rem; min-height:38px; padding:.2em .6em; }
.word-tokens{ font-size:1.2rem; line-height:2.4; }
.word-tokens button{ font:inherit; background:none; border:1.5px solid transparent; border-radius:8px; padding:.05em .3em; cursor:pointer; color:var(--ink); }
.word-tokens button:hover{ background:var(--surface-2); }
.word-tokens button.sel{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }
.hotspot-play{ position:relative; display:inline-block; max-width:100%; cursor:crosshair; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.hotspot-play img{ display:block; max-width:100%; }
.hs-pin{ position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:var(--primary); border:3px solid #fff; box-shadow:var(--sh-2); pointer-events:none; }
.rating-scale{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.rating-scale button{ width:52px; height:52px; border-radius:14px; border:1.5px solid var(--line); background:var(--surface); font:700 1.05rem var(--f-display); cursor:pointer; color:var(--ink); }
.rating-scale button.sel{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
.rating-scale.stars button{ border:0; background:none; font-size:2rem; color:var(--line-2); width:auto; }
.rating-scale.stars button.sel{ color:var(--accent); background:none; }
.feedback{ margin-top:1.2rem; padding:1rem 1.1rem; border-radius:14px; animation:slideIn .3s var(--ease); }
.feedback.ok{ background:var(--ok-soft); } .feedback.bad{ background:var(--bad-soft); } .feedback.info{ background:var(--surface-2); }
.play-foot{ position:fixed; bottom:0; inset-inline:0; background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); z-index:40; }
.play-foot .bar{ display:flex; gap:.6rem; align-items:center; min-height:72px; padding-block:.6rem; }
.qdots{ display:flex; gap:.3rem; flex-wrap:wrap; }
.qdot{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--surface); font-size:.75rem; font-weight:700; cursor:pointer; color:var(--ink-2); }
.qdot.done{ background:var(--primary-soft); color:var(--primary); border-color:transparent; }
.qdot.cur{ outline:2px solid var(--primary); outline-offset:1px; }
.qdot.flag{ background:var(--accent-soft); color:var(--warn); }
.landing-hero{ border-radius:var(--r-xl); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-2); }
.landing-hero .cover{ aspect-ratio:16/6; background:linear-gradient(135deg,var(--primary),var(--primary-2) 60%,var(--accent)); position:relative; }
.landing-hero .cover img{ width:100%; height:100%; object-fit:cover; }
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.7rem; }
.fact{ background:var(--surface-2); border-radius:14px; padding:.75rem .9rem; }
.fact .k{ font-size:.78rem; color:var(--muted); } .fact .v{ font-weight:700; font-family:var(--f-display); }
.brand-badge{ display:inline-flex; gap:.4rem; align-items:center; font-size:.8rem; color:var(--muted); padding:.3rem .7rem; border-radius:99px; border:1px solid var(--line); background:var(--surface); }

/* النتائج */
.score-ring{ --p:0; width:170px; height:170px; border-radius:50%; display:grid; place-items:center; margin:0 auto;
  background:conic-gradient(var(--ring,var(--primary)) calc(var(--p)*1%),var(--surface-3) 0); position:relative; }
.score-ring::before{ content:""; position:absolute; inset:14px; background:var(--surface); border-radius:50%; }
.score-ring b{ position:relative; font-family:var(--f-display); font-size:2.3rem; }
.score-ring small{ position:relative; display:block; color:var(--muted); font-size:.8rem; text-align:center; margin-top:-.4rem; }
.review-q{ border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; margin-bottom:.8rem; background:var(--surface); }
.review-q.correct{ border-inline-start:4px solid var(--ok); } .review-q.wrong{ border-inline-start:4px solid var(--bad); }
.review-q.partial{ border-inline-start:4px solid var(--warn); } .review-q.pending{ border-inline-start:4px solid var(--info); } .review-q.unanswered{ border-inline-start:4px solid var(--line-2); }
.topic-bar{ display:grid; grid-template-columns:minmax(90px,170px) 1fr 50px; gap:.7rem; align-items:center; margin-bottom:.6rem; font-size:.9rem; }
.heat{ display:grid; gap:3px; }
.heat .cell{ border-radius:5px; min-height:30px; display:grid; place-items:center; font-size:.72rem; font-weight:700; color:#fff; }
.chart-box{ position:relative; height:260px; }
.cert{ max-width:900px; margin:2rem auto; aspect-ratio:1.414; background:#FFFDF7; color:#1b1a2e; border-radius:12px; box-shadow:var(--sh-3); padding:clamp(1.5rem,5vw,3.5rem); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:10px double #C9A24A; }
.cert h1{ color:#1b1a2e; font-size:clamp(1.4rem,4vw,2.4rem); }
.cert .holder{ font-family:var(--f-display); font-size:clamp(1.6rem,5vw,3rem); color:#3B2FC9; margin:.5rem 0 1rem; border-bottom:2px solid #E8A317; padding-bottom:.3rem; }
.qr-box{ background:#fff; padding:14px; border-radius:16px; display:inline-block; border:1px solid var(--line); }
.qr-box canvas,.qr-box img,.qr-box svg{ display:block; width:100%; height:auto; }
.qr-sheet{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }
.qr-sheet .qitem{ border:1px solid var(--line); border-radius:14px; padding:1rem; text-align:center; background:#fff; color:#111; break-inside:avoid; }
.plan-card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-xl); padding:1.6rem; }
.plan-card.featured{ border-color:var(--primary); box-shadow:0 20px 50px -24px color-mix(in srgb,var(--primary) 60%,transparent); }
.plan-card .ribbon{ position:absolute; top:-13px; right:22px; background:var(--primary); color:var(--primary-ink); font-size:.78rem; font-weight:700; padding:.2rem .8rem; border-radius:99px; }
.plan-card .price{ font-family:var(--f-display); font-size:2.3rem; font-weight:700; line-height:1.1; margin:.6rem 0 .2rem; }
.plan-card .price small{ font-size:.95rem; color:var(--muted); font-weight:500; }
.plan-card ul{ list-style:none; padding:0; margin:1rem 0 1.4rem; display:grid; gap:.45rem; font-size:.92rem; }
.plan-card li{ display:flex; gap:.5rem; align-items:flex-start; }
.plan-card li .ic{ margin-top:.25em; }
.plan-card li.no{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-2); }
.plan-card .cta{ margin-top:auto; }
.cycle-toggle{ display:inline-flex; background:var(--surface-2); border-radius:99px; padding:4px; gap:4px; }
.cycle-toggle button{ border:0; background:none; padding:.45rem 1.1rem; border-radius:99px; font:600 .9rem var(--f-body); cursor:pointer; color:var(--muted); }
.cycle-toggle button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
.compare th:first-child,.compare td:first-child{ position:sticky; right:0; background:var(--surface); z-index:1; min-width:170px; }
.yes{ color:var(--ok); } .no{ color:var(--muted); }
.live-big{ font-family:var(--f-display); font-size:clamp(1.6rem,4vw,2.8rem); line-height:1.4; }
.live-code{ font-family:var(--f-display); font-size:clamp(2.4rem,7vw,4.5rem); letter-spacing:.2em; font-weight:700; direction:ltr; }
.live-opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; }
.live-opt{ padding:1.3rem; border-radius:18px; color:#fff; font-size:1.25rem; font-weight:600; display:flex; gap:.8rem; align-items:center; border:0; cursor:pointer; font-family:var(--f-body); text-align:start; min-height:84px; }
.live-opt:nth-child(4n+1){ background:#3B2FC9; } .live-opt:nth-child(4n+2){ background:#D2552C; } .live-opt:nth-child(4n+3){ background:#14945F; } .live-opt:nth-child(4n+4){ background:#B7860B; }
.live-opt.dim{ opacity:.35; } .live-opt.sel{ outline:4px solid var(--ink); outline-offset:3px; }
.board-row{ display:flex; align-items:center; gap:.8rem; padding:.6rem .9rem; border-radius:12px; background:var(--surface-2); margin-bottom:.4rem; }
.board-row .rk{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--surface); font-weight:700; }
.board-row:nth-child(1) .rk{ background:#F2C14E; color:#3a2a00; } .board-row:nth-child(2) .rk{ background:#C9CED6; } .board-row:nth-child(3) .rk{ background:#D9A178; }
.poster{ width:100%; max-width:540px; margin:auto; }
.spinner{ width:22px; height:22px; border:3px solid var(--surface-3); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.skeleton{ background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:10px; }
@keyframes sk{ to{ background-position:-200% 0; } }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.kbd{ font-family:monospace; font-size:.8rem; padding:.05rem .4rem; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; background:var(--surface); }
.code{ font-family:ui-monospace,Consolas,monospace; font-size:.85rem; background:var(--surface-2); padding:.15rem .4rem; border-radius:6px; direction:ltr; unicode-bidi:isolate; }
pre.code{ display:block; padding:1rem; overflow:auto; white-space:pre-wrap; }
.err-page{ min-height:70vh; display:grid; place-items:center; text-align:center; padding:2rem 16px; }
.err-page .big{ font-family:var(--f-display); font-size:clamp(4rem,14vw,8rem); font-weight:700; line-height:1; background:linear-gradient(120deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.prose{ max-width:760px; } .prose h2{ margin-top:2rem; font-size:1.35rem; } .prose li{ margin-bottom:.4rem; }

@media print{
  .site-header,.site-footer,.no-print,.toasts,.announce{ display:none!important; }
  body{ background:#fff; color:#000; }
  .cert{ box-shadow:none; margin:0; max-width:none; }
  .card{ box-shadow:none; }
  .qr-sheet .qitem{ border-color:#999; }
}


/* ===== تحسينات الجوال (شاملة لكل الصفحات) ===== */
html,body{ max-width:100%; overflow-x:hidden; }
/* السبب الجذري: عناصر الشبكة والفلكس لا تتقلص دون min-width:0 فيتمدد الجدول/النص خارج الشاشة */
.dash>*,.editor-layout>*,.hero-grid>*,.grid>*,.g2>*,.g3>*,.g4>*,.footer-grid>*,.facts>*,.card,.qbox,.opts>*,.opt>*:not(.key),.stack>*{ min-width:0; }
.table-wrap{ max-width:100%; -webkit-overflow-scrolling:touch; }
.opts{ grid-template-columns:minmax(0,1fr); }
.opts.images{ grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); }
.opt{ min-width:0; }
.opt>span:not(.key),.opt>div,.opt>label{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.qprompt,.qbox,.stimulus,.feedback,.review-q,.card{ overflow-wrap:anywhere; }
.qprompt{ white-space:normal; }
.play-main .container,.play-foot .container,.play-top .container{ min-width:0; }
.play-main{ min-width:0; }
.qdots{ flex-wrap:nowrap; width:max-content; }
.play-foot .grow{ scrollbar-width:none; }
.play-foot .grow::-webkit-scrollbar{ display:none; }
.modal .qdots{ flex-wrap:wrap; width:auto; }
.qdot:disabled{ opacity:.35; cursor:not-allowed; }
.qdot{ flex:none; }
pre,code,.code{ max-width:100%; }
img,svg,video,canvas,iframe{ max-width:100%; }
select.input,input.input,textarea.input{ max-width:100%; }

@media(max-width:767px){
  :root{ --r-lg:18px; --r-xl:22px; }
  .container{ padding-inline:14px; }
  .card{ padding:1rem; }
  .card.pad-lg,.auth-card .card{ padding:1.25rem; }
  .section{ padding-block:2.2rem; }
  .dash{ padding-block:1rem 2.5rem; gap:1rem; }
  .page-head{ align-items:stretch; }
  .page-head>*{ min-width:0; }
  .page-head .row,.page-head .btn{ width:100%; }
  .toolbar .input,.toolbar select,.toolbar .btn{ flex:1 1 100%; width:100%; }
  .row.nowrap{ flex-wrap:wrap; }
  .input-group{ flex-wrap:wrap; }
  .table th,.table td{ padding:.6rem .6rem; font-size:.85rem; }
  .table .btn{ white-space:nowrap; }
  .modal-back{ padding:10px; align-items:flex-end; }
  .modal{ max-width:100%; max-height:calc(100vh - 20px); border-radius:var(--r-lg) var(--r-lg) 14px 14px; }
  .modal-foot .btn{ flex:1 1 auto; }
  .btn-lg{ min-height:50px; padding:.6em 1.2em; }
  .hero-ctas .btn{ flex:1 1 100%; }
  .stat .v{ font-size:1.5rem; }
  .compare th:first-child,.compare td:first-child{ min-width:120px; }
  .topic-bar{ grid-template-columns:minmax(70px,110px) 1fr 44px; gap:.5rem; }
  .cert{ aspect-ratio:auto; min-height:420px; border-width:6px; }
  .score-ring{ width:140px; height:140px; }
  .editor-top{ top:66px; }
  .editor-top .bar{ gap:.4rem; }
  .editor-top .bar .btn{ flex:1 1 auto; }
  .qedit-head{ padding:.6rem .7rem; }
  .qedit-body{ padding:.8rem; }
  .opt-row{ flex-wrap:wrap; }
  .opt-row .input{ flex:1 1 60%; min-width:0; }
  .type-picker{ grid-template-columns:1fr 1fr; }
  .qnav{ position:static; max-height:none; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .blank-text input,.blank-text select{ min-width:90px; }
  .live-opts{ grid-template-columns:1fr; }
  .live-opt{ font-size:1.05rem; min-height:70px; }
  .toasts{ inset-inline:12px; bottom:84px; max-width:none; }
  .footer-bottom{ flex-direction:column; }
  .dropdown-menu{ max-width:calc(100vw - 28px); }
  .brand{ font-size:1.15rem; }
  .site-header .bar{ gap:.5rem; min-height:60px; }
  .header-actions{ gap:.25rem; }

  /* صفحة حل الاختبار */
  .play-top .bar{ gap:.6rem; min-height:56px; }
  .play-main{ padding:1rem 0 6.5rem; }
  .qbox{ padding:1rem; border-radius:var(--r-lg); }
  .qprompt{ font-size:1.1rem; margin-bottom:1rem; }
  .opt{ padding:.8rem .85rem; gap:.65rem; font-size:1rem; min-height:54px; border-radius:14px; }
  .opt .key{ width:28px; height:28px; border-radius:9px; }
  .play-foot .bar{ gap:.4rem; min-height:64px; padding-block:.5rem; }
  .play-foot .btn{ min-height:44px; padding:.4em .85em; }
  .play-foot .btn-icon{ width:44px; }
  .qdot{ width:34px; height:34px; }
  .sort-item{ padding:.7rem .8rem; }
  .rating-scale button{ width:46px; height:46px; }
  .match-row .left{ padding:.6rem .8rem; }
}
@media(max-width:380px){
  .container{ padding-inline:10px; }
  .type-picker{ grid-template-columns:1fr; }
  .btn{ padding:.45em .85em; }
  .facts{ grid-template-columns:1fr; }
}