/* Mall CRM — production stylesheet.
   Ported verbatim from the approved mockup (clients/amin/mall-crm/mockup.html).
   Changes vs mockup: self-hosted fonts (@font-face below, CSP has no external
   origins), role-switch / preview-banner / demo-hint / mock-note removed,
   plus production-only states (skeletons, error banners, row notes,
   temp-password reveal, load-more) in the same visual language. */

/* ── Self-hosted fonts (Google Fonts woff2, latin + latin-ext) ── */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 900;
  font-stretch:75% 100%;
  font-display:swap;
  src:url("../assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 900;
  font-stretch:75% 100%;
  font-display:swap;
  src:url("../assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/plexmono-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/plexmono-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#FFFFFF;
  --ink:#14181D;
  --muted:#64707C;
  --faint:#8A94A0;
  --line:#E7EAEE;
  --line-soft:#F1F3F6;
  --accent:#0E6B64;         /* Unit 01 · lagoon */
  --accent-ink:#0A524C;
  --accent-tint:#E9F4F2;
  --accent-soft:#F4FAF9;
  --ok:#17743F;   --ok-bg:#E9F5EE;
  --warn:#8F5606; --warn-bg:#FCF3E2;
  --bad:#B3261E;  --bad-bg:#FBEEED;
  --radius:10px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
[data-store="gaming"]{
  --accent:#5B34C9;
  --accent-ink:#46289C;
  --accent-tint:#EFEAFB;
  --accent-soft:#F7F5FD;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-feature-settings:"tnum"}
button,input,.plate,.nav-btn,.btn,.card{transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s}

/* App chrome hidden until the session is confirmed (login covers everything anyway;
   this also keeps hidden pages out of the tab order). */
body:not(.authed) .masthead,
body:not(.authed) .frame{display:none}

/* ── Login ────────────────────────────────── */
.login{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:grid;grid-template-columns:1.05fr 1fr;
}
.login.hidden{display:none}
.login-visual{position:relative;overflow:hidden}
.login-visual img{width:100%;height:100%;object-fit:cover;display:block}
.login-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,20,24,.74) 0%, rgba(10,20,24,.14) 48%, rgba(10,20,24,.48) 100%);
}
.login-brand{
  position:absolute;top:30px;left:34px;color:#fff;line-height:1.05;
}
.login-brand b{font-weight:900;font-stretch:87%;font-size:20px;letter-spacing:.04em}
.login-brand span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.85;margin-top:4px;
}
.login-caption{position:absolute;left:34px;right:34px;bottom:32px;color:#fff}
.login-caption p{font-weight:700;font-size:22px;letter-spacing:-.01em;margin-bottom:8px}
.login-caption span{font-size:13.5px;opacity:.85;line-height:1.55;display:block;max-width:420px}
.login-form{display:grid;place-items:center;padding:40px 28px;overflow-y:auto}
.login-form form{width:100%;max-width:352px}
.login-form form.hidden{display:none}
.login-form h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.login-form .sub{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:26px}
.login-form .field{margin-bottom:15px}
.login-form .btn.primary{
  width:100%;justify-content:center;padding:11px 15px;font-size:14px;margin-top:6px;
}
.login-form .aux{
  margin-top:18px;font-size:12.5px;color:var(--muted);
  display:flex;flex-direction:column;gap:8px;
}
.login-form .aux a{color:var(--accent-ink);text-decoration:none;font-weight:500}
.login-form .aux a:hover{text-decoration:underline}

/* Inline form error (login / password screens) — same tone as .tag.bad */
.form-error{
  display:none;margin-bottom:15px;
  background:var(--bad-bg);color:var(--bad);
  border:1px solid var(--bad-bg);border-left:3px solid var(--bad);
  border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.5;
}
.form-error.show{display:block}

/* ── Activity log ────────────────────────── */
.fchips{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.fchip{
  border:1px solid var(--line);border-radius:99px;padding:6px 14px;
  font-size:12.5px;color:var(--muted);
}
.fchip:hover{border-color:var(--accent);color:var(--accent-ink)}
.fchip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.log-when{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.log-who{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.log-who .avatar{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:10px;
  background:var(--accent-tint);color:var(--accent-ink);
}
td.log-what{white-space:normal;min-width:280px;line-height:1.5}
.lock-note{
  display:flex;align-items:center;gap:9px;
  padding:13px 18px;background:#FAFBFC;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.lock-note svg{width:15px;height:15px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.loadmore{
  display:flex;justify-content:center;padding:13px 18px;
  border-top:1px solid var(--line-soft);
}
.loadmore .btn{font-size:12.5px;padding:7px 16px}

/* ── How it works ────────────────────────── */
.steps{max-width:720px}
.step{
  display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-soft);
}
.step:last-child{border-bottom:none}
.step .n{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent-ink);
  background:var(--accent-tint);width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;flex:none;margin-top:2px;
}
.step h3{font-size:14.5px;font-weight:700;margin-bottom:5px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:560px}
.step p strong{color:var(--ink);font-weight:600}
.callout{
  margin-top:24px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:14px 18px;font-size:13px;color:var(--muted);
  line-height:1.6;max-width:720px;background:var(--accent-soft);
}
.callout strong{color:var(--ink)}

/* Error banner — .callout in its red-left-border variant, used atop pages/cards */
.callout.error{
  border-left-color:var(--bad);background:var(--bad-bg);
  margin:0 0 18px;max-width:none;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.callout.error .msg{flex:1;min-width:200px}
.callout.error .btn{flex:none;font-size:12.5px;padding:6px 14px;background:var(--paper)}

/* ── Masthead ─────────────────────────────── */
.masthead{
  display:flex;align-items:center;gap:28px;
  padding:0 28px;height:76px;
  border-bottom:1px solid var(--line);
}
.wordmark{display:flex;flex-direction:column;line-height:1.05;min-width:118px}
.wordmark b{
  font-weight:900;font-stretch:87%;font-size:19px;letter-spacing:.04em;
}
.wordmark span{
  font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-top:3px;
}

/* Mall directory — store plates */
.directory{display:flex;gap:10px}
.plate{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 16px 9px 10px;
  transition:border-color .15s,background .15s;
}
.plate .glyph{
  width:34px;height:34px;border-radius:7px;
  display:grid;place-items:center;
  font-family:var(--mono);font-weight:600;font-size:13px;
  background:var(--line-soft);color:var(--muted);
}
.plate .lbl{text-align:left}
.plate .lbl em{
  display:block;font-style:normal;font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.plate .lbl strong{font-weight:600;font-size:14px}
.plate[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.plate[aria-pressed="true"] .glyph{background:var(--accent);color:#fff}
.plate[aria-pressed="true"] .lbl em{color:var(--accent-ink)}
.plate:hover{border-color:var(--accent)}

/* Coming-soon store: tab is visible and clickable, but reads as not-open */
.plate.soon .glyph{background:repeating-linear-gradient(-45deg,var(--line-soft) 0 4px,transparent 4px 8px);color:var(--faint)}
.plate.soon .lbl strong{color:var(--muted)}
.soon-badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:99px;
  padding:3px 8px;margin-left:6px;white-space:nowrap;
}
.soon-panel{
  text-align:center;padding:84px 24px;
  border:1px dashed var(--line);border-radius:var(--radius);
  background:#fff;
}
.soon-panel .soon-mark{
  display:inline-block;width:46px;height:46px;margin-bottom:18px;border-radius:12px;
  background:repeating-linear-gradient(-45deg,var(--accent-soft) 0 6px,transparent 6px 12px);
  border:1px solid var(--accent);
}
.soon-panel h1{font-size:22px;margin-bottom:10px}
.soon-panel p{font-size:13.5px;color:var(--muted);max-width:420px;margin:0 auto}

.masthead .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.sync{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.sync .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.sync .dot.warn{background:var(--warn)}
.sync .dot.faint{background:var(--faint)}
.who{display:flex;align-items:center;gap:9px}
.who .avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:700;font-size:12px;
}
.who .name{font-weight:600;font-size:13px;line-height:1.2}
.who .role{font-size:11px;color:var(--muted)}
.signout{
  font-size:12px;color:var(--muted);padding:6px 10px;border-radius:7px;
  border:1px solid transparent;
}
.signout:hover{color:var(--bad);background:var(--bad-bg)}
.sync .every{color:var(--faint)}

/* ── Frame ────────────────────────────────── */
.frame{display:grid;grid-template-columns:196px 1fr;min-height:calc(100vh - 77px)}
.rail{border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:2px}
.rail .nav-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 12px 10px;
}
.nav-btn{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:8px;text-align:left;
  font-weight:500;font-size:13.5px;color:var(--muted);
  width:100%;
}
.nav-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav-btn:hover{background:var(--line-soft);color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--accent-tint);color:var(--accent-ink);font-weight:600}
.nav-btn[hidden]{display:none}
.rail .foot{margin-top:auto;padding:12px;font-size:11px;color:var(--faint);line-height:1.6}

main{padding:30px 34px 120px;max-width:1120px}
.page{display:none}
.page.active{display:block}
.page-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:21px;font-weight:700;letter-spacing:-.01em}
.page-head .store-chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-tint);
  padding:4px 10px;border-radius:99px;
}
.page-head .sub{width:100%;color:var(--muted);font-size:13px}

