/* ═══════════════════════════════════════════════════════════════
   واصل | Wasel — Design System v2
   الهوية: Wasel Blue #1647B8 · Electric Yellow #FFE500 · Deep Navy #17264B
   الخطوط: Readex Pro (عناوين) · IBM Plex Sans Arabic (نصوص وواجهة)
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Readex Pro";font-weight:500;font-display:swap;src:url(../fonts/readex-pro-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-weight:600;font-display:swap;src:url(../fonts/readex-pro-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-weight:700;font-display:swap;src:url(../fonts/readex-pro-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-weight:500;font-display:swap;src:url(../fonts/readex-pro-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-weight:600;font-display:swap;src:url(../fonts/readex-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-weight:700;font-display:swap;src:url(../fonts/readex-pro-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --blue:#1647B8; --blue-600:#123B9C; --blue-700:#0E2F7E; --blue-50:#EAF0FF; --blue-100:#D6E1FF;
  --yellow:#FFE500; --yellow-600:#E8CF00; --yellow-50:#FFFBE0;
  --mint:#39C6C8; --mint-50:#E3F8F8; --coral:#FF715F; --coral-50:#FFEDEA; --purple:#8067E8; --purple-50:#EFEBFD;
  --navy:#17264B; --navy-800:#202B43; --ink:#17264B; --ink-2:#3C4867; --muted:#68758D; --line:#E5EAF3; --line-2:#EEF2F8;
  --cloud:#F5F7FC; --white:#fff; --ok:#1F9D63; --ok-50:#E5F6EE; --bad:#D93F3F; --bad-50:#FDECEC; --warn:#B7791F; --warn-50:#FFF6E0;
  --f-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(23,38,75,.06),0 1px 1px rgba(23,38,75,.04);
  --sh-2:0 6px 20px -6px rgba(23,38,75,.14),0 2px 6px rgba(23,38,75,.05);
  --sh-3:0 24px 48px -16px rgba(22,71,184,.28);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:56px;--s10:80px;
  --wrap:1200px; --side:264px; --top:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);font-size:15.5px;line-height:1.7;color:var(--ink);background:var(--cloud);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe{display:block;max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-600)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.3;margin:0 0 var(--s3);color:var(--ink);font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(28px,4.2vw,46px);font-weight:700}
h2{font-size:clamp(22px,2.8vw,32px)}
h3{font-size:19px}
h4{font-size:16px}
p{margin:0 0 var(--s3)}
small,.small{font-size:13px}
.muted{color:var(--muted)}
.num{unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
::selection{background:var(--yellow);color:var(--navy)}
:focus-visible{outline:3px solid rgba(22,71,184,.45);outline-offset:2px;border-radius:6px}
.ic{flex:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
.stack>*+*{margin-top:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid>*{min-width:0}
.g-main{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.g-side{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start}
@media (max-width:1100px){.g-main,.g-side{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.g4>.stat{padding:14px;gap:10px;flex-direction:column}.g4 .stat-ic{width:38px;height:38px;border-radius:12px}.g4 .stat-v{font-size:20px}}
.mt0{margin-top:0}.mt2{margin-top:var(--s2)}.mt4{margin-top:var(--s4)}.mt6{margin-top:var(--s6)}.mb0{margin-bottom:0}.mb4{margin-bottom:var(--s4)}
.tc{text-align:center}.te{text-align:end}
.hide{display:none!important}

/* ─────────── الأزرار ─────────── */
.btn{--bg:var(--white);--fg:var(--ink);--bd:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r);
  border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);font:600 15px/1 var(--f-body);cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s;text-decoration:none;user-select:none}
