/* SupplyDesk — "Soft UI Evolution" theme.
   Minimalist layout + gentle neomorphic depth (extruded cards, inset inputs) on a cool clay
   base, AA-contrast ink, Kenyon-blue accent. Plus Jakarta Sans + JetBrains Mono.
   Class names match the existing Jinja templates; dark tokens under [data-theme="dark"]
   (the toggle is wired in the sidebar). */
:root{
  /* brand / accent (old names kept so any inline var() still resolves) */
  --accent:#2b4a86; --accent-strong:#1d365f; --accent-soft:#dfe7f6; --accent-ring:rgba(43,74,134,.22);
  --accent-bright:#3a6fe0;
  /* ink + neutrals */
  --ink:#1b2436; --ink-2:#44506a; --ink-soft:#5b6680; --muted:#7c889e; --faint:#9aa5b8;
  --line:#d7deea; --line-soft:#e3e8f1; --line-2:#dfe5ef; --sep:#c7cfdd;
  /* surfaces */
  --bg:#e7ebf2; --surface:#eef2f9; --surface-2:#e9edf5;
  --panel-bg:var(--surface); --glass-bg:var(--surface); --soft:#e7ebf2;
  /* status family — one calm blue/slate tone */
  --st-pending-bg:#e8edf6; --st-pending-fg:#5c6b87;
  --st-submitted-bg:#dbe6f8; --st-submitted-fg:#2f5bb0;
  --st-active-bg:#d2e0f6; --st-active-fg:#244c92;
  --st-completed-bg:#cde0f2; --st-completed-fg:#1f4d7a;
  --st-rejected-bg:#e3e7ef; --st-rejected-fg:#454f69;
  /* alerts (kept for ai-flag/ok/error) — amber tamed toward slate, green/red for true states */
  --amber-bg:#eaeef6; --amber-ink:#586a89;
  /* warm attention tones (new-submission rows + notices) */
  --warn-bg:#fdf3dd; --warn-ink:#7a5b16; --warn-row:#fdf6e6; --warn-row-h:#faeecf;
  --green-ink:#1f7a52; --green-bg:#dcefe3;
  --red:#b4382c; --red-bg:#f6ded9; --red-border:#e7c2bc; --red-soft:#f9efed;
  /* neomorphic shadows (subtle) */
  --sd-dark:#d4dbe7; --sd-light:#ffffff;
  --raise:3px 3px 8px var(--sd-dark), -3px -3px 7px var(--sd-light);
  --raise-sm:2px 2px 5px var(--sd-dark), -2px -2px 5px var(--sd-light);
  --inset:inset 3px 3px 6px var(--sd-dark), inset -3px -3px 6px var(--sd-light);
  --inset-sm:inset 2px 2px 4px var(--sd-dark), inset -2px -2px 4px var(--sd-light);
  --shadow-sm:var(--raise-sm);
  --radius:24px;
  --ui:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
  --accent:#5b8def; --accent-strong:#3f6fd1; --accent-soft:#2a3450; --accent-ring:rgba(91,141,239,.30);
  --accent-bright:#6d9bff;
  --ink:#e9edf5; --ink-2:#b2bccd; --ink-soft:#9aa6bb; --muted:#8a94a6; --faint:#697488;
  --line:#363d48; --line-soft:#2f343e; --line-2:#343b46; --sep:#3a4150;
  --bg:#232830; --surface:#2a3039; --surface-2:#2f3640;
  --panel-bg:var(--surface); --glass-bg:var(--surface); --soft:#262b33;
  --st-pending-bg:#2b3340; --st-pending-fg:#a6b5d2;
  --st-submitted-bg:#243450; --st-submitted-fg:#88abee;
  --st-active-bg:#1f3358; --st-active-fg:#95b8f4;
  --st-completed-bg:#1d3a55; --st-completed-fg:#8fc2ec;
  --st-rejected-bg:#2c313c; --st-rejected-fg:#abb5c7;
  --amber-bg:#2b3340; --amber-ink:#aab8d2;
  --warn-bg:#3a3324; --warn-ink:#e3c37c; --warn-row:#33301f; --warn-row-h:#3c3826;
  --green-ink:#5cc090; --green-bg:#1f3a30;
  --red:#e08a80; --red-bg:#3a2723; --red-border:#583a34; --red-soft:#2f2421;
  --sd-dark:#1a1d23; --sd-light:#333a46;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ui);color:var(--ink);background:var(--bg);
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:14.5px;min-height:100vh;
  letter-spacing:-.005em;transition:background .3s,color .3s}
