/* ═══════════════ بصمة RN — نظام التصميم 2026 ═══════════════
   طبقة فوق تصميم التطبيق: ألوان أهدى واحترافية (كحلي الشعار + فيروزي البصمة)، خط Readex Pro، أوزان أخف،
   حواف وفراغات ثابتة، ونفس الاستجابة لكل زر. ينحمّل بعد كل ستايلات app.html و plan.css عشان يغلبها.
   الرجوع للتصميم القديم: فرع design-classic كامل (app.html صار يعتمد على هذا الملف بالأيقونات والألوان، فما يكفي تشيل السطر). */

/* ── الألوان ── */
html[data-theme="light"]{
  --bg:#F5F2EC; --bg2:#FFFFFF; --bg3:#F0EBE2; --bg-a:rgba(245,242,236,.72); --bg-blur:#F5F2EC;
  --border:#E8E1D4; --border2:#D9CEBC;
  --text:#16212D; --text2:#47515D; --muted:#636B74; --dim:#8A8F94;
  --chip:#F0EBE2; --chip-t:#16212D; --track:#ECE5D9; --bed:#E3F3F0;
  --brand:#137467; --brand-d:#1F9E8F; --brand-soft:rgba(31,158,143,.10);
  --card-shadow:0 1px 2px rgba(60,50,35,.05),0 8px 22px -14px rgba(60,50,35,.18);
  --shadow:0 1px 2px rgba(16,28,51,.05);
  --navy:#101C33; --navy-t:#FFFFFF; --cta:#101C33; --cta-t:#FFFFFF; --cta-ic:#35C8B4;
  --c-teal:#1F9E8F; --c-teal-s:#E4F3F0; --c-blue:#2F7FD8; --c-blue-s:#E8F0FB; --c-violet:#6E56CF; --c-violet-s:#EFEBFC;
  --c-amber:#D9860F; --c-amber-s:#FDF1DE; --c-coral:#DE5546; --c-coral-s:#FCEAE7; --c-rose:#E11D48; --c-rose-s:#FDE8EC;
  --ok:#15803d; --warn:#b45309; --bad:#dc2626;
}
:root,html[data-theme="dark"]{
  --bg:#0A1322; --bg2:#111C2F; --bg3:#16233A; --bg-a:rgba(10,19,34,.62); --bg-blur:#0C1525;
  --border:#1F2D45; --border2:#2C3D5A;
  --text:#EEF2F8; --text2:#B4C0D3; --muted:#8E9BB2; --dim:#6B7A93;
  --chip:#1F2D45; --chip-t:#EEF2F8; --track:#1F2D45; --bed:#123A38;
  --brand:#35C8B4; --brand-d:#1F9E8F; --brand-soft:rgba(53,200,180,.12);
  --card-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px -16px rgba(0,0,0,.6);
  --shadow:none;
  --navy:#16284A; --navy-t:#FFFFFF; --cta:#35C8B4; --cta-t:#07121F; --cta-ic:#07121F;
  --c-teal:#35C8B4; --c-teal-s:rgba(53,200,180,.13); --c-blue:#6AA8F0; --c-blue-s:rgba(106,168,240,.14); --c-violet:#A28CF0; --c-violet-s:rgba(162,140,240,.15);
  --c-amber:#F2AE4B; --c-amber-s:rgba(242,174,75,.14); --c-coral:#F07A69; --c-coral-s:rgba(240,122,105,.14); --c-rose:#FB7185; --c-rose-s:rgba(251,113,133,.14);
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
}

/* ── الأساس ── */
body{font-family:'Readex Pro','Segoe UI',system-ui,sans-serif;line-height:1.55;}
#root{-webkit-tap-highlight-color:rgba(31,158,143,.14);}
.ds-i{display:inline-flex;width:20px;height:20px;flex-shrink:0;}
.ds-i svg,.hp svg{display:block;}
/* كل زر يعطي استجابة لما ينضغط */
button,[role="button"],a.fund-promo,a.ecg-promo,a.pharm-promo{transition:transform .12s ease,background-color .15s,border-color .15s,color .15s,box-shadow .15s;}
button:not(:disabled):active,[role="button"]:active{transform:scale(.97);}
.bnav-item:active,.opt-btn:active,.sc-opt:active{transform:scale(.98);}
button:focus-visible,[role="button"]:focus-visible,a:focus-visible{outline:2.5px solid var(--brand-d);outline-offset:2px;}
button.is-busy{pointer-events:none;opacity:.7;}
button.is-busy::after{content:'';display:inline-block;width:14px;height:14px;margin-inline-start:8px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite;vertical-align:-2px;}
@media (prefers-reduced-motion:reduce){button:not(:disabled):active{transform:none;}}

/* أزرار النظام */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 18px;border-radius:15px;border:none;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;}
.ds-btn.primary{background:var(--cta);color:var(--cta-t);}
.ds-btn.primary .pl{width:24px;height:24px;border-radius:50%;background:var(--cta-ic);color:var(--cta);display:grid;place-items:center;}
.ds-btn.primary .pl svg{width:10px;height:10px;margin-left:-1px;}
.ds-btn svg{width:18px;height:18px;}
.ds-btn.ghost{background:var(--bg3);color:var(--text);}
.ds-track{height:6px;border-radius:6px;background:var(--track);overflow:hidden;}
.ds-track i{display:block;height:100%;border-radius:6px;background:var(--brand-d);transition:width .6s cubic-bezier(.2,.8,.3,1);}
.ds-card{background:var(--bg2);border:1px solid var(--border);border-radius:22px;box-shadow:var(--card-shadow);}