.btn:hover{color:var(--fg);box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}
.btn.is-loading::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
.btn-primary{--bg:var(--blue);--fg:#fff;--bd:var(--blue)}
.btn-primary:hover{--bg:var(--blue-600);--bd:var(--blue-600)}
.btn-accent{--bg:var(--yellow);--fg:var(--navy);--bd:var(--yellow)}
.btn-accent:hover{--bg:var(--yellow-600);--bd:var(--yellow-600)}
.btn-navy{--bg:var(--navy);--fg:#fff;--bd:var(--navy)}
.btn-ghost{--bg:transparent;--bd:transparent;--fg:var(--ink-2)}
.btn-ghost:hover{--bg:var(--blue-50);box-shadow:none}
.btn-soft{--bg:var(--blue-50);--bd:var(--blue-50);--fg:var(--blue)}
.btn-danger{--bg:var(--bad);--fg:#fff;--bd:var(--bad)}
.btn-danger-soft{--bg:var(--bad-50);--bd:var(--bad-50);--fg:var(--bad)}
.btn-ok{--bg:var(--ok);--fg:#fff;--bd:var(--ok)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-sm)}
.btn-xs{min-height:30px;padding:0 10px;font-size:13px;border-radius:8px;gap:5px}
.btn-lg{min-height:54px;padding:0 28px;font-size:16.5px;border-radius:var(--r-lg)}
.btn-block{width:100%}
.btn-icon{width:40px;padding:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─────────── الفورم ─────────── */
.field{display:grid;gap:6px;margin-bottom:var(--s4)}
.field>label,.label{font-weight:600;font-size:14px;color:var(--ink-2)}
.input,.select,.textarea{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;color:var(--ink);font:400 15.5px/1.5 var(--f-body);transition:border-color .15s,box-shadow .15s}
.textarea{min-height:110px;resize:vertical}
.input:hover,.select:hover,.textarea:hover{border-color:#cfd8e8}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,71,184,.12)}
.input[readonly]{background:var(--cloud)}
.input.ltr{text-align:left}
.input-lg{min-height:54px;font-size:17px}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368758D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-left:38px}
.hint{font-size:13px;color:var(--muted)}
.field.has-err .input,.field.has-err .select{border-color:var(--bad)}
.err-text{font-size:13px;color:var(--bad)}
.input-group{display:flex;gap:8px}
.input-group .input{flex:1}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14.5px}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue);flex:none}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{appearance:none;width:44px;height:26px;border-radius:99px;background:#cfd8e8;position:relative;cursor:pointer;transition:.2s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:.2s}
.switch input:checked{background:var(--blue)}
.switch input:checked::after{right:21px}
.otp{display:flex;gap:10px;justify-content:center;direction:ltr}
.otp input{width:52px;height:60px;text-align:center;font:600 24px var(--f-display);border:1.5px solid var(--line);border-radius:var(--r);background:#fff}
.otp input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,71,184,.12)}
@media (max-width:420px){.otp input{width:44px;height:54px}}
.pw-wrap{position:relative}
.pw-wrap .input{padding-left:46px}
.pw-toggle{position:absolute;left:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.seg{display:inline-flex;background:var(--line-2);border-radius:var(--r);padding:4px;gap:4px;flex-wrap:wrap}
.seg a,.seg button,.seg label{border:0;background:transparent;padding:8px 16px;border-radius:10px;font:600 14px var(--f-body);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg [aria-current],.seg .on,.seg input:checked+span{background:#fff;color:var(--blue);box-shadow:var(--sh-1)}
.seg input{display:none}
.seg label span{padding:0;display:inline-flex;gap:6px;align-items:center}

/* ─────────── الكروت ─────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-b{padding:var(--s6)}
.card-h{padding:var(--s5) var(--s6);border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.card-h h2,.card-h h3{margin:0;font-size:17px}
.card-f{padding:var(--s4) var(--s6);border-top:1px solid var(--line-2);background:#FBFCFE;border-radius:0 0 var(--r-lg) var(--r-lg)}
@media (max-width:640px){.card-b{padding:var(--s5)}.card-h{padding:var(--s4) var(--s5)}}
.stat{padding:var(--s5);display:flex;gap:var(--s4);align-items:flex-start}
.stat .stat-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--blue-50);color:var(--blue)}
.stat .stat-ic.y{background:var(--yellow-50);color:#8a7600}.stat .stat-ic.m{background:var(--mint-50);color:#1d8f91}
.stat .stat-ic.c{background:var(--coral-50);color:#d24c3a}.stat .stat-ic.p{background:var(--purple-50);color:var(--purple)}
.stat-v{font:700 26px/1.2 var(--f-display);color:var(--ink)}
.stat-l{font-size:13.5px;color:var(--muted)}
.stat-d{font-size:12.5px;margin-top:2px}
.tile{display:flex;gap:var(--s4);align-items:center;padding:var(--s4);border-radius:var(--r);border:1px solid var(--line);background:#fff;color:var(--ink);transition:.15s}
a.tile:hover{border-color:var(--blue-100);box-shadow:var(--sh-2);color:var(--ink)}

/* ─────────── شارات ─────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1.6}
.badge-ok{background:var(--ok-50);color:var(--ok)}.badge-warn{background:var(--warn-50);color:var(--warn)}
.badge-bad{background:var(--bad-50);color:var(--bad)}.badge-muted{background:var(--line-2);color:var(--muted)}
.badge-blue{background:var(--blue-50);color:var(--blue)}.badge-y{background:var(--yellow);color:var(--navy)}
.badge-p{background:var(--purple-50);color:var(--purple)}.badge-m{background:var(--mint-50);color:#1d8f91}
.sticker{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);font:600 13.5px var(--f-display);background:var(--yellow);color:var(--navy);transform:rotate(-3deg);box-shadow:0 4px 0 rgba(23,38,75,.12)}
.sticker.m{background:var(--mint);color:#fff}.sticker.c{background:var(--coral);color:#fff}.sticker.p{background:var(--purple);color:#fff}.sticker.b{background:var(--blue);color:#fff}

/* ─────────── تنبيهات ─────────── */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);font-size:14.5px;margin-bottom:var(--s4);border:1px solid transparent}
.alert .ic{margin-top:2px}
.alert-ok{background:var(--ok-50);color:#136b43;border-color:#c7ecd9}
.alert-bad{background:var(--bad-50);color:#a12a2a;border-color:#f6cccc}
.alert-warn{background:var(--warn-50);color:#7f5413;border-color:#f6e2b3}
.alert-info{background:var(--blue-50);color:var(--blue-700);border-color:var(--blue-100)}

/* ─────────── جداول ─────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{font-weight:600;font-size:13px;color:var(--muted);text-align:start;padding:12px 16px;background:#FAFBFE;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:#FBFCFF}
.table .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.who{display:flex;gap:10px;align-items:center;min-width:0}
.who b{font-weight:600;display:block}
.who small{color:var(--muted)}
.pager{display:flex;gap:6px;justify-content:center;padding:var(--s4)}
.pager a{min-width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font-weight:600}
.pager a.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ─────────── عناصر متنوعة ─────────── */
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue-50);color:var(--blue);font:600 15px var(--f-display);overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:72px;height:72px;font-size:24px}
.avatar.xl{width:112px;height:112px;font-size:36px}
.progress{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.progress>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),#3A6BE0);transition:width .4s ease}
.progress.y>span{background:var(--yellow)}.progress.m>span{background:var(--mint)}
.empty{text-align:center;padding:var(--s9) var(--s5);color:var(--muted)}
.empty .empty-ic{width:72px;height:72px;border-radius:24px;margin:0 auto var(--s4);display:grid;place-items:center;background:var(--blue-50);color:var(--blue)}
.empty h3{color:var(--ink);margin-bottom:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14.5px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.list li:last-child{border-bottom:0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;flex:none}
.codebox{font:600 18px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;direction:ltr;background:var(--cloud);border:1.5px dashed var(--blue-100);border-radius:var(--r);padding:14px;text-align:center;color:var(--navy)}
.copy-row{display:flex;gap:8px;align-items:center}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:var(--s5) 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:var(--s5);overflow-x:auto}
.tabs a{padding:12px 16px;font-weight:600;font-size:14.5px;color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.tabs a[aria-current]{color:var(--blue);border-bottom-color:var(--blue)}
.tabs .count{background:var(--line-2);color:var(--ink-2);border-radius:99px;padding:0 8px;font-size:12px}
.tabs a[aria-current] .count{background:var(--blue);color:#fff}
dialog{border:0;border-radius:var(--r-xl);padding:0;width:min(520px,calc(100% - 32px));box-shadow:var(--sh-3)}
dialog::backdrop{background:rgba(23,38,75,.45);backdrop-filter:blur(2px)}
.dlg-b{padding:var(--s6)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4)}
.dlg-h h3{margin:0}
.toast{position:fixed;inset-inline:16px;bottom:88px;margin-inline:auto;max-width:420px;z-index:90;animation:toast-in .3s ease}
@media (min-width:900px){.toast{bottom:24px;inset-inline-start:auto;inset-inline-end:24px}}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--s5)}
.filters .input,.filters .select{min-height:40px;width:auto;min-width:160px;font-size:14px}
.filters .search{flex:1;min-width:200px}
.page-h{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.page-h h1{font-size:clamp(22px,2.6vw,28px);margin:0}
.page-h p{margin:4px 0 0;color:var(--muted)}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.crumbs a{color:var(--muted)}

/* ═══════════════ الموقع العام ═══════════════ */
.site-h{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line-2)}
.site-h .wrap{display:flex;align-items:center;gap:var(--s5);height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto}
.site-nav{display:flex;gap:4px;margin-inline-start:var(--s4)}
.site-nav a{padding:8px 14px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:15px}
.site-nav a:hover,.site-nav a[aria-current]{background:var(--blue-50);color:var(--blue)}
.site-h .actions{margin-inline-start:auto;display:flex;gap:10px;align-items:center}
.burger{display:none}
@media (max-width:960px){
  .site-nav{display:none;position:absolute;top:72px;inset-inline:0;background:#fff;flex-direction:column;padding:var(--s4);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);margin:0}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 14px}
  .burger{display:inline-flex}
  .site-h .actions .hide-sm{display:none}
}
.hero{position:relative;overflow:hidden;padding:var(--s10) 0 var(--s9);background:
  radial-gradient(60% 80% at 100% 0%,rgba(255,229,0,.22),transparent 60%),
  radial-gradient(50% 60% at 0% 100%,rgba(57,198,200,.16),transparent 60%),#fff}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s9);align-items:center}
.hero h1{font-size:clamp(32px,5vw,58px);line-height:1.18;margin-bottom:var(--s5)}
.hero h1 mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);color:inherit;padding:0 4px}
.hero .lead{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);max-width:560px;margin-bottom:var(--s7)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-proof{display:flex;gap:var(--s6);margin-top:var(--s7);flex-wrap:wrap}
.hero-proof div{display:flex;flex-direction:column}
.hero-proof b{font:700 24px var(--f-display);color:var(--blue)}
.hero-proof span{font-size:13.5px;color:var(--muted)}
.hero-art{position:relative;aspect-ratio:1/1;max-width:520px;justify-self:center;width:100%}
.blob{position:absolute;border-radius:42% 58% 63% 37%/45% 41% 59% 55%}
.blob.b1{inset:8% 6% 10% 10%;background:var(--blue)}
.blob.b2{width:34%;height:34%;top:0;left:0;background:var(--yellow);border-radius:50% 50% 50% 12%}
.blob.b3{width:22%;height:22%;bottom:6%;right:4%;background:var(--coral);border-radius:50%}
.hero-card{position:absolute;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:14px 16px;display:flex;gap:12px;align-items:center;font-size:14px}
.hero-card b{font-family:var(--f-display);display:block;font-size:15px}
.hero-card.hc1{top:16%;right:-4%}.hero-card.hc2{bottom:18%;left:-6%}.hero-card.hc3{bottom:-2%;right:18%}
.hero-screen{position:absolute;inset:20% 16% 22% 18%;background:var(--navy);border-radius:22px;padding:10px;box-shadow:var(--sh-3);transform:rotate(-4deg)}
.hero-screen .scr{height:100%;border-radius:14px;background:linear-gradient(135deg,#21407f,#17264B);display:grid;place-items:center;position:relative;overflow:hidden}
.hero-screen .play{width:70px;height:70px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;color:var(--navy);box-shadow:0 0 0 12px rgba(255,229,0,.18)}
.hero-screen .bar{position:absolute;bottom:14px;inset-inline:14px;height:6px;border-radius:9px;background:rgba(255,255,255,.18)}
.hero-screen .bar::after{content:"";position:absolute;inset:0 38% 0 0;border-radius:9px;background:var(--yellow)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-art{max-width:380px}.hero{padding-top:var(--s8)}}
.section{padding:var(--s10) 0}
.section.tight{padding:var(--s9) 0}
.section.white{background:#fff}
.section-h{text-align:center;max-width:680px;margin:0 auto var(--s8)}
.section-h p{color:var(--muted);font-size:17px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--f-display);color:var(--blue);background:var(--blue-50);padding:6px 14px;border-radius:99px;margin-bottom:var(--s4)}
.feature{padding:var(--s6);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);height:100%;transition:.2s}
.feature:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.feature .f-ic{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;margin-bottom:var(--s4)}
.feature h3{font-size:18px;margin-bottom:8px}
.feature p{color:var(--muted);margin:0;font-size:15px}
.audience{border-radius:var(--r-xl);padding:var(--s7);color:#fff;position:relative;overflow:hidden;min-height:100%}
.audience h3{color:#fff;font-size:22px}
.audience ul{list-style:none;padding:0;margin:var(--s4) 0 var(--s6);display:grid;gap:10px}
.audience li{display:flex;gap:10px;align-items:flex-start}
.audience.a1{background:var(--blue)}.audience.a2{background:var(--navy)}.audience.a3{background:linear-gradient(150deg,#8067E8,#5B45C9)}
.audience::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07);top:-60px;left:-60px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.step{position:relative;padding:var(--s6) var(--s5);background:#fff;border-radius:var(--r-lg);border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-18px;right:var(--s5);width:38px;height:38px;border-radius:12px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font:700 17px var(--f-display);box-shadow:0 4px 0 rgba(23,38,75,.12)}
.step h4{margin-top:var(--s3)}
.step p{color:var(--muted);font-size:14.5px;margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:var(--s7)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* كارت الكورس */
.course-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;transition:.2s;color:var(--ink);height:100%}
.course-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:var(--ink)}
.cc-cover{aspect-ratio:16/9;position:relative;background:var(--blue);overflow:hidden}
.cc-cover img{width:100%;height:100%;object-fit:cover}
.cc-cover .ph{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 22px var(--f-display);padding:var(--s4);text-align:center;line-height:1.4}
.cc-cover .ph::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.08);top:-20%;left:-15%}
.cc-cover .sticker{position:absolute;top:12px;right:12px;font-size:12px;padding:4px 10px}
.cc-b{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:8px;flex:1}
.cc-meta{display:flex;gap:6px;flex-wrap:wrap}
.cc-b h3{font-size:17px;margin:0;line-height:1.45}
.cc-teacher{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted)}
.cc-teacher .avatar{width:28px;height:28px;font-size:12px}
.cc-f{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line-2)}
.price{font:700 20px var(--f-display);color:var(--blue)}
.price s{font:500 14px var(--f-body);color:var(--muted);margin-inline-start:6px}
.price small{font:500 12.5px var(--f-body);color:var(--muted)}
.teacher-card{text-align:center;padding:var(--s6);background:#fff;border-radius:var(--r-xl);border:1px solid var(--line);color:var(--ink);transition:.2s;display:block;height:100%}
.teacher-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);color:var(--ink)}
.teacher-card .avatar{margin:0 auto var(--s4)}
.teacher-card h3{font-size:17px;margin-bottom:4px}
.plan{position:relative;padding:var(--s7) var(--s6);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-xl);display:flex;flex-direction:column;height:100%}
.plan.pop{border-color:var(--blue);box-shadow:var(--sh-3)}
.plan.pop .sticker{position:absolute;top:-14px;left:var(--s6)}
.plan .p-price{font:700 38px/1.1 var(--f-display);color:var(--ink);margin:var(--s4) 0 4px}
.plan .p-price small{font:500 15px var(--f-body);color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:var(--s5) 0 var(--s6);display:grid;gap:10px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.plan li .ic{color:var(--ok);margin-top:4px}
.cta-band{border-radius:var(--r-xl);background:var(--blue);color:#fff;padding:var(--s9) var(--s7);text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);font-size:17px;max-width:560px;margin:0 auto var(--s6)}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%}
.cta-band::before{width:260px;height:260px;background:var(--yellow);opacity:.9;top:-130px;left:-80px}
.cta-band::after{width:160px;height:160px;background:var(--mint);opacity:.6;bottom:-70px;right:-40px}
.cta-band>*{position:relative;z-index:1}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;transition:.2s}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:.2s;color:var(--blue)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details[open]{box-shadow:var(--sh-2)}
.faq .ans{padding:0 20px 18px;color:var(--ink-2)}
.prose{font-size:16.5px;line-height:1.9;color:var(--ink-2)}
.prose h2,.prose h3{margin-top:1.6em}
.prose img{border-radius:var(--r);margin:1em 0}
.prose a{text-decoration:underline}
.site-f{background:var(--navy);color:rgba(255,255,255,.75);padding:var(--s9) 0 var(--s6);margin-top:var(--s9)}
.site-f a{color:rgba(255,255,255,.75)}
.site-f a:hover{color:var(--yellow)}
.site-f .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s7)}
.site-f h4{color:#fff;font-size:15px;margin-bottom:var(--s4)}
.site-f ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14.5px}
.site-f .bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--s8);padding-top:var(--s5);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}
.social{display:flex;gap:8px}
.social a{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center}
@media (max-width:860px){.site-f .cols{grid-template-columns:1fr 1fr}}
.wa-float{position:fixed;bottom:20px;left:20px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -6px rgba(37,211,102,.6)}
.wa-float:hover{color:#fff;transform:scale(1.05)}
.course-hero{background:var(--navy);color:#fff;padding:var(--s8) 0;position:relative;overflow:hidden}
.course-hero h1{color:#fff;font-size:clamp(26px,3.6vw,40px)}
.course-hero p{color:rgba(255,255,255,.8)}
.course-hero .wrap{display:grid;grid-template-columns:1fr 380px;gap:var(--s8);align-items:start}
.buy-box{background:#fff;color:var(--ink);border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;position:sticky;top:90px}
.buy-box .cc-cover{border-radius:0}
.buy-box .bb{padding:var(--s6)}
.course-body .wrap{display:grid;grid-template-columns:1fr 380px;gap:var(--s8)}
@media (max-width:960px){.course-hero .wrap,.course-body .wrap{grid-template-columns:1fr}.buy-box{position:static}}
.outline{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.outline details{border-bottom:1px solid var(--line-2)}
.outline details:last-child{border-bottom:0}
.outline summary{padding:16px 20px;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;gap:12px;list-style:none;background:#FBFCFE}
.outline summary::-webkit-details-marker{display:none}
.outline .ol-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line-2);font-size:14.5px;color:var(--ink)}
.outline a.ol-item:hover{background:var(--blue-50)}
.outline .ol-item .ic{color:var(--muted)}
.outline .ol-item.done .ic{color:var(--ok)}
.outline .ol-item .meta{margin-inline-start:auto;color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}

/* ═══════════════ صفحات الدخول ═══════════════ */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.auth-art{background:var(--blue);color:#fff;padding:var(--s8);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art.navy{background:var(--navy)}
.auth-art h2{color:#fff;font-size:clamp(26px,3vw,38px);max-width:440px}
.auth-art p{color:rgba(255,255,255,.8);max-width:420px;font-size:16.5px}
.auth-art .blob{opacity:.95}
.auth-art .blob.b2{width:240px;height:240px;top:auto;bottom:-60px;left:-60px}
.auth-art .blob.b3{width:120px;height:120px;top:14%;right:auto;left:18%;bottom:auto;background:var(--mint)}
.auth-art>*{position:relative;z-index:1}
.auth-main{display:flex;align-items:center;justify-content:center;padding:var(--s8) var(--s5)}
.auth-box{width:100%;max-width:440px}
.auth-box h1{font-size:28px;margin-bottom:6px}
.auth-box .sub{color:var(--muted);margin-bottom:var(--s6)}
.role-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:var(--s5)}
.role-pick a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1.5px solid var(--line);border-radius:var(--r);color:var(--ink-2);font-weight:600;font-size:14px;transition:.15s;text-align:center}
.role-pick a:hover{border-color:var(--blue-100)}
.role-pick a[aria-current]{border-color:var(--blue);background:var(--blue-50);color:var(--blue)}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth-art{display:none}}
.auth-top{position:absolute;top:var(--s5);inset-inline:var(--s5);display:flex;justify-content:space-between;align-items:center}

/* ═══════════════ لوحات الاستخدام (طالب/ولي أمر/مدرس/إدارة) ═══════════════ */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:#fff;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;padding:var(--s5) var(--s4);overflow-y:auto}
.side .brand{padding:4px 8px var(--s5)}
.side .brand img{height:38px}
.side-nav{display:grid;gap:2px}
.side-nav .grp{font-size:12px;font-weight:600;color:var(--muted);padding:var(--s4) 12px 6px;letter-spacing:.02em}
.side-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink-2);font-weight:500;font-size:15px;transition:.12s}
.side-nav a:hover{background:var(--cloud);color:var(--ink)}
.side-nav a[aria-current]{background:var(--blue);color:#fff;box-shadow:0 8px 18px -8px rgba(22,71,184,.6)}
.side-nav a .pill{margin-inline-start:auto;background:var(--coral);color:#fff;font-size:11.5px;border-radius:99px;padding:0 8px;line-height:20px}
.side-nav a[aria-current] .pill{background:var(--yellow);color:var(--navy)}
.side-foot{margin-top:auto;padding-top:var(--s5)}
.side-promo{background:var(--yellow-50);border:1px solid #f4e78f;border-radius:var(--r-lg);padding:var(--s4);font-size:14px}
.side-promo b{font-family:var(--f-display);display:block;margin-bottom:4px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;height:var(--top);background:rgba(245,247,252,.86);backdrop-filter:blur(10px);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s7);border-bottom:1px solid var(--line-2)}
.topbar .tb-title{font:600 17px var(--f-display);display:none}
.topbar .tb-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.wallet-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px 6px 8px;color:var(--ink);font-weight:600;font-size:14px}
.wallet-chip .w-ic{width:28px;height:28px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;color:var(--navy)}
.icon-btn{position:relative;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--ink-2);cursor:pointer}
.icon-btn:hover{color:var(--blue);border-color:var(--blue-100)}
.icon-btn .count{position:absolute;top:-4px;left:-4px;min-width:19px;height:19px;border-radius:99px;background:var(--coral);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 5px;font-weight:600}
.user-menu{position:relative}
.user-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:4px;border-radius:99px}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu .menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);min-width:220px;padding:6px;z-index:60}
.user-menu .menu a,.user-menu .menu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink-2);font:500 14.5px var(--f-body);width:100%;background:none;border:0;cursor:pointer;text-align:start}
.user-menu .menu a:hover,.user-menu .menu button:hover{background:var(--cloud)}
.user-menu .menu .mh{padding:10px 12px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.user-menu .menu .mh b{display:block;font-size:14.5px}
.user-menu .menu .mh small{color:var(--muted)}
.content{padding:var(--s7);flex:1;width:100%;max-width:1320px}
.tabbar{display:none}
@media (max-width:1024px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .topbar{padding:0 var(--s4);background:#fff}
  .topbar .tb-title{display:block}
  .topbar .tb-logo{display:block}
  .content{padding:var(--s5) var(--s4) 100px}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;bottom:0;inset-inline:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;color:var(--muted);font-size:11.5px;font-weight:600}
  .tabbar a[aria-current]{color:var(--blue);background:var(--blue-50)}
}
.tb-logo{display:none}
.tb-logo img{height:30px}
/* لوحة الإدارة */
.shell.admin .side{background:var(--navy);border-color:var(--navy)}
.shell.admin .side-nav .grp{color:rgba(255,255,255,.45)}
.shell.admin .side-nav a{color:rgba(255,255,255,.78)}
.shell.admin .side-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.shell.admin .side-nav a[aria-current]{background:var(--yellow);color:var(--navy);box-shadow:none}
.shell.admin .side-nav a[aria-current] .pill{background:var(--navy);color:#fff}
.shell.admin .admin-tag{align-self:flex-start;font-size:11.5px;background:rgba(255,229,0,.15);color:var(--yellow);border-radius:8px;padding:2px 8px;margin:-8px 8px var(--s4);display:inline-block}
.admin-mob-nav{display:none}
@media (max-width:1024px){.shell.admin .admin-mob-nav{display:flex;gap:6px;overflow-x:auto;padding:10px var(--s4);background:var(--navy)}
  .admin-mob-nav a{color:rgba(255,255,255,.8);white-space:nowrap;padding:6px 12px;border-radius:99px;font-size:13.5px;background:rgba(255,255,255,.06)}
  .admin-mob-nav a[aria-current]{background:var(--yellow);color:var(--navy)}}

/* ترحيب ولوحة الطالب */
.welcome{border-radius:var(--r-xl);background:var(--blue);color:#fff;padding:var(--s7);position:relative;overflow:hidden;margin-bottom:var(--s6)}
.welcome h1{color:#fff;font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.welcome p{color:rgba(255,255,255,.85);margin:0}
.welcome::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:var(--yellow);top:-110px;left:-50px}
.welcome::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);bottom:-40px;left:30%}
.welcome>*{position:relative;z-index:1}
.welcome .row{margin-top:var(--s5)}
.continue{display:flex;gap:var(--s4);align-items:center}
.continue .thumb{width:120px;aspect-ratio:16/9;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--yellow);flex:none;overflow:hidden}
.continue .thumb img{width:100%;height:100%;object-fit:cover}
.mini-course{display:flex;gap:14px;align-items:center;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:#fff;color:var(--ink)}
.mini-course:hover{border-color:var(--blue-100);color:var(--ink)}
.mini-course .mc-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none;font:700 18px var(--f-display)}
.mini-course .mc-b{flex:1;min-width:0}
.mini-course .mc-b b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-bars{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:var(--s3)}
.chart-bars .cb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart-bars .cb span.bar{width:100%;max-width:38px;border-radius:10px 10px 4px 4px;background:var(--blue-100);min-height:4px;transition:height .4s}
.chart-bars .cb.today span.bar{background:var(--blue)}
.chart-bars .cb small{color:var(--muted);font-size:11.5px}
.chart-bars .cb em{font-style:normal;font-size:11.5px;color:var(--ink-2);font-weight:600}

