/* =======================================================================
   TOP A Design System — v1 (TASK054)
   One token set and one component family for the public site and the
   dashboard. Loaded before every page's own stylesheet; pages alias their
   legacy token names onto these (--bg:var(--t-bg) …) so a value changes
   here and every page follows.

   Prefix: every class here starts with «t-» so nothing collides with the
   per-page rules that predate it.
   ======================================================================= */

:root{
  /* surfaces (warm black, slight green bias) */
  --t-bg:#070908; --t-s1:#0D100F; --t-s2:#131716; --t-s3:#1A1F1D; --t-s4:#222826;
  /* ink */
  --t-ink:#F1EDE3; --t-ink-2:#CFCABF; --t-mute:#8F938D; --t-mute-2:#5F645F;
  /* hairlines */
  --t-line:rgba(241,237,227,.09); --t-line-2:rgba(241,237,227,.16); --t-line-3:rgba(241,237,227,.26);
  /* the one accent, and the semantic set */
  --t-green:#3DDC6F; --t-green-2:#2FBF5D; --t-green-3:#4FE67E; --t-green-ink:#06170C;
  --t-green-soft:rgba(61,220,111,.10); --t-green-line:rgba(61,220,111,.35); --t-green-glow:rgba(61,220,111,.14);
  --t-gold:#D4B46A; --t-gold-ink:#1A1405; --t-gold-soft:rgba(212,180,106,.12); --t-gold-line:rgba(212,180,106,.4);
  --t-danger:#F0776A; --t-danger-soft:rgba(240,119,106,.12); --t-danger-line:rgba(240,119,106,.35);
  --t-warn:#E2B45A; --t-warn-soft:rgba(226,180,90,.12); --t-warn-line:rgba(226,180,90,.35);
  --t-info:#86ABE6; --t-info-soft:rgba(134,171,230,.12); --t-info-line:rgba(134,171,230,.35);
  /* type */
  --t-display:"thmanyah serif display","Markazi Text","Noto Naskh Arabic",serif;
  --t-sans:"thmanyah sans","IBM Plex Sans Arabic","Segoe UI","Noto Kufi Arabic",system-ui,sans-serif;
  --t-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* shape */
  --t-r-s:6px; --t-r:10px; --t-r-l:14px; --t-r-xl:20px;
  --t-sh-2:0 12px 32px -12px rgba(0,0,0,.6); --t-sh-3:0 32px 80px -24px rgba(0,0,0,.75);
  /* motion */
  --t-t1:160ms; --t-t2:240ms; --t-t3:420ms;
  --t-e-out:cubic-bezier(.16,1,.3,1); --t-e-std:cubic-bezier(.4,0,.2,1);
  /* layout */
  --t-wrap:1120px; --t-gutter:20px; --t-hdr-h:64px;
}
@media (min-width:900px){:root{--t-gutter:32px}}

/* ---------- utilities ---------- */
.t-wrap{width:100%;max-width:var(--t-wrap);margin-inline:auto;padding-inline:var(--t-gutter)}
.t-num{font-variant-numeric:tabular-nums;font-family:var(--t-sans)}
.t-ltr{direction:ltr;unicode-bidi:isolate}
.t-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-kicker{font-family:var(--t-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-green);font-weight:500;display:inline-flex;align-items:center;gap:10px}
.t-kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}