/* ═══ الرئيسية ═══ */
.hp{min-height:100vh;}
.hp-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));background:var(--bg-blur);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.hp-av{width:42px;height:42px;border-radius:50%;border:none;background:var(--navy);color:#fff;font:700 16px 'Readex Pro';cursor:pointer;flex-shrink:0;}
html[data-theme="dark"] .hp-av{background:#22365C;}
.hp-hi{flex:1;min-width:0;}
.hp-hi small{display:block;font-size:12.5px;color:var(--muted);line-height:1.3;}
.hp-hi b{display:block;font-size:18px;font-weight:700;color:var(--text);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-hi .sub-chip{margin-top:3px;padding:2px 10px;font-size:10.5px;white-space:nowrap;max-width:100%;overflow:hidden;}
.hp-fire{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 11px;border-radius:18px;background:var(--c-amber-s);color:var(--warn);font-size:13px;font-weight:600;white-space:nowrap;}
.hp-fire svg{width:15px;height:15px;}
.hp-ib{position:relative;width:38px;height:38px;border-radius:50%;border:none;background:var(--bg3);color:var(--text2);display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.hp-ib svg{width:19px;height:19px;}
.hp-ib .notif-dot{top:-3px;inset-inline-start:-3px;}
.hp-ann{overflow:hidden;padding:10px 16px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;}
.hp-page{padding-top:16px;}
.hp-grid{display:block;}
.hp-main>*+*{margin-top:12px;}
.hp-side{margin-top:6px;}
.hp-sec{margin-top:26px;}
.hp-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 2px 14px;}
.hp-sh h2{font-size:19px;font-weight:700;color:var(--text);line-height:1.35;}
.hp-sh p{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.6;}
.hp-count{font-size:12.5px;color:var(--muted);white-space:nowrap;padding-bottom:2px;}
.hp-count b{color:var(--brand);font-weight:600;}

/* كرت الاختبار */
.hp-exam{position:relative;overflow:hidden;border-radius:22px;padding:17px 18px 16px;background:var(--navy);color:#fff;}
.hp-exam::after{content:'';position:absolute;left:-50px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(53,200,180,.22),transparent 65%);pointer-events:none;}
html[data-theme="dark"] .hp-exam{border:1px solid rgba(160,190,230,.12);}
.hp-ex-r{display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
.hp-ex-t{flex:1;min-width:0;}
.hp-ex-t small{display:block;font-size:12px;color:#8FE3D6;font-weight:600;}
.hp-ex-t b{display:block;font-size:23px;font-weight:700;line-height:1.3;margin:2px 0 1px;}
.hp-ex-t span{display:block;font-size:12.5px;color:#A4B3C9;}
.hp-ex-go{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:13px;border:none;background:#35C8B4;color:#07121F;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;}
.hp-ex-go svg{width:16px;height:16px;}
.hp-exam .pl-phrase,.hp-phrase-wrap .pl-phrase{position:relative;z-index:1;}
.hp-phrase-wrap .pl-phrase{margin-top:-6px;padding:12px 16px 14px;border:1px solid var(--border);border-top:none;border-radius:0 0 20px 20px;background:var(--bg2);color:var(--text);}
.hp-phrase-wrap .pl-phrase .lbl{color:var(--brand);}
.hp-phrase-wrap .pl-phrase .src{color:var(--dim);}
.hp-ph-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.hp-ph-act .hp-help{margin-top:0;}
.hp-phrase-wrap .hp-help{color:var(--text2);border-color:var(--border2);}
.hp-help{display:block;margin-top:8px;background:none;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);font-family:inherit;font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:99px;cursor:pointer;}

/* كمّل من وين وقفت */
.hp-resume{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid var(--border);background:var(--bg2);box-shadow:var(--card-shadow);cursor:pointer;text-align:right;font-family:inherit;color:var(--text);}
.hp-pct{font-size:14px;font-weight:700;color:var(--brand);}

/* الخطة */
.hp-sic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;}
.hp-sic svg{width:20px;height:20px;}
.c-teal{background:var(--c-teal-s);color:var(--c-teal);}.c-blue{background:var(--c-blue-s);color:var(--c-blue);}.c-violet{background:var(--c-violet-s);color:var(--c-violet);}
.c-amber{background:var(--c-amber-s);color:var(--c-amber);}.c-coral{background:var(--c-coral-s);color:var(--c-coral);}.c-rose{background:var(--c-rose-s);color:var(--c-rose);}
.hp-tx{flex:1;min-width:0;text-align:right;}
.hp-tx b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;font-weight:600;color:var(--text);line-height:1.35;}
.hp-tx small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.6;}
.hp-plan{position:relative;}
.hp-st{display:flex;gap:13px;position:relative;}
.hp-rail{width:34px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
.hp-rail::after{content:'';flex:1;width:2px;background:var(--border);margin:4px 0;border-radius:2px;}
.hp-st.done .hp-rail::after{background:var(--brand-d);}
.hp-st.last .hp-rail::after{display:none;}
.hp-node{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;flex-shrink:0;border:2px solid var(--border2);color:var(--muted);background:var(--bg);}
.hp-node svg{width:15px;height:15px;}
.hp-st.done .hp-node{background:var(--brand-d);border-color:var(--brand-d);color:#fff;}
.hp-st.skip .hp-node{border-style:dashed;color:var(--dim);}
.hp-st.now .hp-node{border-color:var(--brand-d);color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft);}
.hp-st.fin .hp-node{border:none;background:var(--c-amber-s);color:var(--c-amber);}
.hp-st.fin .hp-node svg{width:17px;height:17px;}
.hp-row{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;padding:3px 0 22px;border:none;background:none;font-family:inherit;color:inherit;cursor:pointer;text-align:right;}
.hp-row:active{transform:none;filter:none;opacity:.7;}
.hp-chev{width:16px;height:16px;color:var(--dim);margin-top:11px;flex-shrink:0;}
.hp-chev svg{width:16px;height:16px;}
.hp-ok{display:block;font-size:12.5px;font-weight:600;color:var(--brand);margin-top:3px;}
.hp-sk{display:block;font-size:12.5px;color:var(--dim);margin-top:3px;}
.hp-sk button{background:none;border:none;color:var(--brand);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:0 4px;text-decoration:underline;text-underline-offset:3px;}
.hp-lk{display:inline-grid;width:15px;height:15px;color:var(--dim);}
.hp-lk svg{width:15px;height:15px;}
.hp-st.skip .hp-tx b{color:var(--muted);}
.hp-cur{flex:1;min-width:0;position:relative;z-index:1;margin:-3px 0 22px;padding:15px 15px 12px;background:var(--bg2);border:1.5px solid var(--brand-d);border-radius:20px;box-shadow:var(--card-shadow);}
.hp-top{display:flex;align-items:flex-start;gap:12px;}
.hp-here{font-size:11px;font-weight:600;color:#fff;background:var(--brand-d);padding:2px 8px;border-radius:10px;}
html[data-theme="dark"] .hp-here{color:#07121F;background:var(--brand);}
html[data-theme="light"] .hp-here{background:var(--brand);}
.hp-prog{margin-top:14px;}
.hp-prog-r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text2);margin-bottom:7px;line-height:1.6;}
.hp-prog-r b{color:var(--brand);font-weight:600;}
.hp-go{width:100%;margin-top:14px;}
.hp-alt{display:flex;justify-content:center;gap:18px;margin-top:8px;}
.hp-alt button{background:none;border:none;font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;padding:6px 4px;}
.hp-peek{position:absolute;z-index:0;left:52px;top:-46px;width:56px;pointer-events:none;}
.hp-st:has(+.hp-st.now) .hp-row{padding-bottom:54px;}
.hp-finrow{padding-bottom:4px;align-items:center;cursor:default;}
.hp-finrow[role="button"]{cursor:pointer;}
.hp-trophy{width:54px;margin:-16px 0 -8px;flex-shrink:0;}

/* جاهزيتك */
.hp-ready{padding:16px;}
.hp-rd-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
.hp-rd-h h3{font-size:16px;font-weight:700;}
.hp-chip{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--bg3);color:var(--muted);white-space:nowrap;}
.hp-rd-m{display:flex;align-items:center;gap:16px;}
.hp-ring{position:relative;width:78px;height:78px;flex-shrink:0;}
.hp-ring svg{width:78px;height:78px;transform:rotate(-90deg);}
.hp-ring .bg{fill:none;stroke:var(--track);stroke-width:7;}
.hp-ring .fg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .8s;}
.hp-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:700;}
.hp-rd-rows{flex:1;min-width:0;}
.hp-rd-rows div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);padding:3px 0;}
.hp-rd-rows b{color:var(--text);font-weight:600;}
.hp-tip{margin-top:12px;padding:10px 12px;border-radius:13px;background:var(--bg3);font-size:12.5px;color:var(--text2);line-height:1.7;}