input,button,textarea,select{font-family:inherit}
::placeholder{color:var(--faint)}
a{color:var(--accent);text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--accent-bright);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ambient drift layer — hidden by default; the landing page opts in with a one-line
   override. Whisper-quiet radial tints (no filter:blur = cheap), transform-only motion,
   40-60s loops; the global prefers-reduced-motion rule freezes it automatically. */
#sd-ambient{display:none;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
#sd-ambient div{position:absolute;border-radius:50%;will-change:transform}
.orb1{width:58vmax;height:58vmax;left:-14vmax;top:-18vmax;
  background:radial-gradient(circle at 35% 35%, rgba(58,111,224,.22), rgba(58,111,224,0) 64%);
  animation:orbA 22s ease-in-out infinite alternate}
.orb2{width:48vmax;height:48vmax;right:-10vmax;bottom:-14vmax;
  background:radial-gradient(circle at 60% 40%, rgba(43,74,134,.18), rgba(43,74,134,0) 62%);
  animation:orbB 28s ease-in-out infinite alternate}
.orb3{width:38vmax;height:38vmax;left:36%;top:48%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.7), rgba(255,255,255,0) 58%);
  animation:orbC 18s ease-in-out infinite alternate}
@keyframes orbA{from{transform:translate(0,0) scale(1)}to{transform:translate(16vmax,10vmax) scale(1.22)}}
@keyframes orbB{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-14vmax,-10vmax) scale(.9)}}
@keyframes orbC{from{transform:translate(0,0)}to{transform:translate(-12vmax,9vmax)}}

/* floating mini invoice-cards (landing only — container lives in index.html).
   Clearly visible motion: soft-UI paper chips rising bottom→top with sway + slow spin,
   staggered sizes/lanes/speeds. transform+opacity only; behind all content. */
.lp-floats{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.lp-floats i{position:absolute;bottom:-90px;display:block;background:var(--surface);border-radius:9px;
  box-shadow:var(--raise);opacity:0;animation:lpfloat linear infinite}
.lp-floats i::before,.lp-floats i::after{content:"";position:absolute;left:14%;right:16%;height:8%;
  border-radius:99px;background:var(--line-soft)}
.lp-floats i::before{top:22%}
.lp-floats i::after{top:44%;right:38%}
.lp-floats i b{position:absolute;left:14%;bottom:16%;width:34%;height:14%;border-radius:99px;background:var(--accent-soft)}
.lp-floats i:nth-child(1){left:6%;width:52px;height:64px;animation-duration:18s;animation-delay:0s}
.lp-floats i:nth-child(2){left:20%;width:38px;height:48px;animation-duration:26s;animation-delay:6s}
.lp-floats i:nth-child(3){left:44%;width:30px;height:38px;animation-duration:30s;animation-delay:12s}
.lp-floats i:nth-child(4){left:63%;width:44px;height:56px;animation-duration:22s;animation-delay:3s}
.lp-floats i:nth-child(5){left:78%;width:56px;height:70px;animation-duration:19s;animation-delay:9s}
.lp-floats i:nth-child(6){left:91%;width:34px;height:44px;animation-duration:27s;animation-delay:15s}
@keyframes lpfloat{
  0%{transform:translateY(0) translateX(0) rotate(-6deg);opacity:0}
  6%{opacity:.55}
  50%{transform:translateY(-55vh) translateX(3vw) rotate(5deg)}
  92%{opacity:.5}
  100%{transform:translateY(-112vh) translateX(-2vw) rotate(-4deg);opacity:0}
}
@media(max-width:600px){.lp-floats i:nth-child(n+4){display:none}}
[data-theme="dark"] .orb1{background:radial-gradient(circle at 35% 35%, rgba(109,155,255,.15), rgba(109,155,255,0) 64%)}
[data-theme="dark"] .orb2{background:radial-gradient(circle at 60% 40%, rgba(91,141,239,.12), rgba(91,141,239,0) 62%)}
[data-theme="dark"] .orb3{background:radial-gradient(circle at 50% 50%, rgba(70,82,104,.5), rgba(70,82,104,0) 58%)}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px 90px}

