/* ============================================================================================
   masar.css — THE MASAR DESIGN SYSTEM (2026-09-22). Loaded by every page after theme.css + nav.css.
   Warm illustrated look: light warm background, deep-indigo ink, one strong blue for actions, yellow sticky
   notes, red hand-drawn underlines. Cairo for everything, Caveat only for handwritten notes.
   Sections: 1 tokens · 2 base + type · 3 layout · 4 header/footer skin · 5 buttons · 6 cards/pills/notes ·
   7 section headers + hero band + dark band · 8 forms/tables/tabs/modals/toasts · 9 skeletons/empty/states ·
   10 dark palette · 11 responsive · 12 utilities.  Live docs: /design-system.html (admin).
   ============================================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#1E1B4B; --ink-2:#2B2A6E; --ink-3:#3B3A8A; --blue:#2D6CF6; --purple:#6B5AE0; --red:#F04438; --yellow:#FFD23F; --yellow-soft:#FFE66D; --green:#22C55E; --green-2:#16A34A; --bg:#F5F7FF; --card:#FFFFFF; --line:#E6E9F5; --line-2:#D6DBEF; --muted:#6B7280; --body:#4B4F6B; --tint-blue:#E8ECFF; --tint-yellow:#FFF0B3; --tint-red:#FFE4E6;
  /* TEXT variants of the brand colours (2026-09-23 contrast audit).
     The brand blue/green/red are tuned for FILLS — white on them reads fine. Used as TEXT
     on a light background they fail WCAG AA: measured 3.81:1 (blue), 2.75:1 (green) and
     3.13:1 (red) at their worst against the page and tint backgrounds, where 4.5:1 is the
     bar for normal text. These are the same hues darkened until they pass on EVERY light
     background the design uses, so a coloured number or link stays coloured and becomes
     readable. Fills keep using the originals. */
  --blue-text:#2861DD; --green-text:#107836; --red-text:#BF362C; --purple-text:#6656D7; --yellow-text:#7A6000; --r-sm:12px; --r-md:14px; --r-lg:20px; --r-xl:22px; --shadow-card:0 8px 22px rgba(30,27,75,.06); --shadow-hover:0 22px 44px rgba(30,27,75,.14); --ease-out:cubic-bezier(.2,.8,.25,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  --tint-purple:#EFEBFF; --tint-green:#DCFCE7; --tint-pink:#FFE4E6; --blue-dark:#1F55D6; --focus:0 0 0 3px rgba(45,108,246,.35);
  --font:'Cairo',system-ui,sans-serif; --hand:'Caveat','Aref Ruqaa','Cairo',cursive;   /* Caveat has no Arabic glyphs: Aref Ruqaa (ruq'a script) carries the handwritten Arabic notes */
  /* legacy token bridge: the older pages (theme.css / nav.css) read these names — map them onto the new palette so
     shared widgets (nav drawer, guidance strip, assistant, social button, broker card) inherit the look */
  --surface:#FFFFFF; --surface-soft:#E8ECFF; --ink-soft:#4B4F6B; --primary:#2D6CF6; --primary-dark:#1F55D6; --primary-tint:#E8ECFF; --border:#E6E9F5; --coral:#F04438; --coral-tint:#FFE4E6; --gold:#F5C400; --gold-tint:#FFF0B3; --radius:14px;
  --max:1180px; --gutter:20px;
}

