:root{
  --bg:#F2EFEA; --surface:#FFFFFF; --surface-2:#F4F2EE; --ink:#141A24; --ink-2:#4B5566; --ink-3:#5E6776; --line:#DCD8D0;
  --accent:#1D6F63; --accent-hover:#175B51; --accent-ink:#FFFFFF; --accent-soft:#DCEEEA; --accent-glow:rgba(29,111,99,.55);
  --copper:#975220; --copper-soft:#F6E7DA;
  --good:#1F6B43; --good-soft:#E1F1E6; --warn:#8A5B00; --warn-soft:#FBEFD2; --serious:#9A4312; --serious-soft:#F8E3D6; --crit:#B3261E; --crit-soft:#F8DEDC; --on-crit:#FFFFFF; --neutral-soft:#ECE9E3;
  --hero-bg:#0F1C1D; --hero-ink:#EEF4F2; --hero-dim:#9DB3AE; --hero-card:rgba(255,255,255,.07); --hero-line:rgba(255,255,255,.12);
  --bar:#1D6F63; --bar-hover:#12483F; --grid:#E3E8E6;
  --shadow:0 18px 40px -24px rgba(30,40,70,.40);
  --logo-accent:#B98A2E; --tag-accent:#8A6212;
  /* gold of the brand, and the glass everything sits on */
  --gold:#9A7428; --gold-ink:#FFFFFF; --gold-glow:rgba(154,116,40,.7); --gold-soft:rgba(154,116,40,.12); --gold-line:rgba(154,116,40,.28);
  --glass:rgba(255,255,255,.60); --glass-2:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.92);
  --glass-edge:0 0 0 .5px rgba(20,26,36,.09); --glass-hi:inset 0 1px 0 rgba(255,255,255,.95); --glass-shadow:0 20px 44px -28px rgba(40,50,80,.50);
  --blur:blur(22px) saturate(180%);
  --field:rgba(255,255,255,.78); --field-line:rgba(20,26,36,.12);
  --av-in:radial-gradient(circle at 30% 25%,#FFFFFF,#F2EDE2);
  --page:radial-gradient(640px 640px at 100% -12%,rgba(222,188,118,.42),transparent 66%),radial-gradient(680px 680px at -14% 52%,rgba(140,166,226,.32),transparent 66%),radial-gradient(560px 560px at 104% 112%,rgba(222,188,118,.26),transparent 66%),linear-gradient(180deg,#F6F3EE,#ECE9E3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B111D; --surface:#141C2B; --surface-2:#1A2436; --ink:#EEF2F8; --ink-2:#A9B3C6; --ink-3:#8A94A9; --line:#27324A; --tag-accent:#D6B46E;
    --accent:#4FB3A5; --accent-hover:#6CC6B9; --accent-ink:#04201B; --accent-soft:rgba(79,179,165,.16); --accent-glow:rgba(79,179,165,.5);
    --copper:#E2B872; --copper-soft:rgba(214,180,110,.14);
    --good:#7DD39A; --good-soft:rgba(125,211,154,.13); --warn:#E8BE5C; --warn-soft:rgba(232,190,92,.13); --serious:#F0A06E; --serious-soft:rgba(240,160,110,.13); --crit:#FF8F86; --crit-soft:rgba(255,143,134,.14); --on-crit:#2A0D0B; --neutral-soft:rgba(255,255,255,.07);
    --hero-bg:#080C15; --hero-ink:#EEF2F8; --hero-dim:#8F9AB0; --hero-card:rgba(255,255,255,.06); --hero-line:rgba(255,255,255,.1);
    --bar:#4FB3A5; --bar-hover:#8FD8CC; --grid:#222C40;
    --shadow:0 20px 44px -22px rgba(0,0,0,.85);
    --logo-accent:#D6B46E;
    --gold:#D6B46E; --gold-ink:#1A1408; --gold-glow:rgba(214,180,110,.7); --gold-soft:rgba(214,180,110,.14); --gold-line:rgba(214,180,110,.30);
    --glass:rgba(255,255,255,.07); --glass-2:rgba(255,255,255,.11); --glass-line:rgba(255,255,255,.13);
    --glass-edge:0 0 0 .5px rgba(0,0,0,.35); --glass-hi:inset 0 1px 0 rgba(255,255,255,.12); --glass-shadow:0 20px 44px -22px rgba(0,0,0,.9);
    --blur:blur(24px) saturate(170%);
    --field:rgba(255,255,255,.06); --field-line:rgba(255,255,255,.14);
    --av-in:radial-gradient(circle at 30% 25%,#2A3346,#151C2A);
    --page:radial-gradient(660px 660px at -6% -14%,rgba(92,118,204,.42),transparent 66%),radial-gradient(560px 560px at 108% 48%,rgba(214,180,110,.10),transparent 64%),radial-gradient(600px 600px at 8% 112%,rgba(64,92,160,.30),transparent 66%),linear-gradient(180deg,#121A2A,#0B111D 55%,#080C15);
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0B111D; --surface:#141C2B; --surface-2:#1A2436; --ink:#EEF2F8; --ink-2:#A9B3C6; --ink-3:#8A94A9; --line:#27324A; --tag-accent:#D6B46E;
    --accent:#4FB3A5; --accent-hover:#6CC6B9; --accent-ink:#04201B; --accent-soft:rgba(79,179,165,.16); --accent-glow:rgba(79,179,165,.5);
    --copper:#E2B872; --copper-soft:rgba(214,180,110,.14);
    --good:#7DD39A; --good-soft:rgba(125,211,154,.13); --warn:#E8BE5C; --warn-soft:rgba(232,190,92,.13); --serious:#F0A06E; --serious-soft:rgba(240,160,110,.13); --crit:#FF8F86; --crit-soft:rgba(255,143,134,.14); --on-crit:#2A0D0B; --neutral-soft:rgba(255,255,255,.07);
    --hero-bg:#080C15; --hero-ink:#EEF2F8; --hero-dim:#8F9AB0; --hero-card:rgba(255,255,255,.06); --hero-line:rgba(255,255,255,.1);
    --bar:#4FB3A5; --bar-hover:#8FD8CC; --grid:#222C40;
    --shadow:0 20px 44px -22px rgba(0,0,0,.85);
    --logo-accent:#D6B46E;
    --gold:#D6B46E; --gold-ink:#1A1408; --gold-glow:rgba(214,180,110,.7); --gold-soft:rgba(214,180,110,.14); --gold-line:rgba(214,180,110,.30);
    --glass:rgba(255,255,255,.07); --glass-2:rgba(255,255,255,.11); --glass-line:rgba(255,255,255,.13);
    --glass-edge:0 0 0 .5px rgba(0,0,0,.35); --glass-hi:inset 0 1px 0 rgba(255,255,255,.12); --glass-shadow:0 20px 44px -22px rgba(0,0,0,.9);
    --blur:blur(24px) saturate(170%);
    --field:rgba(255,255,255,.06); --field-line:rgba(255,255,255,.14);
    --av-in:radial-gradient(circle at 30% 25%,#2A3346,#151C2A);
    --page:radial-gradient(660px 660px at -6% -14%,rgba(92,118,204,.42),transparent 66%),radial-gradient(560px 560px at 108% 48%,rgba(214,180,110,.10),transparent 64%),radial-gradient(600px 600px at 8% 112%,rgba(64,92,160,.30),transparent 66%),linear-gradient(180deg,#121A2A,#0B111D 55%,#080C15);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{direction:rtl}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-size:15px;line-height:1.65;padding-inline:16px;padding-block:12px 40px}
h1,h2,h3{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;margin:0;line-height:1.35;text-wrap:balance;font-weight:600}
p{margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.logo{display:block;fill:currentColor;height:auto;shape-rendering:geometricPrecision}
.logo-outline{fill:none;stroke:currentColor;stroke-width:5;--logo-accent:none}
.hero .hlogo{--logo-accent:#D8AD5E}
.hlogo svg,.wm svg,.slogo svg{width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons & fields */
.btn{border:0;border-radius:12px;padding:12px 18px;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:15px;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.btn:hover{background:var(--accent-hover)}
.btn.block{width:100%;padding-block:14px;font-size:16px}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn.danger{background:var(--crit);color:var(--on-crit)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{border:0;background:none;color:var(--accent);font-weight:600;padding:0;font-size:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.inp{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:16px;transition:border-color .15s}
.inp:focus{border-color:var(--accent);outline:none}
.inp.ltr{direction:ltr;text-align:left;font-family:"IBM Plex Mono",monospace;letter-spacing:.04em}
.pw{position:relative}
.pw .inp{padding-inline-end:70px}
.pw button{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--ink-3);font-size:13px;padding:6px}
.err{font-size:13.5px;color:var(--crit);min-height:1.3em}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.check input{width:19px;height:19px;accent-color:var(--accent);margin:0}

.switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:40px;height:23px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;transition:background .15s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:inset-inline-start .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked{background:var(--good)}
.switch input:checked::after{inset-inline-start:20px}
.switch input:disabled{opacity:.4;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px 3px 9px;border-radius:99px;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.serious{background:var(--serious-soft);color:var(--serious)}
.pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.crit i{border-radius:1px}
.pill.neutral{background:var(--neutral-soft);color:var(--ink-2)}
.pill.neutral i{border-radius:1px}


/* credit footer */
.sfoot{display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:26px 6px;text-align:center}
.auth .sfoot{margin-top:auto;border-top:1px solid var(--line);padding-top:26px}
.sf-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap}
.sf-t{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;font-weight:500;font-size:clamp(15px,1.8vw,19px);color:var(--ink-2);white-space:nowrap}
.sf-logo{display:block;width:clamp(50px,5vw,60px);color:var(--ink);border-radius:8px;padding:2px;transition:transform .2s,opacity .2s;margin-top:-4px}
.sf-logo svg{width:100%}
@media (hover:hover){.sf-logo:hover{transform:translateY(-2px);opacity:.85}}
.sf-logo:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.sf-pill{display:inline-flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:99px;padding:7px 22px;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:clamp(13.5px,1.5vw,15.5px);color:var(--ink-2);background:var(--surface)}
.sf-pill .num{font-variant-numeric:tabular-nums}
.sf-pill .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-3);opacity:.7}
.c-year{direction:ltr;unicode-bidi:isolate}
.side .sfoot{padding-block:14px 0;gap:10px;border-top:1px solid var(--line)}
.side .sf-row{gap:5px}.side .sf-t{font-size:12px}.side .sf-logo{width:40px}.side .sf-pill{font-size:11.5px;padding:4px 12px;gap:8px}
.amain .sfoot.m-only{display:none}
@media (max-width:900px){.amain .sfoot.m-only{display:flex}}


/* tagline */
.tagline{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;font-weight:500;font-size:15px;color:var(--ink-2);text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;margin:0}
.tagline b{color:var(--tag-accent);font-weight:600}
.tagline::before,.tagline::after{content:"";width:18px;height:1px;background:currentColor;opacity:.35}
.hero .tagline{justify-content:flex-start;color:var(--hero-dim);font-size:16px;margin-top:-10px}
.hero .tagline b{color:#D8AD5E}
.hero .tagline::before{display:none}
.hero .tagline::after{width:28px;background:#D8AD5E;opacity:.7}

/* ============ PORTAL: auth ============ */
.portal{max-width:1180px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.urgent{display:flex;gap:10px;align-items:center;background:var(--warn-soft);color:var(--warn);border-radius:14px;padding:10px 14px;font-size:13.5px}
.urgent b{font-family:"Readex Pro",sans-serif}
.urgent svg{width:18px;height:18px;flex:none}
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;min-height:640px;box-shadow:var(--shadow)}
.auth-form{padding:48px clamp(24px,5vw,64px);display:flex;flex-direction:column}
.auth-inner{width:100%;max-width:400px;margin:auto 0;display:flex;flex-direction:column;gap:18px}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:auto;padding-bottom:28px}
.auth-top .dom{font-size:12.5px;color:var(--ink-3)}
.m-brand{display:none}
.auth h1{font-size:28px}
.auth .lead{color:var(--ink-2);font-size:15px}
.hero{background:var(--hero-bg);color:var(--hero-ink);position:relative;overflow:hidden;padding:44px;display:flex;flex-direction:column;gap:22px;isolation:isolate}
.hero .wm{position:absolute;width:125%;inset-inline-start:-38%;bottom:-14%;color:var(--hero-ink);opacity:.05;z-index:-1;pointer-events:none}
.hero .hlogo{width:clamp(170px,18vw,220px);color:var(--hero-ink);filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.hero h2{font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.35;max-width:14ch}
.hero ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;color:var(--hero-dim);font-size:14.5px}
.hero li{display:flex;gap:10px;align-items:center}
.hero li svg{width:20px;height:20px;flex:none;color:var(--hero-ink)}
.hero .spacer{flex:1}
.adcard{border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px}
.hero .adcard{background:var(--hero-card);border:1px solid var(--hero-line);backdrop-filter:blur(6px)}
.adcard .k{font-size:11.5px;letter-spacing:.04em;color:var(--hero-dim);display:flex;align-items:center;gap:6px}
.adcard .k svg{width:14px;height:14px}
.adcard b{font-family:"Readex Pro",sans-serif;font-size:17px;font-weight:600}
.adcard span{font-size:13.5px;color:var(--hero-dim)}
.adcard .link{color:inherit;text-decoration:underline;text-underline-offset:3px;align-self:flex-start;margin-top:4px;font-size:13.5px}
.adcard.light{background:var(--accent-soft);color:var(--ink)}
.adcard.light .k,.adcard.light span{color:var(--ink-2)}
.m-ad{display:none}
.m-ad .adcard{flex:1}
.hero .copy{font-size:12px;color:var(--hero-dim);display:flex;align-items:center;gap:10px}
.hero .copy svg{width:48px}

.who{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:"Readex Pro",sans-serif;font-weight:700;flex:none;font-size:17px}
.who b{display:block;font-family:"Readex Pro",sans-serif;font-weight:600;line-height:1.3}
.who span{font-size:13px;color:var(--ink-3)}
.who .link{margin-inline-start:auto;font-size:13px}
.demo{border:1.5px dashed var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
.demo b{font-size:12px;color:var(--copper)}
.demo button{display:flex;justify-content:space-between;gap:10px;border:0;background:var(--surface-2);border-radius:9px;padding:7px 10px;font-size:13px;text-align:start}
.demo button .mono{color:var(--ink)}
.offnote{display:flex;gap:10px;align-items:flex-start;background:var(--neutral-soft);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--ink-2)}
.offnote svg{width:18px;height:18px;flex:none;margin-top:2px}

.dots{display:flex;justify-content:center;gap:16px;padding-block:6px}
.dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--accent);transition:background .12s}
.dot.on{background:var(--accent)}
.dots.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:320px;width:100%;margin-inline:auto}
.key{height:58px;border-radius:16px;border:0;background:var(--surface-2);color:var(--ink);font-family:"Readex Pro",sans-serif;font-size:22px;font-weight:500;transition:background .1s}
.key:active{background:var(--accent-soft)}
.key.fn{background:transparent;font-size:14px;color:var(--ink-2)}

/* ============ PORTAL: shell ============ */
.shead{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.shead .slogo{width:78px;color:var(--ink);flex:none;padding-inline:4px}
.vsep{width:1px;align-self:stretch;background:var(--line)}
.tsw{position:relative}
.tbtn{display:flex;align-items:center;gap:10px;border:0;background:var(--surface-2);border-radius:12px;padding:6px 12px;text-align:start;max-width:260px}
.tbtn small{display:block;font-size:11px;color:var(--ink-3);line-height:1.2}
.tbtn b{display:block;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtn svg{width:14px;height:14px;color:var(--ink-3);flex:none}
.menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;z-index:8}
.menu button{border:0;background:transparent;border-radius:10px;padding:10px 12px;text-align:start;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.menu button:hover{background:var(--surface-2)}
.menu button[aria-current="true"]{background:var(--accent-soft);font-weight:600}
.menu .mhint{font-size:12px;color:var(--ink-3)}
.shead .end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.netpill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border-radius:99px;padding:5px 11px}
.netpill.on{background:var(--good-soft);color:var(--good)}
.netpill.off{background:var(--neutral-soft);color:var(--ink-2)}
.netpill.sync{background:var(--accent-soft);color:var(--accent)}
.netpill i{width:8px;height:8px;border-radius:50%;background:currentColor}
.netpill.off i{border-radius:1px;background:transparent;border:2px solid currentColor}
.ubtn{border:0;background:transparent;padding:0;border-radius:50%}
.ubtn .avatar{width:38px;height:38px;font-size:15px}
.umenu{inset-inline-start:auto;inset-inline-end:0}

.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-radius:16px;padding:13px 16px;font-size:14px}
.banner svg{width:20px;height:20px;flex:none}
.banner .txt{flex:1;min-width:220px}
.banner b{font-family:"Readex Pro",sans-serif;font-weight:600;display:block}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.banner.ro{background:var(--serious-soft);color:var(--serious)}
.banner.off{background:var(--neutral-soft);color:var(--ink-2)}
.banner.crit{background:var(--crit-soft);color:var(--crit)}
.banner .txt span{color:var(--ink-2)}

.greet h1{font-size:clamp(22px,3vw,28px)}
.greet p{color:var(--ink-2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tile{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;text-align:start;transition:transform .15s,box-shadow .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent}
.tile .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff}
.tile .ico svg{width:26px;height:26px}
.tile b{font-family:"Readex Pro",sans-serif;font-size:17px;font-weight:600;display:block}
.tile .d{font-size:13px;color:var(--ink-2)}
.tile .meta{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px;margin-top:auto}
.tile.locked{background:transparent;border-style:dashed}
.tile.locked .ico{opacity:.5}
.sec-h{font-size:13px;color:var(--ink-3);font-weight:600;margin-top:4px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:16px;align-items:start}

.apphead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.back{border:0;background:var(--surface);border:1px solid var(--line);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.back svg{width:18px;height:18px}
.apphead .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.apphead .ico svg{width:22px;height:22px}
.apphead h1{font-size:22px}
.apphead small{display:block;color:var(--ink-3);font-size:12.5px;line-height:1.2}
.apphead .end{margin-inline-start:auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card h2{font-size:17px}
.card .sub{color:var(--ink-2);font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.kpi span{color:var(--ink-2);font-size:13px}
.kpi b{font-family:"Readex Pro",sans-serif;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.kpi b small{font-size:14px;color:var(--ink-2);font-weight:500}
.kpi em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.sample-tag{font-size:11px;color:var(--copper);background:var(--copper-soft);padding:1px 9px;border-radius:99px;align-self:flex-start}
.docline{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--ink-3);padding-top:6px;flex-wrap:wrap;text-align:center}
.docline svg{width:46px;color:var(--ink-2)}

/* responsive table -> cards */
.rt{display:flex;flex-direction:column}
.rt-h,.rt-r{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line)}
.rt-h{font-size:12px;color:var(--ink-3);font-weight:600;padding-block:6px}
.rt-r:last-child{border-bottom:0}
.rt-r .nm{font-weight:600;font-family:"Readex Pro",sans-serif;line-height:1.35}
.rt-r .sb{display:block;font-size:12px;color:var(--ink-3);font-weight:400;font-family:"IBM Plex Sans Arabic",sans-serif}
.rt-c{padding:12px 14px;background:var(--crit-soft);border-radius:14px;margin-block:6px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13.5px}
.rt-c p{flex:1;min-width:220px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:11.5px;padding:1px 8px;border-radius:6px;background:var(--neutral-soft);color:var(--ink-2);white-space:nowrap}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.new-row{animation:flash 1.2s ease}
@keyframes flash{from{background:var(--accent-soft)}to{background:transparent}}
@media (max-width:720px){
  .rt-h{display:none}
  .rt-r{grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;gap:10px 14px}
  .rt-r:last-child{border-bottom:1px solid var(--line)}
  .rt-r>[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--ink-3);font-weight:500;margin-bottom:2px}
  .rt-r>.full{grid-column:1/-1}
}

/* ============ phone layouts ============ */
@media (max-width:860px){
  .auth{grid-template-columns:1fr;min-height:0;border-radius:22px}
  .hero{display:none}
  .auth-form{padding:28px 20px 22px}
  .auth-top{display:none}
  .m-brand{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:10px}
  .m-brand svg{width:156px;color:var(--ink)}
  .m-brand span{font-size:12px;color:var(--ink-3)}
  .auth h1{font-size:24px;text-align:center}
  .auth .lead{text-align:center}
  .auth-inner{margin:0 auto}
  .m-ad{display:flex;margin-top:22px}
  .two{grid-template-columns:1fr}
  .ads-grid{grid-template-columns:1fr}
  .ads-prev{position:static}
  .bk{grid-template-columns:1fr}
  .clist{display:none}
  select.mobile-only{display:block}
}
@media (max-width:600px){
  body{padding-block:8px 30px}
  .shead{padding:8px 10px;gap:8px;border-radius:16px}
  .shead .slogo{width:60px}
  .shead .vsep{display:none}
  .tbtn{max-width:170px;padding:5px 10px}
  .netpill span{display:none}
  .netpill{padding:7px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:14px 8px}
  .tile{border:0;background:transparent;padding:4px 0;align-items:center;text-align:center;gap:8px}
  .tile:hover{transform:none;box-shadow:none}
  .tile .ico{width:64px;height:64px;border-radius:18px}
  .tile .ico svg{width:30px;height:30px}
  .tile b{font-size:13.5px;font-weight:500}
  .tile .d,.tile .meta{display:none}
  .tile.locked{border:0}
  .tiles .tile .lk{display:block;font-size:10.5px;color:var(--ink-3);margin-top:-6px}
  .apphead h1{font-size:19px}
  .apphead .end{width:100%}
  .apphead .end .btn{width:100%}
  .kpi b{font-size:22px}
}
.tile .lk{display:none}
@media (max-width:900px){
  .admin{grid-template-columns:1fr;padding-bottom:70px}
  .side{display:none}
  .mhead{display:flex;align-items:center;gap:10px;justify-content:space-between}
  .mhead svg.logo{width:92px;color:var(--ink)}
  .mhead span{font-size:12px;color:var(--ink-3)}
  .atop h1{font-size:21px}
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;inset-inline:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--ink-3);padding:4px 0;position:relative}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button[aria-current="page"]{color:var(--accent);font-weight:600}
  .tabbar .badge{position:absolute;top:0;inset-inline-end:calc(50% - 20px);font-size:9.5px;background:var(--crit);color:var(--on-crit);border-radius:99px;padding:0 5px;line-height:15px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .admin-mode .pbar{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== real portal additions ===== */
html{direction:rtl}
body{margin:0;min-height:100vh}
[hidden]{display:none!important}
.portal{max-width:1180px;margin-inline:auto}
.hint-sm{font-size:12.5px;color:var(--ink-3)}
.pin-setup .dots{margin-top:4px}
/* system view inside the platform */
body.in-app{padding:0;overflow:hidden;height:100vh;height:100dvh}
.appview{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top,0px)}
.appbar{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--line);min-height:52px}
.appbar .home{border:0;background:var(--surface-2);border-radius:11px;height:38px;padding:0 10px;display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;font-size:13.5px}
.appbar .home svg{width:18px;height:18px}
.appbar .home .lg{width:40px;color:var(--ink)}
.appbar .ttl{display:flex;align-items:center;gap:8px;min-width:0}
.appbar .ttl i{width:10px;height:10px;border-radius:4px;flex:none}
.appbar .ttl b{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:15px;white-space:nowrap}
.appbar .ttl span{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .end{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.appbar .sw{border:0;background:transparent;border-radius:10px;padding:6px 8px;color:var(--ink-2);font-size:13px}
.appframe{flex:1;position:relative;background:var(--bg)}
.appframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
.appframe .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:14px}
.appframe .loading .spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:sp .8s linear infinite;margin:0 auto 10px}
@keyframes sp{to{transform:rotate(360deg)}}
.sysmenu{position:absolute;top:52px;inset-inline-start:10px;z-index:5;min-width:240px}
@media (max-width:600px){.appbar .ttl span{display:none}.appbar .home .lbl{display:none}}

/* floating button inside a system (only for several systems or companies) */
.sq-fab{position:fixed;z-index:20;inset-inline-end:14px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;padding:9px;color:var(--ink);opacity:.92;transition:opacity .15s,transform .15s}
.sq-fab:hover{opacity:1;transform:translateY(-1px)}
.sq-fab-off .sq-fab{opacity:0;transform:scale(.7);pointer-events:none}
.sq-fab .logo{width:100%}
.sq-fabmenu{position:fixed;z-index:21;inset-inline-end:14px;bottom:calc(142px + env(safe-area-inset-bottom,0px));top:auto;inset-inline-start:auto;min-width:230px;max-height:60vh;overflow:auto}
.sq-fabmenu .mh{padding:8px 12px 4px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.sq-fabmenu .sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:8px;vertical-align:middle}
@media (min-width:900px){.sq-fab{bottom:calc(20px + env(safe-area-inset-bottom,0px))}.sq-fabmenu{bottom:calc(74px + env(safe-area-inset-bottom,0px))}}

/* ===== notice (toast) ===== */
.toast{position:fixed;z-index:60;bottom:calc(24px + env(safe-area-inset-bottom,0px));inset-inline:0;margin-inline:auto;width:max-content;transform:translateY(16px);
  display:flex;align-items:center;gap:6px;max-width:min(420px,calc(100vw - 32px));padding:11px 16px 11px 18px;border-radius:14px;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--line);border-inline-start:3px solid var(--logo-accent);
  box-shadow:var(--shadow);font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.toast b{color:var(--ink);font-weight:600;white-space:nowrap}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast.bad{border-inline-start-color:var(--crit)}
.toast.bad b{color:var(--crit)}
.toast:empty{display:none}

/* ===== no internet (first visit on this device) ===== */
.nonet{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.nonet .nn-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--neutral-soft);color:var(--ink-2);margin-bottom:6px}
.nonet .nn-ico svg{width:22px;height:22px}
.nn-hint{text-align:center;color:var(--ink-3);font-size:13px;line-height:1.7}

/* ============ sign-in: glass on midnight or pearl ============
 * Follows the chosen appearance (automatic, light or dark). Gold is the brand's accent here. */
body.auth-mode{padding:0;min-height:100vh;min-height:100dvh}
.nx{
  --accent:var(--gold);--accent-hover:var(--gold);--accent-ink:var(--gold-ink);--accent-soft:var(--gold-soft);--accent-glow:var(--gold-glow);--copper:var(--gold);
  color:var(--ink);display:grid;grid-template-columns:minmax(420px,540px) minmax(0,1fr);min-height:100vh;min-height:100dvh
}
.nx-form{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-inline-end:1px solid var(--glass-line);box-shadow:var(--glass-hi);padding:34px clamp(28px,5.5vw,76px) 28px;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;box-sizing:border-box;min-width:0}
.nx .urgent{margin-bottom:18px}
.nx-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nx-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(16px,4vh,36px)}
.nx-brand .logo{width:140px;color:var(--ink)}
.nx .tagline{font-family:Amiri,"IBM Plex Sans Arabic",serif;font-size:19px;font-weight:400;color:var(--ink-2)}
.nx .tagline::before,.nx .tagline::after{display:none}
.nx .tagline b{color:var(--gold);font-weight:700}
.nx-rule{display:flex;align-items:center;gap:12px;margin:clamp(16px,3.4vh,28px) 0}
.nx-rule::before,.nx-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.nx-dia{width:18px;height:10px;fill:var(--gold);flex:none;display:block}
.nx-inner{display:flex;flex-direction:column;gap:16px;width:100%}
.nx .auth-inner{max-width:none;margin:0}
.nx h1{font-family:Amiri,"Readex Pro",serif;font-size:34px;font-weight:700;line-height:1.3}
.nx .lead{color:var(--ink-2);font-size:15px}
.nx .field label{color:var(--ink-2)}
.nx .inp{min-height:56px;padding:0 18px;font-size:17px}
.nx .inp.ltr{font-size:18px}
.nx .btn.block{min-height:56px;padding-block:0;font-size:17px}
.nx .check input{accent-color:var(--gold)}
.nx .hint-sm{color:var(--ink-3)}
.nx .sfoot{margin-top:auto;border-top:0;padding:22px 0 0;gap:12px}
.nx .sf-t{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:14px;font-weight:400;color:var(--ink-2)}
.nx .sf-logo{width:48px;color:var(--ink)}
.nx .sf-pill .dot{width:4px;height:4px;border:0;background:var(--gold);opacity:1}
/* the two links under the sign-in card: a glass capsule and a quiet one */
.nx #forgot{align-self:center;font-size:14px;font-weight:600;color:var(--gold);padding:8px 16px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.nx #forget,.nx #notme{color:var(--ink-3)}

/* desktop side: welcome to the founding customers, or the live ad */
.nx-side{padding:40px clamp(28px,4.4vw,56px) 36px;display:flex;flex-direction:column;gap:18px;min-width:0}
.nx-card{flex:1;position:relative;border:1px solid var(--glass-line);border-radius:30px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px clamp(28px,5vw,64px);isolation:isolate}
.nx-card::before{content:"";position:absolute;inset:12px;border:1px solid var(--gold-line);border-radius:20px;pointer-events:none;z-index:-1;opacity:.55}
.nx-card>.nx-dia{width:54px;height:30px}
.nx-eyebrow{font-size:13px;font-weight:600;color:var(--gold);border:1px solid var(--gold-line);background:var(--gold-soft);border-radius:99px;padding:4px 16px}
.nx-card .nx-eyebrow{margin-top:22px}
.nx-card h2{margin-top:22px;font-family:Amiri,serif;font-size:clamp(40px,4.6vw,58px);font-weight:700;line-height:1.2;color:var(--ink);max-width:none}
.nx-card p{margin-top:18px;max-width:470px;font-family:Amiri,serif;font-size:clamp(18px,1.7vw,22px);line-height:1.85;color:var(--ink-2);text-wrap:pretty}
.nx-card p b{color:var(--ink);font-weight:700}
.nx-sign{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:14px;color:var(--ink-2)}
.nx-sign::before,.nx-sign::after{content:"";width:56px;height:1px;background:var(--gold-line)}
.nx-since{text-align:center;font-size:12.5px;color:var(--ink-3)}
.nx-anim>*{animation:nxIn .8s cubic-bezier(.2,.7,.2,1) both}
.nx-anim>:nth-child(2){animation-delay:.08s}.nx-anim>:nth-child(3){animation-delay:.16s}.nx-anim>:nth-child(4){animation-delay:.24s}.nx-anim>:nth-child(5){animation-delay:.32s}
@keyframes nxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nx-ad{align-items:flex-start;text-align:start}
.nx-adh{display:flex;align-items:center;gap:10px}
.nx-new{font-size:12.5px;font-weight:600;color:var(--gold-ink);background:var(--gold);border-radius:99px;padding:3px 12px}
.nx-tag{font-size:11.5px;font-weight:400;color:var(--ink-3);border:1px solid var(--glass-line);border-radius:6px;padding:1px 8px}
.nx-ad h2{margin-top:18px}
.nx-ad p{max-width:520px}
.nx-more{margin-top:26px;border:0;background:none;color:var(--gold);font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center;padding:0}
.nx-more:hover{filter:brightness(1.12)}
.nx-more svg{width:16px;height:16px}

/* phones: one column, the welcome as a small glass card */
.nx-m{display:none}
.nx-mini{width:100%;position:relative;border:1px solid var(--glass-line);border-radius:22px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-hi);padding:18px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--ink)}
.nx-mini .nx-dia{width:30px;height:17px}
.nx-mini b{font-family:Amiri,serif;font-size:23px;font-weight:700;line-height:1.3}
.nx-mini .t{font-family:Amiri,serif;font-size:16px;line-height:1.7;color:var(--ink-2)}
.nx-mini .nx-eyebrow{margin-top:2px;font-size:11.5px;padding:2px 12px}
.nx-mini-ad{align-items:flex-start;text-align:start;font:inherit}
.nx-mini-ad .nx-more{margin-top:4px;font-size:14px}
@media (max-width:860px){
  .nx{grid-template-columns:minmax(0,1fr)}
  .nx-side{display:none}
  .nx-form{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;width:100%;max-width:520px;margin-inline:auto;padding:calc(14px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
  .nx-brand{margin-top:16px;gap:9px}
  .nx-brand .logo{width:112px}
  .nx .tagline{font-size:16.5px}
  .nx-rule{margin:16px 0}
  .nx h1{font-size:30px}
  .nx-m{display:block;margin:22px 0 22px}
}
@media (prefers-reduced-motion:reduce){.nx-anim>*{animation:none}}

/* welcome card: spread over three tiers (top · middle · bottom) */
.nx-welcome{justify-content:space-between;padding:clamp(40px,7vh,68px) clamp(32px,5vw,72px)}
.nx-c-top,.nx-c-mid,.nx-c-end{display:flex;flex-direction:column;align-items:center;width:100%}
.nx-c-top{gap:18px}
.nx-welcome .nx-eyebrow{margin:0;font-size:clamp(13px,.95vw,15px);padding:5px 18px}
.nx-c-mid{padding-block:clamp(24px,5vh,48px)}
.nx-welcome h2{margin:0;font-size:clamp(40px,min(4.4vw,7.2vh),78px)}
.nx-welcome p{margin-top:clamp(22px,3.6vh,34px);font-size:clamp(18px,min(1.55vw,2.5vh),27px);max-width:min(620px,100%)}
.nx-welcome p.nx-l2{margin-top:clamp(10px,1.6vh,16px);color:var(--ink-2)}
.nx-c-end{gap:14px}
.nx-welcome .nx-sign{margin:0;font-size:clamp(14px,1vw,16px)}
.nx-c-end .nx-since{font-size:12.5px;color:var(--ink-3)}
.nx-c-top .nx-dia{width:clamp(46px,3.4vw,62px);height:auto;aspect-ratio:18/10}

/* Face ID offer */
.pk-btn{display:flex;align-items:center;justify-content:center;gap:10px}
.pk-btn svg{width:22px;height:22px}
.pk-offer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.pk-offer .pk-ic{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;color:var(--gold);margin-bottom:6px;background:linear-gradient(160deg,var(--glass-2),var(--glass));border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.pk-offer .pk-ic svg{width:36px;height:36px}
.pk-offer h1{font-size:28px}

/* the person's card on a remembered device: the name stands out */
.who-card{width:100%;cursor:pointer;text-align:start;font:inherit;color:inherit;gap:14px!important;padding:16px!important;border-radius:26px!important;transition:transform .15s,box-shadow .2s}
.who-card:active{transform:scale(.99)}
.who-card .avatar{width:58px;height:58px;font-size:26px}
.who-card .wc-t{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.who-card .wc-k{font-size:11.5px;font-weight:600;color:var(--gold);line-height:1.3}
.who-card .wc-t b{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-card .wc-s{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.who-card .wc-s svg{width:13px;height:13px;flex:none}
.who-card .wc-go{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);transition:transform .2s}
.who-card .wc-go svg{width:18px;height:18px}
.who-card[aria-expanded="true"] .wc-go{transform:rotate(-90deg)}
.who-card:hover,.who-card[aria-expanded="true"]{box-shadow:var(--glass-edge),var(--glass-hi),0 0 0 2px var(--gold-line),var(--glass-shadow)}


/* Update notice (shared by the portal and the admin panel) */
.sq-upd{position:fixed;z-index:2147483000;inset-inline:0;top:calc(env(safe-area-inset-top,0px) + 10px);margin-inline:auto;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;border-radius:14px;background:#16130F;color:#F4EFE6;border:1px solid #3B3223;box-shadow:0 12px 34px rgba(0,0,0,.35);font-family:"IBM Plex Sans Arabic","Readex Pro",Tahoma,sans-serif;font-size:13.5px;direction:rtl;animation:sqUpdIn .25s ease-out}
.sq-upd-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sq-upd-t b{font-weight:600;font-size:14px}
.sq-upd-t span{color:#B8AD99;font-size:12.5px}
.sq-upd-b{flex:none;height:36px;padding:0 14px;border:0;border-radius:10px;background:#C9A45C;color:#16130F;font:inherit;font-weight:600;cursor:pointer}
.sq-upd-b:disabled{opacity:.6;cursor:default}
@keyframes sqUpdIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sq-upd{animation:none}}
a.btn{text-decoration:none}

/* ================= glass layer =================
 * Light: pearl with warm gold and soft blue light behind white glass.
 * Dark: Apple-style midnight blue with the same glass, tinted.
 * Everything below only re-dresses shared pieces; layouts stay as they are. */
body{background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--page);pointer-events:none}
body.in-app::before{display:none}

/* buttons: capsules with a highlight on top (primary is tinted glass, ghost is clear glass) */
.btn{border-radius:99px;border:1px solid rgba(255,255,255,.42);background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 52%),var(--accent);color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(0,0,0,.14),0 12px 26px -12px var(--accent-glow);transition:filter .15s,transform .12s,box-shadow .2s}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,0) 52%),var(--accent-hover);filter:brightness(1.04)}
.btn:active{transform:scale(.985)}
.btn.ghost{background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn.ghost:hover{background:var(--glass-2);filter:none}
.btn.danger{background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 52%),var(--crit);color:var(--on-crit);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px -14px var(--crit)}
.btn.sm{border-radius:99px}
.btn:disabled{filter:saturate(.6);opacity:.55}
.link{color:var(--accent)}

/* fields */
.inp{border-radius:16px;border:1px solid var(--field-line);background:var(--field);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.inp::placeholder{color:var(--ink-3);opacity:.8}
.pw button{border-radius:99px;padding:6px 12px;background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--glass-edge);color:var(--ink-2)}

/* glass surfaces */
.who,.shead,.card,.kpi,.nonet,.demo{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.who{border-radius:20px}
.who-card{background:linear-gradient(160deg,var(--glass-2) 0%,var(--glass) 100%)}
.shead{border-radius:22px}
.card{border-radius:24px}
.kpi{border-radius:20px}
.menu{background:rgba(255,255,255,.93);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-radius:18px}
:root[data-theme="dark"] .menu{background:rgba(22,30,46,.82)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .menu{background:rgba(22,30,46,.82)}}

.menu button{border-radius:12px}
.menu button:hover{background:var(--glass-2)}
.menu button[aria-current="true"]{background:var(--gold-soft);color:var(--ink)}
.tbtn{background:var(--glass);border:1px solid var(--glass-line);border-radius:14px}
.back{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);border-radius:50%}
.netpill{border:1px solid var(--glass-line);background:var(--glass);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.netpill.on{background:var(--glass);color:var(--good)}
.netpill.on i{box-shadow:0 0 8px var(--good)}
.netpill.off{background:var(--glass);color:var(--ink-2)}
.banner{border-radius:20px;border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.urgent{border-radius:18px;border:1px solid var(--glass-line)}
.sf-pill{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge)}
.adcard.light{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* the person's initial: a gold ring around glass */
.avatar{border:2px solid transparent;background:var(--av-in) padding-box,linear-gradient(145deg,#F1D79C,var(--gold) 55%,#7A5818) border-box;color:var(--gold);font-family:Amiri,"Readex Pro",serif;font-weight:700}
.ubtn .avatar{font-size:19px}
.who .avatar,.who-card .avatar{color:var(--gold)}
.nx .netpill span{display:inline}
.nx .netpill{padding:5px 12px}

/* system icons: tinted glass squares with a shine on the top half */
.tile .ico,.apphead .ico{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(155deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%,rgba(0,0,0,.24) 100%),var(--c,#1D6F63);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 26px -12px var(--c,#1D6F63)}
.tile .ico::after,.apphead .ico::after{content:"";position:absolute;inset:0 0 50% 0;z-index:-1;border-radius:inherit;border-bottom-left-radius:50% 18px;border-bottom-right-radius:50% 18px;background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,0))}
.tile .ico svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.tile{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:24px}
.tile:hover{border-color:var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow)}
.tile .ico{border-radius:18px}
@media (max-width:600px){
  .tiles{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:28px;padding:18px 8px}
  .tile{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .tile .ico{width:66px;height:66px;border-radius:20px}
}

/* appearance switch: auto · light · dark */
.themesw{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.themesw button{width:34px;height:30px;border:1px solid transparent;border-radius:99px;background:transparent;color:var(--ink-3);display:grid;place-items:center;padding:0}
.themesw button svg{width:16px;height:16px}
.themesw button[aria-pressed="true"]{color:var(--gold);background:linear-gradient(180deg,var(--glass-2),var(--glass));border-color:var(--glass-line);box-shadow:var(--glass-hi),0 4px 10px -4px rgba(0,0,0,.35)}
.menu .themerow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;font-size:14px}

/* inside a system */
.sq-fab{background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.appframe .loading .spin{border-color:var(--gold-soft);border-top-color:var(--gold)}

/* notices */
.toast{background:var(--glass-2);border:1px solid var(--glass-line);border-inline-start:3px solid var(--gold);border-radius:18px;box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
.sq-upd{background:var(--glass-2,#16130F);color:var(--ink,#F4EFE6);border:1px solid var(--glass-line,#3B3223);border-radius:20px;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
.sq-upd-t span{color:var(--ink-2,#B8AD99)}
.sq-upd-b{border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 52%),var(--gold,#C9A45C);color:var(--gold-ink,#16130F);border:1px solid rgba(255,255,255,.4)}
.nonet .nn-ico{background:var(--glass-2);border:1px solid var(--glass-line)}

/* browsers without glass: solid, still readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.92);--glass-2:#FFFFFF}
  :root[data-theme="dark"]{--glass:#161E2E;--glass-2:#1C2638}
}

/* sign-in: calmer bottom — smaller footer and logo, clear space between the welcome card and the footer */
.nx-brand .logo{width:118px}
.nx .sfoot{margin-top:auto;padding:26px 0 4px;gap:8px;position:relative}
.nx .sfoot::before{content:"";position:absolute;top:0;inset-inline:18%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.nx .sf-row{gap:6px}
.nx .sf-t{font-size:12.5px;color:var(--ink-3)}
.nx .sf-logo{width:36px;margin-top:-2px}
.nx .sf-pill{font-size:11px;padding:3px 12px;gap:8px;color:var(--ink-3)}
.nx .sf-pill .dot{width:3px;height:3px}
/* notices on the sign-in screens appear at the top, never over the cards */
@media (max-width:860px){
  .nx-brand .logo{width:92px}
  .nx .tagline{font-size:15.5px}
  .nx-brand{margin-top:10px;gap:6px}
  .nx-m{margin:26px 0 30px}
  .nx .sfoot{padding-top:22px}
}
.nx .err:empty{display:none}
.toast{background:rgba(255,255,255,.94)}
:root[data-theme="dark"] .toast{background:rgba(22,30,46,.92)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:rgba(22,30,46,.92)}}

/* sign-in notice: in its own row above the heading (never floating over the logo or buttons) */
.nx-note{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;font-size:13.5px;color:var(--ink-2);background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);animation:nxNote .28s ease-out both;overflow:hidden}
.nx-note b{color:var(--ink);font-weight:600}
.nx-note-i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.nx-note.bad .nx-note-i{background:var(--crit);box-shadow:0 0 8px var(--crit)}
.nx-note.bad b{color:var(--crit)}
.nx-note.out{animation:nxNoteOut .3s ease-in both}
@keyframes nxNote{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes nxNoteOut{to{opacity:0;margin-bottom:-52px;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.nx-note,.nx-note.out{animation:none}}

/* ===== sign-in, layout A: logo · one glass card · links · founders chip · footer ===== */
.nx-brand{margin-top:clamp(18px,4vh,34px);gap:6px}
.nx-brand .logo{width:104px}
.nx .tagline{font-size:16px}
.nx-panel{margin-top:clamp(20px,3.6vh,30px);padding:24px 20px 20px;border-radius:30px;gap:16px;background:linear-gradient(165deg,var(--glass-2) 0%,var(--glass) 100%);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.nx-panel h1{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;font-size:24px;font-weight:700;line-height:1.3}
.nx-panel .lead{font-size:14px;margin-top:2px}
.nx-panel .who{background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:none;backdrop-filter:none}
.nx-panel .banner{-webkit-backdrop-filter:none;backdrop-filter:none}
.nx .btn.block{min-height:54px}
/* welcome back */
.wb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.wb .avatar{width:74px;height:74px;font-size:33px;margin-bottom:10px;box-shadow:0 10px 26px -12px var(--gold-glow)}
.wb h1{font-size:25px}
.wb-acts{display:flex;flex-direction:column;gap:10px}
.wb-pw svg{width:18px;height:18px}
/* links under the card */
.nx-below{margin-top:18px}
.nx-links{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.nx-links .link{font-size:13.5px;font-weight:600;color:var(--gold);padding:6px 2px}
.nx-links #forget,.nx-links #notme{color:var(--ink-3);font-weight:500}
.nx-links .sep{width:4px;height:4px;border-radius:50%;background:var(--ink-3);opacity:.5}
.nx #forgot{padding:6px 2px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:13.5px}
/* bottom: founders chip, then a quiet footer */
.nx-grow{flex:1;min-height:24px}
.nx-m{margin:0 0 4px!important;display:none;justify-content:center}
.nx-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--gold);padding:5px 14px;border-radius:99px;background:var(--gold-soft);border:1px solid var(--gold-line)}
.nx-chip .nx-dia{width:14px;height:8px}
.nx .sfoot{margin-top:0;padding:14px 0 2px;gap:4px}
.nx .sfoot::before{display:none}
.nx .sf-pill{background:none;border:0;box-shadow:none;padding:0;font-size:11px;gap:6px}
@media (max-width:860px){
  .nx-m{display:flex}
  .nx-brand{margin-top:18px}
  .nx-brand .logo{width:92px}
  .nx .tagline{font-size:15.5px}
  .nx-form{padding-top:calc(12px + env(safe-area-inset-top,0px))}
}

/* founders' welcome box (phones): fills the space between the card and the footer */
.nx-fw{width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 20px 20px;border-radius:26px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);position:relative;isolation:isolate}
.nx-fw::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold-line);border-radius:19px;opacity:.5;pointer-events:none;z-index:-1}
.nx-fw .nx-dia{width:30px;height:17px}
.nx-fw b{font-family:Amiri,serif;font-size:25px;font-weight:700;line-height:1.35;color:var(--ink)}
.nx-fw .t{font-family:Amiri,serif;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.nx-fw .nx-eyebrow{margin-top:4px;font-size:11.5px;padding:3px 14px}
.nx-g2{flex:.6;min-height:18px}
@media (max-width:860px){.nx-m{margin:0!important}}

/* founders' welcome sits above the sign-in card: the first thing read after the logo */
@media (max-width:860px){.nx-m{margin:22px 0 0!important}}
.nx-fw{gap:6px;padding:18px 18px 20px;border-radius:26px;background:radial-gradient(120% 90% at 50% 0%,var(--gold-soft),transparent 70%),var(--glass);border-color:var(--gold-line);box-shadow:var(--glass-edge),var(--glass-hi),0 16px 40px -24px var(--gold-glow)}
.nx-fw::before{display:none}
.nx-fw-k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.2px}
.nx-fw-k .nx-dia{width:14px;height:8px}
.nx-fw b{font-size:29px;line-height:1.35;margin-top:4px;background:linear-gradient(180deg,var(--ink) 30%,var(--gold) 140%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nx-fw .t{font-size:16px}
.nx-panel{margin-top:16px}
@media (min-width:861px){.nx-panel{margin-top:clamp(20px,3.6vh,30px)}}

/* first paint: the mark and the line while the portal loads */
.boot{min-height:72vh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--ink)}
.boot .logo{width:128px}
.boot .tagline{font-size:14px}
.boot-bar{width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--tag-accent),transparent);background-size:200% 100%;animation:bootbar 1.2s linear infinite;opacity:.8}
@keyframes bootbar{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.boot-bar{animation:none}}
.tagline b.one{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;font-weight:600;letter-spacing:.03em;unicode-bidi:isolate}

/* ── welcome after sign-in: the logo writes itself, then opens onto the portal ── */
.sq-welcome{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#0B111D;color:#F2EFEA;
  background-image:radial-gradient(60% 50% at 50% 42%,rgba(214,180,110,.10),transparent 70%);cursor:pointer;
  clip-path:circle(150% at 50% 42%);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sq-welcome .sw-in{display:grid;justify-items:center;text-align:center;gap:6px;padding-inline:16px;transform:translateY(-4vh)}
.sq-welcome .sw-logo{width:min(58vw,300px);height:auto;overflow:visible}
.sq-welcome .sw-ink{fill:transparent;stroke:#E9D9B4;stroke-width:6;stroke-linejoin:round}
.sq-welcome .sw-gold{fill:#D6B46E;opacity:0;transform-box:fill-box;transform-origin:center}
.sq-welcome .sw-hi{margin:18px 0 0;font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;font-weight:500;font-size:clamp(18px,4.6vw,24px);opacity:0}
.sq-welcome .sw-tg{margin:0;font-size:clamp(12.5px,3.4vw,14px);color:#BFB4A0;opacity:0}
.sq-welcome .sw-tg b{color:#D6B46E;font-family:"Readex Pro",sans-serif;font-weight:600;letter-spacing:.03em}
.sq-welcome .sw-bar{position:absolute;inset-inline:0;bottom:0;height:2px;background:rgba(214,180,110,.14)}
.sq-welcome .sw-bar::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:0;background:#D6B46E}
.sq-welcome.run .sw-ink{animation:swDraw 1.3s cubic-bezier(.5,0,.3,1) forwards,swFill .5s ease 1.15s forwards}
.sq-welcome.run .sw-gold{animation:swGold .55s cubic-bezier(.3,1.6,.5,1) 1.35s forwards}
.sq-welcome.run .sw-hi{animation:swUp .5s ease 1.6s forwards}
.sq-welcome.run .sw-tg{animation:swUp .5s ease 1.8s forwards}
.sq-welcome.run .sw-bar::after{animation:swBar 3s linear forwards}
.sq-welcome.out{animation:swOpen .75s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}
@keyframes swDraw{to{stroke-dashoffset:0}}
@keyframes swFill{to{fill:#F2EFEA;stroke-width:0}}
@keyframes swGold{0%{opacity:0;transform:translateY(-220px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes swUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes swBar{to{width:100%}}
@keyframes swOpen{from{clip-path:circle(150% at 50% 42%)}to{clip-path:circle(0% at 50% 42%)}}
/* while the welcome opens, the page underneath settles in from a soft blur */
body.sq-welcoming #app{animation:swSettle .9s ease both}
@keyframes swSettle{from{transform:scale(1.04);filter:blur(4px)}to{transform:none;filter:none}}
/* reduced motion: the finished logo and greeting, then a gentle fade */
.sq-welcome.calm .sw-ink{fill:#F2EFEA;stroke-width:0;animation:none!important}
.sq-welcome.calm .sw-gold,.sq-welcome.calm .sw-hi,.sq-welcome.calm .sw-tg{opacity:1;animation:none!important}
.sq-welcome.calm.out{animation:swFade .4s ease forwards}
@keyframes swFade{to{opacity:0}}
/* Alerts: the sheet a person taps to turn them on (the phone asks only after a tap) */
.pushsheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(8,12,20,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:psIn .22s ease both}
.pushsheet.out{animation:psOut .2s ease both}
.ps-card{width:100%;max-width:420px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:22px 20px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--shadow);text-align:center;animation:psUp .28s cubic-bezier(.2,.8,.2,1) both}
.ps-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);margin-bottom:10px}
.ps-ic svg{width:26px;height:26px}
.ps-card h2{font-family:"Readex Pro",sans-serif;font-size:18px;margin:0 0 6px}
.ps-card p{color:var(--ink-2);font-size:14.5px;line-height:1.8;margin:0 0 16px}
.ps-acts{display:grid;gap:8px}
.ps-acts .btn svg{width:18px;height:18px}
@media (min-width:700px){.pushsheet{align-items:center}}
@keyframes psIn{from{opacity:0}}
@keyframes psOut{to{opacity:0}}
@keyframes psUp{from{transform:translateY(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){.pushsheet,.pushsheet.out,.ps-card{animation:none}}

/* ===== systems counter above the phone box (sign-in screen) ===== */
.nx-cnt{--rs:168px;display:grid;justify-items:center;gap:8px;margin-top:clamp(14px,2.6vh,24px)}
.nx-cnt:empty{display:none}
.nx-cnt + .nx-panel{margin-top:clamp(10px,1.8vh,16px)}
.nx-ring{position:relative;width:var(--rs);height:var(--rs);display:grid;place-items:center;animation:nxCntIn .7s cubic-bezier(.2,.8,.2,1) both}
.nx-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.nx-ring .trk{fill:none;stroke:var(--gold-line);stroke-width:5}
.nx-ring .arc{fill:none;stroke:url(#nxg);stroke-width:5;stroke-linecap:round;stroke-dasharray:439.8;stroke-dashoffset:439.8}
.nx-ring .tk{stroke:var(--gold-line);stroke-width:2;stroke-linecap:round;transition:stroke .3s}
.nx-ring .tk.on{stroke:var(--gold)}
.nx-ring .mid{position:relative;display:grid;justify-items:center;gap:1px}
.nx-ring .cnt{position:relative;display:grid;justify-items:center}
.nx-ring .odo{position:relative;display:inline-flex;direction:ltr;font-family:"Readex Pro",sans-serif;font-weight:700;font-size:calc(var(--rs) * .31);line-height:1;height:1em;overflow:hidden;font-variant-numeric:tabular-nums;color:var(--gold);padding-inline:.04em}
.nx-ring .dg{display:block;width:.64em;height:1em;overflow:hidden}
.nx-ring .dg .col{display:block;transition:transform .42s cubic-bezier(.2,.85,.25,1.12)}
.nx-ring .dg .col span{display:block;height:1em;line-height:1;text-align:center}
.nx-ring .odo::after{content:"";position:absolute;inset-block:0;width:55%;inset-inline-start:-70%;background:linear-gradient(100deg,transparent,rgba(255,246,214,.85),transparent);transform:skewX(-16deg);opacity:0;pointer-events:none}
.nx-ring .cnt.done .odo::after{animation:nxSheen 1.2s ease .1s 1 forwards}
.nx-ring .cnt.done .odo{animation:nxGlow 1.6s ease .1s 1}
.nx-ring .unit{font-size:13px;font-weight:600;color:var(--ink-2)}
.nx-ring .spark{position:absolute;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);border-radius:1.5px;opacity:0;pointer-events:none}
.nx-ring .cnt.done .spark{animation:nxRise 1.3s ease-out forwards;animation-delay:var(--d)}
.nx-ctr.glow .nx-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;animation:nxHalo 1.4s ease-out 1;pointer-events:none}
.nx-cap{margin:0}
.nx-live{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--good)}
.nx-live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--good)}
.nx-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--good);opacity:0;animation:nxPing 2s ease-out infinite}
@keyframes nxCntIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes nxSheen{0%{inset-inline-start:-70%;opacity:1}100%{inset-inline-start:120%;opacity:1}}
@keyframes nxGlow{40%{text-shadow:0 0 14px var(--gold-glow)}100%{text-shadow:0 0 0 transparent}}
@keyframes nxRise{0%{opacity:0;transform:translate(0,6px) rotate(45deg) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(135deg) scale(1)}}
@keyframes nxHalo{0%{box-shadow:0 0 0 0 var(--gold-glow)}100%{box-shadow:0 0 0 24px transparent}}
@keyframes nxPing{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media (max-width:860px){.nx-cnt{--rs:144px}}
@media (max-height:760px){.nx-cnt{--rs:132px;gap:4px}}
@media (prefers-reduced-motion:reduce){.nx-ring{animation:none}}

/* phone: the welcome / ad card sits under the sign-in box so the form comes first */
@media (max-width:860px){
  .nx-form>.nx-top{order:0}.nx-form>.nx-brand{order:1}.nx-form>.nx-cnt{order:2}
  .nx-form>.nx-inner{order:3}.nx-form>.nx-below{order:4}
  .nx-form>.nx-m{order:5;margin:18px 0 0!important}
  .nx-form>.nx-grow{order:6}.nx-form>.sfoot,.nx-form>.nx-foot{order:7}
}

/* two counters side by side: systems + visitors today */
.nx-ctr{display:grid;justify-items:center;gap:8px;min-width:0}
.nx-cnt.two{display:flex;justify-content:center;align-items:flex-start;gap:clamp(6px,3vw,22px)}
.nx-cnt.two{--rs:clamp(112px,36vw,150px)}
.nx-cnt.two .nx-ring .unit{font-size:12px}
.nx-cnt.two .nx-live{font-size:12px}
.nx-live.nx-day{color:var(--gold)}
.nx-live.nx-day i,.nx-live.nx-day i::after{background:var(--gold);border-color:var(--gold)}
.nx-live.nx-day i::after{background:transparent}
@media (min-width:861px){.nx-cnt.two{--rs:150px}}
@media (max-height:760px){.nx-cnt.two{--rs:clamp(104px,32vw,130px)}}

/* computer screens: the whole sign-in page fits the window, no scrolling up or down.
   On short windows the form column shrinks in steps (zoom), the height stays the window's.
   A taller step (a long form) scrolls inside its own column instead of being cut. */
@media (min-width:861px){
  html,body{overflow:hidden;height:100%}
  .nx{--z:1;height:100vh;height:100dvh;overflow:hidden}
  .nx-form{zoom:var(--z);min-height:calc(100vh / var(--z));min-height:calc(100dvh / var(--z));height:calc(100dvh / var(--z));overflow-x:hidden;overflow-y:auto}
  .nx-side{height:100vh;height:100dvh;min-height:0;overflow:hidden}
}
@media (min-width:861px) and (max-height:830px){.nx{--z:.95}}
@media (min-width:861px) and (max-height:780px){.nx{--z:.9}}
@media (min-width:861px) and (max-height:730px){.nx{--z:.84}}
@media (min-width:861px) and (max-height:680px){.nx{--z:.78}}
@media (min-width:861px) and (max-height:630px){.nx{--z:.72}}
@media (min-width:861px) and (max-height:580px){.nx{--z:.66}}
@media (min-width:861px) and (max-height:520px){.nx{--z:.58}}

/* Install سياق as an app */
.instsheet .ins-card{text-align:start;max-width:440px;padding-top:20px}
.ins-hd{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.ins-app{width:60px;height:60px;border-radius:16px;flex:0 0 auto;box-shadow:0 8px 18px -8px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.ins-card .ins-hd h2{margin:0 0 4px;font-size:17px}
.ins-card .ins-hd p{margin:0;font-size:13.5px;line-height:1.7}
.ins-pts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.ins-pts span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line)}
.ins-pts svg{width:14px;height:14px;color:var(--gold)}
.ins-acts{display:flex;gap:8px}
.ins-acts .btn{min-height:50px}
.ins-acts [data-go],.ins-acts [data-ok]{flex:1}
.ins-acts .btn svg{width:19px;height:19px}
.ins-steps{list-style:none;counter-reset:ins;margin:0 0 14px;padding:0;display:grid;gap:8px}
.ins-steps li{counter-increment:ins;display:flex;align-items:center;gap:10px;padding:9px 10px 9px 9px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);line-height:1.5}
.ins-steps li::before{content:counter(ins);flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font:600 13px "IBM Plex Mono",monospace}
.ins-steps .k{margin-inline-start:auto;flex:0 0 auto;min-width:34px;height:34px;padding:0 7px;border-radius:10px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:#0A84FF}
.ins-steps .k svg{width:19px;height:19px}
.ins-steps .k.t{font-size:12.5px;font-weight:700}
.ins-point{display:flex;justify-content:center;color:var(--gold);margin:8px 0 -6px;animation:insB 1.1s ease-in-out infinite}
.ins-point svg{width:26px;height:26px;filter:drop-shadow(0 2px 6px var(--gold-glow))}
.instsheet.top{align-items:flex-start;padding-top:calc(70px + env(safe-area-inset-top))}
.instsheet.top .ins-card{padding-bottom:18px}
.ins-point.up{position:fixed;top:calc(8px + env(safe-area-inset-top));right:22px;margin:0;color:#F0C870;animation-name:insU}
.ins-point.up svg{transform:rotate(180deg)}
@keyframes insB{50%{transform:translateY(6px)}}
@keyframes insU{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.ins-point{animation:none}}

.banner.info{background:var(--accent-soft);color:var(--accent)}
.banner .bcta,.sbn .bcta{flex:none;text-decoration:none;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:13px;padding:7px 14px;border-radius:10px;background:var(--accent);color:var(--accent-ink)}
.sbn{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 14px;font-size:13px;line-height:1.6;border-bottom:1px solid var(--line)}
.sbn>svg{width:18px;height:18px;flex:none}
.sbn .t{flex:1;min-width:200px}
.sbn .t b{font-family:"Readex Pro",sans-serif;font-weight:600;margin-inline-end:8px}
.sbn.info{background:var(--accent-soft);color:var(--accent)}
.sbn.warn{background:var(--warn-soft);color:var(--warn)}
.sbn.ro{background:var(--serious-soft);color:var(--serious)}
.sbn .x{flex:none;border:0;background:transparent;color:inherit;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;opacity:.75}
.sbn .x:hover{opacity:1;background:rgba(127,127,127,.15)}
.sbn .x svg{width:16px;height:16px}
.stp-ico{width:56px;height:56px;border-radius:18px;background:var(--crit-soft);color:var(--crit);display:grid;place-items:center}
.stp-ico svg{width:28px;height:28px}
.stp-pill{display:flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600}
.stp-pill svg{width:18px;height:18px;flex:none}
.stp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.stp-steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.7}
.stp-steps li>span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:13px;font-weight:700;font-family:"Readex Pro",sans-serif}
.stp-acts{display:flex;flex-direction:column;gap:10px}
.stp-acts a{text-decoration:none}
.stp-others{display:flex;flex-direction:column;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.stp-others h2{font-family:"Readex Pro",sans-serif;font-size:15px;font-weight:600;margin:8px 0 2px}
.stp-co{font-size:12px;color:var(--ink-2);margin-top:4px}
.stp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.stp-nm{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:14px}
.stp-nm small{font-weight:400;color:var(--ink-2);margin-inline-start:4px}
.stp-nm .sw{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}

/* seyaq-ux: floating platform button stacks above a system's own quick-add button; larger touch areas (look unchanged) */
@media (max-width:899px){
  body.in-app .sq-fab{bottom:calc(144px + env(safe-area-inset-bottom,0px))}
  body.in-app .sq-fabmenu{bottom:calc(198px + env(safe-area-inset-bottom,0px))}
}
.themesw button,.nx-links .link,.sf-logo{position:relative}
.themesw button::after,.nx-links .link::after,.sf-logo::after{content:'';position:absolute;inset:-8px -4px}


/* ===== the systems window on the sign-in page (computer: the big box; phone: a small card) ===== */
.sqx{--c:#1D6F63;text-align:start}
.nx-card.sqx{align-items:stretch;justify-content:space-between;text-align:start;padding:clamp(28px,4vh,44px) clamp(28px,3.6vw,52px) clamp(24px,3.4vh,36px);gap:18px;overflow:hidden}
.sqx-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.nx-card.sqx .nx-eyebrow{margin-top:0;display:inline-flex;align-items:center;gap:8px}
.sqx-ct{font-size:13px;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}
.sqx-ct b{color:var(--ink);font-weight:700}
.sqx-stage{display:grid;flex:1;align-items:center;position:relative;z-index:1;min-height:0}
.sqx-s{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;position:relative;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.sqx-s.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .2s,transform .5s cubic-bezier(.2,.8,.2,1) .2s,visibility 0s}
.sqx-s:not(.on){transform:translateY(-6px)}.sqx-s.on{animation:sqxIn .5s cubic-bezier(.2,.8,.2,1) .2s backwards}
@keyframes sqxIn{from{transform:translateY(10px)}}
.sqx-id{display:flex;align-items:center;gap:18px;min-width:0}
.sqx-ic{flex:none;width:76px;height:76px;border-radius:22px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));box-shadow:0 14px 30px -14px color-mix(in srgb,var(--c) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.sqx-ic svg{width:40px;height:40px}
.sqx-nm{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.nx-card.sqx h2{margin:0;font-size:clamp(28px,2.7vw,40px);line-height:1.25;text-wrap:balance}
.nx-card.sqx .sqx-ln{margin:0;max-width:34ch;font-size:clamp(18px,1.6vw,22px);line-height:1.75}
.sqx-f{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:10px}
.sqx-f li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--ink);font-weight:500;min-width:0}
.sqx-f svg{flex:none;width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line)}
.sqx-cta{margin-top:6px;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold);font:inherit;font-weight:700;font-size:15px;padding:11px 20px;border-radius:99px;cursor:pointer;transition:filter .2s,transform .2s}
.sqx-cta svg{width:18px;height:18px;flex:none}
@media (hover:hover){.sqx-cta:hover{filter:brightness(1.12);transform:translateY(-1px)}}
.sqx-wm{position:absolute;inset-inline-end:-3%;top:50%;transform:translateY(-50%);width:clamp(170px,21vw,290px);color:var(--c);opacity:.08;pointer-events:none}
[data-theme="dark"] .sqx-wm{opacity:.06;filter:brightness(1.5)}
.sqx-wm svg{display:block;width:100%;height:auto;stroke-width:.9}
.sqx-tabs{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.sqx-t{position:relative;width:44px;height:44px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass-2);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;padding:0;overflow:hidden;transition:color .2s,border-color .2s,background .2s}
.sqx-t svg{width:21px;height:21px}
.sqx-t.on{color:#fff;border-color:transparent;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 60%,#000))}
.sqx-t i{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:0;background:var(--gold);opacity:0;pointer-events:none}
.sqx-t.on i{opacity:1;animation:sqxRun 6.5s linear forwards}
@keyframes sqxRun{from{width:0}to{width:100%}}
@media (hover:hover){.sqx:hover .sqx-t.on i{animation-play-state:paused}.sqx-t:not(.on):hover{color:var(--ink);border-color:var(--gold-line)}}
.sqx:has(:focus-visible) .sqx-t.on i{animation-play-state:paused}
.sqx-t:focus-visible,.sqx-cta:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* phone card */
.sqx.mini{width:100%;box-sizing:border-box;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:16px 18px 14px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.sqx.mini .nx-eyebrow{font-size:11.5px;padding:3px 11px}
.sqx.mini .sqx-ct{font-size:12px}
.sqx.mini .sqx-s{gap:10px;align-items:stretch}
.sqx.mini .sqx-id{gap:12px}
.sqx.mini .sqx-ic{width:46px;height:46px;border-radius:14px}
.sqx.mini .sqx-ic svg{width:25px;height:25px}
.sqx.mini h2{margin:0;font-family:Amiri,serif;font-size:21px;line-height:1.3;color:var(--ink);font-weight:700;text-wrap:balance}
.sqx.mini .sqx-ln{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.sqx.mini .sqx-f{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.sqx.mini .sqx-f li{font-size:12px;gap:5px;padding:4px 10px 4px 9px;border-radius:99px;background:var(--glass-2);border:1px solid var(--glass-line)}
.sqx.mini .sqx-f svg{width:14px;height:14px;padding:0;border:0;background:none}
.sqx.mini .sqx-cta{margin-top:2px;align-self:flex-start;font-size:13.5px;padding:8px 15px}
.sqx.mini .sqx-tabs{gap:6px;justify-content:center;align-items:center}
.sqx.mini .sqx-t{width:8px;height:8px;border-radius:99px;border:0;background:var(--gold-line);transition:width .3s}
.sqx.mini .sqx-t.on{width:28px;background:var(--gold-line)}
.sqx.mini .sqx-t i{height:100%;border-radius:99px}
/* the founders' welcome, now a small line under the sign-in box */
.nx-hello{margin:16px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;line-height:1.6;color:var(--ink-3);text-align:center;text-wrap:balance}
.nx-hello b{color:var(--gold);font-weight:600}
.nx-hello .nx-dia{width:14px;height:auto;flex:none;fill:var(--gold);opacity:.8}
/* the visitors record under «زاروا سياق اليوم» */
.nx-best{margin:0;font-size:12px;color:var(--ink-3);text-align:center;animation:nxCntIn .6s .9s both}
.nx-best b{color:var(--gold);font-weight:700}
.nx-best.rec span{display:inline-block;font-weight:700;color:var(--gold-ink);background:var(--gold);border-radius:99px;padding:2px 10px;box-shadow:0 0 0 3px var(--gold-soft)}
@media (max-width:860px){.nx-form>.nx-hello{order:4;margin-top:14px}}

/* ---- systems window, refined: a soft glow in each system's colour, stories-style progress on phones ---- */
.sqx-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background-color:var(--cc,#1D6F63);opacity:.16;-webkit-mask:radial-gradient(130% 75% at 100% 0,#000 0,transparent 62%);mask:radial-gradient(130% 75% at 100% 0,#000 0,transparent 62%);transition:background-color .7s ease}
[data-theme="dark"] .sqx-glow{opacity:.32}
.nx-card.sqx .sqx-glow{opacity:.12}
[data-theme="dark"] .nx-card.sqx .sqx-glow{opacity:.26}
.sqx.mini{overflow:hidden;gap:14px;padding:12px 16px 16px;border-radius:26px}
.sqx.mini .sqx-tabs{order:-1;display:flex;flex-wrap:nowrap;gap:4px;margin:0 -2px}
.sqx.mini .sqx-t,.sqx.mini .sqx-t.on{flex:1;width:auto;height:14px;border:0;border-radius:0;background:none;overflow:visible;transition:none}
.sqx.mini .sqx-t::before{content:"";position:absolute;inset-inline:0;top:5.5px;height:3px;border-radius:99px;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.sqx.mini .sqx-t i{top:5.5px;bottom:auto;height:3px;border-radius:99px;background:var(--gold)}
.sqx.mini .sqx-t.done i{width:100%;opacity:1;animation:none}
.sqx-nv{display:inline-flex;align-items:center;gap:8px}
.sqx-nav{width:32px;height:32px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass-2);color:var(--ink-2);display:grid;place-items:center;padding:0;cursor:pointer;transition:color .2s,border-color .2s}
.sqx-nav svg{width:15px;height:15px}
.sqx-nav:active{transform:scale(.94)}
.sqx-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover){.sqx-nav:hover{color:var(--gold);border-color:var(--gold-line)}}
.sqx.mini .sqx-stage{align-items:start}
.sqx.mini .sqx-s{gap:12px}
.sqx.mini .sqx-id{gap:14px}
.sqx.mini .sqx-ic{width:54px;height:54px;border-radius:17px;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--c) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.sqx.mini .sqx-ic svg{width:28px;height:28px}
.sqx.mini h2{font-size:23px}
.sqx.mini .sqx-ln{font-size:14px;line-height:1.75}
.sqx.mini .sqx-f{display:grid;gap:8px;margin:2px 0 0}
.sqx.mini .sqx-f li{padding:0;border:0;background:none;border-radius:0;font-size:13.5px;gap:9px;color:var(--ink)}
.sqx.mini .sqx-f svg{width:20px;height:20px;padding:4px;border-radius:50%;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line)}
.sqx.mini .sqx-cta{align-self:stretch;justify-content:center;margin-top:4px;padding:11px 16px;font-size:14.5px}
/* dark theme: deep system colours (navy, dark green) are lifted a little so the tile still stands out */
[data-theme="dark"] .sqx-ic,[data-theme="dark"] .sqx-t.on{background:linear-gradient(145deg,color-mix(in srgb,var(--c) 74%,#fff),var(--c));box-shadow:0 14px 30px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.3)}
[data-theme="dark"] .sqx.mini .sqx-t.on{background:none;box-shadow:none}
[data-theme="dark"] .sqx-wm{color:color-mix(in srgb,var(--c) 60%,#fff)}
/* computer: the icons stay on one line at every width, and the content fills the box */
.nx-card.sqx .sqx-tabs{flex-wrap:nowrap;gap:clamp(4px,.55vw,8px)}
.nx-card.sqx .sqx-t{flex:0 1 46px;width:auto;height:auto;aspect-ratio:1;min-width:28px;border-radius:clamp(9px,1vw,14px)}
.nx-card.sqx .sqx-t svg{width:46%;height:46%}
.nx-card.sqx .sqx-s{gap:clamp(14px,2.2vh,22px)}
.nx-card.sqx .sqx-ic{width:clamp(70px,6.4vw,92px);height:clamp(70px,6.4vw,92px);border-radius:clamp(20px,1.8vw,26px)}
.nx-card.sqx .sqx-ic svg{width:52%;height:52%}
.nx-card.sqx h2{font-size:clamp(30px,3vw,46px)}
.nx-card.sqx .sqx-f{gap:12px}
.nx-card.sqx .sqx-f li{font-size:clamp(15px,1.25vw,17px)}
.nx-card.sqx .sqx-f svg{width:24px;height:24px}
.nx-card.sqx .sqx-cta{font-size:15.5px;padding:12px 24px}
.nx-card.sqx .sqx-nv .sqx-nav{width:34px;height:34px}
/* the line under the logo: clearer, a small gold dot after «one», and a soft change between sentences */
.nx .tagline.nx-tl{gap:10px;font-size:clamp(15.5px,4.3vw,18px);line-height:1.5;color:var(--ink-2);flex-wrap:nowrap;white-space:nowrap}
[data-theme="dark"] .nx .tagline.nx-tl{color:color-mix(in srgb,var(--ink) 86%,transparent)}
.nx-tl .tg-sep{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.8;flex:none;box-shadow:0 0 0 3px var(--gold-soft)}
.nx-tl .tg-t{display:inline-block;min-width:0;transition:opacity .45s ease,transform .45s ease,filter .45s ease}
.nx-tl .tg-t.out{opacity:0;transform:translateY(5px);filter:blur(3px)}
/* «one» beside the logo: a hand-written gold signature */
.nx-lock{display:flex;align-items:center;justify-content:center;gap:6px;direction:rtl}
.one-sig{flex:none;width:86px;height:72px;margin-bottom:11px;overflow:visible;direction:ltr}
.one-sig text{font-family:"Great Vibes","Snell Roundhand","Segoe Script",cursive;stroke-width:.7;stroke-opacity:.3}
.one-sig .g1{stop-color:color-mix(in srgb,var(--gold) 55%,#fff)}
.one-sig .g2{stop-color:var(--gold)}
.one-sig .g3{stop-color:color-mix(in srgb,var(--gold) 75%,#000)}
.one-sig .one-dia{transform-box:fill-box;transform-origin:center;transform:rotate(45deg)}
.one-sig.pre{opacity:0}
.one-sig.draw text{stroke-dasharray:420;animation:oneDraw 2.2s cubic-bezier(.55,.1,.35,1) .2s both,oneFill 1s 1.9s ease both}
.one-sig.draw .one-dia{animation:onePop .6s 2.5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes oneDraw{from{stroke-dashoffset:420;stroke-opacity:1}to{stroke-dashoffset:0;stroke-opacity:1}}
@keyframes oneFill{from{fill-opacity:0;stroke-opacity:1}to{fill-opacity:1;stroke-opacity:.3}}
@keyframes onePop{from{transform:scale(0) rotate(45deg)}to{transform:scale(1) rotate(45deg)}}

/* ===== كلمة المرور والاستعادة ===== */
.acc-fresh{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--glass-2,rgba(255,255,255,.05));border:1px solid var(--gold,#C9A24A);text-align:right}
.acc-fresh b{color:var(--ink);font-size:14.5px}
.acc-fresh span{color:var(--ink-2);font-size:13px;line-height:1.7}
.acc-fresh .btn{margin-top:6px}
.acc-card{text-align:right}
.acc-card .ps-ic,.acc-card h2{display:block;margin-inline:auto;text-align:center}
.acc-card .ps-ic{display:grid}
.acc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:6px 0 14px;border-radius:14px;background:var(--glass-2,rgba(127,127,127,.08));border:1px solid var(--line)}
.acc-tabs button{min-height:40px;border:1px solid transparent;border-radius:11px;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.acc-tabs button[aria-selected="true"]{background:var(--surface);border-color:var(--gold,#C9A24A);color:var(--ink)}
.acc-pane{display:flex;flex-direction:column;gap:12px;margin:0}
.acc-pane p{margin:0;font-size:13.5px;line-height:1.8}
.acc-pane .field{text-align:right}
.acc-pane .err{margin:0;min-height:0}