/* ── KPI row ─────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.kpi{
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  box-shadow:0 1px 2px rgba(16,24,32,.04);position:relative;
}
.kpi .spark{position:absolute;top:16px;right:16px;opacity:.9}
.kpi .spark polyline{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi .spark polygon{fill:var(--accent-tint);opacity:.6}
.kpi .k-label{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.kpi .k-value{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
.kpi .k-note{font-size:12px;color:var(--faint);margin-top:6px}
.kpi .k-note .up{color:var(--ok);font-weight:500}
.kpi .k-note .down{color:var(--bad);font-weight:500}

.spend-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.spend{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative}
.spend .src{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;margin-bottom:8px}
.spend .src .logo{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;
  background:var(--line-soft);color:var(--muted);
}
.spend .amount{font-family:var(--mono);font-size:21px;font-weight:600}
.spend .per{font-size:12px;color:var(--faint);margin-top:4px}
.spend.pending{background:var(--line-soft);border-style:dashed}
.spend.pending .amount{color:var(--faint)}
.tag{
  display:inline-block;font-size:11px;font-weight:500;
  padding:2.5px 9px;border-radius:99px;white-space:nowrap;
}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.neutral{background:var(--line-soft);color:var(--muted)}

/* ── Tables ──────────────────────────────── */
.card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:26px;
  box-shadow:0 1px 2px rgba(16,24,32,.04);
}
tbody tr{transition:background-color .12s}
tbody tr:hover td{background:#FAFBFC}
.spend{box-shadow:0 1px 2px rgba(16,24,32,.04)}
.card-head{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line);
}
.card-head h2{font-size:14px;font-weight:600}
.card-head .hint{font-size:12px;color:var(--faint);margin-left:auto}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  padding:10px 18px;border-bottom:1px solid var(--line);white-space:nowrap;
  background:#FAFBFC;
}
td{padding:11px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:none}
td .prod{font-weight:600}
td .variant{font-size:12px;color:var(--muted)}
.prod-cell{display:flex;align-items:center;gap:12px}
.thumb{
  width:44px;height:44px;flex:none;border-radius:8px;
  border:1px solid var(--line);background:#fff;
  object-fit:contain;padding:3px;
}
.thumb-fallback{
  width:44px;height:44px;flex:none;border-radius:8px;
  display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent-ink);
  font-family:var(--mono);font-size:11px;font-weight:600;
}
td.num,th.num{text-align:right}
.sku{font-family:var(--mono);font-size:12px;color:var(--muted)}