/* ---------- buttons ---------- */
.t-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:var(--t-r);font-family:var(--t-sans);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;color:var(--t-ink);background:var(--t-s3);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--t-t1) var(--t-e-std),border-color var(--t-t1) var(--t-e-std),color var(--t-t1) var(--t-e-std),transform var(--t-t1) var(--t-e-std),box-shadow var(--t-t2) var(--t-e-std)}
.t-btn svg{width:18px;height:18px;flex:none;transition:transform var(--t-t2) var(--t-e-out)}
.t-btn:hover{background:var(--t-s4)}
.t-btn:hover svg,.t-btn:focus-visible svg{transform:translateX(-3px)}
[dir="ltr"] .t-btn:hover svg,[dir="ltr"] .t-btn:focus-visible svg{transform:translateX(3px)}
.t-btn:active{transform:scale(.985)}
.t-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--t-bg),0 0 0 4px var(--t-green)}
.t-btn--p{background:var(--t-green);color:var(--t-green-ink);border-color:var(--t-green)}
.t-btn--p:hover{background:var(--t-green-3);border-color:var(--t-green-3)}
.t-btn--o{background:transparent;border-color:var(--t-line-3);color:var(--t-ink)}
.t-btn--o:hover{background:var(--t-s2);border-color:var(--t-ink-2)}
.t-btn--g{background:transparent;color:var(--t-ink-2)}
.t-btn--g:hover{background:var(--t-s2);color:var(--t-ink)}
.t-btn--d{background:transparent;color:var(--t-danger);border-color:var(--t-danger-line)}
.t-btn--d:hover{background:var(--t-danger-soft)}
.t-btn--gold{background:var(--t-gold);color:var(--t-gold-ink);border-color:var(--t-gold)}
.t-btn--gold:hover{background:#E2C57F;border-color:#E2C57F}
.t-btn--s{min-height:40px;padding:0 14px;font-size:13.5px;border-radius:var(--t-r-s)}
.t-btn--l{min-height:56px;padding:0 30px;font-size:17px;border-radius:var(--t-r-l)}
.t-btn--w{width:100%}
.t-btn[disabled],.t-btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
/* the members door, drawn before the portal exists: quiet, not broken-looking */
.t-btn--member[aria-disabled="true"]{opacity:.7;pointer-events:auto;cursor:default}
.t-btn--member[aria-disabled="true"]:hover{background:transparent;border-color:var(--t-line-3)}
.t-btn.is-busy{color:transparent!important;pointer-events:none}
.t-btn.is-busy::after{content:"";position:absolute;width:16px;height:16px;border:2px solid rgba(0,0,0,.25);border-top-color:currentColor;border-radius:50%;animation:t-spin .8s linear infinite;color:var(--t-green-ink)}
.t-btn:not(.t-btn--p):not(.t-btn--gold).is-busy::after{border-color:var(--t-line-3);border-top-color:var(--t-ink)}
@keyframes t-spin{to{transform:rotate(360deg)}}

/* ---------- fields ---------- */
.t-field{display:grid;gap:6px;min-width:0}
.t-field>label,.t-label{font-family:var(--t-sans);font-size:13.5px;font-weight:500;color:var(--t-ink-2)}
.t-field .t-hint{font-family:var(--t-sans);font-size:12.5px;color:var(--t-mute)}
.t-field .t-msg{font-family:var(--t-sans);font-size:12.5px;display:flex;gap:6px;align-items:flex-start;line-height:1.5}
.t-inp{width:100%;font-family:var(--t-sans);font-size:16px;color:var(--t-ink);background:var(--t-s1);border:1px solid var(--t-line-2);border-radius:var(--t-r);padding:12px 14px;min-height:48px;line-height:1.4;transition:border-color var(--t-t1) var(--t-e-std),box-shadow var(--t-t2) var(--t-e-std),background var(--t-t1)}
.t-inp::placeholder{color:var(--t-mute-2)}
.t-inp:hover{border-color:var(--t-line-3)}
.t-inp:focus{outline:none;border-color:var(--t-green);box-shadow:0 0 0 3px var(--t-green-soft);background:var(--t-s2)}
.t-inp[disabled]{opacity:.55}
textarea.t-inp{min-height:120px;resize:vertical}
.t-sel{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--t-mute) 50%),linear-gradient(135deg,var(--t-mute) 50%,transparent 50%);background-position:14px 50%,19px 50%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-start:36px}
[dir="ltr"] .t-sel{background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;padding-inline-start:14px;padding-inline-end:36px}
.t-field.is-err .t-inp{border-color:var(--t-danger);box-shadow:0 0 0 3px var(--t-danger-soft)}
.t-field.is-err .t-msg{color:var(--t-danger)}
.t-field.is-ok .t-inp{border-color:var(--t-green-line)}
.t-field.is-ok .t-msg{color:var(--t-green)}
.t-chk{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-family:var(--t-sans);font-size:14.5px;color:var(--t-ink-2);line-height:1.5}
.t-chk input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid var(--t-line-3);border-radius:5px;background:var(--t-s1);display:grid;place-items:center;transition:background var(--t-t1),border-color var(--t-t1);margin:2px 0 0;flex:none;cursor:pointer}
.t-chk input::after{content:"";width:10px;height:6px;border:2px solid var(--t-green-ink);border-top:0;border-inline-end:0;transform:rotate(-45deg) scale(0);transition:transform var(--t-t1) var(--t-e-out);margin-top:-2px}
[dir="ltr"] .t-chk input::after{transform:rotate(-45deg) scale(0)}
.t-chk input:checked{background:var(--t-green);border-color:var(--t-green)}
.t-chk input:checked::after{transform:rotate(-45deg) scale(1)}
.t-chk input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--t-green-soft)}