/* header */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.hbar{max-width:1080px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.backbtn{background:var(--surface);border:none;border-radius:12px;width:40px;height:40px;font-size:16px;color:var(--ink-2);cursor:pointer;
  box-shadow:var(--raise-sm);transition:.18s;line-height:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.backbtn:hover{box-shadow:var(--raise);color:var(--ink)} .backbtn:active{box-shadow:var(--inset-sm)}
.logo{font-family:var(--ui);font-weight:800;font-size:16px;letter-spacing:-.02em;display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.logo:hover{opacity:.85}
.logo img{height:25px;width:auto;display:block}
.logo .dot{width:18px;height:18px;background:var(--accent);border-radius:6px;display:inline-block}
.logo small{font-family:var(--ui);font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding-left:13px;border-left:1px solid var(--line-2)}

/* intro */
.intro{padding:44px 0 20px}
.eyebrow{font-family:var(--ui);font-size:11.5px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;font-weight:700}
.intro h1{font-family:var(--ui);font-weight:700;font-size:32px;letter-spacing:-.03em;margin:10px 0 7px;line-height:1.08}
.intro p{color:var(--ink-soft);max-width:640px;font-size:15.5px}

/* panels = soft raised cards */
.panel{background:var(--panel-bg);border-radius:var(--radius);box-shadow:var(--raise);overflow:hidden;animation:rise .26s ease}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.panel + .panel{margin-top:22px}
.panel-head{padding:24px 34px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head h2{font-family:var(--ui);font-size:17px;font-weight:600;letter-spacing:-.01em}
.panel-head .sub{color:var(--muted);font-size:13px}
.panel-body{padding:34px}

/* buttons */
.btn{font-family:var(--ui);font-weight:700;font-size:14px;border:none;border-radius:15px;padding:14px 22px;cursor:pointer;line-height:1;
  transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .22s,background .2s;display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:4px 4px 10px rgba(31,54,95,.26),-3px -3px 9px var(--sd-light)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:inset 3px 3px 7px rgba(15,28,55,.5)}
.btn-ghost{background:var(--surface);color:var(--ink);box-shadow:var(--raise-sm)}
.btn-ghost:hover{box-shadow:var(--raise)} .btn-ghost:active{box-shadow:var(--inset-sm)}
.btn-ink{background:var(--ink-2);color:#fff;box-shadow:var(--raise-sm)} .btn-ink:hover{background:var(--ink)}
.btn-danger{background:var(--surface);color:var(--red);box-shadow:var(--raise-sm)} .btn-danger:hover{box-shadow:var(--raise)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;align-items:center}

/* forms */
label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0 0 8px;letter-spacing:.01em}
input,textarea,select{width:100%;font-family:var(--ui);font-size:14.5px;color:var(--ink);background:var(--bg);border:none;border-radius:15px;
  padding:13px 16px;box-shadow:var(--inset);transition:box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;box-shadow:var(--inset),0 0 0 2.5px var(--accent-soft)}
.field{margin-bottom:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* status pills (one calm blue/slate tone; meaning carried by label + dot too) */
.pill{font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-pending{background:var(--st-pending-bg);color:var(--st-pending-fg)}
.p-submitted{background:var(--st-submitted-bg);color:var(--st-submitted-fg)}
.p-active,.p-approved{background:var(--st-active-bg);color:var(--st-active-fg)}
.p-clarification{background:var(--st-pending-bg);color:var(--st-pending-fg)}
.p-rejected{background:var(--st-rejected-bg);color:var(--st-rejected-fg)}
.p-completed{background:var(--st-completed-bg);color:var(--st-completed-fg)}
.badge2fa{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:4px 11px;border-radius:999px;display:inline-flex;gap:6px;align-items:center;letter-spacing:.01em;vertical-align:middle}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--ui);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:0 12px 14px}
td{padding:17px 14px;border-top:1px solid var(--line-soft);vertical-align:middle}
tr:hover td{background:var(--surface-2)}
.who{font-weight:700}
.who small{display:block;font-weight:500;color:var(--muted);font-size:12px;font-family:var(--mono)}

/* text helpers */
.mini{font-size:12px;color:var(--muted)}
.note{font-size:13px;color:var(--ink-soft);margin-top:6px}
.sub{color:var(--muted);font-size:13px}

/* loading spinner (buttons during submit + auth relay page) */
.spinner{display:inline-block;width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:2px solid currentColor;border-top-color:transparent;animation:sdspin .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes sdspin{to{transform:rotate(360deg)}}
.btn.is-loading{opacity:.75;cursor:progress;pointer-events:none}

/* attention highlights — theme-aware (replaces hard-coded #fff7e6 inline styles) */
.note-warn{font-size:13px;border-radius:14px;padding:13px 16px;margin-top:14px;
  background:var(--warn-bg);color:var(--warn-ink);box-shadow:var(--inset-sm)}
tr.row-new{cursor:pointer}
tr.row-new td{background:var(--warn-row)}
tr.row-new:hover td{background:var(--warn-row-h)}

/* alerts */
.ai-flag{background:var(--amber-bg);border-radius:14px;padding:14px 16px;font-size:13px;color:var(--amber-ink);display:flex;gap:10px;align-items:flex-start;margin-top:8px;box-shadow:var(--inset-sm)}
.ai-flag .ico{font-size:15px}
.ok{background:var(--green-bg);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--green-ink);display:flex;gap:10px;align-items:flex-start;box-shadow:var(--inset-sm)}
.empty{text-align:center;color:var(--muted);padding:46px 12px;font-size:14px}
.empty .big{font-size:30px;margin-bottom:10px}

/* extracted box (review / confirm) */
.exbox{border-radius:16px;overflow:hidden;margin-top:8px;background:var(--bg);box-shadow:var(--inset-sm)}
.exbox .exhead{background:transparent;border-bottom:1px solid var(--line-soft);padding:13px 18px;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.exbody{padding:18px}
.exgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-bottom:10px}
.exgrid .f,.exbody .f{font-size:14.5px}
/* the small caps label above each value — applies inside AND outside .exgrid
   (the signing box + Remark/PICs rows sit directly in .exbody) */
.exgrid .f .l,.exbody .f .l{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em;font-weight:700;text-transform:uppercase;margin-bottom:3px}

/* line-item editor */
.liedit td{padding:6px 8px;border-top:1px solid var(--line-soft)}
.liedit th{padding:0 8px 9px}
.liedit input{padding:10px 12px;font-size:14px;border-radius:11px}
.li-num{max-width:96px;text-align:right;font-family:var(--mono)}
.li-sub{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.rmbtn{width:36px;height:36px;border:none;border-radius:11px;background:var(--surface);color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0;box-shadow:var(--raise-sm);transition:.15s}
.rmbtn:hover{color:var(--red);box-shadow:var(--raise)}
.addrow{font-family:var(--ui);font-size:13px;font-weight:700;color:var(--accent);background:var(--surface);border:none;border-radius:12px;padding:11px 16px;cursor:pointer;margin-top:12px;box-shadow:var(--raise-sm);transition:.15s}
.addrow:hover{box-shadow:var(--raise)}
.totrow{text-align:right;font-weight:800;margin-top:16px;font-size:17px}
.totrow #total,.totrow span{font-family:var(--mono);color:var(--accent)}

/* status timeline */
.track{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.tnode{flex:1;min-width:110px;padding:0 2px}
.tnode .bar{height:6px;border-radius:3px;background:var(--bg);box-shadow:var(--inset-sm)}
.tnode.done .bar,.tnode.cur .bar{background:var(--accent);box-shadow:none}
.tnode .lab{font-size:11px;margin-top:9px;color:var(--muted);letter-spacing:.02em;font-weight:600}
.tnode.cur .lab,.tnode.done .lab{color:var(--ink);font-weight:700}

/* outcome / audit list */
.outcome{border-radius:16px;padding:20px;margin-top:18px;background:var(--bg);box-shadow:var(--inset-sm)}
.outcome .oh{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-bottom:13px;text-transform:uppercase}
.didlist{list-style:none;display:flex;flex-direction:column;gap:11px}
.didlist li{display:flex;gap:11px;font-size:13.5px;align-items:flex-start}
.didlist li .ic{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:10px;margin-top:1px}
.didlist li.muted .ic{background:var(--muted)}

/* chips */
.filechip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:none;border-radius:12px;padding:9px 14px;font-size:13px;text-decoration:none;color:var(--ink);box-shadow:var(--raise-sm)}
.filechip:hover{box-shadow:var(--raise)}
.ext-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px;vertical-align:middle}
.ext-chip.lock{color:var(--ink-2);background:var(--surface-2)}

/* upload drop zone */
.drop{border-radius:18px;padding:54px 30px;text-align:center;color:var(--ink-soft);font-size:14px;cursor:pointer;transition:.15s;background:var(--bg);box-shadow:var(--inset)}
.drop:hover{color:var(--ink);box-shadow:var(--inset),0 0 0 2.5px var(--accent-soft)}
.drop .big{font-size:30px;margin-bottom:10px;color:var(--accent)}

/* 2FA */
.twofa-wrap{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:14px 0}
.qr{width:158px;height:158px;background:#fff;border-radius:16px;padding:11px;flex-shrink:0;box-shadow:var(--raise)}
.otp{font-family:var(--mono);font-size:24px;letter-spacing:12px;text-align:center;font-weight:600;max-width:250px;background:var(--bg);box-shadow:var(--inset)}

/* legacy (kept harmless) */
.secure-zone{background:var(--bg);border-radius:14px;padding:18px;margin-top:8px;box-shadow:var(--inset-sm)}
.secure-zone .zt{font-size:11.5px;font-weight:700;color:var(--ink);margin-bottom:12px}
.maskrow{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:13px;padding:13px 15px;margin:8px 0;box-shadow:var(--inset-sm)}
.maskrow .mono{font-family:var(--mono);font-size:14.5px;letter-spacing:2px}
.maskrow .lbl{font-size:11px;color:var(--muted);font-weight:600}
.kv{font-size:13px;margin:3px 0;color:var(--ink-soft)}
.kv b{color:var(--ink);font-weight:700}

/* landing / hero */
.land{max-width:780px;margin:0 auto;text-align:center;padding:9vh 0 0;animation:landrise .55s cubic-bezier(.2,.7,.2,1)}
@keyframes landrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.land .eyebrow{display:block}
.land-title{font-family:var(--ui);font-weight:800;font-size:56px;line-height:1.04;letter-spacing:-.04em;margin:14px 0 18px}
.land-title .accent{color:var(--accent)}
.land-sub{font-size:17px;color:var(--ink-soft);max-width:580px;margin:0 auto 30px;line-height:1.6}
.land-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.land-cta .btn{padding:15px 28px;font-size:15px}

@media(max-width:640px){.grid2,.exgrid{grid-template-columns:1fr}.intro h1{font-size:25px}.twofa-wrap{gap:16px}.land-title{font-size:38px}.panel-body,.panel-head{padding-left:20px;padding-right:20px}}

/* ===================== landing v2: split hero + product preview ===================== */
.lp-split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;min-height:76vh;padding-top:5vh;animation:landrise .55s cubic-bezier(.2,.7,.2,1)}
.lp-title{font-family:var(--ui);font-weight:800;font-size:46px;line-height:1.07;letter-spacing:-.038em;margin:14px 0 16px}
.lp-title .accent{color:var(--accent)}
.lp-sub{font-size:16px;color:var(--ink-soft);margin-bottom:30px;max-width:460px;line-height:1.6}
.lp-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.lp-ctas .btn{padding:15px 28px;font-size:15px}
.lp-trust{display:flex;gap:10px;flex-wrap:wrap}
.lp-trust span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border-radius:999px;padding:9px 16px;box-shadow:var(--raise-sm)}
.lp-trust svg{width:15px;height:15px;stroke-width:2;color:var(--accent);flex-shrink:0}
/* the dashboard preview card */
.lp-mock{background:var(--surface);border-radius:26px;box-shadow:var(--raise);padding:16px;position:relative;
  display:grid;grid-template-columns:56px 1fr;gap:14px;animation:lpbob 7.5s ease-in-out infinite alternate}
@keyframes lpbob{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.lp-side{background:var(--bg);border-radius:18px;box-shadow:var(--inset-sm);padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.lp-side .mk{width:32px;height:32px;border-radius:10px;background:var(--surface);box-shadow:var(--raise-sm);display:grid;place-items:center;color:var(--accent);font-weight:800;font-size:12px;margin-bottom:6px;font-family:var(--ui)}
.lp-side i{width:26px;height:26px;border-radius:9px;background:var(--surface);box-shadow:var(--raise-sm);display:block}
.lp-side i.on{background:var(--accent);box-shadow:none}
.lp-body{padding:8px 8px 26px 0;min-width:0}
.lp-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.lp-top b{font-size:12px;color:var(--ink-2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--ui)}
.lp-top .ava{margin-left:auto}
.lp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.lp-kpi{background:var(--bg);border-radius:16px;box-shadow:var(--inset-sm);padding:13px}
.lp-kpi .l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lp-kpi .v{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:2px;font-family:var(--ui)}
.lp-rows{display:flex;flex-direction:column}
.lp-r{display:flex;align-items:center;gap:10px;padding:11px 4px;border-top:1px solid var(--line-soft);font-size:12.5px}
.lp-r:first-child{border-top:none}
.lp-r .no{font-family:var(--mono);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-r .amt{margin-left:auto;font-family:var(--mono);font-weight:700;white-space:nowrap}
.lp-r .pill{flex-shrink:0}
.lp-float{position:absolute;left:-18px;bottom:-16px;background:var(--surface);border-radius:16px;box-shadow:var(--raise);
  padding:13px 18px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;font-family:var(--ui)}
.lp-float .ck{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0}
.lp-float .ck svg{width:13px;height:13px}
.lp-float small{display:block;font-weight:500;color:var(--muted);font-size:11px}
@media(max-width:960px){
  .lp-split{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:3vh}
  .lp-float{left:10px}
}
@media(max-width:600px){
  .lp-title{font-size:32px}
  .lp-ctas .btn{flex:1 1 auto;justify-content:center}
  .lp-kpis{gap:10px}
  .lp-r{gap:7px}
  .lp-float{position:static;margin-top:14px;grid-column:1 / -1}
}

/* ===================== Stage 2: sidebar app shell ===================== */
.app{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.sidebar{padding:26px 20px;display:flex;flex-direction:column;gap:5px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 18px;text-decoration:none;color:var(--ink)}
.brand .mark{width:40px;height:40px;border-radius:13px;background:var(--surface);box-shadow:var(--raise-sm);display:grid;place-items:center;flex-shrink:0}
.brand .mark img{height:22px;width:auto;display:block}
.brand b{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:700;text-transform:uppercase;margin-top:2px}
.navlabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:15px 12px 6px}
.nav{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;color:var(--ink-2);font-weight:600;font-size:14px;border:none;background:transparent;width:100%;text-align:left;cursor:pointer;transition:.16s;text-decoration:none;font-family:var(--ui)}
.nav svg{width:19px;height:19px;flex-shrink:0;stroke-width:2}
.nav:hover{color:var(--ink);background:var(--surface-2)}
.nav.active{color:var(--accent);background:var(--bg);box-shadow:var(--inset-sm)}
.nav .count{margin-left:auto;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:#fff}
/* desktop: primary+secondary lay out exactly as the vertical sidebar; hamburger hidden */
.nav-primary,.nav-secondary{display:contents}
.hamburger{display:none;margin-left:auto;width:42px;height:42px;border-radius:13px;background:var(--surface);box-shadow:var(--raise-sm);border:none;cursor:pointer;color:var(--accent);place-items:center;flex-shrink:0;transition:.16s}
.hamburger svg{width:20px;height:20px;stroke-width:2.2}
.hamburger[aria-expanded="true"]{box-shadow:var(--inset-sm)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:5px;padding-top:12px}
.profile-chip{display:flex;align-items:center;gap:11px;padding:10px;border-radius:14px;background:var(--surface);box-shadow:var(--raise-sm);text-decoration:none;color:var(--ink)}
.profile-chip .nm{display:block;font-size:13px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-chip .rl{display:block;font-size:11px;color:var(--muted)}
.profile-chip>span:last-child{min-width:0}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#34508c,#274273);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0;box-shadow:var(--raise-sm)}
.toggle{width:46px;height:26px;border-radius:999px;background:var(--bg);box-shadow:var(--inset-sm);position:relative;border:none;flex-shrink:0;margin-left:auto;transition:.2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:var(--raise-sm);transition:.2s}
[data-theme="dark"] .toggle{background:var(--accent)}
[data-theme="dark"] .toggle::after{left:23px;background:#fff}
.main{padding:42px 60px 92px;max-width:1280px;min-width:0}
.main .intro{padding-top:4px}
/* KPI tiles + dashboard */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:0 0 28px}
.stat{background:var(--surface);border-radius:var(--radius);box-shadow:var(--raise);padding:26px}
a.stat{display:block;color:inherit;text-decoration:none;transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .22s}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--raise),0 0 0 2.5px var(--accent-soft)}
a.stat:active{transform:none;box-shadow:var(--inset-sm)}
.stat .ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--bg);box-shadow:var(--inset-sm);color:var(--accent);margin-bottom:20px}
.stat .ico svg{width:22px;height:22px;stroke-width:2}
.stat .lab{font-size:12.5px;color:var(--muted);font-weight:600}
.stat .val{font-size:36px;font-weight:650;letter-spacing:-.03em;margin-top:4px;line-height:1;font-family:var(--ui)}
.stat .delta{font-size:12px;font-weight:600;margin-top:9px;color:var(--accent)}
.dash-2{display:grid;grid-template-columns:1.6fr 1fr;gap:28px}
@media(max-width:1000px){.dash-2{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;flex-direction:row;flex-wrap:nowrap;align-items:center;border-right:none;border-bottom:1px solid var(--line-soft);gap:6px;padding:12px 16px}
  .brand{padding:4px 10px 4px 4px;flex-shrink:0}
  .navlabel{display:none}
  .nav{width:auto;padding:9px 12px}
  /* primary (green) items stay inline */
  .nav-primary{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
  /* hamburger appears, pinned right */
  .hamburger{display:grid}
  /* secondary (red) items collapse into a dropdown panel */
  .nav-secondary{display:none;position:absolute;top:calc(100% + 8px);right:14px;z-index:60;width:248px;flex-direction:column;gap:4px;padding:12px;background:var(--surface);border-radius:20px;box-shadow:var(--raise);border:1px solid var(--line-soft)}
  .nav-secondary.open{display:flex}
  .nav-secondary .nav{width:100%}
  .side-foot{margin:6px 0 0;flex-direction:column;gap:5px;padding-top:10px;border-top:1px solid var(--line-soft)}
  .side-foot .profile-chip{display:flex}
  .main{padding:22px 18px 60px}.kpis{grid-template-columns:1fr 1fr}
}

/* ===================== Stage 3: profile page ===================== */
.prof-id{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.avatar.lg{width:86px;height:86px;border-radius:28px;font-size:30px}
.row-set{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--line-soft)}
.row-set:first-child{border-top:none}
.row-set .txt{flex:1;min-width:0}
.row-set .txt b{font-size:14px;font-weight:700;display:block}
.row-set .txt p{font-size:12.5px;color:var(--muted)}
.seg{display:inline-flex;background:var(--bg);box-shadow:var(--inset-sm);border-radius:14px;padding:5px}
.seg button{border:none;background:transparent;padding:8px 16px;border-radius:10px;font-weight:600;font-size:13px;color:var(--muted);font-family:var(--ui);cursor:pointer;transition:.16s}
.seg button.on{background:var(--surface);box-shadow:var(--raise-sm);color:var(--ink)}

/* ===================== Stage 4: responsive — laptop / iPad / phone ===================== */
/* global safety: images never overflow; content column can shrink so wide tables
   scroll inside themselves instead of pushing the whole page sideways (.main is a grid track) */
img{max-width:100%;height:auto}

/* tablet — iPad portrait & landscape (sidebar is still full until 900) */
@media(max-width:1024px){
  .panel-body{padding:28px}
  .panel-head{padding:20px 28px}
  .exgrid{gap:12px 18px}
}

/* small tablet & large phone: 16px inputs stop iOS from auto-zooming the field on focus */
@media(max-width:768px){
  input,textarea,select{font-size:16px}
  .otp{font-size:22px;letter-spacing:8px}
}

/* phone: tighten the shell, let simple tables scroll, make CTAs easy to tap */
@media(max-width:640px){
  .main{padding:22px 15px 56px}
  .panel-body{padding:20px 16px}
  .panel-head{padding:16px 16px}
  .panel + .panel{margin-top:16px}
  .intro{padding:22px 0 14px}
  .intro p{font-size:14.5px}
  /* SIMPLE tables scroll sideways rather than squeeze; HEAVY (.cards) card-stack below */
  .panel-body table:not(.cards){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  /* primary buttons grow to fill the row = bigger tap targets */
  .btn-row .btn{flex:1 1 auto;justify-content:center}
  .land{padding-top:5vh}
  .land-title{font-size:32px}
  .land-sub{font-size:15px}
  .stat{padding:20px}
  .stat .val{font-size:30px}
  .stat .ico{width:44px;height:44px;margin-bottom:14px}
  .wrap{padding:0 16px 56px}
  .hbar{padding:12px 16px}
  .twofa-wrap{gap:16px}
  .row-set{flex-wrap:wrap}
}

/* phone: card-stack the heavy tables + a neat two-row top bar */
@media(max-width:560px){
  /* my_invoices + vendors <table class="cards"> — each row becomes a labelled card */
  table.cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{background:var(--surface);border-radius:16px;box-shadow:var(--raise-sm);padding:8px 6px;margin-bottom:14px}
  table.cards tr:hover td{background:transparent}
  table.cards td{border-top:1px solid var(--line-soft);padding:9px 14px;text-align:left;white-space:normal}
  table.cards td:first-child{border-top:none}
  table.cards td::before{content:attr(data-label);display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
  table.cards td[data-label=""]::before,table.cards td:not([data-label])::before{content:none;margin:0}
  table.cards td:empty{display:none}
  /* top bar: brand + hamburger on row 1, the 3 primary items on their own full-width row */
  .sidebar{flex-wrap:wrap}
  .nav-primary{order:3;flex-basis:100%;justify-content:space-between;gap:6px;margin-top:2px}
  .nav-primary .nav{flex:1;justify-content:center;gap:7px;padding:9px 8px;font-size:12.5px}
}

/* ===== "Kenyon Desk Portal" wordmark (rename, option F) =====
   Plus Jakarta Sans ExtraBold with tight tracking (the 'Pick the wordmark' treatment);
   "Portal" rides along in a lighter weight + softer ink. */
.brand .wm{font-size:15px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.wm em{font-style:normal;font-weight:400;color:var(--ink-soft)}
.logo .wm{font-weight:800;letter-spacing:-.03em}