.qty-input,.price-input{
  font-family:var(--mono);font-size:13.5px;
  width:76px;padding:7px 9px;text-align:right;
  border:1px solid var(--line);border-radius:7px;
  background:var(--paper);
}
.price-input{width:96px}
.qty-input:focus,.price-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-tint)}
.qty-input.dirty,.price-input.dirty{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.qty-input:disabled,.price-input:disabled{background:var(--line-soft);color:var(--faint);cursor:not-allowed}
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper button{
  width:26px;height:26px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--mono);font-size:14px;line-height:1;color:var(--muted);
  display:grid;place-items:center;
}
.stepper button:hover{border-color:var(--accent);color:var(--accent-ink)}

.guard{
  font-size:11.5px;color:var(--warn);
  display:flex;align-items:flex-start;justify-content:flex-end;gap:6px;
  margin:5px 0 0 auto;white-space:normal;max-width:230px;text-align:left;
}
.guard svg{margin-top:1px}
.guard svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* Per-row save results — same shape as .guard, amber (conflict) or red (error) */
.rownote{
  font-size:11.5px;
  display:flex;align-items:flex-start;justify-content:flex-end;gap:6px;
  margin:5px 0 0 auto;white-space:normal;max-width:230px;text-align:left;
}
.rownote svg{width:13px;height:13px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.rownote.warn{color:var(--warn)}
.rownote.bad{color:var(--bad)}

/* Loading skeleton — subtle pulsing bars inside table area */
.skel{padding:6px 0}
.skel .skel-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.skel .skel-row:last-child{border-bottom:none}
.skel .b{height:12px;border-radius:6px;background:var(--line-soft);animation:skel-pulse 1.4s ease-in-out infinite}
.skel .b.sq{width:44px;height:44px;border-radius:8px;flex:none}
.skel .b.w1{width:22%}.skel .b.w2{width:34%}.skel .b.w3{width:14%}.skel .b.w4{width:10%;margin-left:auto}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.kpi.skel-kpi .k-value,.spend.skel-kpi .amount{color:var(--faint)}

/* Empty state */
.empty{
  padding:44px 24px;text-align:center;color:var(--muted);
}
.empty .big{font-weight:600;color:var(--ink);margin-bottom:6px;font-size:14.5px}
.empty p{font-size:13px;max-width:380px;margin:0 auto}

/* ── Users page ──────────────────────────── */
.user-row{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line-soft)}
.user-row:last-child{border-bottom:none}
.user-row .avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:13px;
  background:var(--line-soft);color:var(--muted);
}
.user-row.is-admin .avatar{background:var(--accent-tint);color:var(--accent-ink)}
.user-row.inactive{opacity:.55}
.user-row .u-name{font-weight:600;font-size:14px}
.user-row .u-mail{font-size:12px;color:var(--muted)}
.user-row .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.perm-note{padding:14px 18px;background:#FAFBFC;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:8px;
  padding:8px 15px;font-weight:600;font-size:13px;
}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink);color:#fff}
.btn:disabled{
  background:var(--line-soft);border-color:var(--line);color:var(--faint);
  cursor:not-allowed;
}
.card-head .inline-save{margin-left:12px;padding:6px 14px;font-size:12.5px;flex:none}
.user-row .remove{
  font-size:12px;color:var(--faint);padding:5px 9px;border-radius:6px;
}
.user-row .remove:hover{color:var(--bad);background:var(--bad-bg)}

