/* مُحكَم — نظام التصميم. الرموز أولًا، ثم المكوّنات، ثم التخطيطات. كلّ مكوّن معروض في /design. */
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(fonts/plex-400-arabic.woff2?v=6010e7fd0d) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;font-weight:600 700;font-display:swap;src:url(fonts/plex-600-arabic.woff2?v=16734a5adb) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}

:root{
  /* اللون: حبرٌ نفطيّ، وزمرّديّ الهويّة، وذهبٌ للتمييز */
  --c-bg:#f4f6f5;--c-paper:#fff;--c-raised:#fbfcfc;--c-ink:#10232b;--c-ink-2:#3c525d;--c-muted:#5b6f79;
  --c-line:#dfe7e6;--c-line-2:#c9d6d4;--c-soft:#ecf3f1;
  --c-brand:#0f7a6c;--c-brand-ink:#fff;--c-brand-deep:#0b3f47;--c-brand-tint:#e2f2ee;
  --c-gold:#b98a1c;--c-gold-tint:#f8f0dc;--c-danger:#b42d22;--c-danger-tint:#fbe9e6;--c-ok:#0f7a6c;--c-warn:#8a5d00;--c-warn-tint:#fdf3dc;--c-info:#1d5fa8;--c-info-tint:#e6f0fb;
  /* درجات البلاطات */
  --t-emerald-1:#0f7a6c;--t-emerald-2:#0b4f57;--t-indigo-1:#3b4fb8;--t-indigo-2:#252f78;--t-amber-1:#c4881a;--t-amber-2:#8a4f0b;
  --t-rose-1:#b8475d;--t-rose-2:#7a2638;--t-sky-1:#1d7fb8;--t-sky-2:#13507a;--t-slate-1:#46606e;--t-slate-2:#24363f;
  /* الخطّ والإيقاع */
  --font:Plex,"Segoe UI",system-ui,Tahoma,sans-serif;
  --fs-xs:.78rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.15rem;--fs-xl:1.4rem;--fs-2xl:clamp(1.6rem,4.6vw,2.5rem);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:28px;--sp-7:40px;--sp-8:64px;
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(16,35,43,.06);--sh-2:0 1px 2px rgba(16,35,43,.05),0 10px 28px -12px rgba(16,35,43,.18);--sh-3:0 24px 48px -20px rgba(11,63,71,.38);
  --ring:0 0 0 3px color-mix(in srgb,var(--c-gold) 55%,transparent);
  --ease:cubic-bezier(.2,.7,.2,1);--dur-1:.12s;--dur-2:.22s;--dur-3:.4s;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --c-bg:#0a1418;--c-paper:#0f1d23;--c-raised:#13242b;--c-ink:#e2ecef;--c-ink-2:#b5c6cc;--c-muted:#8ea3ab;--c-line:#1f343d;--c-line-2:#2b4651;--c-soft:#132a31;
  --c-brand:#2bb5a2;--c-brand-ink:#05211e;--c-brand-deep:#a9e2d8;--c-brand-tint:#0f2f2c;--c-gold:#e3bb57;--c-gold-tint:#2c2412;
  --c-danger:#ff8a7d;--c-danger-tint:#3a1714;--c-ok:#4fd1bd;--c-warn:#f0c062;--c-warn-tint:#2e240f;--c-info:#7fb6f2;--c-info-tint:#12253a;
  --sh-1:none;--sh-2:0 0 0 1px var(--c-line);--sh-3:0 20px 40px -20px #000;color-scheme:dark}}
:root[data-theme=dark]{
  --c-bg:#0a1418;--c-paper:#0f1d23;--c-raised:#13242b;--c-ink:#e2ecef;--c-ink-2:#b5c6cc;--c-muted:#8ea3ab;--c-line:#1f343d;--c-line-2:#2b4651;--c-soft:#132a31;
  --c-brand:#2bb5a2;--c-brand-ink:#05211e;--c-brand-deep:#a9e2d8;--c-brand-tint:#0f2f2c;--c-gold:#e3bb57;--c-gold-tint:#2c2412;
  --c-danger:#ff8a7d;--c-danger-tint:#3a1714;--c-ok:#4fd1bd;--c-warn:#f0c062;--c-warn-tint:#2e240f;--c-info:#7fb6f2;--c-info-tint:#12253a;
  --sh-1:none;--sh-2:0 0 0 1px var(--c-line);--sh-3:0 20px 40px -20px #000;color-scheme:dark}

/* الأساس */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font:400 var(--fs-md)/1.75 var(--font);text-rendering:optimizeLegibility}
h1,h2,h3,h4{line-height:1.35;margin:0 0 .45em;font-weight:600;letter-spacing:-.005em}
h1{font-size:var(--fs-xl)}h2{font-size:var(--fs-lg)}h3{font-size:var(--fs-md)}
p{margin:0 0 .8em}
ol{list-style-type:arabic-indic}
a{color:var(--c-brand);text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
::selection{background:var(--c-gold-tint)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-4)}
.muted{color:var(--c-muted)}.small{font-size:var(--fs-sm)}.center{text-align:center}.hidden{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.25em;height:1.25em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;inset-inline-start:var(--sp-3);top:-60px;background:var(--c-paper);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);z-index:20}
.skip:focus{top:var(--sp-3)}