/* choice cards (payment method, broker region…) */
.t-opt{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--t-line-2);border-radius:var(--t-r);background:var(--t-s1);cursor:pointer;transition:border-color var(--t-t1),background var(--t-t1)}
.t-opt:hover{border-color:var(--t-line-3)}
.t-opt>i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--t-line-3);margin-top:4px;display:grid;place-items:center;transition:border-color var(--t-t1)}
.t-opt>i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--t-green);transform:scale(0);transition:transform var(--t-t1) var(--t-e-out)}
.t-opt.is-on,.t-opt:has(input:checked){border-color:var(--t-green-line);background:var(--t-green-soft)}
.t-opt.is-on>i,.t-opt:has(input:checked)>i{border-color:var(--t-green)}
.t-opt.is-on>i::after,.t-opt:has(input:checked)>i::after{transform:scale(1)}
.t-opt b{display:block;font-family:var(--t-sans);font-weight:600;font-size:15px;color:var(--t-ink)}
.t-opt span{font-family:var(--t-sans);font-size:13px;color:var(--t-mute);line-height:1.55}

/* ---------- badges, alerts, cards ---------- */
.t-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--t-sans);font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--t-line-2);color:var(--t-ink-2);background:var(--t-s2);white-space:nowrap;line-height:1.4}
.t-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.t-badge--new{color:var(--t-info);border-color:var(--t-info-line);background:var(--t-info-soft)}
.t-badge--wip{color:var(--t-warn);border-color:var(--t-warn-line);background:var(--t-warn-soft)}
.t-badge--ok{color:var(--t-green);border-color:var(--t-green-line);background:var(--t-green-soft)}
.t-badge--no{color:var(--t-danger);border-color:var(--t-danger-line);background:var(--t-danger-soft)}
.t-badge--mute{color:var(--t-mute)}
.t-alert{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:14px 16px;border-radius:var(--t-r);border:1px solid var(--t-line-2);background:var(--t-s1);font-family:var(--t-sans);font-size:14px;color:var(--t-ink-2);line-height:1.6}
.t-alert>i{width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;margin-top:3px;line-height:1}
.t-alert--ok{border-color:var(--t-green-line);color:var(--t-ink)}.t-alert--ok>i{color:var(--t-green)}
.t-alert--err{border-color:var(--t-danger-line)}.t-alert--err>i{color:var(--t-danger)}
.t-alert--warn{border-color:var(--t-warn-line)}.t-alert--warn>i{color:var(--t-warn)}
.t-card{background:var(--t-s1);border:1px solid var(--t-line);border-radius:var(--t-r-l);padding:24px;transition:border-color var(--t-t2) var(--t-e-std),background var(--t-t2)}
.t-card--h:hover{border-color:var(--t-line-3);background:var(--t-s2)}

