/* Brider FMS prototype — SOS CV Sudan (RFP SOSCVSD/RFP/FMS/2026/001)
   Clean, professional finance-ERP theme with full RTL (Arabic) support. */
:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#0f1e3d; --ink2:#48577a; --ink3:#8593b0;
  --line:#e6eaf2; --line2:#eef1f7;
  --brand:#0b5cab; --brand-d:#083f78; --accent:#0aa06e; --amber:#e08a00; --red:#d64545; --violet:#6d5ae0;
  --ok-bg:#e6f6ef; --ok-fg:#0a8a5f; --warn-bg:#fdf1dc; --warn-fg:#b26f00; --crit-bg:#fbe6e6; --crit-fg:#c02c2c; --info-bg:#e7f0fb; --info-fg:#0b5cab;
  --r:12px; --r-s:8px; --shadow:0 1px 3px rgba(16,30,61,.06),0 8px 24px rgba(16,30,61,.05);
  --sb-w:248px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
body[dir="rtl"]{font-family:'Cairo','Inter',system-ui,Arial,sans-serif}
#app{display:flex;min-height:100vh}
body[dir="rtl"] #app{flex-direction:row-reverse}
a{color:var(--brand);text-decoration:none}

/* Sidebar */
.sb{width:var(--sb-w);flex-shrink:0;background:linear-gradient(180deg,#0a2a52,#0b3a6b);color:#dbe6f5;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;align-items:center;gap:12px;padding:20px 18px 16px}
.sb-logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#0aa06e,#0b5cab);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;letter-spacing:.5px}
.sb-name{font-weight:800;font-size:15px;color:#fff}
.sb-sub{font-size:11px;color:#9fb6d6}
.sb-role{margin:0 14px 10px;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:var(--r-s)}
.sb-role-l{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#8fa8cc}
.sb-role-n{font-size:13px;font-weight:600;color:#fff;margin-top:2px}
.sb-nav{flex:1;overflow-y:auto;padding:6px 10px}
.nav-sec{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7a93b8;margin:14px 10px 6px}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-s);color:#cdddf1;cursor:pointer;font-size:13px;font-weight:500;margin-bottom:2px;transition:background .12s,color .12s}
.nav-i:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-i.on{background:#fff;color:var(--brand-d);font-weight:700}
.nav-i .ic{width:18px;text-align:center;font-size:15px}
.nav-i .opt{margin-inline-start:auto;font-size:8px;background:rgba(255,255,255,.14);color:#cdddf1;padding:1px 6px;border-radius:9px;font-weight:700}
.sb-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
.lang-row{display:flex;gap:6px;margin-bottom:8px}
.lang-b{flex:1;padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#cdddf1;font-weight:700;cursor:pointer;font-family:inherit}
.lang-b.on{background:#fff;color:var(--brand-d);border-color:#fff}
.sb-tag{font-size:10px;color:#7a93b8}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.tb-l{display:flex;align-items:center;gap:14px}
.tb-burger{display:none;background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink2)}
.tb-title{font-size:17px;font-weight:800;letter-spacing:-.2px}
.tb-crumb{font-size:11px;color:var(--ink3)}
.tb-r{display:flex;align-items:center;gap:16px}
.tb-fx{font-size:11px;color:var(--ink2);background:var(--info-bg);color:var(--info-fg);padding:5px 10px;border-radius:20px;font-weight:600;white-space:nowrap}
.tb-role-switch{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink3)}
.tb-role-switch select{border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-family:inherit;font-size:12px;color:var(--ink);background:#fff}
.tb-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0b5cab,#0aa06e);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.content{padding:24px;max-width:1240px;width:100%}

/* Generic */
.row{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:1fr 1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line2)}
.card-t{font-weight:700;font-size:14px}
.card-b{padding:16px 18px}
.muted{color:var(--ink3)}
.mb0{margin-bottom:0}
.sec-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--ink3);margin:26px 0 12px}
.right{text-align:end}

/* KPI */
.kpi{padding:18px}
.kpi-l{font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.kpi-v{font-size:26px;font-weight:800;margin:8px 0 4px;letter-spacing:-.5px}
.kpi-d{font-size:11px;font-weight:600}
.kpi::before{content:'';display:block;width:34px;height:3px;border-radius:2px;background:var(--kc,var(--brand));margin-bottom:14px}
.up{color:var(--ok-fg)}.dn{color:var(--crit-fg)}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok-fg)}.p-warn{background:var(--warn-bg);color:var(--warn-fg)}
.p-crit{background:var(--crit-bg);color:var(--crit-fg)}.p-info{background:var(--info-bg);color:var(--info-fg)}
.p-mut{background:#eef1f7;color:var(--ink3)}

/* Table */
table{width:100%;border-collapse:collapse}
th{text-align:start;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:11px 14px;border-bottom:1px solid var(--line2);font-size:13px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f9fbfe}
.num{font-variant-numeric:tabular-nums;text-align:end;font-feature-settings:"tnum"}
.mono{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:12px}
.acc-l1{font-weight:700}.acc-l2{padding-inline-start:22px}.acc-l3{padding-inline-start:44px;color:var(--ink2)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--r-s);border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.12s}
.btn:hover{border-color:#c9d3e6}
.btn-p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-d)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-ok{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-danger{background:#fff;border-color:#e7b4b4;color:var(--crit-fg)}

/* Drill / bars */
.bar-w{height:7px;background:#eef1f7;border-radius:5px;overflow:hidden}
.bar-f{height:100%;border-radius:5px}
.dim{font-size:11px;color:var(--ink3)}

/* Modal */
.pc-bg{position:fixed;inset:0;background:rgba:(10,30,60,.5);background:rgba(10,30,60,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.pc-modal{background:#fff;border-radius:14px;width:100%;max-width:640px;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pc-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.pc-h h3{margin:0;font-size:16px}
.pc-x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink3);line-height:1}
.pc-b{padding:20px}
.f{margin-bottom:14px}
.f label{display:block;font-size:11px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-s);padding:9px 11px;font-family:inherit;font-size:13px;color:var(--ink);background:#fff}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pc-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--line);background:#fafbfe;position:sticky;bottom:0}

/* Toast */
.toast{position:fixed;bottom:24px;inset-inline-end:24px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;transform:translateY(12px);transition:.25s;z-index:200;max-width:360px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:#0a8a5f}.toast.info{background:var(--brand)}

/* audit / journal lines */
.jl-line{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2)}
.badge-dim{font-size:10px;background:#eef1f7;color:var(--ink2);padding:1px 7px;border-radius:6px;margin-inline-end:4px}

/* Login overlay (borrowed from Hazina, restyled) */
.login-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#0a1c38 0%,#0b3a6b 55%,#083f78 100%);transition:opacity .5s,transform .5s}
.login-overlay.hidden{opacity:0;pointer-events:none;transform:scale(1.03)}
.login-container{width:420px;max-width:92vw}
.login-brand{text-align:center;margin-bottom:26px}
.login-logo{width:66px;height:66px;border-radius:16px;background:linear-gradient(135deg,#0aa06e,#0b5cab);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff;margin-bottom:14px;box-shadow:0 10px 30px rgba(11,92,171,.4)}
.login-brand h1{color:#fff;font-size:24px;font-weight:800;letter-spacing:3px;margin:0}
.login-brand p{color:rgba(255,255,255,.55);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin:4px 0 0}
.login-card{background:rgba(255,255,255,.07);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:30px}
.login-card h2{color:#fff;font-size:19px;margin:0}
.login-sub{color:rgba(255,255,255,.5);font-size:12px;margin:4px 0 22px}
.login-field{margin-bottom:15px}
.login-field label{display:block;color:rgba(255,255,255,.7);font-size:11px;font-weight:600;margin-bottom:6px}
.login-field input,.login-field select{width:100%;padding:11px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:14px}
.login-field select{color:#fff}.login-field select option{color:#0f1e3d}
.login-remember{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.6);font-size:12px;margin-bottom:20px}
.login-remember a{color:#7fb2e8}
.login-btn{width:100%;padding:12px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}
.login-btn:hover{background:#0a8a5f}
.login-sso{margin-top:18px}
.login-sso-div{text-align:center;color:rgba(255,255,255,.4);font-size:11px;position:relative;margin-bottom:14px}
.login-sso-div span{background:transparent;padding:0 10px}
.login-sso-btn{width:100%;padding:11px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.login-sso-btn:hover{background:rgba(255,255,255,.12)}
.login-mfa{margin-top:16px;text-align:center;color:rgba(255,255,255,.55);font-size:11px}
.login-foot{text-align:center;color:rgba(255,255,255,.4);font-size:11px;margin-top:22px;line-height:1.7}
.login-foot span{color:rgba(255,255,255,.3)}

/* User menu (Sign out) */
.tb-user{position:relative;cursor:pointer}
.tb-user-menu{position:absolute;inset-inline-end:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(16,30,61,.16);width:220px;padding:6px;display:none;z-index:40}
.tb-user-menu.open{display:block}
.um-head{padding:12px 12px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.um-name{font-weight:700;font-size:13px}.um-role{font-size:11px;color:var(--ink3)}
.um-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink2)}
.um-item:hover{background:#f4f6fb}
.um-out{color:var(--crit-fg)}

/* Chart of Accounts tree */
.coa-tree{padding:6px 0}
.coa-node{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line2);cursor:default}
.coa-node:hover{background:#f9fbfe}
.coa-tw{width:18px;text-align:center;color:var(--ink3);cursor:pointer;font-size:11px;user-select:none}
.coa-code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--ink3);width:56px;flex-shrink:0}
.coa-nm{flex:1}
.coa-l1 .coa-nm{font-weight:800;letter-spacing:.3px}
.coa-l2 .coa-nm{font-weight:600}
.coa-l2{padding-inline-start:34px}.coa-l3{padding-inline-start:58px}
.coa-l3 .coa-nm{color:var(--ink2)}
.coa-bal{font-variant-numeric:tabular-nums;font-weight:600}
.coa-collapsed{display:none}

/* Procurement */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow)}
.stat-v{font-size:22px;font-weight:800;margin-top:6px}
.stat-l{font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:12px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink2)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.match{display:inline-flex;gap:3px}
.match i{width:16px;height:16px;border-radius:4px;font-style:normal;font-size:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.m-y{background:var(--ok-bg);color:var(--ok-fg)}.m-n{background:var(--crit-bg);color:var(--crit-fg)}
.po-steps{display:flex;gap:0;margin:6px 0 18px}
.po-step{flex:1;text-align:center;font-size:11px;position:relative;color:var(--ink3)}
.po-step .dot{width:22px;height:22px;border-radius:50%;background:#eef1f7;color:var(--ink3);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-weight:700;font-size:11px;z-index:2;position:relative}
.po-step.done .dot{background:var(--accent);color:#fff}.po-step.cur .dot{background:var(--brand);color:#fff}
.po-step::before{content:'';position:absolute;top:11px;inset-inline-start:-50%;width:100%;height:2px;background:var(--line)}
.po-step:first-child::before{display:none}
.po-step.done::before{background:var(--accent)}
.po-lines{width:100%;margin-top:6px}
.clickrow{cursor:pointer}

/* mini cards */
.mcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.mcard{border:1px solid var(--line);border-radius:var(--r);padding:14px}
.mcard .mc-c{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--ink3)}
.mcard .mc-v{font-size:20px;font-weight:800;margin:4px 0}
/* financial statement */
.stmt{width:100%}
.stmt td{padding:9px 16px}
.stmt .s-h td{font-weight:800;background:#f7f9fc;text-transform:uppercase;font-size:11px;letter-spacing:.6px;color:var(--ink2)}
.stmt .s-sub td:first-child{padding-inline-start:30px;color:var(--ink2)}
.stmt .s-tot td{font-weight:800;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
/* reconciliation */
.recon-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.recon-col h4{margin:0;padding:12px 16px;font-size:12px;background:#f7f9fc;border-bottom:1px solid var(--line)}
.recon-col:first-child{border-inline-end:1px solid var(--line)}
.recon-row{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line2);font-size:12.5px;align-items:center}
.recon-row.matched{background:#f2fbf7}
.dotm{width:8px;height:8px;border-radius:50%;display:inline-block;margin-inline-end:8px}
/* timeline */
.tl{position:relative;padding-inline-start:22px}
.tl::before{content:'';position:absolute;inset-inline-start:5px;top:4px;bottom:8px;width:2px;background:var(--line)}
.tl-i{position:relative;padding-bottom:16px}
.tl-i::before{content:'';position:absolute;inset-inline-start:-21px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:0 0 0 2px var(--line)}
.tl-t{font-size:11px;color:var(--ink3)}
.tl-x{font-weight:600;font-size:13px;margin-top:1px}
/* project cards */
.proj-card{border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;transition:.12s;background:#fff}
.proj-card:hover{border-color:#c9d3e6;box-shadow:var(--shadow)}

@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(2,1fr)}.recon-grid{grid-template-columns:1fr}}
@media(max-width:820px){
  .sb{position:fixed;z-index:60;inset-inline-start:-260px;transition:.2s}
  .sb.open{inset-inline-start:0}
  .tb-burger{display:block}
  .tb-role-switch span{display:none}
}

/* ═══════════════ VISUAL UPGRADE — premium fintech pass ═══════════════ */
:root{
  --font:'IBM Plex Sans'; --font-ar:'IBM Plex Sans Arabic'; --mono:'IBM Plex Mono';
  --shadow:0 1px 2px rgba(16,30,61,.05), 0 12px 34px -14px rgba(16,30,61,.16);
  --shadow-lg:0 26px 64px -26px rgba(11,45,90,.40);
}
body{
  font-family:var(--font),system-ui,Arial,sans-serif;
  background:
    radial-gradient(1100px 560px at 100% -12%, rgba(11,92,171,.08), transparent 60%),
    radial-gradient(900px 520px at -12% 112%, rgba(10,160,110,.07), transparent 60%),
    linear-gradient(180deg,#f7f9fd 0%,#eef2f8 100%);
  background-attachment:fixed;
}
body[dir="rtl"]{font-family:var(--font-ar),var(--font),sans-serif}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
#app{position:relative;z-index:1}

/* Financial figures → mono tabular (signature fintech numerals) */
.num,.mono,.kpi-v,.stat-v,.coa-bal,.coa-code,.tb-fx,.ms-val,.k5-val,.mc-v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.kpi-v,.stat-v{letter-spacing:-.02em;font-weight:600}
.kpi-v{font-size:29px}

/* Sidebar depth + texture */
.sb{background:linear-gradient(180deg,#07203d 0%,#0a3766 55%,#0b3f76 100%);position:relative}
.sb::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(540px 210px at 28% -4%, rgba(10,185,124,.22), transparent 70%)}
.sb>*{position:relative;z-index:1}
.sb-logo{box-shadow:0 10px 24px -6px rgba(10,160,110,.65)}
.nav-i{transition:background .15s,color .15s,transform .15s}
.nav-i:hover{transform:translateX(3px)}
body[dir="rtl"] .nav-i:hover{transform:translateX(-3px)}
.nav-i.on{border-inline-start:3px solid var(--accent);padding-inline-start:9px;box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}

/* Chrome refinement */
.topbar{background:rgba(247,249,253,.82);border-bottom:1px solid rgba(16,30,61,.06)}
.card{box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s,border-color .2s}
.kpi,.stat,.proj-card,.mcard{transition:transform .2s,box-shadow .2s,border-color .2s}
.kpi:hover,.stat:hover,.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#dbe4f2}
.btn-p{background:linear-gradient(180deg,#0c63b8,#0b5cab);box-shadow:0 8px 18px -8px rgba(11,92,171,.6)}
.btn-p:hover{background:linear-gradient(180deg,#0b5cab,#083f78)}
.login-btn{background:linear-gradient(180deg,#0bb07a,#0aa06e);box-shadow:0 12px 28px -10px rgba(10,160,110,.7)}
.login-brand h1{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:1px}

/* Motion — staggered page-load reveal on every view switch */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .content>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .content>*:nth-child(1){animation-delay:.02s}
  .content>*:nth-child(2){animation-delay:.09s}
  .content>*:nth-child(3){animation-delay:.16s}
  .content>*:nth-child(4){animation-delay:.23s}
  .content>*:nth-child(n+5){animation-delay:.30s}
  .login-brand{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .login-card{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:.12s}
}

/* ═══════ Pinned app-shell sidebar — never scrolls away on long pages ═══════ */
.sb{position:fixed;top:0;height:100vh;z-index:30}
.main{margin-inline-start:var(--sb-w)}
@media(min-width:821px){ .sb{inset-inline-start:0} }
@media(max-width:820px){ .main{margin-inline-start:0} .sb{inset-inline-start:-260px} .sb.open{inset-inline-start:0} }