/* ── Invite modal ────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(20,24,29,.45);
  display:none;place-items:center;padding:18px;z-index:80;
}
.overlay.open{display:grid}
.modal{
  background:var(--paper);border-radius:14px;width:100%;max-width:470px;
  box-shadow:0 24px 60px rgba(20,24,29,.3);
  max-height:calc(100vh - 36px);overflow-y:auto;
}
.modal .m-head{
  display:flex;align-items:center;padding:17px 22px;
  border-bottom:1px solid var(--line);
}
.modal .m-head h3{font-size:15px;font-weight:700}
.modal .m-close{margin-left:auto;color:var(--muted);font-size:18px;line-height:1;padding:4px 8px;border-radius:6px}
.modal .m-close:hover{background:var(--line-soft);color:var(--ink)}
.modal .m-body{padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.field input[type="text"],.field input[type="email"],.field input[type="password"]{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;background:var(--paper);
}
.field input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-tint)}

/* ── password show/hide + remember me ─────── */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px !important}
.eye{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:32px;height:32px;border-radius:7px;
  display:grid;place-items:center;color:var(--faint);
  background:no-repeat center/18px 18px;
}
.eye:hover{background-color:var(--line-soft);color:var(--ink)}
.eye svg{
  width:18px;height:18px;display:block;
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.eye .strike{display:none}
.eye[aria-pressed="true"]{color:var(--accent-ink)}
.eye[aria-pressed="true"] .strike{display:block}
.remember{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--muted);cursor:pointer;
  margin:2px 0 14px;user-select:none;
}
.remember input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.remember:hover{color:var(--ink)}
.field .field-hint{font-size:11.5px;color:var(--faint);margin-top:5px}
.choice-group{display:flex;flex-direction:column;gap:8px}
.choice{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;cursor:pointer;
}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice input{accent-color:var(--accent);margin-top:2px}
.choice b{font-size:13px;display:block}
.choice span{font-size:12px;color:var(--muted)}
.checks{display:flex;gap:8px;flex-wrap:wrap}
.check{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;
  font-size:12.5px;cursor:pointer;
}
.check:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.check input{accent-color:var(--accent)}
.modal .m-foot{
  padding:15px 22px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:10px;
}
#staffPages{display:none}
#staffPages.visible{display:block}