/* ---------- site header ---------- */
.t-hdr{position:sticky;top:0;inset-inline:0;z-index:60;height:calc(var(--t-hdr-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:transparent;border-bottom:1px solid transparent;transition:background var(--t-t3) var(--t-e-std),border-color var(--t-t3) var(--t-e-std),backdrop-filter var(--t-t3)}
.t-hdr--over{position:fixed}
.t-hdr.is-solid,.t-hdr.is-open,.t-hdr--solid{background:rgba(7,9,8,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--t-line)}
.t-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--t-hdr-h)}
.t-hdr__logo{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.t-hdr__logo img{height:30px;width:auto;display:block}
.t-hdr__nav{display:none;gap:2px;font-family:var(--t-sans);font-size:14px;color:var(--t-ink-2);min-width:0}
.t-hdr__nav a{position:relative;padding:8px 12px;border-radius:var(--t-r-s);text-decoration:none;color:inherit;white-space:nowrap;transition:color var(--t-t1),background var(--t-t1)}
.t-hdr__nav a:hover,.t-hdr__nav a:focus-visible{color:var(--t-ink);background:var(--t-s2)}
.t-hdr__nav a[aria-current="page"]{color:var(--t-ink)}
.t-hdr__acts{display:flex;align-items:center;gap:8px;flex:none}
.t-hdr__lang{font-family:var(--t-sans);font-size:12px;letter-spacing:.06em;color:var(--t-mute);border:1px solid var(--t-line-2);border-radius:var(--t-r-s);padding:0 9px;min-height:32px;display:inline-flex;align-items:center;text-decoration:none;transition:color var(--t-t1),border-color var(--t-t1)}
.t-hdr__lang:hover{color:var(--t-ink);border-color:var(--t-line-3)}
.t-hdr__sec{display:none}
.t-hdr__cta{min-height:40px;padding:0 16px;font-size:14px;border-radius:var(--t-r-s)}
.t-burger{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--t-r-s);border:1px solid var(--t-line-2);background:transparent;position:relative;cursor:pointer;padding:0;color:var(--t-ink)}
.t-burger i{position:absolute;width:18px;height:1.5px;background:currentColor;transition:transform var(--t-t3) var(--t-e-out),opacity var(--t-t2)}
.t-burger i:nth-child(1){transform:translateY(-5px)}.t-burger i:nth-child(3){transform:translateY(5px)}
.t-hdr.is-open .t-burger i:nth-child(1){transform:rotate(45deg)}.t-hdr.is-open .t-burger i:nth-child(2){opacity:0}.t-hdr.is-open .t-burger i:nth-child(3){transform:rotate(-45deg)}
.t-menu{position:fixed;inset:calc(var(--t-hdr-h) + env(safe-area-inset-top)) 0 0;z-index:59;background:rgba(7,9,8,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:24px var(--t-gutter) 32px;display:flex;flex-direction:column;gap:4px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity var(--t-t3) var(--t-e-out),transform var(--t-t3) var(--t-e-out);overflow:auto}
.t-menu.is-open{opacity:1;pointer-events:auto;transform:none}
.t-menu__lnk{font-family:var(--t-display);font-size:26px;font-weight:600;color:var(--t-ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--t-line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.t-menu__lnk svg{width:18px;height:18px;color:var(--t-mute-2);flex:none}
.t-menu__cta{margin-top:auto;padding-top:24px;display:grid;gap:10px}
.t-menu__meta{font-family:var(--t-sans);font-size:13px;color:var(--t-mute);display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
.t-menu__meta a{color:inherit;text-decoration:none}
@media (min-width:900px){
  .t-hdr__nav{display:flex}
  .t-hdr__sec{display:inline-flex}
  .t-burger,.t-menu{display:none}
}
/* the page below a fixed header starts under it; a sticky one takes its own space */
.t-hdr--over+*{--t-hdr-pad:calc(var(--t-hdr-h) + env(safe-area-inset-top))}
body.t-menu-open{overflow:hidden}

/* ---------- site footer ---------- */
.t-ftr{border-top:1px solid var(--t-line);padding-block:48px 28px;font-family:var(--t-sans);font-size:14px;color:var(--t-mute);background:var(--t-bg)}
.t-ftr__top{display:flex;flex-direction:column;gap:28px}
.t-ftr__brand img{height:36px;width:auto;display:block}
.t-ftr__brand p{margin:14px 0 0;max-width:36ch;color:var(--t-mute);line-height:1.7}
.t-ftr__loc{display:flex;gap:10px;align-items:center;color:var(--t-ink-2);margin-top:12px}
.t-ftr__loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t-green);flex:none}
.t-ftr__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.t-ftr__cols h4{font-family:var(--t-sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink);font-weight:600;margin:0 0 10px}
.t-ftr__cols ul{list-style:none;margin:0;padding:0}
.t-ftr__cols a{display:block;padding:4px 0;color:var(--t-mute);text-decoration:none;transition:color var(--t-t1)}
.t-ftr__cols a:hover,.t-ftr__cols a:focus-visible{color:var(--t-ink)}
.t-ftr__cols a[aria-disabled="true"]{cursor:default;opacity:.6}
.t-ftr__tel{display:flex;align-items:center;gap:10px;color:var(--t-ink)!important;font-size:15px}
.t-ftr__tel small{font-size:11.5px;color:var(--t-mute);letter-spacing:.06em;min-width:44px}
.t-ftr__tel span{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.t-ftr__legal{margin:28px 0 0;font-size:12.5px;color:var(--t-mute-2);line-height:1.7;max-width:80ch}
.t-ftr__btm{margin-top:24px;padding-top:18px;border-top:1px solid var(--t-line);font-size:12.5px;color:var(--t-mute-2);display:flex;flex-direction:column;gap:10px;line-height:1.7}
.t-ftr .topa-legal{margin-top:0}
@media (min-width:640px){.t-ftr__cols{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .t-ftr{padding-block:64px 32px}
  .t-ftr__top{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:48px}
  .t-ftr__cols{gap:56px;flex:none}
  .t-ftr__btm{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ---------- motion ---------- */
/* Visible at rest. The pre-state is added by topa-ds.js only to elements
   below the fold, only after the script runs, and only once. */
.t-rv{opacity:1;transform:none}
.t-rv.t-rv--pre{opacity:0;transform:translateY(14px)}
.t-rv.t-rv--in{opacity:1;transform:none;transition:opacity var(--t-t3) var(--t-e-out),transform var(--t-t3) var(--t-e-out)}
.t-rv.t-rv--in[data-t-d="1"]{transition-delay:60ms}.t-rv.t-rv--in[data-t-d="2"]{transition-delay:120ms}.t-rv.t-rv--in[data-t-d="3"]{transition-delay:180ms}.t-rv.t-rv--in[data-t-d="4"]{transition-delay:240ms}
.t-copy{display:inline-flex;align-items:center;gap:8px}
.t-copy__ok{font-family:var(--t-sans);font-size:12.5px;color:var(--t-green);opacity:0;transform:translateX(4px);transition:opacity var(--t-t2) var(--t-e-out),transform var(--t-t2) var(--t-e-out)}
.t-copy.is-done .t-copy__ok{opacity:1;transform:none}
.t-skel{height:14px;border-radius:4px;background:linear-gradient(90deg,var(--t-s2) 25%,var(--t-s3) 50%,var(--t-s2) 75%);background-size:200% 100%;animation:t-sk 1.4s ease infinite}
@keyframes t-sk{from{background-position:200% 0}to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  .t-btn,.t-inp,.t-opt,.t-hdr,.t-menu,.t-menu__lnk,.t-rv,.t-copy__ok,.t-burger i{transition-duration:0ms!important}
  .t-rv.t-rv--pre{opacity:1;transform:none}
  .t-skel,.t-btn.is-busy::after{animation-duration:0ms!important}
}