/* المشغّل */
.player-wrap{position:relative;aspect-ratio:16/9;background:#0b1430;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);user-select:none;-webkit-user-select:none}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-wrap .poster{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:var(--s5);background:radial-gradient(70% 70% at 50% 40%,#21407f,#0b1430)}
.player-wrap .poster .big-play{width:84px;height:84px;border-radius:50%;background:var(--yellow);color:var(--navy);border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 14px rgba(255,229,0,.16);margin:0 auto var(--s4);transition:.15s}
.player-wrap .poster .big-play:hover{transform:scale(1.06)}
/* العلامة المائية — 3 طبقات (pointer-events:none عشان متعطّلش التحكم في المشغّل) */
.wm{position:absolute;z-index:6;pointer-events:none;user-select:none;-webkit-user-select:none;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.wm-badge{top:0;left:0;color:#fff;font:700 clamp(13px,1.9vw,21px)/1.2 var(--f-body);text-shadow:0 0 2px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7);background:rgba(0,0,0,.18);padding:4px 10px;border-radius:8px;transition:transform 1.4s cubic-bezier(.4,0,.2,1),opacity 1s}
.wm-tile{inset:-30%;display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;gap:46px 70px;color:rgba(255,255,255,.12);font:600 clamp(11px,1.3vw,15px) var(--f-body);text-shadow:0 0 1px rgba(0,0,0,.25);transform:rotate(-24deg);transition:transform 3s ease;opacity:1}
.wm-tile span{display:block}
.wm-flash{left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);color:#fff;font:800 clamp(18px,3.6vw,40px)/1.2 var(--f-body);text-shadow:0 0 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.6);opacity:0;transition:opacity .35s,transform .35s}
.wm-flash.on{opacity:.62;transform:translate(-50%,-50%) scale(1)}
.fs-btn{position:absolute;z-index:7;top:10px;left:10px;width:38px;height:38px;border-radius:10px;border:0;background:rgba(11,20,48,.55);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.75;transition:.15s}
.fs-btn:hover{opacity:1;background:rgba(11,20,48,.8)}
.player-wrap:fullscreen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto;background:#000}
.player-wrap:-webkit-full-screen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto;background:#000}
.player-wrap.pseudo-fs{position:fixed;inset:0;z-index:9999;border-radius:0;aspect-ratio:auto;width:100vw;height:100dvh;background:#000}
body.no-scroll{overflow:hidden}
.quota{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.quota .bubs{display:flex;gap:5px}
.quota .bub{width:14px;height:14px;border-radius:50%;border:2px solid var(--blue)}
.quota .bub.on{background:var(--blue)}
.quota.low .bub{border-color:var(--coral)}.quota.low .bub.on{background:var(--coral)}
.lesson-layout{display:grid;grid-template-columns:1fr 360px;gap:var(--s6);align-items:start}
@media (max-width:1100px){.lesson-layout{grid-template-columns:1fr}}

/* الكويز */
.q-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);margin-bottom:var(--s4)}
.q-card .q-n{font:600 13px var(--f-display);color:var(--blue);margin-bottom:8px}
.q-card .q-body{font-size:17px;font-weight:500;margin-bottom:var(--s4);white-space:pre-line}
.choice{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:10px;cursor:pointer;transition:.12s}
.choice:hover{border-color:var(--blue-100);background:#FBFCFF}
.choice input{width:20px;height:20px;accent-color:var(--blue);flex:none;margin:0}
.choice:has(input:checked){border-color:var(--blue);background:var(--blue-50)}
.choice.right{border-color:var(--ok);background:var(--ok-50)}
.choice.wrong{border-color:var(--bad);background:var(--bad-50)}
.quiz-bar{position:sticky;top:calc(var(--top) + 8px);z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 18px;margin-bottom:var(--s5);box-shadow:var(--sh-1)}
.timer{font:700 20px var(--f-display);direction:ltr;color:var(--navy);display:flex;gap:8px;align-items:center}
.timer.low{color:var(--bad)}
.score-ring{--p:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--blue) calc(var(--p)*1%),var(--line-2) 0);display:grid;place-items:center;margin:0 auto var(--s5)}
.score-ring>div{width:122px;height:122px;border-radius:50%;background:#fff;display:grid;place-items:center;font:700 32px var(--f-display);color:var(--navy)}

/* بناء الكورس */
.builder-unit{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-bottom:var(--s4);overflow:hidden}
.builder-unit .bu-h{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#FAFBFE;border-bottom:1px solid var(--line-2)}
.builder-unit .bu-h input{border:0;background:transparent;font:600 16px var(--f-display);flex:1;min-width:0;padding:6px 8px;border-radius:8px}
.builder-unit .bu-h input:focus{background:#fff;outline:2px solid var(--blue-100)}
.bl{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-2)}
.bl:last-child{border-bottom:0}
.bl .bl-ic{width:36px;height:36px;border-radius:10px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;flex:none}
.bl .bl-b{flex:1;min-width:0}
.bl .bl-b a{color:var(--ink);font-weight:600}
.dropzone{border:2px dashed var(--blue-100);border-radius:var(--r-lg);padding:var(--s8) var(--s5);text-align:center;background:var(--blue-50);cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.over{border-color:var(--blue);background:#E0E9FF}
.dropzone .dz-ic{width:64px;height:64px;border-radius:20px;background:#fff;color:var(--blue);display:grid;place-items:center;margin:0 auto var(--s3);box-shadow:var(--sh-1)}

/* طباعة الأكواد */
.print-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;background:#fff}
.print-card{border:1.5px dashed #b8c4dc;border-radius:12px;padding:12px;text-align:center;break-inside:avoid}
.print-card img{height:26px;margin:0 auto 6px}
.print-card .pc-code{font:700 15px ui-monospace,Menlo,monospace;letter-spacing:.08em;direction:ltr;margin:6px 0}
.print-card .pc-v{font:700 18px var(--f-display);color:var(--blue)}
.print-card small{font-size:10.5px;color:#68758D}
@media print{
  body{background:#fff}
  .no-print{display:none!important}
  .print-sheet{padding:0}
  @page{margin:10mm}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.d-block{display:block}
.card-h h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}