/* الأدوات */
.hp-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hp-tl{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:18px;border:1px solid var(--border);background:var(--bg2);font-family:inherit;color:var(--text);cursor:pointer;text-align:right;}
.hp-tl b{display:block;font-size:14.5px;font-weight:600;}
.hp-tl small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.55;}
.hp-tl .hp-sic{width:38px;height:38px;}
.hp-badge{position:absolute;top:12px;left:12px;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--c-coral);color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;}
html[data-theme="light"] .hp-badge:not(.lk){background:#C9372C;}
html[data-theme="dark"] .hp-badge:not(.lk){color:#07121F;}
.hp-badge.lk{background:var(--bg3);color:var(--dim);padding:0;width:24px;}
.hp-badge.lk svg{width:13px;height:13px;}

/* الآيباد والكمبيوتر: عمودين */
@media (min-width:900px){
  .hp-page{max-width:1120px;}
  .hp-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start;}
  .hp-side{margin-top:0;position:sticky;top:84px;}
  .hp-side .hp-sec{margin-top:18px;}
  .hp-main .hp-sec{margin-top:24px;}
}
@media (min-width:1024px){.hp-head{padding-inline:max(16px,calc((100vw - 1120px)/2 + 26px));}}

/* ═══ بطاقات الخطة (plan.js) بالشكل الجديد ═══ */
.pl-today{background:var(--navy);border:none;box-shadow:none;border-radius:22px;margin-top:0;}
html[data-theme="dark"] .pl-today{background:var(--navy);border:1px solid rgba(160,190,230,.12);box-shadow:none;}
.pl-today::before{background:radial-gradient(circle,rgba(53,200,180,.22),transparent 65%);}
.pl-today::after{display:none;}
.pl-title{font-weight:700;}
.pl-pill{font-weight:600;}
.pl-cta{background:#35C8B4;color:#07121F;font-weight:600;box-shadow:none;}
.pl-cta.ghost{background:rgba(255,255,255,.1);color:#fff;font-weight:500;}
.pl-ring .num b{font-weight:700;}
.pl-phrase{font-weight:500;}
.pl-phrase .lbl{font-weight:600;}
.pl-count{margin-top:0;}
.pl-rev{border-radius:18px;margin-bottom:0;}
.pl-rev .rt b,.pl-weak-h b,.pl-count .t b{font-weight:600;}
.pl-rev .go{font-weight:700;}
.pl-wbtn{font-weight:600;}
.pl-ci,.pl-wait{border-radius:22px;}

/* ═══ شريط التنقل ═══ */
.bnav{background:var(--bg-blur);border-top:1px solid var(--border);box-shadow:none;padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
.bnav-item{gap:4px;padding:6px 2px 4px;color:var(--dim);font-size:11px;font-weight:500;}
.bnav-item .ic{display:grid;place-items:center;width:52px;height:30px;border-radius:15px;font-size:0;transition:background .2s;}
.bnav-item .ic svg{width:23px;height:23px;}
.bnav-item.on{color:var(--text);font-weight:600;}
.bnav-item.on .ic{transform:none;background:var(--brand-soft);color:var(--brand);}
.bnav-item.on::after{display:none;}
@media (min-width:1024px){.bnav{box-shadow:0 14px 40px -12px rgba(0,0,0,.25);}}

/* ═══ عناصر مشتركة بباقي الشاشات ═══ */
.mhdr{background:var(--bg-blur);}
.mhdr-name{font-weight:700;}
.icon-btn{border-radius:50%;border:none;background:var(--bg3);color:var(--text2);}
.sec-t{font-size:17px;font-weight:700;margin:26px 2px 12px;}
.sec-t::before{display:none;}
.sec-t small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;}
.ncard{border-radius:20px;}
.lbl{font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--muted);}
.spec-btn{border-radius:14px;font-weight:500;color:var(--text2);}
.spec-btn.on{font-weight:600;}
.mode-btn{border-radius:16px;}
.mode-btn .t1{font-weight:600;}

.chip-btn{font-weight:500;}
.chip-btn.on{background:var(--cta);border-color:var(--cta);color:var(--cta-t);}
.big-cta{background:var(--cta);color:var(--cta-t);box-shadow:none;font-weight:600;border-radius:16px;}
.big-cta.violet{background:var(--cta);box-shadow:none;}
.feat-card{border-radius:18px;}
.feat-card::before{display:none;}
.feat-card .fc-t b{font-weight:600;}
.mist-btn{border-radius:18px;}
.mist-btn .mi svg{width:22px;height:22px;}
.readi-card,.resume-bar{border-radius:20px;}
.sheet{border-radius:24px 24px 0 0;}
.tph{border-radius:16px;font-weight:600;}
.hp-plan>.hp-st.now:first-child{margin-top:46px;}

/* ═══ الآيباد بالعرض والكمبيوتر: الشريط السفلي يصير قائمة جانبية ═══ */
@media (min-width:1100px){
  #root>div:has(>.bnav),#root>div:has(>div>.bnav){padding-right:236px;}
  .bnav{top:0;bottom:0;right:0;left:auto;transform:none;width:236px;height:auto;flex-direction:column;justify-content:flex-start;gap:4px;padding:88px 16px 24px;border-radius:0;border:none;border-left:1px solid var(--border);box-shadow:none;background:var(--bg2);}
  .bnav::before{content:'بصمة RN';position:absolute;top:26px;right:20px;left:20px;height:38px;padding-right:48px;display:flex;align-items:center;font-size:20px;font-weight:700;color:var(--text);background:url('../img/brand/icon.svg') right center/38px 38px no-repeat;}
  .bnav-item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px;font-size:15px;font-weight:500;color:var(--text2);border-radius:14px;}
  .bnav-item .ic{width:24px;height:24px;border-radius:0;background:none!important;}
  .bnav-item.on{background:var(--brand-soft);color:var(--text);}
  .hp-head{padding-inline:28px;}
  .hp-page,.page{max-width:1080px;}
}

/* ═══ الشاشات الداخلية ═══ */
.ds-scr{min-height:100vh;}
.ds-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));background:var(--bg-blur);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.ds-back{width:40px;height:40px;border-radius:50%;border:none;background:var(--bg3);color:var(--text);display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.ds-back svg{width:20px;height:20px;}
.ds-bar-t{flex:1;min-width:0;}
.ds-bar-t b{display:block;font-size:17px;font-weight:700;color:var(--text);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ds-bar-t span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (min-width:1100px){.ds-bar{padding-inline:max(16px,calc((100vw - 1080px)/2 + 26px));}
  #root>div:has(>.bnav) .ds-bar,#root>div:has(>div>.bnav) .ds-bar{padding-inline:max(16px,calc((100vw - 236px - 1080px)/2 + 26px));}}
.ds-h{font-size:16.5px;font-weight:700;color:var(--text);margin:24px 2px 12px;}
.ds-scr .page>.ds-h:first-child{margin-top:6px;}
.ds-h-r{display:flex;align-items:baseline;justify-content:space-between;}
.ds-h-r .ds-h{margin-top:6px;}
.ds-link{background:none;border:none;color:var(--brand);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:4px;}
.ds-note{font-size:12.5px;color:var(--muted);line-height:1.75;margin:0 2px 10px;}
.ds-hint{font-size:12.5px;color:var(--warn);margin-top:10px;font-weight:500;}

/* اختيار وش يسوي */
.ds-modes{display:flex;flex-direction:column;gap:8px;}
.mode-btn.ds-mode{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:18px;border:1.5px solid var(--border);background:var(--bg2);color:var(--text);text-align:right;box-shadow:none;}
.mode-btn.ds-mode.on{border-color:var(--brand-d);background:var(--bg2);color:var(--text);box-shadow:0 0 0 3px var(--brand-soft);}
.ds-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;position:relative;}
.ds-mode.on .ds-radio{border-color:var(--brand-d);}
.ds-mode.on .ds-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand-d);}
/* التخصصات */
.ds-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ds-cats.off{opacity:.45;pointer-events:none;}
.ds-cats .spec-btn{justify-content:flex-start;gap:9px;background:var(--bg2);border:1.5px solid var(--border);padding:12px;color:var(--text);font-size:13.5px;}
.ds-cats .spec-btn .dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.ds-cats .spec-btn .n{margin-inline-start:auto;font-size:12px;opacity:1;color:var(--muted);font-weight:500;}
.ds-cats .spec-btn.on{border-color:var(--sc);background:color-mix(in srgb,var(--sc) 9%,var(--bg2));color:var(--text);box-shadow:none;}
.ds-cats .spec-btn:first-child{grid-column:1/-1;}
/* إعدادات الاختبار */
.ds-set{padding:16px;margin-top:14px;}
.ds-set-r{display:flex;align-items:baseline;justify-content:space-between;font-size:13.5px;color:var(--text2);margin-bottom:10px;}
.ds-set-r b{font-size:20px;font-weight:700;color:var(--text);}
.ds-set-r small{font-size:12px;color:var(--dim);}
.ds-set-t{display:block;font-size:15px;font-weight:600;margin-bottom:6px;}
.ds-min{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.ds-min input{width:72px;height:36px;padding:0 8px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:13px;text-align:center;}
.chip-btn{height:36px;padding:0 15px;border-radius:18px;border:1.5px solid var(--border);background:var(--bg2);color:var(--text2);font-size:13px;}
.tgl-row{background:var(--bg2);border-radius:16px;}
.big-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 18px;margin-top:18px;font-size:16px;}
.big-cta .pl{width:26px;height:26px;border-radius:50%;background:var(--cta-ic);color:var(--cta);display:grid;place-items:center;flex-shrink:0;}
.big-cta .pl svg{width:11px;height:11px;margin-left:-1px;}
.big-cta[disabled]{background:var(--border2);color:var(--muted);}
.big-cta[disabled] .pl{background:var(--bg3);color:var(--dim);}
.ds-info{border-radius:14px;background:var(--bg3);padding:4px 14px;margin:12px 0;}
.ds-info div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:13.5px;color:var(--muted);}
.ds-info div+div{border-top:1px solid var(--border);}
.ds-info b{color:var(--text);font-weight:600;text-align:left;}
/* أدلة المذاكرة */
.ds-guides{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.ds-gd{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;border-radius:16px;border:1px solid var(--border);background:var(--bg2);font-family:inherit;color:var(--text);cursor:pointer;}
.ds-gd .hp-sic{width:36px;height:36px;border-radius:11px;}
.ds-gd .hp-sic svg{width:18px;height:18px;}
.ds-gd b{font-size:12px;font-weight:600;line-height:1.3;}
.ds-gd small{font-size:10px;color:var(--dim);font-family:'Bricolage Grotesque','Readex Pro',sans-serif;}
.ds-gd .hp-badge.lk{top:6px;left:6px;width:20px;min-width:20px;height:20px;}
@media (max-width:380px){.ds-guides{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* التجميعات */
.ds-months{display:flex;flex-direction:column;gap:8px;}
.month-btn{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:16px;border:1.5px solid var(--border);background:var(--bg2);color:var(--text);font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;text-align:right;margin:0;}
.month-btn .chk{width:24px;height:24px;border-radius:8px;border:2px solid var(--border2);display:grid;place-items:center;color:transparent;flex-shrink:0;background:none;}
.month-btn .chk svg{width:13px;height:13px;}
.month-btn .nm{flex:1;min-width:0;}
.month-btn .cnt{font-size:12.5px;color:var(--muted);background:none;padding:0;border:none;}
.month-btn.on{border-color:var(--brand-d);background:var(--bg2);box-shadow:0 0 0 3px var(--brand-soft);color:var(--text);}
.month-btn.on .chk{background:var(--brand-d);border-color:var(--brand-d);color:#fff;}
.pool-bar{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--bg3);font-size:13.5px;color:var(--muted);border:none;}
.pool-bar b{font-size:16px;font-weight:700;color:var(--text);}
/* الألعاب */
.ds-game{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:16px;margin-bottom:10px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);box-shadow:var(--card-shadow);font-family:inherit;color:var(--text);cursor:pointer;text-align:right;}
.ds-game .hp-sic{width:52px;height:52px;border-radius:16px;}
.ds-game .hp-sic svg{width:26px;height:26px;}
.ds-game .hp-tx b{font-size:16px;}
.ds-play{flex-shrink:0;height:36px;padding:0 16px;border-radius:18px;background:var(--cta);color:var(--cta-t);display:grid;place-items:center;font-size:13.5px;font-weight:600;}
.ds-game.lock .ds-play{background:var(--bg3);color:var(--muted);}
.ds-why{padding:16px;margin-top:6px;}
.ds-why b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px;}
.ds-why p{font-size:13px;color:var(--muted);line-height:1.85;}
/* نافذة */
.ds-ov{position:fixed;inset:0;z-index:90;background:rgba(6,12,24,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;}
.ds-dlg{width:100%;max-width:440px;background:var(--bg2);border-radius:24px 24px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));text-align:center;animation:sheetUp .28s cubic-bezier(.2,.8,.3,1);}
.ds-dlg .hp-sic{width:52px;height:52px;border-radius:16px;}
.ds-dlg .hp-sic svg{width:26px;height:26px;}
.ds-dlg h3{font-size:19px;font-weight:700;}
.ds-dlg>p{font-size:13px;color:var(--muted);margin-top:2px;}
.ds-dlg .ds-info{text-align:right;}
.ds-dlg-acts{display:flex;gap:10px;margin-top:6px;}
.ds-dlg-acts .ds-btn{flex:1;}
.ds-dlg-acts .ds-btn.primary{flex:2;}
@media (min-width:640px){.ds-ov{align-items:center;padding:20px;}.ds-dlg{border-radius:24px;}}
/* توب 10 */
.lb-wrap{border-radius:20px;background:var(--bg2);border:1px solid var(--border);}
.lb-head{font-weight:700;}
.ds-intro{padding:14px 16px;border-radius:16px;background:var(--bg3);font-size:13.5px;line-height:1.9;color:var(--text2);margin-bottom:14px;}
.ds-intro b{color:var(--text);font-weight:600;}
.ds-tag{flex-shrink:0;font-size:12px;font-weight:600;padding:5px 10px;border-radius:12px;white-space:nowrap;}
.ds-tag.c-amber{color:var(--warn);}
.ds-next{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:12px;border-radius:14px;border:1px dashed var(--border2);background:none;color:var(--brand);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;}
.ds-next svg{width:15px;height:15px;}
.ds-seg{display:flex;gap:3px;padding:3px;border-radius:12px;background:var(--bg3);flex-shrink:0;}
.ds-seg button{height:32px;padding:0 11px;border-radius:9px;border:none;background:none;color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;}
.ds-seg button.on{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:var(--shadow);}
/* حسابي */
.sheet.ds-acct{background:var(--bg);padding:8px 16px calc(24px + env(safe-area-inset-bottom));}
.ds-acct .acct-head{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:14px;margin-bottom:4px;}
.ds-acct .acct-av{width:52px;height:52px;border-radius:50%;background:var(--navy);font-size:21px;font-weight:700;}
html[data-theme="dark"] .ds-acct .acct-av{background:#22365C;}
.acct-nm{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acct-edit{border:none;background:var(--bg3);border-radius:10px;padding:4px 10px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--brand);cursor:pointer;}
.ds-acct .acct-em{font-size:12px;font-weight:400;color:var(--muted);}
.acct-x{align-self:flex-start;width:36px;height:36px;}
.acct-x svg{width:17px;height:17px;}
.acct-t{font-size:12.5px;font-weight:600;color:var(--muted);margin:18px 6px 8px;}
.acct-grp{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:0 14px;overflow:hidden;}
.acct-grp+.acct-grp{margin-top:12px;}
.ds-acct .acct-row{gap:12px;padding:13px 0;font-size:14.5px;font-weight:500;border-bottom:1px solid var(--border);font-family:inherit;}
.ds-acct .acct-row:last-child{border-bottom:none;}
.ds-acct .acct-row .ic{width:34px;height:34px;border-radius:10px;background:var(--bg3);color:var(--text2);display:grid;place-items:center;flex-shrink:0;}
.ds-acct .acct-row .ic svg{width:18px;height:18px;}
.ds-acct .acct-row .lb{flex:1;min-width:0;text-align:right;}
.ds-acct .acct-row .v{font-size:12.5px;font-weight:500;color:var(--muted);margin:0;margin-inline-start:auto;white-space:nowrap;}
.ds-acct .acct-row .v small{display:block;font-size:11.5px;color:var(--dim);margin-top:1px;}
.ds-acct .acct-head .sub-chip{white-space:nowrap;}
.ds-acct .acct-head .sub-chip small{display:none;}
.ds-acct .acct-row .cv{width:15px;height:15px;color:var(--dim);flex-shrink:0;}
.ds-acct .acct-row.static{cursor:default;}
.ds-acct .acct-row.danger{color:var(--bad);justify-content:center;}
.ds-acct .acct-row.danger .ic{background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad);}
.ds-acct .acct-row.danger .lb{flex:0 0 auto;}