/* ---------- 2. BASE + TYPE ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:500;line-height:1.75;font-size:15.5px;-webkit-font-smoothing:antialiased}
body.masar-page{opacity:0;animation:masarEnter .25s ease-out forwards}@keyframes masarEnter{to{opacity:1}}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);line-height:1.2;margin:0 0 .35em;font-weight:900;letter-spacing:-.01em}
h1{font-size:clamp(40px,6.2vw,80px)}h2{font-size:clamp(28px,3.6vw,44px)}h3{font-size:clamp(19px,2vw,24px)}h4{font-size:17px;font-weight:800}
p{margin:0 0 1em;color:var(--body)}
a{color:var(--blue)}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--body);line-height:1.9}
.hand{font-family:var(--hand);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.25;color:var(--ink-2);direction:rtl}
html[dir="ltr"] .hand{direction:ltr}
.hand.red{color:var(--red)}.hand.yellow{color:var(--yellow)}.hand.blue{color:var(--blue)}
.muted{color:var(--muted)}.body{color:var(--body)}
.nums,[data-count]{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
td.nums,th.nums{display:table-cell}li.nums{display:list-item}
:focus-visible{outline:3px solid rgba(45,108,246,.75);outline-offset:3px;border-radius:6px}
::selection{background:var(--tint-yellow)}

/* ---------- 3. LAYOUT ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding:clamp(48px,7vw,96px) 0;position:relative}
.section.tight{padding:clamp(32px,4vw,56px) 0}
.panel{background:var(--tint-blue);border-radius:32px;padding:clamp(28px,4vw,56px) clamp(18px,3vw,44px);position:relative}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-5{grid-template-columns:repeat(5,1fr)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.center{text-align:center}
.slot{position:relative;min-height:1px}                     /* reserved character slot: composed to look complete when empty */

/* ---------- 4. HEADER / FOOTER SKIN (markup comes from nav.js; only the look is here) ---------- */
#site-header{background:rgba(245,247,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#site-header.scrolled{box-shadow:0 6px 24px rgba(30,27,75,.08)}
.nav-bar{min-height:64px;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* header skin lives in nav.css (shared by every page, literal colours); masar.css only re-tints the drawer */
/* footer */
.masar-footer{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) 0 0;margin-top:clamp(40px,7vw,96px)}
.masar-footer a{color:#C9CCE8;text-decoration:none;transition:color .2s}
.masar-footer a:hover{color:#fff}
.masar-footer .f-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:24px}
.masar-footer .f-brand .nav-wordmark{color:#fff;font-size:28px}
.masar-footer .f-brand p{color:#C9CCE8;margin:6px 0 0;font-weight:600}
.masar-footer h4{color:#fff;font-size:15px;margin:0 0 12px}
.masar-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;font-weight:600}
.masar-footer .f-social{display:flex;gap:10px;flex-wrap:wrap}
.masar-footer .f-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12)}
.masar-footer .f-social svg{width:18px;height:18px}
.masar-footer .f-bottom{margin-top:36px;border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#C9CCE8;font-weight:600}
.masar-footer .f-bottom .heart{display:inline-flex;vertical-align:middle;margin-inline:4px}
.masar-footer .f-bottom .heart svg{width:16px;height:16px}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:800;font-size:15px;line-height:1;padding:14px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none}
.btn:focus-visible{box-shadow:var(--focus)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(45,108,246,.32)}.btn-primary:hover{background:var(--blue-dark);box-shadow:0 16px 30px rgba(45,108,246,.38)}
.btn-secondary{background:var(--card);color:var(--ink);border-color:var(--ink)}.btn-secondary:hover{background:var(--tint-blue)}
.btn-ghost{background:transparent;color:var(--blue)}.btn-ghost:hover{background:var(--tint-blue)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 10px 24px rgba(255,210,63,.35)}.btn-yellow:hover{background:var(--yellow-soft)}
.btn-danger{background:var(--red);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:13.5px}.btn-lg{padding:17px 30px;font-size:17px}.btn-block{width:100%}
.btn[disabled],.btn.is-loading{opacity:.6;pointer-events:none}
.btn .ico{display:inline-flex;width:18px;height:18px}
.btn .ico svg{width:18px;height:18px}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}