/* زرّ */
.btn{--b:var(--c-soft);--f:var(--c-ink);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:var(--r-md);background:var(--b);color:var(--f);font:600 var(--fs-md)/1.2 var(--font);text-decoration:none;cursor:pointer;transition:transform var(--dur-1) var(--ease),background-color var(--dur-2),box-shadow var(--dur-2)}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:scale(.98)}
.btn.primary{--b:var(--c-brand);--f:var(--c-brand-ink);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--c-brand) 80%,transparent)}
.btn.gold{--b:var(--c-gold);--f:#241a02}
.btn.ghost{--b:transparent;border-color:var(--c-line-2)}
.btn.danger{--b:transparent;--f:var(--c-danger);border-color:var(--c-line-2)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:var(--fs-sm)}
.btn.lg{min-height:52px;padding:12px 26px;font-size:var(--fs-lg);border-radius:var(--r-lg)}
.btn.block{width:100%}
.btn[disabled],.btn[aria-busy=true]{opacity:.6;cursor:not-allowed}
.btn[aria-busy=true]::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .8s linear infinite}

/* بطاقة */
.card{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-2)}
.card.flat{box-shadow:none}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.card-h{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.card-h h2,.card-h h3{margin:0}
.card-h .end{margin-inline-start:auto}

/* حقل */
.field{margin-bottom:var(--sp-4)}
.field label,.lbl{display:block;font-weight:600;font-size:var(--fs-sm);margin:0 0 6px;color:var(--c-ink-2)}
.input,.field input,.field select,.field textarea{width:100%;min-height:46px;padding:10px 12px;font:inherit;color:var(--c-ink);background:var(--c-raised);border:1px solid var(--c-line-2);border-radius:var(--r-md);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.field textarea{min-height:120px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--c-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 22%,transparent)}
.field [aria-invalid=true]{border-color:var(--c-danger)}
.hint{color:var(--c-muted);font-size:var(--fs-xs);margin-top:5px}
.ferr{color:var(--c-danger);font-size:var(--fs-sm);font-weight:600;margin-top:5px}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);line-height:1.7;cursor:pointer}
.check input{width:20px;height:20px;margin-top:3px;flex:0 0 auto;accent-color:var(--c-brand)}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.row>*{flex:1 1 180px}