/* Temp-password reveal (shown once after an invite) */
.temp-pass{
  font-family:var(--mono);font-feature-settings:"tnum";
  font-size:16px;letter-spacing:.06em;text-align:center;
  background:var(--line-soft);border:1px dashed var(--line);border-radius:8px;
  padding:13px 14px;user-select:all;word-break:break-all;
}
.temp-note{font-size:12.5px;color:var(--muted);line-height:1.55}
.temp-note strong{color:var(--ink)}

/* ── Save bar ────────────────────────────── */
.savebar{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);
  display:flex;align-items:center;gap:16px;
  background:var(--ink);color:#fff;
  padding:12px 14px 12px 20px;border-radius:12px;
  box-shadow:0 10px 30px rgba(20,24,29,.25);
  transition:transform .25s ease;
  z-index:50;
}
.savebar.show{transform:translate(-50%,0)}
.savebar .count{font-family:var(--mono);font-size:13px}
.savebar .discard{color:rgba(255,255,255,.65);font-size:13px}
.savebar .discard:hover{color:#fff}
.savebar .save{
  background:var(--accent);color:#fff;font-weight:600;font-size:13px;
  padding:9px 18px;border-radius:8px;
}
.savebar .save:hover{filter:brightness(1.1)}
.savebar .save:disabled,.savebar .discard:disabled{opacity:.55;cursor:wait;filter:none}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);
  background:var(--ok);color:#fff;font-weight:500;font-size:13.5px;
  padding:12px 22px;border-radius:10px;
  box-shadow:0 10px 30px rgba(23,116,63,.3);
  transition:transform .25s ease;z-index:60;
  display:flex;align-items:center;gap:10px;
}
.toast.show{transform:translate(-50%,0)}
.toast.bad{background:var(--bad);box-shadow:0 10px 30px rgba(179,38,30,.3)}
.toast svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── Site footer ─────────────────────────── */
.site-foot{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;
}
.site-foot .brand{display:flex;flex-direction:column;gap:4px;min-width:220px}
.site-foot .brand b{
  font-weight:900;font-stretch:87%;font-size:14px;letter-spacing:.04em;
}
.site-foot .brand span{font-size:12px;color:var(--muted)}
.site-foot .about{flex:1;min-width:260px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:520px}
.site-foot .legal{
  width:100%;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--faint);
  display:flex;gap:18px;flex-wrap:wrap;
}

@media (prefers-reduced-motion:reduce){
  .savebar,.toast{transition:none}
  .skel .b{animation:none}
}
@media (max-width:960px){
  .login{grid-template-columns:1fr;grid-template-rows:34vh 1fr}
  .login-caption{display:none}
  .login-brand{top:22px;left:22px}
  .login-form{padding:28px 22px;align-items:start}
  .masthead{flex-wrap:wrap;height:auto;padding:14px 18px;gap:14px}
  .masthead .right{margin-left:0;width:100%;justify-content:space-between}
  .frame{grid-template-columns:1fr}
  .rail{
    flex-direction:row;overflow-x:auto;border-right:none;
    border-bottom:1px solid var(--line);padding:10px 14px;gap:6px;
  }
  .rail .nav-title,.rail .foot{display:none}
  .nav-btn{width:auto;white-space:nowrap}
  main{padding:22px 18px 130px}
  .kpis,.spend-row{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .kpis,.spend-row{grid-template-columns:1fr}
  .directory{width:100%}
  .plate{flex:1}
  .savebar{
    width:calc(100% - 24px);justify-content:space-between;
    padding:10px 12px 10px 16px;gap:10px;
  }
  .savebar .count,.savebar .save{white-space:nowrap}
}