/* ═══ شاشة الاختبار ═══ */
.ds-sess .sess-top{padding:10px 14px 8px;padding-top:calc(10px + env(safe-area-inset-top));}
.ds-sess .sess-top-row{gap:10px;margin-bottom:9px;}
.ds-sess .ds-back svg{width:18px;height:18px;}
.sess-count{flex:1;font-size:14px;color:var(--muted);}
.sess-count b{font-size:16px;font-weight:700;color:var(--text);}
.sess-count em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--c-violet);background:var(--c-violet-s);padding:2px 8px;border-radius:9px;margin-inline-start:8px;}
.ds-sess .sess-timer{font-size:14px;font-weight:700;min-width:64px;height:36px;display:grid;place-items:center;border-radius:12px;border:none;background:var(--bg3);color:var(--text);font-variant-numeric:tabular-nums;}
.ds-sess .sess-timer.low{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);}
.ds-sess .sess-prog{height:5px;margin-bottom:8px;}
.ds-sess .sess-prog>div{background:var(--brand-d);}
.ds-sess .sess-sub-tools{display:flex;justify-content:space-between;gap:4px;}
.ds-sess .sess-sub-tools>button,.ds-sess .sess-sub-tools>.pl-star-t{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;border:none;border-radius:11px;background:none;color:var(--muted);font-family:inherit;font-size:11px;font-weight:500;cursor:pointer;}
.ds-sess .sess-sub-tools svg{width:19px;height:19px;}
.ds-sess .sess-sub-tools>button.on{color:var(--warn);background:var(--c-amber-s);}
.ds-sess .sess-sub-tools>.pl-star-t.on{color:var(--warn);background:var(--c-amber-s);}
.ds-sess .sess-body{padding:18px 16px;}
.qchip{font-size:12px;font-weight:600;padding:4px 11px;border-radius:12px;border:none;color:var(--cc,var(--brand));background:color-mix(in srgb,var(--cc,var(--brand-d)) 12%,transparent);}
html[data-theme="light"] .qchip{color:color-mix(in srgb,var(--cc,var(--brand)) 55%,#000);}
.rep-btn{display:inline-flex;align-items:center;gap:5px;border:none;background:none;color:var(--muted);font-family:inherit;font-size:12px;font-weight:500;padding:6px 4px;}
.rep-btn svg{width:15px;height:15px;color:var(--c-coral);}
.qcard{border-radius:20px;font-size:16px;line-height:1.85;font-weight:500;padding:20px;}
.opt-btn{align-items:center;padding:13px 14px;border-radius:16px;border:1.5px solid var(--border);}
.opt-btn .opt-l{min-width:32px;height:32px;border-radius:50%;font-weight:600;background:var(--bg3);color:var(--text2);margin:0;}
.opt-btn .opt-t{font-weight:500;color:var(--text);padding:0;}
.opt-btn.sel{border-color:var(--brand-d);background:color-mix(in srgb,var(--brand-d) 7%,var(--bg2));box-shadow:0 0 0 3px var(--brand-soft);}
.opt-btn.sel .opt-l{background:var(--brand-d);color:#fff;}
html[data-theme="light"] .opt-btn.sel .opt-l{background:var(--brand);}
html[data-theme="dark"] .opt-btn.sel .opt-l{background:var(--brand);color:#07121F;}
.opt-btn.sel .opt-t{font-weight:600;}
.chg-hint{font-size:12px;color:var(--muted);font-weight:500;margin-top:14px;}
.sess-nav{gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));}
.nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 16px;border-radius:15px;font-family:inherit;font-size:15px;font-weight:600;}
.nav-btn svg{width:18px;height:18px;}
.nav-btn.ghost{background:var(--bg3);border:none;color:var(--text);}
.nav-btn.ghost:disabled{opacity:.45;}
.nav-btn.primary{background:var(--cta);color:var(--cta-t);box-shadow:none;}
.nav-btn.primary.fin{background:var(--ok);color:#fff;box-shadow:none;}
html[data-theme="dark"] .nav-btn.primary.fin{background:#16a34a;}
.ds-break{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 22px;max-width:380px;margin:0 auto;}
.ds-break h2{font-size:22px;font-weight:700;}
.ds-break>p{font-size:13.5px;color:var(--muted);margin-top:4px;}
.ds-break-clock{font-size:58px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;margin:18px 0;}
.ds-break-r{width:100%;padding:16px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.ds-break-r span{font-size:12.5px;color:var(--muted);}
.ds-break-r b{font-size:30px;font-weight:700;}
.ds-break-r small{font-size:12.5px;color:var(--muted);}
.ds-break .big-cta{width:100%;}

/* ═══ المذاكرة (بطاقات) ═══ */
.study-top-row{gap:10px;padding:10px 14px 8px;padding-top:calc(10px + env(safe-area-inset-top));}
.study-top-row .ds-back{width:38px;height:38px;}
.study-top-row .ds-back svg{width:18px;height:18px;}
.study-title{display:flex;flex-direction:column;min-width:0;}
.study-title b{color:var(--text);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.study-title small{font-size:12px;color:var(--muted);font-weight:400;}
.study-top-row .ds-seg button{display:inline-flex;align-items:center;gap:5px;padding:0 9px;}
.study-top-row .ds-seg svg{width:15px;height:15px;}
@media (max-width:380px){.study-top-row .ds-seg span{display:none;}}
.fchip{height:34px;padding:0 13px;font-size:12.5px;font-weight:500;color:var(--text2);background:var(--bg2);}
.scard{border-radius:20px;box-shadow:var(--card-shadow);}
.sc-top{background:var(--bg2);padding:10px 12px 10px 8px;}
.sc-top::before{display:none;}
.sc-num{background:var(--bg3);color:var(--text);box-shadow:none;font-weight:600;border-radius:10px;}
.sc-cat{font-weight:600;}
.sc-tools{gap:0;}
.sc-tools button,.sc-tools .pl-star{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:10px;color:var(--dim);}
.sc-tools svg{width:18px;height:18px;}
.sc-tools button.on{color:var(--c-blue);}
.sc-tools button.rep{color:var(--c-coral);opacity:.8;}
.sc-q{font-weight:500;font-size:15px;}
.ds-expl-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:12px;border:none;background:var(--c-violet-s);color:var(--c-violet);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.ds-expl-btn svg{width:15px;height:15px;}
.ds-note-pv{display:flex;align-items:flex-start;gap:7px;width:calc(100% - 32px);margin:8px 16px 0;padding:9px 12px;border-radius:12px;border:none;background:var(--c-blue-s);color:var(--c-blue);font-family:inherit;font-size:12.5px;text-align:right;cursor:pointer;}
.ds-note-pv svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;}
.sc-opt{border-radius:14px;}
.sc-l{border-radius:50%;font-weight:600;}
.sc-o{color:var(--text);}
.sc-show{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:500;color:var(--muted);}
.sc-show svg{width:16px;height:16px;}
.ds-more{width:100%;min-height:46px;border-radius:14px;border:1px dashed var(--border2);background:none;color:var(--text2);font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;}
.expl-head{font-weight:600;}
.expl-h{font-weight:600;}
/* أزرار عائمة */
.ds-fab{position:fixed;z-index:60;bottom:calc(16px + env(safe-area-inset-bottom));width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px -6px rgba(16,28,51,.35);}
.ds-fab svg{width:22px;height:22px;}
.ds-pen{left:14px;border:1px solid var(--border);background:var(--bg2);color:var(--text);}
.ds-search{right:14px;z-index:340;border:none;background:var(--cta);color:var(--cta-t);}
.ds-draw{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:6px;padding:8px;border-radius:20px;background:var(--bg2);border:1px solid var(--border);box-shadow:0 10px 30px -8px rgba(16,28,51,.35);max-width:560px;margin:0 auto;}
.ds-draw>button[data-tool]{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 11px;border-radius:13px;border:none;background:var(--bg3);color:var(--text2);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;}
.ds-draw>button[data-tool] svg{width:17px;height:17px;}
.ds-draw>button[data-tool].on{background:var(--cta);color:var(--cta-t);}
.ds-cols{gap:7px;align-items:center;padding:0 6px;}
.ds-cols button{width:22px;height:22px;border-radius:50%;border:2px solid var(--bg2);box-shadow:0 0 0 1.5px var(--border2);padding:0;cursor:pointer;}
.ds-cols button.on{box-shadow:0 0 0 2.5px var(--text);}
.ds-draw-x{margin-inline-start:auto;width:40px;height:40px;border-radius:13px;border:none;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;}
.ds-draw-x svg{width:18px;height:18px;}
@media (max-width:400px){.ds-draw>button[data-tool] span{display:none;}}

/* ═══ النتيجة ═══ */
.ds-res .res-hero{padding:30px 20px 18px;}
.ds-res .res-hero.pass{background:radial-gradient(560px 240px at 50% -60px,color-mix(in srgb,var(--ok) 16%,transparent),transparent);}
.ds-res .res-hero.fail{background:radial-gradient(560px 240px at 50% -60px,color-mix(in srgb,var(--bad) 12%,transparent),transparent);}
.ds-res-mode{display:inline-block;font-size:12px;font-weight:500;color:var(--muted);background:var(--bg2);border:1px solid var(--border);padding:5px 12px;border-radius:14px;margin-bottom:16px;}
.res-ring .rr-val{stroke-width:10;}
.res-ring .rr-bg{stroke-width:10;}
.res-pct{font-weight:700;}
.res-verdict{font-weight:700;}
.ds-res .res-hero.pass .res-verdict{color:var(--ok);}
.ds-res .res-hero.fail .res-verdict{color:var(--text);}
.ds-cheer{font-size:14px;color:var(--text2);margin-top:6px;line-height:1.7;}
.ds-res-tags{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.ds-res-tags span{font-size:12px;font-weight:600;padding:5px 12px;border-radius:14px;background:var(--bg2);border:1px solid var(--border);color:var(--muted);}
.ds-res .res-stats{grid-template-columns:repeat(4,1fr);gap:8px;}
.ds-res .res-stat{padding:12px 6px;border-radius:16px;}
.ds-res .res-stat i{display:block;width:8px;height:8px;border-radius:50%;margin:0 auto 6px;}
.ds-res .res-stat b{font-size:17px;font-weight:700;margin:0;}
.ds-res .res-stat span{font-size:11.5px;color:var(--muted);font-weight:500;}
.ds-res-bar{padding:14px 16px;}
.ds-res-bar .r{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px;color:var(--text2);}
.ds-res-bar .r b{font-weight:600;}
.ds-res-bar .t{position:relative;height:8px;border-radius:6px;background:var(--track);}
.ds-res-bar .t i{display:block;height:100%;border-radius:6px;}
.ds-res-bar .t em{position:absolute;top:-4px;bottom:-4px;left:30%;width:2px;background:var(--text);opacity:.35;border-radius:2px;}
.ds-res-bar .l{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:7px;}
.ds-res-cat{padding:16px;}
.ds-res-cat .h{display:block;font-size:15px;font-weight:600;margin-bottom:12px;}
.ds-res-cat .row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ds-res-cat .row i{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.ds-res-cat .row .n{width:92px;font-size:13px;color:var(--text2);}
.ds-res-cat .row .t{flex:1;height:7px;border-radius:5px;background:var(--track);overflow:hidden;}
.ds-res-cat .row .t div{height:100%;border-radius:5px;}
.ds-res-cat .row b{font-size:13px;font-weight:600;min-width:40px;text-align:left;}
.ds-res-cat .row small{font-size:11px;color:var(--dim);min-width:44px;text-align:left;}
.ds-res .big-cta{margin-top:4px;}
.ds-res-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ds-res .res-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:0 10px;border-radius:15px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-family:inherit;font-size:14px;font-weight:500;}
.ds-res .res-btn svg{width:17px;height:17px;}
.ds-res .res-btn.ghost{background:none;color:var(--muted);}
/* مؤقت المذاكرة */
.ds-stimer{padding:6px 14px 10px;}
.ds-stimer .r{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ds-stimer .r.t{margin-top:8px;}
.ds-stimer .ic{width:30px;height:30px;border-radius:10px;background:var(--bg3);color:var(--text2);display:grid;place-items:center;}
.ds-stimer .ic svg{width:16px;height:16px;}
.ds-stimer .lb{font-size:12.5px;color:var(--muted);margin-inline-end:2px;}
.ds-stimer button{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;}
.ds-stimer button.on{background:var(--cta);border-color:var(--cta);color:var(--cta-t);}
.ds-stimer .clk{font-size:19px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;min-width:64px;}
.ds-stimer .clk.low{color:var(--bad);}
.ds-stimer button.go{background:var(--ok);border-color:var(--ok);color:#fff;}
.ds-stimer button.go.pause{background:var(--c-amber);border-color:var(--c-amber);color:#16212D;}
html[data-theme="dark"] .ds-stimer button.go{color:#07121F;}
.ds-stimer button.ic-b{width:32px;padding:0;display:grid;place-items:center;}
.ds-stimer button.ic-b svg{width:15px;height:15px;}
.ds-stimer input{width:70px;height:32px;padding:0 8px;border-radius:16px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-family:inherit;font-size:12.5px;text-align:center;}
/* مراجعة الأسئلة */
.ds-rv{background:var(--bg2);border:1px solid var(--border);border-radius:20px;margin-bottom:12px;overflow:hidden;box-shadow:var(--card-shadow);}
.ds-rv.bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--border));}
.ds-rv.ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--border));}
.ds-rv-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);}
.ds-rv-st{display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;font-size:12.5px;font-weight:600;color:var(--muted);}
.ds-rv-st svg{width:14px;height:14px;}
.ds-rv.ok .ds-rv-st{color:var(--ok);}.ds-rv.bad .ds-rv-st{color:var(--bad);}
.ds-rv-q{padding:14px 16px 8px;font-size:14.5px;line-height:1.8;color:var(--text);}
.ds-rv-o{padding:4px 14px 14px;display:flex;flex-direction:column;gap:8px;}
/* الأدلة */
.ds-gtop{position:sticky;top:0;z-index:40;background:var(--bg-blur);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.ds-gtop .ds-bar{position:static;border:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.ds-gtabs{display:flex;gap:6px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none;}
.ds-gtabs::-webkit-scrollbar{display:none;}
.ds-gtabs button{flex-shrink:0;height:36px;padding:0 15px;border-radius:18px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;}
.ds-gtabs button.on{border-color:transparent;font-weight:600;}
.ds-resume{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:12px;border-radius:18px;background:var(--bg2);border:1px solid var(--border);box-shadow:var(--card-shadow);}
.ds-resume .go{height:36px;padding:0 13px;border-radius:12px;border:none;background:var(--cta);color:var(--cta-t);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.ds-resume .x{width:32px;height:32px;border-radius:50%;border:none;background:none;color:var(--dim);display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.ds-resume .x svg{width:16px;height:16px;}
/* أزرار الراس على الخلفية البيج: بيضاء بحد خفيف (مثل التصميم الأول) */
html[data-theme="light"] .hp-ib,html[data-theme="light"] .ds-back,html[data-theme="light"] .icon-btn{background:var(--bg2);box-shadow:0 0 0 1px var(--border) inset;}
html[data-theme="light"] .ds-seg{background:#EBE5DA;}
html[data-theme="light"] .hp-head,html[data-theme="light"] .ds-bar,html[data-theme="light"] .sess-top,html[data-theme="light"] .study-top,html[data-theme="light"] .ds-gtop{background:#F5F2EC;}
html[data-theme="light"] .bnav{background:#FFFFFF;}
.hp-help-row{width:100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 14px;border-radius:18px;border:1px solid var(--border);background:var(--bg2);font-family:inherit;color:var(--text);cursor:pointer;text-align:right;}
.hp-help-row .hp-chev{margin-top:0;}
.lb-head{font-size:15.5px;font-weight:700;}
.lb-head small{font-size:12px;font-weight:400;color:var(--muted);}
.lb-name{font-size:13.5px;font-weight:500;color:var(--text);}
.lb-score{font-weight:700;}
.lb-rank{font-weight:600;}
/* بطاقة «بصمة يومك» للتجربة بنفس النظام */
.dp-card{border-radius:22px;border-inline-start-width:1px;box-shadow:var(--card-shadow);}
.dp-title{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;}
.dp-text{font-weight:500;}
/* الآيباد بالطول: المحتوى أعرض شوي، والراس على نفس حدوده */
@media (min-width:700px) and (max-width:1099px){
  .page:not(.hp-page){max-width:720px;}
  .ds-bar{padding-inline:max(16px,calc((100vw - 720px)/2 + 14px));}
}
@media (min-width:700px) and (max-width:899px){
  .hp-page{max-width:720px;}
  .hp-head{padding-inline:max(16px,calc((100vw - 720px)/2 + 14px));}
}
.ds-cats{grid-template-columns:repeat(2,minmax(0,1fr));}
.ds-cats .spec-btn{min-width:0;}
.ds-cats .spec-btn>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:350px){.ds-cats .spec-btn{padding:11px 9px;font-size:12.5px;gap:6px;}}

/* ═══ الإجابة والشرح بالمذاكرة والمراجعة (الشرح ما يطلع إلا بطلب) ═══ */
.sc-ans.rx-res{display:flex;align-items:center;gap:11px;margin-top:12px;padding:10px 10px 10px 12px;border-radius:16px;background:color-mix(in srgb,var(--ok) 8%,var(--bg2));border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color:var(--text);font-size:inherit;font-weight:inherit;}
.sc-ans.rx-res.bad{background:color-mix(in srgb,var(--bad) 7%,var(--bg2));border-color:color-mix(in srgb,var(--bad) 28%,transparent);}
.sc-ans.rx-res.show{background:var(--bg3);border-color:var(--border);}
.rx-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;flex-shrink:0;}
.rx-res.bad .rx-ic{background:var(--bad);}
.rx-res.show .rx-ic{background:var(--brand);}
.rx-ic svg{width:16px;height:16px;}
.rx-rt{flex:1;min-width:0;}
.rx-rt b{display:block;font-size:14px;font-weight:700;color:var(--text);line-height:1.5;}
.rx-rt small{display:block;font-size:12.5px;color:var(--text2);line-height:1.55;margin-top:1px;unicode-bidi:plaintext;text-align:start;}
.rx-undo{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg2);color:var(--muted);display:grid;place-items:center;cursor:pointer;flex-shrink:0;padding:0;}
.rx-undo svg{width:16px;height:16px;}
/* زر «وريني الشرح» و«اشرح لي بالعربي» (31 أكتوبر، تصميم جديد): ألوان ثابتة من التوكنز، وبدون أي حركة أو فلتر أو شفافية وقت الضغط والفتح */
.rx-open,.gd-ar{width:100%;min-height:50px;display:flex;align-items:center;gap:11px;margin-top:10px;padding:8px 14px;padding-inline-start:9px;border-radius:16px;border:1px solid var(--border2);background:var(--bg2);color:var(--text);font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;text-align:start;cursor:pointer;transition:none;}
.gd-ar{margin-top:8px;}
.rx-open>span,.gd-ar>span{flex:1;min-width:0;}
.rx-oi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-style:normal;background:var(--c-blue);color:#fff;}
.gd-ar .rx-oi{background:var(--c-amber);}
html[data-theme="dark"] .rx-oi{color:#07121F;}
.rx-oi svg{width:17px;height:17px;display:block;}
.rx-oc{display:grid;place-items:center;flex-shrink:0;font-style:normal;color:var(--muted);}
.rx-oc svg{width:16px;height:16px;display:block;transform:rotate(-90deg);}
.rx-open.on .rx-oc svg,.gd-ar.on .rx-oc svg{transform:rotate(90deg);}
.rx-open.on,.gd-ar.on{background:var(--bg3);border-color:var(--border);}
.rx-open:not(:disabled):active,.gd-ar:not(:disabled):active{transform:none;filter:none;background:var(--bg3);}
.rx-wrap{margin-top:10px;}
.rx-wrap[hidden]{display:none;}
.expl-card.rx{border:none;background:none;margin:0;overflow:visible;border-radius:0;}
.rx p{margin:0;font-size:13.5px;line-height:1.95;color:var(--text2);}
.rx-ok{padding:14px 15px;border-radius:16px;background:var(--bg2);border:1px solid color-mix(in srgb,var(--ok) 32%,var(--border));border-inline-start:4px solid var(--ok);}
.rx-ok.rx-plain{border-inline-start-color:var(--c-blue);border-color:var(--border);font-size:13.5px;line-height:1.95;color:var(--text2);}
.rx-h{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.rx-h b,.rx-wh b{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.45;unicode-bidi:plaintext;}
.rx-l{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--bg3);color:var(--text2);flex-shrink:0;}
.rx-l.ok{background:var(--ok);color:#fff;}
.rx-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.rx-steps span{font-size:12.5px;padding:5px 10px;border-radius:10px;background:var(--bg3);color:var(--text);line-height:1.55;}
.rx-steps i{font-style:normal;color:var(--dim);font-size:13px;}
.rx-sec{font-size:12.5px;font-weight:600;color:var(--muted);margin:16px 4px 2px;}
.rx-w{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:14px;background:var(--bg2);border:1px solid var(--border);margin-top:7px;}
.rx-w .rx-l{margin-top:2px;}
.rx-wt{flex:1;min-width:0;}
.rx-wh{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:3px;}
.rx-wh b{font-size:13.5px;font-weight:600;}
.rx-w p{font-size:13px;line-height:1.85;}
.rx-w.mine{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 5%,var(--bg2));}
.rx-w.mine .rx-l{background:var(--bad);color:#fff;}
.rx-tag{font-size:11px;font-weight:600;color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);padding:1px 8px;border-radius:8px;}
.rx-rule{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--c-amber-s);border:1px solid color-mix(in srgb,var(--c-amber) 30%,transparent);}
.rx-ri{color:var(--warn);flex-shrink:0;margin-top:2px;}
.rx-ri svg{width:19px;height:19px;}
.rx-rule b{display:block;font-size:12.5px;font-weight:700;color:var(--warn);margin-bottom:2px;}
.rx-rule p{color:var(--text);font-weight:500;}
.rx-more{margin-top:10px;padding:0 4px;}
.rx-wrap .xh-wait{margin-top:0;}
html[data-theme="dark"] .rx-ic,html[data-theme="dark"] .rx-l.ok,html[data-theme="dark"] .rx-w.mine .rx-l{color:#07121F;}
html[data-theme="dark"] .rx-res.show .rx-ic{color:#07121F;}
/* رابط داخل سطر بالخطة (الملخص الذهبي) */
.pl-inl{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.pl-today .pl-inl{color:#5eead4;}

/* ═══ الجولة التعريفية: تأشير على الشاشة نفسها مع دبّوس وشذى ═══ */
.tour-ov{position:fixed;inset:0;z-index:300;transition:background .3s,opacity .2s;}
.tour-ov.dim{background:rgba(6,12,24,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.tour-ov.out{opacity:0;}
.tour-hole{position:fixed;top:50%;left:50%;width:0;height:0;border-radius:24px;box-shadow:0 0 0 9999px rgba(6,12,24,.74);outline:2px solid #35C8B4;outline-offset:2px;pointer-events:none;transition:top .38s cubic-bezier(.3,.8,.3,1),left .38s cubic-bezier(.3,.8,.3,1),width .38s cubic-bezier(.3,.8,.3,1),height .38s cubic-bezier(.3,.8,.3,1),opacity .25s;}
.tour-hole::after{content:'';position:absolute;inset:-7px;border-radius:inherit;border:2px solid rgba(53,200,180,.55);animation:tourPulse 1.7s ease-out infinite;}
.tour-hole.off{opacity:0;}
@keyframes tourPulse{0%{opacity:.9;transform:scale(1);}100%{opacity:0;transform:scale(1.05);}}
.tour-pop{position:fixed;z-index:2;width:min(380px,calc(100vw - 32px));background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:24px;padding:16px 18px 16px;box-shadow:0 22px 60px rgba(4,10,20,.38);animation:tpIn .34s cubic-bezier(.2,.9,.3,1.15) both;}
.tour-pop.center{left:0!important;right:0!important;top:0!important;bottom:0;margin:auto;height:max-content;padding-top:4px;text-align:center;}
@keyframes tpIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.tp-m{position:absolute;top:-64px;left:16px;width:62px;height:auto;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));animation:tpBob 2.6s ease-in-out infinite;}
.tour-pop.up .tp-m{top:-64px;}
@keyframes tpBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.tp-hero{display:flex;justify-content:center;align-items:flex-end;height:150px;margin:-92px auto 6px;pointer-events:none;}
.tp-big{height:150px;width:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.25));animation:tpBob 2.8s ease-in-out infinite;}
.tp-hero.two .tp-big{height:132px;margin:0 -10px;}
.tp-hero.two .tp-big:last-child{animation-delay:-1.4s;}
.tp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.tour-pop:not(.center) .tp-top{padding-left:66px;}
.tp-n{font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-soft);padding:3px 10px;border-radius:10px;font-variant-numeric:tabular-nums;}
.tp-skip{background:none;border:none;font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;padding:6px 2px;}
.tp-skip:empty{display:none;}
.tp-t{margin:2px 0 6px;font-size:19px;font-weight:700;line-height:1.4;color:var(--text);}
.tp-d{margin:0;font-size:14px;line-height:1.9;color:var(--text2);}
.tour-pop:not(.center) .tp-t,.tour-pop:not(.center) .tp-d{text-align:right;}
.tp-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 2px;}
.tp-tools span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--text2);}
.tp-tools b{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--bg3);color:var(--text);}
.tp-tools b svg{width:19px;height:19px;}
.tp-dots{display:flex;justify-content:center;gap:5px;margin:14px 0 12px;}
.tp-dots i{width:6px;height:6px;border-radius:3px;background:var(--border2);transition:width .3s,background .3s;}
.tp-dots i.done{background:color-mix(in srgb,var(--brand-d) 55%,transparent);}
.tp-dots i.on{width:20px;background:var(--brand-d);}
.tp-acts{display:flex;gap:8px;}
.tp-prev{width:50px;flex-shrink:0;border-radius:16px;border:1px solid var(--border);background:var(--bg3);color:var(--text);display:grid;place-items:center;cursor:pointer;}
.tp-prev svg{width:18px;height:18px;}
.tp-next{flex:1;height:50px;border-radius:16px;border:none;background:var(--cta);color:var(--cta-t);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;}
@media (prefers-reduced-motion:reduce){.tour-pop,.tp-m,.tp-big,.tour-hole::after{animation:none;}.tour-hole{transition:none;}}
html.touring body{padding-bottom:70vh;}
/* توب 10: تبويب الأسبوع والمحاكاة */
.lb-tabs{display:flex;margin:0 0 12px;}
.lb-tabs button{flex:1;}
.lb-you{color:var(--brand);font-size:10.5px;font-weight:600;}
.lb-u{font-size:11px;font-weight:500;color:var(--dim);}
#lbBody .lb-wrap{border:none;padding:0;margin:0;box-shadow:none;background:none;}
#lbBody .lb-row{padding:8px 10px;}
.lb-empty{text-align:center;color:var(--muted);font-size:13px;line-height:1.8;padding:16px 8px;}
.lb-gap{text-align:center;color:var(--dim);letter-spacing:3px;margin:2px 0;}
.lb-tip{text-align:center;font-size:12.5px;color:var(--text2);margin-top:10px;line-height:1.7;}

/* ═══ الملخص الذهبي ═══ */
.hp-gold{position:relative;width:100%;display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--c-amber) 35%,var(--border));background:linear-gradient(135deg,var(--c-amber-s),var(--bg2) 70%);font-family:inherit;color:var(--text);cursor:pointer;text-align:right;box-shadow:var(--card-shadow);}
.hp-gold .hp-chev{margin-top:0;}
.hp-gold .hp-badge.lk{top:8px;left:8px;}
.gd-hero{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:linear-gradient(135deg,var(--c-amber-s),var(--bg2) 75%);border:1px solid color-mix(in srgb,var(--c-amber) 30%,var(--border));margin-bottom:12px;}
.gd-hero img{width:58px;height:auto;flex-shrink:0;}
.gd-hero b{display:block;font-size:17px;font-weight:700;color:var(--text);}
.gd-hero span{display:block;font-size:12.5px;line-height:1.75;color:var(--text2);margin-top:2px;}
.gd-search{display:flex;align-items:center;gap:9px;height:46px;padding:0 14px;border-radius:14px;background:var(--bg2);border:1px solid var(--border);color:var(--muted);margin-bottom:10px;}
.gd-search svg{width:18px;height:18px;flex-shrink:0;}
.gd-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--text);}
.gd-specs{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.gd-specs::-webkit-scrollbar{display:none;}
.gd-specs button{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:18px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;}
.gd-specs button small{font-size:11px;color:var(--dim);}
.gd-specs button.on{background:var(--cta);border-color:var(--cta);color:var(--cta-t);}
.gd-specs button.on small{color:inherit;opacity:.75;}
.gd-count{font-size:12px;color:var(--muted);margin:6px 2px 10px;}
.gd-card{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:15px 16px;margin-bottom:12px;box-shadow:var(--card-shadow);}
.gd-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.gd-t{margin:0 0 10px;font-size:16px;font-weight:700;line-height:1.45;color:var(--text);text-align:left;}
.gd-draw{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:15px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);font-family:inherit;font-size:12px;cursor:pointer;}
.gd-draw svg{width:14px;height:14px;}
.gd-draw.on{background:var(--c-teal-s);color:var(--c-teal);border-color:color-mix(in srgb,var(--c-teal) 35%,transparent);}
.gd-fig{position:relative;border-radius:14px;overflow:hidden;margin:10px 0;border:1px solid var(--border);}
.gd-fig img{width:100%;display:block;}
.gd-fig.svg{background:#fff;padding:12px;}
.gd-e{margin-top:10px;padding:13px 14px;border-radius:14px;background:var(--bg3);font-size:13.5px;line-height:1.95;color:var(--text);direction:rtl;}
.gd-e[hidden]{display:none;}
.tour-pop.still{animation:none;}
.tour-hole.still{transition:none;}

/* ═══ الشخصيات ٢ (31 أكتوبر، الشخصيات ٢): دبّوس وشذى بأماكن مختارة ═══
   شخصية وحدة بالشاشة (m2Guard بـ app.html). دخلة وحدة قصيرة (m2In) ما تتكرر، والضغطة نطّة ناعمة (WAAPI بـ app.html) وفقاعة (.m2-bub) تختفي بعد ثانيتين ونص.
   بدون أي حركة تعيد نفسها، و«تقليل الحركة» يوقف الحركة كلها. الإطفاء من MASCOTS2_ON بـ app.html. */
.m2{display:block;height:auto;max-width:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transform-origin:50% 100%;filter:drop-shadow(0 6px 10px rgba(16,28,51,.16));animation:m2In .42s cubic-bezier(.2,.9,.3,1.25) both;}
html[data-theme="dark"] .m2{filter:drop-shadow(0 8px 14px rgba(0,0,0,.42));}
.m2.still{animation:none;}
.m2.m2-off{visibility:hidden;}
@keyframes m2In{from{opacity:0;transform:translateY(16px) scale(.88);}to{opacity:1;transform:none;}}
/* الفقاعة (فوق الشخصية، ولو ما فيه مكان تحتها) */
.m2-bub{position:fixed;z-index:10001;max-width:min(250px,calc(100vw - 16px));padding:9px 14px;border-radius:16px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;line-height:1.6;text-align:center;box-shadow:0 12px 28px -10px rgba(6,12,24,.5);pointer-events:none;animation:m2Bub .2s ease-out both;}
.m2-bub::after{content:'';position:absolute;top:100%;left:var(--tx,50%);margin-left:-7px;border:7px solid transparent;border-top-color:var(--navy);}
.m2-bub.dn::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--navy);}
.m2-bub.lt::after{top:var(--ty,50%);left:auto;right:100%;margin:-7px 0 0;border-top-color:transparent;border-right-color:var(--navy);}
html[data-theme="dark"] .m2-bub{background:#22365C;box-shadow:0 12px 28px -10px rgba(0,0,0,.7);}
html[data-theme="dark"] .m2-bub::after{border-top-color:#22365C;}
html[data-theme="dark"] .m2-bub.dn::after{border-top-color:transparent;border-bottom-color:#22365C;}
html[data-theme="dark"] .m2-bub.lt::after{border-top-color:transparent;border-right-color:#22365C;}
@keyframes m2Bub{from{opacity:0;transform:translateY(5px) scale(.95);}to{opacity:1;transform:none;}}
/* ترحيب الرئيسية والإنجاز: الشخصية تطلع من طرف البطاقة (نفس روح .fl-mz و .hp-peek) */
.m2-hi{position:relative;display:flex;align-items:center;min-height:82px;margin-top:10px;padding:14px 16px 14px 108px;border-radius:20px;border:1px solid var(--border);background:radial-gradient(160px 120px at 58px 100%,var(--m2-t,var(--c-teal-s)),transparent 72%),var(--bg2);box-shadow:var(--card-shadow);}
.m2-hi.am{--m2-t:var(--c-amber-s);}
.m2-hi.pm{--m2-t:var(--c-teal-s);}
.m2-hi.nt{--m2-t:var(--c-violet-s);}
.m2-hi .m2-hi-m{position:absolute;left:14px;bottom:0;height:98px;width:auto;}
.m2-hi-tx{flex:1;min-width:0;}
.m2-hi-tx b{display:block;font-size:15px;font-weight:700;line-height:1.45;color:var(--text);}
.m2-hi-tx span{display:block;font-size:12.5px;line-height:1.7;color:var(--text2);margin-top:2px;}
.m2-ms{--m2-t:var(--c-amber-s);padding-right:48px;border-color:color-mix(in srgb,var(--c-amber) 45%,var(--border));background:radial-gradient(170px 130px at 58px 100%,var(--c-amber-s),transparent 72%),linear-gradient(135deg,var(--bg2) 55%,var(--c-amber-s));}
.m2-ms .m2-hi-tx b{color:var(--warn);}
html[data-theme="dark"] .m2-ms .m2-hi-tx b{color:var(--c-amber);}
.m2-x{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;border-radius:50%;border:none;background:var(--bg3);color:var(--muted);display:grid;place-items:center;cursor:pointer;}
.m2-x svg{width:14px;height:14px;}
.m2-x::before{content:'';position:absolute;inset:-6px;} /* منطقة الضغط 44 */
@media (max-width:360px){.m2-hi{padding-left:94px;}.m2-hi .m2-hi-m{height:88px;left:10px;}.m2-hi-tx b{font-size:14.5px;}}
/* دبّوس اللي يطل فوق «أنت هنا» انشال لما الشخصيات ٢ شغالة، فالمسافة فوق الخطوة ترجع عادية */
.hp-st:has(+.hp-st.now[data-m2np]) .hp-row{padding-bottom:22px;}
.hp-plan>.hp-st.now[data-m2np]:first-child{margin-top:0;}
/* كأس شذى بآخر الخطة يختفي بهدوء وقت ما شخصية ثانية على الشاشة (m2-vis من m2Guard) */
.hp-trophy{transition:opacity .3s;}
html.m2-vis .hp-trophy{opacity:0;}
/* شاشة النتيجة: الشخصية واقفة جنب الدائرة، برا حدودها */
.m2-res{position:absolute;right:calc(100% + 6px);bottom:-2px;height:96px;width:auto;}
@media (max-width:360px){.m2-res{height:78px;right:calc(100% + 2px);}}
/* نهاية الألعاب (البطاقة دايم داكنة) */
.m2-game{height:112px;width:auto;margin:-8px auto 10px;}
.gcard2 .m2-game,.pcard2 .m2-game{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));}
/* تنبيه حد الشرح والشبكة: الشخصية على الطرف والنص يلف حولها */
.xh-wait:has(>.m2){display:flow-root;}
.xh-wait[data-st="lim"],.xh-wait[data-st="net"]{display:flow-root;} /* نفسها بالمتصفحات اللي ما تدعم :has (الصورة float) */
.xh-wait .m2-xh{float:left;height:64px;width:auto;margin:-4px 0 2px 10px;}
.xh-wait .m2.m2-off{display:none;}
/* الحالات الفاضية (التنبيهات، البحث) */
.m2-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px 22px;}
.m2-empty .m2-em{height:88px;width:auto;margin-bottom:10px;}
.m2-empty.sm{padding:16px 12px 14px;}
.m2-empty.sm .m2-em{height:72px;}
.m2-empty b{font-size:15px;font-weight:700;color:var(--text);}
.m2-empty span{font-size:12.5px;color:var(--muted);line-height:1.75;margin:4px 0 14px;max-width:270px;}
.m2-empty .ds-btn{min-height:44px;padding:0 22px;font-size:14px;}
/* نافذة الحالة الفاضية (أخطائي، المحفوظة): الشخصية تطل فوق النافذة */
.m2-dlg{height:96px;width:auto;margin:-74px auto 6px;}
/* ورقة الاشتراك ونهاية التجربة */
.pw-head .m2-pw{height:66px;width:auto;margin:-8px 0 -6px;margin-inline-start:auto;flex-shrink:0;}
.trial-end .m2-te{height:92px;width:auto;margin:-4px auto 8px;}
@media (prefers-reduced-motion:reduce){.m2,.m2.m2-hop,.m2-bub{animation:none;}.hp-trophy{transition:none;}}
/* (31 أكتوبر بالليل) مزاج الشخصية لما تنضغط: تشك 🤨، تعصّب 😤 (فقاعة حمرا ورجفة)، تروح تجيب قهوة وترجع، وحركة خفيفة بالرئيسية */
.m2.m2-gone{opacity:0;} /* (ما نقفل الضغط عليها: لو قفلناه، الضغطة تروح للي تحتها، مثل خلفية النافذة فتتسكّر. m2Tap يتجاهلها وهي ماشية) */
/* (31 أكتوبر بالليل) حركة الضغط والمشي صارت بـ WAAPI في app.html (تبدأ من وين وقفت اللي قبلها، فما تنقطع). الكلاسات (m2-hop وm2-sus وm2-mad وm2-dizzy وm2-away وm2-back وm2-wig) علامات بس */
.m2-bub.mad{background:#c8402e;}
.m2-bub.mad::after{border-top-color:#c8402e;}
.m2-bub.mad.dn::after{border-top-color:transparent;border-bottom-color:#c8402e;}
.m2-bub.mad.lt::after{border-top-color:transparent;border-right-color:#c8402e;}
html[data-theme="dark"] .m2-bub.mad{background:#b23a2a;}
html[data-theme="dark"] .m2-bub.mad::after{border-top-color:#b23a2a;}
html[data-theme="dark"] .m2-bub.mad.dn::after{border-top-color:transparent;border-bottom-color:#b23a2a;}
html[data-theme="dark"] .m2-bub.mad.lt::after{border-top-color:transparent;border-right-color:#b23a2a;}
.m2-fx{position:fixed;z-index:10002;pointer-events:none;font-size:22px;line-height:1;animation:m2Fx 1s ease-out both;}
@keyframes m2Fx{0%{transform:translate(-50%,0) scale(.5);opacity:0;}20%{transform:translate(-50%,-10px) scale(1.15);opacity:1;}100%{transform:translate(calc(-50% + var(--dx,0px)),-52px) scale(.9);opacity:0;}}
.m2-bub.mv{transition:left .16s ease-out,top .16s ease-out;}
/* «لسا هنا؟»: تطل من طرف الشاشة */
.m2-peek{position:fixed;right:0;top:44%;z-index:9990;pointer-events:none;-webkit-user-select:none;user-select:none;} /* ما تمسك الضغط: اللي تحتها ينضغط عادي، وأي لمسة ترجّعها */
.m2-peek img{display:block;height:104px;width:auto;filter:drop-shadow(-4px 6px 10px rgba(16,28,51,.18));}
html[data-theme="dark"] .m2-peek img{filter:drop-shadow(-4px 8px 14px rgba(0,0,0,.45));}
@media (prefers-reduced-motion:reduce){.m2-fx{animation:none;}.m2.m2-away{visibility:hidden;}.m2-bub.mv{transition:none;}.m2-peek{display:none;}}
/* (31 أكتوبر) العميل خفّى دبّوس وشذى من «حسابي» (mascApply بـ app.html): احتياط فوق شروط الكود، يشمل شخصيات المرحلة الأولى والملخص الذهبي. الجولة التعريفية ما تدخل */
html.masc-off img.m2,html.masc-off .m2-hi:not(.m2-how):not(.m2-vw),html.masc-off .m2-bub,html.masc-off .m2-peek,html.masc-off .hp-peek,html.masc-off .hp-trophy,html.masc-off .gd-hero>img{display:none!important;}
/* (31 أكتوبر بالليل) «كيف ترجع للمنصة»: بطاقة دبّوس للحساب الجديد مكان الترحيب (howBackHTML بـ app.html) */
.m2-how{align-items:flex-start;min-height:0;padding-top:14px;padding-bottom:14px;--m2-t:var(--c-teal-s);}
.m2-how.nom{padding-left:16px;}
.m2-how ul{list-style:none;margin:6px 0 0;padding:0;}
.m2-how li{display:flex;gap:8px;align-items:flex-start;font-size:12.8px;line-height:1.75;color:var(--text2);padding:4px 0;}
.m2-how li+li{border-top:1px dashed var(--border);}
.m2-how li>i{font-style:normal;flex-shrink:0;width:18px;text-align:center;}
.m2-how li a{color:var(--brand);font-weight:700;text-decoration:underline;}
.m2-how .m2-hi-tx li span{display:inline;margin:0;font-size:inherit;line-height:inherit;} /* .m2-hi-tx span بلوك، هنا لا */
.m2-how li>div{flex:1;min-width:0;}
.m2-ltr,.m2-how .m2-hi-tx li .m2-ltr{direction:ltr;unicode-bidi:isolate;font-weight:700;color:var(--text);overflow-wrap:anywhere;}
.m2-how .m2-ok{margin-top:8px;min-height:40px;padding:0 18px;font-size:13.5px;}
/* (4 نوفمبر) الترحيب الخاص لحساب معيّن (app.html vipWelcomeHTML): الشخصية فوق يسار، والأماكن تحت بعرض البطاقة */
.m2-vw{display:block;min-height:0;padding:16px 16px 14px;border-color:color-mix(in srgb,var(--c-violet) 32%,var(--border));background:radial-gradient(190px 150px at 64px 40px,var(--c-violet-s),transparent 72%),radial-gradient(260px 160px at 100% 100%,var(--c-teal-s),transparent 70%),var(--bg2);}
.m2-vw .m2-hi-m{top:12px;bottom:auto;left:12px;height:100px;}
.m2-vw .m2-hi-tx{min-height:100px;padding-left:100px;display:flex;flex-direction:column;justify-content:center;}
.m2-vw .m2-hi-tx b{font-size:17px;line-height:1.5;}
.m2-vw .m2-hi-tx b bdi{direction:ltr;unicode-bidi:isolate;white-space:nowrap;}
.m2-vw .m2-hi-tx span{font-size:13px;margin-top:4px;}
.m2-vw.nom .m2-hi-tx,html.masc-off .m2-vw .m2-hi-tx{min-height:0;padding-left:0;}
.vw-go{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.vw-go button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 4px;border-radius:14px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;cursor:pointer;transition:transform .15s ease,border-color .15s ease;}
.vw-go button b{font-size:12.5px;font-weight:700;line-height:1.3;}
.vw-go button:active{transform:scale(.96);}
.vw-go button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.vw-go .hp-sic{width:34px;height:34px;border-radius:11px;}
.vw-go .hp-sic svg{width:18px;height:18px;}
.m2-vw .m2-ok{display:flex;width:100%;margin-top:12px;min-height:46px;font-size:14.5px;}
@media (max-width:360px){.m2-vw .m2-hi-m{height:86px;}.m2-vw .m2-hi-tx{min-height:86px;padding-left:84px;}.m2-vw .m2-hi-tx b{font-size:15.5px;}}
@media (prefers-reduced-motion:reduce){.vw-go button{transition:none;}}

/* (6 نوفمبر، طلب المالك: شكل الأشرطة على الآيباد) الأشرطة الثابتة فوق وتحت صارت لون صلب بدون ضباب.
   Safari بالآيباد والآيفون يمد لون الشريط اللاصق بحافة الشاشة لشريط المتصفح، والشريط الشفاف مع الضباب كان يطلع غريب
   وقت النزول، والمحتوى يبان من تحته. اللون الصلب قريب من لون الصفحة (والشريط السفلي بالفاتح أبيض)، فيطلع مرتب بكل متصفح. */
.mhdr,.sess-top,.study-top,.coll-head,.hp-head,.ds-bar,.ds-gtop,.bnav,.sess-nav{-webkit-backdrop-filter:none;backdrop-filter:none;}
/* الآيباد بالطول (700 لين 1023): الشريط السفلي يصير حبة بالنص مثل الشاشات الأكبر، بدل ما يتمدد على عرض الشاشة كله */
@media (min-width:700px) and (max-width:1023px){
  .bnav{left:50%;right:auto;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));width:min(560px,92vw);border-radius:24px;border:1px solid var(--border);padding:8px 10px;box-shadow:0 14px 40px -12px rgba(0,0,0,.25);}
  .bnav-item{border-radius:16px;}
  .page{padding-bottom:140px;}
}
/* الآيباد بالعرض والكمبيوتر (1100 وفوق): القائمة الجانبية بنفس لون الراس، عشان حافة الشاشة فوق تكون لون واحد (Safari يمدها لشريطه) */
@media (min-width:1100px){html[data-theme] .bnav{background:var(--bg-blur);}}