/* تنبيه */
.alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--c-info-tint);color:var(--c-ink);border:1px solid color-mix(in srgb,var(--c-info) 25%,transparent);margin:var(--sp-3) 0}
.alert .ico{color:var(--c-info);margin-top:3px}
.alert.ok{background:var(--c-brand-tint);border-color:color-mix(in srgb,var(--c-ok) 30%,transparent)}.alert.ok .ico{color:var(--c-ok)}
.alert.warn{background:var(--c-warn-tint);border-color:color-mix(in srgb,var(--c-warn) 30%,transparent)}.alert.warn .ico{color:var(--c-warn)}
.alert.bad{background:var(--c-danger-tint);border-color:color-mix(in srgb,var(--c-danger) 30%,transparent)}.alert.bad .ico{color:var(--c-danger)}
.alert p{margin:0}

/* شارة */
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-pill);padding:2px 10px;font-size:var(--fs-xs);font-weight:600;background:var(--c-soft);color:var(--c-ink-2);white-space:nowrap}
.badge.ok{background:var(--c-brand-tint);color:var(--c-ok)}.badge.warn{background:var(--c-warn-tint);color:var(--c-warn)}.badge.bad{background:var(--c-danger-tint);color:var(--c-danger)}.badge.gold{background:var(--c-gold-tint);color:var(--c-gold)}

/* جدول */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-paper)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--c-line);text-align:start;vertical-align:middle;white-space:nowrap}
.table td.wrap-cell{white-space:normal}
.table thead th{position:sticky;top:0;background:var(--c-raised);color:var(--c-muted);font-weight:600;font-size:var(--fs-xs)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--c-soft)}
.table input{min-height:36px;padding:4px 8px;width:84px;border:1px solid var(--c-line-2);border-radius:var(--r-sm);background:var(--c-raised);color:var(--c-ink);font:inherit}
.num{font-variant-numeric:tabular-nums}

/* نافذة */
dialog.modal{border:0;border-radius:var(--r-xl);padding:0;max-width:min(520px,calc(100vw - 32px));width:100%;background:var(--c-paper);color:var(--c-ink);box-shadow:var(--sh-3)}
dialog.modal::backdrop{background:rgba(6,20,24,.5);backdrop-filter:blur(3px)}
dialog.modal[open]{animation:rise var(--dur-3) var(--ease)}
.modal-b{padding:var(--sp-5)}
.modal-f{display:flex;gap:var(--sp-2);justify-content:flex-end;padding:var(--sp-3) var(--sp-5) var(--sp-5)}

/* حالة فارغة */
.empty{text-align:center;padding:var(--sp-7) var(--sp-4);border:1.5px dashed var(--c-line-2);border-radius:var(--r-lg);background:var(--c-raised)}
.empty svg{width:88px;height:88px;margin:0 auto var(--sp-3);display:block}
.empty h3{margin-bottom:var(--sp-1)}
.empty p{color:var(--c-muted);max-width:42ch;margin:0 auto var(--sp-4)}

/* هيكل تحميل */
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--c-soft) 25%,var(--c-line) 37%,var(--c-soft) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;min-height:14px}
.skel.t{height:22px;width:40%;margin-bottom:var(--sp-3)}.skel.l{height:14px;margin-bottom:var(--sp-2)}.skel.tile-s{height:136px;border-radius:var(--r-lg)}

/* البلاطة */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}}
@media (min-width:1180px){.tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{--g1:var(--t-emerald-1);--g2:var(--t-emerald-2);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-2);min-height:150px;padding:var(--sp-4);border-radius:var(--r-lg);color:#fff;text-decoration:none;
  background:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.18),transparent 55%),linear-gradient(150deg,var(--g1),var(--g2));box-shadow:0 1px 0 rgba(255,255,255,.15) inset,var(--sh-2);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.tile::after{content:"";position:absolute;z-index:-1;width:190px;height:190px;inset-inline-end:-70px;bottom:-90px;border-radius:50%;border:26px solid rgba(255,255,255,.07)}
