/* IlmHub design system (royal blue + gold) – shared by the website, My IlmHub and the admin panel.
   Every colour is a CSS variable; Theme::css() prints the admin's colours and fonts over these defaults
   (Admin › System › Appearance & fonts). Fonts: Sora, Plus Jakarta Sans and Amiri (bundled, SIL Open Font Licence).
   Icons: the design's own inline SVG set (icon() helper / <x-icon>), no icon font. */
@font-face{font-family:Sora;font-weight:400;font-display:swap;src:url(../fonts/sora-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:600;font-display:swap;src:url(../fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:700;font-display:swap;src:url(../fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:800;font-display:swap;src:url(../fonts/sora-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:Amiri;font-weight:400;font-display:swap;src:url(../fonts/amiri-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:Amiri;font-weight:700;font-display:swap;src:url(../fonts/amiri-arabic-700-normal.woff2) format('woff2')}

:root{
  /* design tokens (README "Design system") */
  --ink:#12358A;--ink2:#0A1F55;--ink3:#2A52B5;--tint:#E8EDF8;
  --cu:#D4A017;--cu2:#8A6508;--cu3:#FBF1D6;--gold:#F0C75E;--onacc:#0A1F55;
  --sand:#F6F3EC;--paper:#FFFFFF;--tx:#1A2340;--mu:#66708A;--ln:#E6E2D8;--rose:#B5483E;--sky:#2E6DA4;
  --sage:var(--ink);--sage3:var(--tint);
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;--font-heading:Sora,'Plus Jakarta Sans',system-ui,sans-serif;--font-arabic:Amiri,serif;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F0C75E' stroke-opacity='.16' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3Cpath d='M0 36h10M62 36h10M36 0v10M36 62v10M0 0l12 12M72 0L60 12M0 72l12-12M72 72L60 60'/%3E%3C/g%3E%3C/svg%3E");
  --patd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23D4A017' stroke-opacity='.10' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3Cpath d='M0 36h10M62 36h10M36 0v10M36 62v10M0 0l12 12M72 0L60 12M0 72l12-12M72 72L60 60'/%3E%3C/g%3E%3C/svg%3E");
  /* status colours (tags, flashes) – derived from the tokens */
  --green:#1E7A4F;--green3:#E3F3EA;--red:var(--rose);--red3:color-mix(in srgb,var(--rose) 14%,#fff);--amber:var(--cu2);--amber3:var(--cu3);--blue:var(--ink);--blue3:var(--tint);
  /* aliases used by the admin kit (Admin › Settings & System screens) */
  --navy:var(--ink);--navy2:var(--ink2);--navy3:var(--ink3);--yel:var(--cu);--yel2:var(--cu2);--yel3:var(--cu3);--onyel:var(--onacc);--yeld:var(--gold);
  --bg:var(--sand);--mute:var(--mu);--line:var(--ln);--soft:var(--sand);
  --w70:color-mix(in srgb,#fff 74%,var(--ink2));--w55:color-mix(in srgb,#fff 58%,var(--ink2));--w12:rgba(255,255,255,.12);--w08:rgba(255,255,255,.07);
  --sh1:0 1px 2px rgba(10,31,85,.05),0 4px 14px rgba(10,31,85,.05);--sh2:0 30px 60px -28px rgba(10,31,85,.55);--r:24px}

*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--tx);font:400 15px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit;color:inherit}p{margin:0}
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ink);line-height:1.2}
.ar,[lang=ar]{font-family:var(--font-arabic);direction:rtl}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout primitives (design: .g2–.g6 grids, .two/.side1/.side2 splits) ---------- */
.row{display:flex;align-items:center}.col{display:flex;flex-direction:column}.sb{justify-content:space-between}.wr{flex-wrap:wrap}.f1{flex:1;min-width:0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}.two2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.two3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.side1{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px}.side2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px}
.two>*,.two2>*,.two3>*,.side1>*,.side2>*,.g2>*,.g3>*,.g4>*,.g5>*,.g6>*{min-width:0}
.grid{display:grid;gap:18px}.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid>*{min-width:0}
.gp4{gap:4px}.gp6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
/* .row.g4 / .row.g6 mean "a row with a small gap", not the 4- and 6-column grids above */
.row.g2,.row.g3,.row.g4,.row.g5,.row.g6{display:flex;grid-template-columns:none}.row.g4{gap:4px}.row.g6{gap:6px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mut,.mute,.muted{color:var(--mu)}.tsm,.sm{font-size:13px}.txs,.xs{font-size:12px}.b6{font-weight:600}.b7{font-weight:700}.nw{white-space:nowrap}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ow{overflow-wrap:anywhere}.rd{color:var(--rose)}.gr{color:var(--green)}.yt{color:var(--cu2)}
.ic{width:20px;height:20px;flex:0 0 auto;vertical-align:middle}
.wrapx,.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:14px;font:700 14px/1 var(--font-body);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s;position:relative;overflow:hidden;background:none;color:var(--ink)}
.btn .ic{width:18px;height:18px}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.98)}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn.sm{height:40px;padding:0 18px;font-size:13px;border-radius:12px}.btn.xs{height:32px;padding:0 13px;font-size:12px;border-radius:10px}.btn.lg{height:56px;padding:0 30px;font-size:15px}.btn.blk{width:100%}
.b-cu,.b-y{background:var(--cu);color:var(--onacc);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--cu) 80%,transparent)}
.b-cu::after,.b-y::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);transform:translateX(-120%);animation:shine 4s infinite;pointer-events:none}
.b-ink,.b-n,.b-sage{background:var(--ink);color:#fff}.b-ink:hover,.b-n:hover{background:var(--ink3)}
.b-ghost,.b-o{border-color:var(--ln);color:var(--ink);background:#fff}.b-ghost:hover,.b-o:hover{border-color:var(--ink)}
.b-on{border-color:var(--ink);color:var(--ink);background:transparent}
.b-light,.b-gh{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}
.b-soft{background:var(--sand);color:var(--ink)}.b-wa{background:#1B8A4C;color:#fff}.b-rose{background:var(--rose);color:#fff}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.ib{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;border:1.5px solid var(--ln);color:var(--ink);background:#fff;flex:0 0 auto;position:relative;cursor:pointer}.ib .ic{width:18px;height:18px}
.ib .ct{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--cu);color:var(--onacc);font:700 10px/18px var(--font-body);text-align:center;padding:0 4px}
.ib.sm{width:32px;height:32px;border-radius:8px}.ib.sm .ic{width:14px;height:14px}
.lnk{color:var(--cu2);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.more{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--font-body);color:var(--ink);border-bottom:2px solid var(--cu);padding-bottom:3px;white-space:nowrap}.more .ic{width:16px;height:16px;color:var(--cu)}

/* ---------- chips, pills, tags, kicker ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ln);background:#fff;font:600 12.5px var(--font-body);color:var(--ink);white-space:nowrap;cursor:pointer}.chip .ic{width:15px;height:15px}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}.chip.sm{height:28px;padding:0 10px;font-size:12px}
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font:700 11px var(--font-body);white-space:nowrap}.pill .ic{width:12px;height:12px}
.p-cu{background:var(--cu3);color:var(--cu2)}.p-sage{background:var(--tint);color:var(--ink)}.p-ink{background:var(--ink);color:#fff}.p-sand{background:var(--sand);color:var(--ink)}.p-rose{background:color-mix(in srgb,var(--rose) 14%,#fff);color:var(--rose)}.p-sky{background:#E3EEF8;color:var(--sky)}
.pill.g{background:var(--green3);color:var(--green)}.pill.a{background:var(--cu3);color:var(--cu2)}.pill.r{background:var(--red3);color:var(--rose)}.pill.b{background:var(--tint);color:var(--ink)}.pill.n{background:var(--sand);color:var(--mu)}
.st-ok{background:var(--tint);color:var(--ink)}.st-wait{background:var(--cu3);color:var(--cu2)}.st-off{background:var(--sand);color:var(--mu)}.st-bad{background:var(--red3);color:var(--rose)}
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font:700 11px/1 var(--font-body);white-space:nowrap}
.tag.g{background:var(--green3);color:var(--green)}.tag.a{background:var(--cu3);color:var(--cu2)}.tag.r{background:var(--red3);color:var(--rose)}.tag.b{background:var(--tint);color:var(--ink)}.tag.y{background:var(--cu);color:var(--onacc)}.tag.n{background:var(--sand);color:var(--mu)}
.lbl{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:7px;font:700 11px var(--font-body);background:var(--sand);color:var(--ink);white-space:nowrap}
.kick{display:inline-flex;align-items:center;gap:8px;font:800 11.5px var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--cu2);margin-bottom:12px}.kick .s8{color:var(--cu);width:14px;height:14px}
.s8{flex:0 0 auto}

/* ---------- logo (spinning 8-point star with crescent) ---------- */
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}.logo .lm{width:42px;height:42px;color:var(--cu);display:grid;place-items:center;flex:0 0 auto}.logo .lm svg{width:42px;height:42px;animation:spin 40s linear infinite}
.logo .lm img{max-width:42px;max-height:42px}.logo img.full{height:42px;width:auto}
.logo b{display:block;font:800 22px/1 var(--font-heading);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}.logo b i{font-style:italic;color:var(--cu)}.logo small{display:block;font:600 10.5px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-top:4px;white-space:nowrap}
.logo.lt b{color:#fff}.logo.lt small{color:#9AA6CC}.logo.lt .lm{color:var(--gold)}.logo.lt b i{color:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- sections & cards ---------- */
.sec{padding:92px 0}.sec.sand{background:var(--sand)}.sec.ink{background:var(--ink) var(--pat);color:#fff}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:40px}.sec-h>div{min-width:0}
.sec-h h2{font-size:42px;line-height:1.12}.sec-h h2 em{font-style:normal;font-weight:400;color:var(--cu2)}.sec-h p{margin:10px 0 0;color:var(--mu);font-size:16px;max-width:560px}
.sec.ink .sec-h h2{color:#fff}.sec.ink .sec-h h2 em{color:var(--gold)}.sec.ink .sec-h p{color:#AFC0CE}.sec.ink .kick{color:var(--gold)}
.card{background:#fff;border:1px solid var(--ln);border-radius:24px;padding:24px;box-shadow:0 1px 0 rgba(18,53,138,.03)}.card.pad{padding:24px}
.box{background:#fff;border:1px solid var(--ln);border-radius:18px;padding:18px}
.lift{transition:transform .35s,box-shadow .35s}.lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(18,53,138,.5)}
.arch{border-radius:999px 999px 22px 22px;overflow:hidden}.arch img{width:100%;height:100%;object-fit:cover}
.ico{width:44px;height:44px;border-radius:13px;background:var(--ink);color:var(--gold);display:grid;place-items:center;flex:0 0 auto}.ico .ic{width:20px;height:20px}
.ico.lt{background:var(--tint);color:var(--ink)}.ico.au{background:var(--cu3);color:var(--cu2)}.ico.sm{width:36px;height:36px;border-radius:10px}.ico.sm .ic{width:16px;height:16px}
.note{background:var(--cu3);border:1px solid color-mix(in srgb,var(--cu) 35%,#fff);border-radius:14px;padding:12px 14px;font:500 13px var(--font-body);color:var(--cu2);display:flex;gap:10px;align-items:flex-start}.note .ic{color:var(--cu2);width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.note.ink{background:var(--tint);border-color:color-mix(in srgb,var(--ink) 18%,#fff);color:var(--ink)}.note.ink .ic{color:var(--ink)}.note.r{background:var(--red3);border-color:color-mix(in srgb,var(--rose) 25%,#fff);color:var(--rose)}
.av{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;flex:0 0 auto}
.avi{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--font-body);background:var(--cu3);color:var(--cu2);flex:0 0 auto}.avi.n{background:var(--ink);color:#fff}
.stars{color:#E0A23B;letter-spacing:2px;font-size:13px}
.bar{height:8px;border-radius:99px;background:var(--sand);overflow:hidden}.bar i{display:block;height:100%;border-radius:99px;background:var(--cu)}.bar.sg i,.bar.n i{background:var(--ink)}.bar.g i{background:var(--green)}
.empty{text-align:center;padding:44px 20px;color:var(--mu)}.empty .ic{width:36px;height:36px;color:var(--cu2);display:block;margin:0 auto 10px}.empty b{display:block;color:var(--ink);font:700 16px var(--font-heading);margin-bottom:4px}.empty .btn .ic,.empty .chip .ic{width:16px;height:16px;display:inline-block;margin:0;color:currentColor}.empty .btn b{display:inline;font:inherit;color:inherit;margin:0}

/* ---------- forms: the design draws .ip boxes; real controls use .in ---------- */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}.fld>label,.fld .lb{font:700 11.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.ip{height:48px;border:1.5px solid var(--ln);border-radius:12px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;font:500 14px var(--font-body);color:var(--tx);white-space:nowrap;overflow:hidden}.ip .ic{width:17px;height:17px;color:var(--mu)}
.ip input,.ip select{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:inherit;height:100%}
.ip:focus-within,.ip.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--tint)}
.in{width:100%;min-width:0;height:48px;border:1.5px solid var(--ln);border-radius:12px;background:#fff;padding:0 14px;font:500 14px var(--font-body);color:var(--tx);outline:0;transition:border-color .2s,box-shadow .2s}
.in:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--tint)}.in::placeholder{color:#9AA0B4;font-weight:400}.in.bad{border-color:var(--rose)}
/* label.in around an icon + bare input is the design's search-box row: the white box around it is the frame */
label.in:has(>input){border:0;border-radius:0;background:none;box-shadow:none}form:has(>label.in>input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
/* native file pickers: the button matches the kit instead of the browser grey */
input[type=file]{font:500 13px var(--font-body);color:var(--mu);max-width:100%}input[type=file]::file-selector-button{height:34px;padding:0 14px;margin-inline-end:12px;border:1.5px solid var(--ln);border-radius:10px;background:#fff;color:var(--ink);font:600 12.5px var(--font-body);cursor:pointer;transition:border-color .2s}input[type=file]:hover::file-selector-button{border-color:var(--ink)}.in[type=file]{height:auto;min-height:48px;padding:6px 7px}
select.in{appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2366708A' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
textarea.in{height:auto;min-height:110px;padding:12px 14px;line-height:1.55;resize:vertical}.in.sm{height:40px;font-size:13px;border-radius:10px}
.inp{height:48px;border:1.5px solid var(--ln);border-radius:12px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--tx);min-width:0}
.inp .ic{color:var(--mu);width:17px;height:17px}.inp input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 14px var(--font-body);color:inherit;height:100%}.inp:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--tint)}
.pre-in{display:flex;align-items:center;gap:6px;min-width:0}.pre-in .in{flex:1}
.fld .err,.err{color:var(--rose);font-size:12px;font-weight:600}.fld .hint,.hint{color:var(--mu);font-size:12px}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--ln);border-radius:14px;background:#fff;font:600 14px var(--font-body);color:var(--tx);cursor:pointer}.opt.on,.opt:has(input:checked){border-color:var(--ink);background:#F3F6FC}.opt .ic{color:var(--ink)}.opt small{display:block;font:500 12px var(--font-body);color:var(--mu)}
.rad{width:20px;height:20px;border-radius:50%;border:2px solid #C9CBD6;flex:0 0 auto;background:#fff}.opt.on .rad,.opt:has(input:checked) .rad{border:6px solid var(--ink)}
.cb{width:20px;height:20px;border-radius:6px;border:2px solid #C9CBD6;display:inline-grid;place-items:center;flex:0 0 auto;background:#fff}.cb.on{background:var(--ink);border-color:var(--ink);color:var(--gold)}.cb .ic{width:12px;height:12px}
label.ck{cursor:pointer;display:inline-flex;align-items:center;gap:8px}input.cbx{width:20px;height:20px;accent-color:var(--ink);flex:none;margin:0}
.toggle{width:44px;height:26px;border-radius:999px;background:#D6D9E3;position:relative;flex:0 0 auto;display:inline-block}.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}.toggle.on{background:var(--ink)}.toggle.on::after{left:21px;background:var(--gold)}
input.sw{appearance:none;width:44px;height:26px;border-radius:999px;background:#D6D9E3;position:relative;flex:0 0 auto;cursor:pointer;margin:0;transition:background .2s}input.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}
input.sw:checked{background:var(--ink)}input.sw:checked::after{left:21px;background:var(--gold)}
.otp{display:flex;gap:10px}.otp input{width:52px;height:58px;text-align:center;font:700 22px var(--font-heading);border:1.5px solid var(--ln);border-radius:12px;outline:0;color:var(--ink)}.otp input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--tint)}
.upl{border:2px dashed #D3CDBF;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:500 13px var(--font-body);color:var(--mu);background:#fff;min-height:120px;text-align:center;padding:14px}.upl .ic{width:22px;height:22px;color:var(--ink)}.upl input[type=file]{max-width:100%}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--sand);border-radius:12px;max-width:100%;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs span,.tabs button{height:34px;padding:0 14px;border-radius:9px;font:600 13px/34px var(--font-body);color:var(--mu);display:flex;align-items:center;gap:6px;white-space:nowrap;border:0;background:transparent;cursor:pointer}
.tabs .on{background:#fff;color:var(--ink);box-shadow:0 2px 8px -3px rgba(18,53,138,.25)}.tabs i{font-style:normal;font:700 10.5px var(--font-body);background:var(--cu);color:var(--onacc);padding:2px 7px;border-radius:999px}
.stp{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0}.stp .st{display:flex;align-items:center;gap:8px;font:600 13px var(--font-body);color:var(--mu);white-space:nowrap}.stp .st i{width:28px;height:28px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font:700 12px var(--font-body);font-style:normal;color:var(--mu)}
.stp .st.done i{background:var(--ink);color:var(--gold)}.stp .st.now{color:var(--ink)}.stp .st.now i{background:var(--cu);color:var(--onacc)}.stp .ln{width:48px;height:2px;background:var(--ln);margin:0 12px}.stp .ln.done{background:var(--ink)}
.sumrow{display:flex;justify-content:space-between;font:400 13.5px var(--font-body);color:var(--mu);padding:6px 0;gap:12px}.sumrow b{color:var(--tx);font-weight:600}.sumrow.tot{border-top:1.5px dashed var(--ln);margin-top:6px;padding-top:12px;font-weight:700;color:var(--ink)}.sumrow.tot b{font:800 20px var(--font-heading);color:var(--ink)}

/* ---------- tables, KPIs, panels (website and admin) ---------- */
.tbl{width:100%;border-collapse:collapse;font:400 13px var(--font-body)}
.tbl th{text-align:left;font:700 11px var(--font-body);color:var(--mu);padding:10px 14px;border-bottom:1px solid var(--ln);background:#FAF8F3;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--ln);vertical-align:middle}.tbl tr:last-child td{border-bottom:none}.tbl td b{font-weight:600;color:var(--ink)}.tbl tr:hover td{background:#FCFBF8}.tbl .r{text-align:right}
.th{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:0 0 auto}.th img{width:100%;height:100%;object-fit:cover}
.kpi{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;min-width:0}
.kpi small{font:600 12px var(--font-body);color:var(--mu);padding-right:46px}.kpi .v{font:800 26px/1 var(--font-heading);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}.kpi em{font:600 11.5px var(--font-body);font-style:normal;color:var(--cu2)}.kpi em.dn{color:var(--rose)}
.kpi.hl,.kpi.hi{background:var(--ink) var(--pat);color:#fff;border-color:var(--ink)}.kpi.hl small{color:#C5CEE8}.kpi.hl .v{color:#fff}.kpi.hl em{color:var(--gold)}
.kpi .ki{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:10px;background:var(--cu3);color:var(--cu2);display:grid;place-items:center}.kpi .ki .ic{width:18px;height:18px}.kpi.hl .ki{background:rgba(255,255,255,.12);color:var(--gold)}
.panel{background:#fff;border:1px solid var(--ln);border-radius:16px;overflow:hidden;min-width:0}
.phd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--ln);gap:12px}.phd b,.phd h3{font:700 14.5px var(--font-heading);color:var(--ink)}
.pb{padding:16px 18px}
.lgd{display:flex;gap:14px;font:600 11.5px var(--font-body);color:var(--mu);flex-wrap:wrap}.lgd span{display:flex;align-items:center;gap:5px}.lgd i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- feedback: flash, toast, dialog, popovers, pager ---------- */
.flash{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:14px;font:500 13.5px var(--font-body);margin-bottom:16px;border:1px solid transparent}.flash .ic{width:18px;height:18px;margin-top:1px}
.flash.ok{background:var(--green3);color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,transparent)}
.flash.bad{background:var(--red3);color:var(--rose);border-color:color-mix(in srgb,var(--rose) 25%,transparent)}
.flash.info{background:var(--tint);color:var(--ink);border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
.flash ul{margin:4px 0 0;padding-left:18px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:90;background:var(--ink2);color:#fff;padding:12px 18px;border-radius:14px;font:500 13.5px var(--font-body);box-shadow:var(--sh2);transition:.25s;max-width:calc(100vw - 32px);pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog.dlg{border:0;border-radius:22px;padding:0;width:min(540px,calc(100vw - 24px));max-height:calc(100vh - 40px);box-shadow:var(--sh2);color:var(--tx)}
dialog.dlg::backdrop{background:color-mix(in srgb,var(--ink2) 55%,transparent)}
.dlg .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ln)}.dlg .dh h3{font-size:17px}
.dlg .db{padding:20px;overflow:auto}.dlg .df{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--ln);flex-wrap:wrap}
.rel{position:relative}
.pop{position:absolute;z-index:60;top:calc(100% + 8px);background:#fff;color:var(--tx);border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh2);max-width:calc(100vw - 24px)}
.menu-pop{width:240px;padding:8px}.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px;border-radius:10px;font:500 13.5px var(--font-body);background:transparent;border:0;color:var(--tx);cursor:pointer;text-align:left}
.menu-pop a:hover,.menu-pop button:hover{background:var(--sand)}.menu-pop .ic{color:var(--mu);width:16px;height:16px}
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-top:24px}
.pager a,.pager span{min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--ln);background:#fff;display:inline-flex;align-items:center;justify-content:center;font:600 13px var(--font-body)}
.pager .on{background:var(--ink);border-color:var(--ink);color:#fff}.pager .off{opacity:.45}
.copy{display:flex;align-items:center;gap:8px;min-width:0}.copy code{flex:1;min-width:0;overflow-wrap:anywhere;background:var(--sand);border-radius:10px;padding:10px 12px;font-size:12px}
.skel{background:linear-gradient(90deg,var(--sand),#fff,var(--sand));background-size:200% 100%;animation:skel 1.2s infinite;border-radius:8px}@keyframes skel{to{background-position:-200% 0}}

/* ---------- motion (design) ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s,transform .9s}.rv.rv-in{opacity:1;transform:none}.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d4{transition-delay:.4s}
.floaty{animation:floaty 6s ease-in-out infinite}@keyframes floaty{50%{transform:translateY(-10px)}}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--cu);box-shadow:0 0 0 0 color-mix(in srgb,var(--cu) 70%,transparent);animation:pulse 1.8s infinite;display:inline-block}@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ldot{width:8px;height:8px;border-radius:50%;background:var(--rose);display:inline-block;animation:blinkdot 1.2s infinite}@keyframes blinkdot{50%{opacity:.25}}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes heroIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.up{animation:up .9s cubic-bezier(.2,.8,.2,1) both}.heroin{animation:heroIn 1.1s cubic-bezier(.2,.8,.2,1) both}.popin{animation:pop .7s cubic-bezier(.2,.8,.2,1) both}.wiggle{animation:wiggle 2.4s ease-in-out infinite}
.eqz{display:inline-flex;align-items:flex-end;gap:2px;height:16px}.eqz i{width:3px;height:100%;background:currentColor;border-radius:2px;animation:eq 1s ease-in-out infinite;transform-origin:bottom}.eqz i:nth-child(2){animation-delay:.2s}.eqz i:nth-child(3){animation-delay:.4s}.eqz i:nth-child(4){animation-delay:.1s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- keyboard focus ---------- */
:where(a,button,summary,[tabindex]:not([tabindex="-1"]),input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid var(--ink3);outline-offset:2px}
:where(.topbar,.ftr,.side,.phero,.mhero,.sec.ink,.mtop.dk) :where(a,button,summary,[tabindex]):focus-visible{outline-color:var(--gold)}

/* ---------- right-to-left (Arabic / Urdu interface) ---------- */
[dir=rtl] .kick,[dir=rtl] .more{letter-spacing:0}[dir=rtl] .tbl th{text-align:right}[dir=rtl] select.in{background-position:left 14px center;padding-right:14px;padding-left:38px}

/* ---------- phones & tablets ---------- */
@media (max-width:1100px){.g5,.g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g4,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.side2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .wrap{padding:0 16px}.sec{padding:44px 0}.sec-h{flex-wrap:wrap;margin-bottom:22px;gap:12px}.sec-h h2{font-size:25px}
  .g2,.g3,.g4,.g5,.g6,.two,.two2,.two3,.side1,.side2,.grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}
  .card{padding:18px;border-radius:20px}.btn{padding:0 18px}.btn.lg{height:52px}
  .otp input{width:44px;height:52px}.tbl{min-width:560px}.toast{bottom:96px}
}
@media (max-width:760px){.hide-m{display:none!important}}@media (min-width:761px){.only-m{display:none!important}}
/* RTL: corner icons of stat cards sit on the left so the numbers (right-aligned) never run under them */
[dir=rtl] .kpi .ki{right:auto!important;left:14px}[dir=rtl] .kpi small{padding-right:0!important;padding-left:42px}
/* RTL: typed values (e-mails, phones, URLs, English addresses) keep their own direction inside right-aligned fields */
[dir=rtl] :is(input.in,textarea.in,.ip input,.srch input,.inp input){unicode-bidi:plaintext;text-align:right}
[dir=rtl] :is(input[type=email],input[type=tel],input[type=url],input[type=number],input[name*=phone],input[name*=whatsapp],input[name*=email],input[name*=url]){direction:ltr;text-align:right}