/* ---------- 6. CARDS · PILLS · STICKY NOTES · HANDWRITING ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:26px 22px;position:relative}
.card.flat{box-shadow:none}
a.card,a.card:hover{text-decoration:none;color:inherit}
a.card .card-title,a.card .card-desc,a.card h3,a.card p{text-decoration:none}
.card-title{font-size:18px;font-weight:800;margin:0 0 6px;color:var(--ink)}
.card-desc{font-size:14px;color:var(--muted);margin:0;line-height:1.8}
.halo{width:96px;height:96px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--tint-blue);margin-bottom:16px}
.halo.yellow{background:var(--tint-yellow)}.halo.purple{background:var(--tint-purple)}.halo.green{background:var(--tint-green)}.halo.pink{background:var(--tint-pink)}.halo.sm{width:64px;height:64px}.halo.sm i[data-icon] svg{width:40px;height:40px}
.card .badge{position:absolute;top:14px;inset-inline-end:14px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:800;line-height:1.4;background:var(--tint-blue);color:var(--blue)}
.pill.red{background:var(--tint-red);color:var(--red)}.pill.green{background:var(--tint-green);color:var(--green-2)}.pill.yellow{background:var(--tint-yellow);color:#8a6d00}.pill.grey{background:#EEF0F7;color:var(--muted)}.pill.purple{background:var(--tint-purple);color:var(--purple)}.pill.ink{background:var(--ink);color:#fff}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.4s ease-in-out infinite}
.sticky{--r:-4deg;display:inline-block;background:var(--yellow);color:var(--ink);font-family:var(--hand);font-weight:700;font-size:22px;line-height:1.25;padding:14px 18px;border-radius:6px;box-shadow:0 12px 24px rgba(30,27,75,.14);transform:rotate(var(--r));position:relative}
.sticky::before{content:"";position:absolute;top:-8px;left:50%;width:44px;height:14px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.55);border-radius:2px}
.sticky.soft{background:var(--yellow-soft)}
.label-card{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:10px 16px;font-weight:800;font-size:15px;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
/* ---------- HEADING ACCENT (2026-09-23) — the rising CHART LINE, one shared implementation ----------
   A small sparkline under an accented heading: a zigzag that trends UP toward the end of the reading direction and
   finishes with a filled dot at its highest point. It is a separate absolutely-positioned SVG inside the accented
   span's reserved padding, so it can never touch a glyph (Arabic descenders included) and adds no layout shift —
   the space is reserved by CSS before the SVG is injected. `masar-icons.js` injects the SVG and adds .acc-on when
   the heading first scrolls into view (draw, then the dot pops). Admin can turn it off: <html data-heading-accent="none">. */