.tile:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 22px 36px -18px var(--g2)}
.tile:active{transform:translateY(-1px) scale(.99)}
.tile:focus-visible{box-shadow:var(--ring),var(--sh-2)}
.tile .glass{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tile .glass .ico{width:26px;height:26px;stroke-width:1.7}
.tile b{font-size:var(--fs-lg);font-weight:600;line-height:1.35;margin-top:auto}
.tile small{font-size:var(--fs-sm);line-height:1.6;opacity:.9}
.tile .tag{position:absolute;inset-inline-end:var(--sp-3);top:var(--sp-3);background:rgba(255,255,255,.94);color:var(--g2);border-radius:var(--r-pill);padding:2px 10px;font-size:var(--fs-xs);font-weight:600}
.tile[data-tone=indigo]{--g1:var(--t-indigo-1);--g2:var(--t-indigo-2)}.tile[data-tone=amber]{--g1:var(--t-amber-1);--g2:var(--t-amber-2)}
.tile[data-tone=rose]{--g1:var(--t-rose-1);--g2:var(--t-rose-2)}.tile[data-tone=sky]{--g1:var(--t-sky-1);--g2:var(--t-sky-2)}.tile[data-tone=slate]{--g1:var(--t-slate-1);--g2:var(--t-slate-2)}
.tile[aria-disabled=true]{filter:saturate(.25);opacity:.75;pointer-events:none}
@media (max-width:420px){.tile{min-height:136px;padding:var(--sp-3)}.tile b{font-size:var(--fs-md)}.tile small{font-size:var(--fs-xs)}.tile .glass{width:42px;height:42px}}

/* مؤشّر رقمي */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.kpi .t{color:var(--c-muted);font-size:var(--fs-xs);font-weight:600}.kpi .v{font-size:1.65rem;font-weight:600;line-height:1.3}
.meter{height:8px;border-radius:var(--r-pill);background:var(--c-soft);overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--c-gold),var(--c-brand));border-radius:inherit;transition:width var(--dur-3) var(--ease)}

/* شرائح الاختيار ومؤشّر الخطوات */
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{min-height:38px;padding:6px 14px;border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-paper);color:var(--c-ink);font:inherit;font-size:var(--fs-sm);cursor:pointer;transition:background-color var(--dur-2)}
.chip[aria-pressed=true]{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.stepper{display:flex;gap:var(--sp-2);list-style:none;padding:0;margin:0 0 var(--sp-5)}
.stepper li{flex:1;font-size:var(--fs-xs);color:var(--c-muted);font-weight:600}
.stepper li::before{content:"";display:block;height:6px;border-radius:6px;background:var(--c-line);margin-bottom:6px;transition:background-color var(--dur-3)}
.stepper li[aria-current=step],.stepper li.done{color:var(--c-ink)}
.stepper li[aria-current=step]::before,.stepper li.done::before{background:var(--c-brand)}

/* قوائم */
.list{list-style:none;margin:0;padding:0}
.list>li{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--c-line);flex-wrap:wrap}
.list>li:last-child{border-bottom:0}
.list .grow{flex:1 1 200px;min-width:0}
.list .t{font-weight:600}
.toast{position:fixed;inset-inline:var(--sp-4);bottom:84px;margin:auto;max-width:420px;background:var(--c-brand-deep);color:var(--c-paper);border-radius:var(--r-md);padding:12px 16px;z-index:30;box-shadow:var(--sh-3);animation:rise var(--dur-3) var(--ease)}
@media (min-width:960px){.toast{bottom:28px}}

/* الموقع العام */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--c-bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--c-line)}
.top .wrap{display:flex;align-items:center;gap:var(--sp-3);min-height:62px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--c-ink);text-decoration:none;font-weight:600;font-size:var(--fs-lg)}
.brand svg{width:32px;height:32px}
.brand span small{display:block;font-size:var(--fs-xs);color:var(--c-muted);font-weight:400;line-height:1.2}
.top nav{margin-inline-start:auto;display:flex;gap:var(--sp-2);align-items:center}
.foot{border-top:1px solid var(--c-line);color:var(--c-muted);font-size:var(--fs-sm);padding:var(--sp-6) 0 var(--sp-7);margin-top:var(--sp-7)}
.foot .wrap{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.foot a{color:inherit}
.hero{display:grid;gap:var(--sp-6);align-items:center;padding:var(--sp-7) 0 var(--sp-6)}
@media (min-width:900px){.hero{grid-template-columns:1.1fr .9fr;padding:var(--sp-8) 0 var(--sp-7)}}
.eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--c-gold);font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--sp-3)}
.hero h1{font-size:var(--fs-2xl);line-height:1.3;margin-bottom:var(--sp-4)}
.hero h1 em{font-style:normal;color:var(--c-brand)}
.lead{font-size:var(--fs-lg);color:var(--c-ink-2);max-width:52ch}
.hero-art{width:100%;max-width:440px;margin-inline:auto}
.section{padding:var(--sp-7) 0}
.section .wrap>h2{font-size:var(--fs-xl);text-align:center;margin-bottom:var(--sp-2)}
.section .wrap>.sub{text-align:center;color:var(--c-muted);max-width:60ch;margin:0 auto var(--sp-6)}
.plan{position:relative;max-width:460px;margin:0 auto;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--sh-3)}
.plan::before{content:"";position:absolute;inset:0 0 auto;height:6px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:linear-gradient(90deg,var(--c-gold),var(--c-brand))}
.plan .price{display:flex;align-items:baseline;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-4)}
.plan .price b{font-size:3rem;font-weight:600;color:var(--c-brand-deep);line-height:1}
.ticks{list-style:none;margin:0 0 var(--sp-5);padding:0}
.ticks li{display:flex;gap:var(--sp-2);padding:7px 0;border-bottom:1px dashed var(--c-line)}
.ticks li .ico{color:var(--c-brand);margin-top:4px}
.features{display:grid;gap:var(--sp-4)}
@media (min-width:760px){.features{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.features{grid-template-columns:repeat(4,1fr)}}
.feature{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-5)}
.feature .glass{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--c-brand-tint);color:var(--c-brand);margin-bottom:var(--sp-3)}
.feature p{color:var(--c-muted);font-size:var(--fs-sm);margin:0}
.trust{display:grid;gap:var(--sp-3)}
@media (min-width:760px){.trust{grid-template-columns:repeat(3,1fr)}}
.trust>div{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-raised);border:1px solid var(--c-line)}
.trust .ico{color:var(--c-gold);width:28px;height:28px}
.trust p{margin:0;color:var(--c-muted);font-size:var(--fs-sm)}
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--c-line);padding:var(--sp-3) 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--c-brand);font-weight:600;transition:transform var(--dur-2)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:var(--sp-2) 0 0;color:var(--c-ink-2)}
.narrow{max-width:640px;margin:0 auto}
.page-h{padding:var(--sp-6) 0 var(--sp-4)}
.summary{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--c-soft)}