.hand-ul{position:relative;display:inline-block;max-width:100%;padding-bottom:calc(.5em + 8px)}
.hand-ul .mp-acc{position:absolute;inset-inline-start:0;bottom:0;width:min(2.7em,170px);aspect-ratio:120/22;height:auto;color:#1D9E75;overflow:visible;pointer-events:none}
:root[data-theme="dark"] .hand-ul .mp-acc{color:#5DCAA5}
html[dir="ltr"] .hand-ul .mp-acc{transform:scaleX(-1)}          /* the line always rises toward the reading end */
.mp-acc-line{stroke-dasharray:150;stroke-dashoffset:150}
.mp-acc-dot{transform:scale(0);transform-box:fill-box;transform-origin:50% 50%}
.mp-acc.acc-on .mp-acc-line{animation:accDraw .8s ease-out forwards}
.mp-acc.acc-on .mp-acc-dot{animation:accDot .35s var(--ease-back) .68s forwards}
@keyframes accDraw{to{stroke-dashoffset:0}}
@keyframes accDot{to{transform:scale(1)}}
/* option 2: no accent at all */
:root[data-heading-accent="none"] .hand-ul{padding-bottom:0}
:root[data-heading-accent="none"] .hand-ul .mp-acc{display:none}
@media (prefers-reduced-motion:reduce){
  .mp-acc-line{stroke-dashoffset:0}.mp-acc-dot{transform:scale(1)}
  .mp-acc.acc-on .mp-acc-line,.mp-acc.acc-on .mp-acc-dot{animation:none}
}
.tick-marks{color:var(--red);width:40px;height:30px;display:inline-block}
.tick-marks svg{width:100%;height:100%}
i[data-arrow]{display:inline-block;color:var(--red);width:90px;height:60px;line-height:0}
i[data-arrow] svg{width:100%;height:100%;overflow:visible}
i[data-arrow].yellow{color:var(--yellow)}i[data-arrow].blue{color:var(--blue)}i[data-arrow].ink{color:var(--ink-2)}
.annot{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:2}
.annot .hand{white-space:nowrap}
.avatars{display:flex;align-items:center}
.avatars .av{width:38px;height:38px;border-radius:50%;border:3px solid var(--bg);margin-inline-start:-10px;background:var(--tint-blue);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--ink);overflow:hidden}
.avatars .av:first-child{margin-inline-start:0}
.avatars .av img{width:100%;height:100%;object-fit:cover}
.stars{display:inline-flex;gap:2px;color:var(--yellow)}
.stars svg{width:18px;height:18px}
.tinted{border:none}.tinted.blue{background:var(--tint-blue)}.tinted.yellow{background:var(--tint-yellow)}.tinted.pink{background:var(--tint-pink)}.tinted.white{background:#fff}
.num-badge{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;color:#fff;background:var(--blue);box-shadow:0 8px 16px rgba(30,27,75,.15)}
.num-badge.purple{background:var(--purple)}.num-badge.red{background:var(--red)}.num-badge.green{background:var(--green)}
.path-dash{stroke:var(--line-2);stroke-width:3;stroke-dasharray:10 10;fill:none;stroke-linecap:round}
.path-dash.active{stroke:var(--blue)}

/* ---------- 7. SECTION HEADERS · PAGE HERO BAND · DARK BAND ---------- */
.sec-head{margin-bottom:clamp(24px,3vw,40px)}
.sec-head h2{margin-bottom:8px}
.sec-head p{font-size:clamp(15px,1.3vw,18px);margin:0}
.sec-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hero-band{padding:clamp(28px,4vw,56px) 0 clamp(20px,3vw,36px);position:relative;overflow:hidden}
.hero-band .hb-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero-band h1{font-size:clamp(34px,4.6vw,58px)}
.hero-band .hb-sub{font-size:clamp(15px,1.4vw,19px);color:var(--body);margin:6px 0 18px}
.hero-band .hb-art{position:relative;min-height:220px}
.hero-band .hb-next{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 8px;box-shadow:var(--shadow-card);font-weight:800;font-size:14px;color:var(--ink);text-decoration:none}
html[dir="ltr"] .hero-band .hb-next{padding:8px 8px 8px 14px}
.dark-band{background:var(--ink-2);color:#fff;border-radius:32px;padding:clamp(32px,4.5vw,64px) clamp(20px,3.5vw,52px);position:relative;overflow:hidden}
.dark-band h2,.dark-band h3{color:#fff}.dark-band p{color:#D7D9F2}
.dark-band .hand{color:var(--yellow)}
.dark-band .card{color:var(--ink)}
.dark-band .card p{color:var(--body)}
/* A card inside a dark band keeps its own LIGHT background, so it must own its text colours too.
   `.dark-band h2,.dark-band h3{color:#fff}` above is more specific than the inherited
   `.dark-band .card{color:var(--ink)}`, so every card heading in a dark band rendered white on a
   light card — measured 1.1:1 against the tinted backgrounds on the home page, i.e. invisible.
   Headings and body text are both pinned here rather than relying on inheritance. */
.dark-band .card h1,.dark-band .card h2,.dark-band .card h3,.dark-band .card h4,
.dark-band .card h5,.dark-band .card h6{color:var(--ink)}
.dark-band .card p,.dark-band .card li,.dark-band .card dd,.dark-band .card dt,
.dark-band .card small,.dark-band .card span:not(.arr):not([class*="badge"]):not([class*="pill"]){color:var(--body)}
.dark-band .card .go,.dark-band .card a:not(.btn){color:var(--blue)}
.dark-band.full{border-radius:0}
.cta-band{background:var(--ink-2);border-radius:32px;color:#fff;padding:clamp(36px,5vw,72px) clamp(20px,4vw,64px);position:relative;overflow:hidden}
.cta-band h2{color:#fff}.cta-band p{color:#D7D9F2;font-size:17px}

/* ---------- 8. FORMS · TABLES · TABS · MODALS · TOASTS · PAGINATION ---------- */
label,.label{display:block;font-weight:800;font-size:13.5px;color:var(--ink);margin:0 0 6px}
.input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="url"],input[type="tel"],select,textarea{width:100%;box-sizing:border-box;font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-md);padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
input::placeholder,textarea::placeholder{color:#9CA3AF;font-weight:500}
.field{margin-bottom:16px}
.help{font-size:12.5px;color:var(--muted);margin-top:6px}
.error-text{font-size:12.5px;color:var(--red);font-weight:700;margin-top:6px}
.switch{position:relative;display:inline-block;width:46px;height:26px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:.2s;cursor:pointer}
.switch .sl::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.switch input:checked+.sl{background:var(--blue)}.switch input:checked+.sl::before{transform:translateX(20px)}
html[dir="rtl"] .switch .sl::before{left:auto;right:3px}html[dir="rtl"] .switch input:checked+.sl::before{transform:translateX(-20px)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
table.masar{width:100%;border-collapse:collapse;font-size:14px}
table.masar th{text-align:start;font-weight:800;font-size:12.5px;color:var(--muted);padding:12px 14px;background:var(--tint-blue);white-space:nowrap}
table.masar td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle}
table.masar tr:hover td{background:#FAFBFF}
.tabs{display:flex;gap:6px;border-bottom:1.5px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tabs .tab{padding:10px 16px;font-weight:800;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1.5px;cursor:pointer;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font)}
.tabs .tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tabs.pills{border:none;gap:8px}.tabs.pills .tab{border:1.5px solid var(--line-2);border-radius:999px;padding:8px 16px;margin:0}.tabs.pills .tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.modal-bg{position:fixed;inset:0;background:rgba(30,27,75,.45);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:10050;padding:20px}
.modal{background:var(--card);border-radius:var(--r-xl);padding:26px;max-width:520px;width:100%;box-shadow:var(--shadow-hover)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow-hover);z-index:10070}
.toast.ok{background:var(--green-2)}.toast.err{background:var(--red)}
.pagination{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination button{min-width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--card);display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink);text-decoration:none;cursor:pointer;font-family:var(--font)}
.pagination .active{background:var(--blue);color:#fff;border-color:var(--blue)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters .chip{padding:7px 14px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--card);font-weight:700;font-size:13px;cursor:pointer;color:var(--ink);font-family:var(--font)}
.filters .chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.progress{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:999px;transition:width 1.2s var(--ease-out)}
.stat-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.stat-tile .k{font-size:12.5px;font-weight:700;color:var(--muted)}
.stat-tile .v{font-size:26px;font-weight:900;color:var(--ink);line-height:1.2}
.stat-tile .s{font-size:12.5px;font-weight:700;color:var(--green-2)}

/* ---------- 9. SKELETONS · EMPTY STATES · SUCCESS ---------- */
.sk{position:relative;overflow:hidden;background:var(--line);border-radius:var(--r-md)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;display:grid;gap:12px;min-height:180px}
.sk-circle{width:64px;height:64px;border-radius:50%;background:var(--line)}
.sk-line{height:12px;border-radius:6px;background:var(--line)}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
.sk-row{height:52px;margin-bottom:10px}
.empty{text-align:center;padding:clamp(28px,4vw,48px) 20px;background:var(--card);border:1.5px dashed var(--line-2);border-radius:var(--r-xl)}
.empty i[data-icon]{margin-bottom:12px}
.empty i[data-icon] svg{width:72px;height:72px}
.empty p{font-weight:700;color:var(--body);margin:0 0 14px;font-size:15.5px}
.success-burst{position:relative;display:inline-block}
.success-burst::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:3px solid var(--green);animation:ring 1s ease-out 2}
.locked-state{text-align:center;padding:48px 20px}

/* ---------- 10. DARK PALETTE (proper indigo, not inverted) ---------- */
:root[data-theme="dark"]{
  --bg:#0F0E2A; --card:#1A1940; --line:#2A2960; --line-2:#3A3A7A; --ink:#F1F1FF; --ink-2:#C9CCF5; --ink-3:#AEB2E8; --body:#C3C6E6; --muted:#9A9EC9;
  --tint-blue:#22245A; --tint-yellow:#3D3410; --tint-red:#3B1E27; --tint-purple:#2A2458; --tint-green:#123B2A; --tint-pink:#3B1E27;
  /* dark theme: the darkened text variants would disappear here, so they map to lighter
     hues that pass against the dark surfaces instead. */
  --blue-text:#8FB0FF; --green-text:#4ADE80; --red-text:#FF8A80; --purple-text:#B3A5FF; --yellow-text:#F5D57A;
  --shadow-card:0 8px 22px rgba(0,0,0,.35); --shadow-hover:0 22px 44px rgba(0,0,0,.5); --focus:0 0 0 3px rgba(125,160,255,.5);
  --surface:#1A1940; --surface-soft:#22245A; --ink-soft:#C3C6E6; --primary:#5C8DFF; --primary-dark:#2D6CF6; --primary-tint:#22245A; --border:#2A2960; --coral:#FF6B62; --coral-tint:#3B1E27; --gold:#FFD23F; --gold-tint:#3D3410;
}
:root[data-theme="dark"] #site-header{background:rgba(15,14,42,.88);border-bottom-color:var(--line)}
:root[data-theme="dark"] .nav-wordmark,:root[data-theme="dark"] .nav-brand{color:#fff}
:root[data-theme="dark"] .label-card{background:var(--card);color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--purple)}
:root[data-theme="dark"] .sticky{color:#1E1B4B}
:root[data-theme="dark"] .panel{background:#161538}
:root[data-theme="dark"] .dark-band,:root[data-theme="dark"] .cta-band{background:#22245A}
:root[data-theme="dark"] .dark-band .card{background:#F5F7FF;color:#1E1B4B}
/* In dark mode the card background STAYS light (above), so its text must stay dark — the
   global dark-theme text colours would otherwise put light grey on a near-white card. */
:root[data-theme="dark"] .dark-band .card h1,:root[data-theme="dark"] .dark-band .card h2,
:root[data-theme="dark"] .dark-band .card h3,:root[data-theme="dark"] .dark-band .card h4,
:root[data-theme="dark"] .dark-band .card h5,:root[data-theme="dark"] .dark-band .card h6{color:#1E1B4B}
:root[data-theme="dark"] .dark-band .card p,:root[data-theme="dark"] .dark-band .card li,
:root[data-theme="dark"] .dark-band .card small,
:root[data-theme="dark"] .dark-band .card dd,:root[data-theme="dark"] .dark-band .card dt{color:#4B4F6B}
:root[data-theme="dark"] .tinted.blue{background:#E8ECFF}:root[data-theme="dark"] .tinted.yellow{background:#FFF0B3}:root[data-theme="dark"] .tinted.pink{background:#FFE4E6}
:root[data-theme="dark"] .masar-footer{background:#0A0920}
:root[data-theme="dark"] table.masar tr:hover td{background:#22245A}
:root[data-theme="dark"] .btn-secondary{background:var(--card);color:#fff;border-color:#fff}
:root[data-theme="dark"] .empty{background:var(--card)}
:root[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width:1100px){.grid-5{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.masar-footer .f-grid{grid-template-columns:1fr 1fr 1fr}.masar-footer .f-brand{grid-column:1/-1}.nav-quick a{font-size:13.5px;padding:8px 10px}}
@media (max-width:900px){.nav-quick a:not(.nav-quick-primary){display:none}.hero-band .hb-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2,1fr)}.nav-tagline{display:none}.annot.hide-md{display:none}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}.annot{display:none}.sticky{font-size:19px;padding:10px 14px}.panel{border-radius:22px}.dark-band,.cta-band{border-radius:22px}.masar-footer .f-grid{grid-template-columns:1fr 1fr}.masar-footer .f-bottom{justify-content:center;text-align:center}.card{padding:22px 18px}.halo{width:80px;height:80px}.halo i[data-icon] svg{width:50px;height:50px}.sec-head.split{align-items:flex-start}.hand{font-size:20px}}

/* ---------- 12. UTILITIES ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-0{margin-top:0}.mt-2{margin-top:12px}.mt-3{margin-top:20px}.mt-4{margin-top:32px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:20px}
.hidden{display:none!important}
.ltr{direction:ltr;unicode-bidi:isolate}
.no-wrap{white-space:nowrap}
.rel{position:relative}

/* ---------- manual transfer payment box (pay-box.js, 2026-09-23) ----------
   Shared by the wallet top-up, the membership checkout and the crypto listing form. The network
   warning is deliberately loud: sending USDT on the wrong chain destroys it. */
.paybox{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;margin:12px 0}
.paybox.warn-only{background:var(--tint-red);border-color:var(--red);color:var(--ink);font-weight:800;font-size:13.5px}
.pb-amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pb-amount span{font-size:13px;font-weight:800;color:var(--muted)}
.pb-amount b{font-size:24px;font-weight:900;color:var(--ink)}
.pb-amount small{flex:1 1 100%;font-size:12px;color:var(--muted);font-weight:700}
.pb-warn{background:var(--tint-yellow);border:1.5px solid var(--yellow);border-radius:var(--r-md);
  padding:11px 13px;font-size:13px;font-weight:800;color:#6b4b13;line-height:1.8;margin-bottom:12px}
:root[data-theme="dark"] .pb-warn{background:rgba(255,210,63,.12);color:#FFD96B}
.pb-grid{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pb-fields{flex:1 1 260px;min-width:0}
.pb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pb-row > span{font-size:12.5px;font-weight:800;color:var(--muted);flex:0 0 auto}
.pb-net{font-size:13.5px;font-weight:900;background:var(--tint-blue);color:var(--blue);
  padding:3px 11px;border-radius:999px}
.pb-addr{flex:1 1 100%;display:block;direction:ltr;text-align:start;font-size:13px;font-weight:700;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  word-break:break-all;line-height:1.7;user-select:all}
.pb-note{font-size:12.5px;color:var(--muted);line-height:1.9;margin:8px 0 0}
.pb-qr{flex:0 0 auto;text-align:center;width:150px}
.pb-qr img{width:150px;height:150px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;display:block}
.pb-qr small{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:6px}
@media (max-width:560px){
  .pb-grid{flex-direction:column}
  .pb-qr{width:100%}
  .pb-qr img{width:170px;height:170px;margin:0 auto}
  .pb-amount b{font-size:21px}
}
/* a file input styled like the rest of the site instead of the raw browser button */
.masar-file{display:block}
.masar-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.masar-file .mf-btn{display:inline-flex;align-items:center;gap:8px;background:var(--tint-blue);
  color:var(--blue);border:1.5px dashed var(--blue);border-radius:12px;padding:11px 16px;
  font-family:var(--font);font-weight:800;font-size:13.5px;cursor:pointer}
.masar-file .mf-btn:hover{background:var(--card)}
.masar-file .mf-name{display:block;font-size:12.5px;color:var(--muted);font-weight:700;margin-top:6px}

/* ============================================================================================
   CONTRAST — WCAG AA fixes from the 2026-09-23 sweep (110 pages x AR/EN x light/dark).
   The brand colours are tuned for FILLS; as TEXT on a light surface they measured 2.75:1 to
   4.28:1 where AA needs 4.5:1. These rules point the text usages at the --*-text tokens (same
   hue, darkened until they pass on every light background, and lightened for the dark theme).
   Fills are untouched, so nothing changes colour identity — only readability.
   ============================================================================================ */
/* SCOPE MATTERS. A first pass applied the darkened text colours to bare `.nums` / `.pill`
   everywhere, which made them WORSE where they sit on a dark surface: `.nums` on the ink-2 card
   measured 3.12:1 before and 2.32:1 after. A colour that is only correct on a light background
   must only be applied on a light background, so these rules name components that are known to
   sit on one, and anything inside a dark band is excluded below. */
.cx-num, .go, .pill.blue, .pill.green, .pill.red, .pill.purple,
a.nav-quick-primary, .nav-quick a.active,
#site-header .nav-lang-btn, #site-header .nav-theme-btn { color: var(--blue-text); }
#site-header .nav-quick a.active, #site-header .nav-quick a.nav-quick-primary.active,
#site-header .nav-quick a:hover { color: var(--blue-text); }
.pill.green, .cx-num.up { color: var(--green-text); }
.pill.red, .cx-num.down { color: var(--red-text); }
.pill.purple { color: var(--purple-text); }
.pill.yellow, .pill.gold { color: var(--yellow-text); }

/* Dark surfaces keep the bright originals — the darkened variants would vanish on them. */
.dark-band .cx-num, .dark-band .go, .dark-band .pill,
.hero-band .cx-num, .hero-band .go, .hero-band .pill { color: var(--blue); }
.dark-band .pill.green, .hero-band .pill.green { color: var(--green); }
.dark-band .pill.red, .hero-band .pill.red { color: var(--red); }

/* A pill that is grey-on-grey was the least readable of the lot (2.27:1). The muted grey is fine
   on white and fails on the grey pill background, so the pill gets the body colour instead. */
.pill.grey, .pill.muted, .pill.plain { color: var(--body); }

/* White on a light-blue chip measured 1.12:1 — the chip's own background is light, so its label
   must be dark. */
.chip:not(.active):not(.on), .as-chip:not(.active):not(.on),
.lesson-chip:not(.active):not(.on), .dir-btn:not(.active):not(.on) { color: var(--ink); }

/* Small white-on-colour badges: the red fill is too light for white at 11px. Deepening the FILL
   keeps the white text and the red meaning, which is better than making the badge grey. */
.notif-badge { background: #C62828 !important; color: #fff; }
#site-header .nav-mode-btn, .nav-subnav-tab.active { background: var(--blue); color: #fff; }

:root[data-theme="dark"] .chip:not(.active):not(.on),
:root[data-theme="dark"] .as-chip:not(.active):not(.on),
:root[data-theme="dark"] .lesson-chip:not(.active):not(.on),
:root[data-theme="dark"] .dir-btn:not(.active):not(.on) { color: var(--ink); }

/* Crypto listing — the token-details block. One row per network, and the exact token amount due. */
.cl-details{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:14px 0}
.cl-details>summary{cursor:pointer;font-weight:900;font-size:14px;color:var(--ink);list-style:none}
.cl-details>summary::-webkit-details-marker{display:none}
.cl-details>summary::before{content:"▸ ";font-size:12px}
.cl-details[open]>summary::before{content:"▾ "}
.cl-crow{display:grid;grid-template-columns:minmax(120px,1fr) minmax(160px,2fr) auto;gap:8px;margin-bottom:8px}
.cl-crow-x{border:none;background:var(--tint-red);color:#B91C1C;border-radius:10px;width:36px;
  font-size:18px;font-weight:900;cursor:pointer;font-family:inherit}
.cl-share-due{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--tint-blue);
  border-radius:12px;padding:12px 14px;margin:10px 0}
.cl-share-due b{font-size:20px;font-weight:900;color:var(--ink)}
.cl-share-due small{color:var(--body);font-weight:700}
.cl-share-need{background:var(--tint-yellow);border-radius:12px;padding:11px 13px;font-size:13px;
  font-weight:700;line-height:1.8;color:#5b4410;margin:10px 0}
.cl-share-wallet{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:12.5px;word-break:break-all;margin-bottom:8px}
@media (max-width:560px){ .cl-crow{grid-template-columns:1fr auto} }