/* تطبيق المعلّم */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100dvh}
.rail{order:2;position:sticky;bottom:0;z-index:10;display:flex;justify-content:space-around;background:color-mix(in srgb,var(--c-paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--c-line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.rail a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--c-muted);font-size:.72rem;font-weight:600;padding:6px 2px;border-radius:var(--r-md)}
.rail a .ico{width:22px;height:22px}
.rail a[aria-current=page]{color:var(--c-brand);background:var(--c-brand-tint)}
.rail .brand,.rail .rail-foot{display:none}
.main{padding:var(--sp-4) 0 var(--sp-7);min-width:0}
@media (min-width:960px){
  .app{grid-template-columns:248px minmax(0,1fr)}
  .rail{order:0;top:0;height:100dvh;flex-direction:column;justify-content:flex-start;gap:2px;padding:var(--sp-5) var(--sp-3);border-top:0;border-inline-start:1px solid var(--c-line)}
  .rail a{flex:0;flex-direction:row;gap:var(--sp-3);font-size:var(--fs-sm);padding:10px 12px}
  .rail .brand{display:flex;margin:0 8px var(--sp-5)}
  .rail .rail-foot{display:block;margin-top:auto;padding:var(--sp-3);font-size:var(--fs-xs);color:var(--c-muted)}
  .main{padding:var(--sp-6) var(--sp-2) var(--sp-7)}
}
.vh{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.vh h1{margin:0}
.vh p{margin:2px 0 0;color:var(--c-muted)}
.vh .actions{margin-inline-start:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.greet{border-radius:var(--r-xl);padding:var(--sp-5);background:radial-gradient(90% 140% at 0 0,color-mix(in srgb,var(--c-gold) 22%,transparent),transparent 60%),linear-gradient(140deg,var(--t-emerald-1),var(--t-emerald-2));color:#fff;margin-bottom:var(--sp-5);display:grid;gap:var(--sp-3)}
.greet h1{margin:0;font-size:var(--fs-xl)}
.greet p{margin:0;opacity:.9}
.today{display:grid;gap:var(--sp-3)}
@media (min-width:860px){.today{grid-template-columns:1.3fr 1fr}}
.prio{list-style:none;margin:0;padding:0;counter-reset:p}
.prio li{counter-increment:p;display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--c-line)}
.prio li:last-child{border-bottom:0}
.prio li::before{content:counter(p,arabic-indic);display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:var(--c-gold-tint);color:var(--c-gold);font-weight:600}
.prio .grow{flex:1;min-width:0}
.section-t{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-6) 0 var(--sp-3)}
.section-t h2{margin:0}
.chart{display:block;width:100%;max-width:640px;margin:0 auto}
.note{color:var(--c-muted);font-size:var(--fs-xs)}
.swatch{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--sp-2)}
.swatch div{border-radius:var(--r-md);border:1px solid var(--c-line);overflow:hidden;font-size:var(--fs-xs)}
.swatch i{display:block;height:54px}
.swatch span{display:block;padding:6px 8px}

.grid-2{display:grid;gap:var(--sp-4)}
.gap-top{margin-top:var(--sp-5)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)}
.split{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
@media (min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}
.card h2:not(:first-child){margin-top:var(--sp-5)}
.empty svg{color:var(--c-brand);stroke-width:1.2}
.empty .ico{width:72px;height:72px}

/* رسوم الصفحة الرئيسة */
.mark{width:32px;height:32px;color:var(--c-brand)}
.art-blob{fill:var(--c-brand-tint)}
.art-sheet rect{fill:var(--c-paper);stroke:var(--c-line);filter:drop-shadow(0 18px 24px rgba(11,63,71,.18))}
.art-line{fill:var(--c-line-2)}.art-line.soft{fill:var(--c-line)}
.art-bars rect{fill:color-mix(in srgb,var(--c-brand) 55%,var(--c-paper))}.art-bars .hi{fill:var(--c-brand)}
.art-dash{stroke:var(--c-danger);stroke-width:2;stroke-dasharray:6 5}
.art-chip rect{fill:var(--c-paper);stroke:var(--c-line);filter:drop-shadow(0 10px 16px rgba(11,63,71,.16))}
.art-chip text{fill:var(--c-muted);font:600 12px var(--font)}.art-chip .big{fill:var(--c-brand-deep);font-size:20px}
.art-bars rect{transform-origin:bottom;transform-box:fill-box;animation:grow .9s var(--ease) both}
.art-bars rect:nth-child(2){animation-delay:.06s}.art-bars rect:nth-child(3){animation-delay:.12s}.art-bars rect:nth-child(4){animation-delay:.18s}.art-bars rect:nth-child(5){animation-delay:.24s}.art-bars rect:nth-child(6){animation-delay:.3s}
@keyframes grow{from{transform:scaleY(.1)}to{transform:none}}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.enter{animation:rise var(--dur-3) var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.tile:hover{transform:none}}
@media print{.rail,.top,.foot{display:none}}

/* اشتراكي ومدرستي */
a.badge{text-decoration:none}
.sub-hero{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:stretch;background:linear-gradient(135deg,var(--c-brand-tint),var(--c-paper) 60%)}
.sub-left{flex:1 1 260px;display:flex;flex-direction:column;gap:var(--sp-2)}
.sub-days{display:flex;align-items:baseline;gap:var(--sp-2);font-weight:600;font-size:var(--fs-lg)}
.sub-days b{font-size:2.6rem;line-height:1.1;color:var(--c-brand-deep)}
.sub-days.bad{color:var(--c-danger)}
.sub-price{flex:0 1 180px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:var(--sp-4);border-radius:var(--r-md);background:var(--c-paper);border:1px solid var(--c-line)}
.sub-price b{font-size:var(--fs-xl);color:var(--c-ink)}
.share{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.share .input{flex:1 1 220px;min-width:0;text-align:left;font-size:var(--fs-sm)}
.share-a{display:flex;gap:var(--sp-2)}
.invite{padding:var(--sp-3) 0;border-bottom:1px dashed var(--c-line)}
.invite-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split-2{display:grid;gap:var(--sp-4)}
@media (min-width:600px){.split-2{grid-template-columns:1fr 1fr}}
.split-2 .ticks{margin:var(--sp-2) 0 0}
.people li{align-items:center}
.avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c-gold-tint);color:var(--c-gold);font-weight:600}
.ref{border-color:color-mix(in srgb,var(--c-gold) 35%,var(--c-line))}
@media (max-width:420px){.rail a{font-size:.66rem;padding:6px 0}.rail a .ico{width:20px;height:20px}}
.field.locked input,.field.locked select{background:var(--c-soft);color:var(--c-ink-2)}
.shares .share-row{display:block;padding:var(--sp-4) 0}
.share-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.share-tools{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3)}
.share-tools .inline{display:inline-flex;gap:var(--sp-1);align-items:center}
.share-tools select{min-height:36px;padding:4px 10px;font:inherit;font-size:var(--fs-sm);border:1px solid var(--c-line-2);border-radius:var(--r-md);background:var(--c-raised);color:var(--c-ink)}
.invite-code{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2);padding:var(--sp-3) var(--sp-4);border:1px dashed var(--c-gold);border-radius:var(--r-md);background:var(--c-gold-tint)}
.invite-code b{font-size:1.35rem;letter-spacing:2px;color:var(--c-ink)}
.code-field input{text-transform:uppercase;letter-spacing:2px;font-weight:600}

/* تبويبات داخل الشاشة، وتبادل الملفات */
.vtabs{display:flex;gap:var(--sp-1);margin:0 0 var(--sp-4);border-bottom:1px solid var(--c-line)}
.vtabs a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;text-decoration:none;color:var(--c-muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.vtabs a[aria-current=page]{color:var(--c-brand);border-bottom-color:var(--c-brand)}
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.xlist .xrow{align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
.xrow.unread .t{font-weight:700}
.xicon{flex:0 0 auto;width:48px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:var(--r-md);background:var(--c-soft);color:var(--c-brand)}
.xicon small{font-size:.66rem;font-weight:700;color:var(--c-muted)}
.xicon[data-ext=docx]{color:#2b5797}.xicon[data-ext=xlsx]{color:#1e7145}.xicon[data-ext=pptx]{color:#b7472a}
.xnote{margin:6px 0 0;padding:6px 10px;border-inline-start:3px solid var(--c-gold);background:var(--c-gold-tint);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.xto{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.xact{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-inline-start:auto}
@media (max-width:600px){.xact{width:100%;margin-inline-start:0}}