/* GANAF Desk app shell + components.
   Layout: deep-indigo sidebar (Midnight in dark theme) carrying a tonal network, a slim top bar, and a
   Slate-50 work area of white cards. Headlines borrow the landing page's bold, tight setting. */
:root {
  --indigo: #706BE8;
  --indigo-600: #5953C3;
  --orange: #FF6600;
  --midnight: #25225C; /* deep indigo in light theme, true Midnight in dark */

  --bg: #F7F7FA;
  --bg-subtle: #F7F7FA;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EEEFF4;
  --surface-hover: #F7F7FA;
  --text: #282842;
  --text-strong: #1C1B28;
  --text-muted: #60617D;
  --text-faint: #7C7D96;
  --text-brand: #5953C3;
  --text-accent: #BA4A00;
  --border: #E2E3EA;
  --border-subtle: #EEEFF4;
  --border-strong: #C9CAD6;
  --primary: #5953C3;
  --primary-hover: #4743AB;
  --primary-subtle: #F0F1FF;
  --primary-subtle-hover: #E2E1FA;
  --accent-subtle: #FFE9DC;
  --link-live: #706BE8;
  --chart-fill: rgba(112,107,232,.14);
  --chart-bar: #706BE8;
  --chart-bar-soft: #C9C7F6;
  --success: #12A150; --success-text: #0B7A3B; --success-subtle: #E8F6EE;
  --warning: #F5A524; --warning-text: #9A5B00; --warning-subtle: #FEF5E6;
  --danger: #D92D20;  --danger-text: #C21F24;  --danger-subtle: #FDECEC;
  --info-text: #5953C3; --info-subtle: #F0F1FF;
  --overlay: rgba(28,27,40,.56);
  --shadow-sm: 0 1px 2px rgba(40,40,66,.06);
  --shadow-md: 0 8px 24px rgba(40,40,66,.08), 0 2px 6px rgba(40,40,66,.04);
  --shadow-lg: 0 24px 48px rgba(89,83,195,.14), 0 6px 16px rgba(40,40,66,.06);
  --focus-color: #706BE8;

  /* the sidebar is deep indigo in light theme and Midnight in dark, so the themes read apart */
  --nav-bg: #25225C;
  --nav-card: #322E78;
  --nav-text: #D6D5F2;
  --nav-muted: #A3A1D4;
  --nav-hover: #322E78;
  --nav-pattern: #2C2970;
  --nav-line: #36328A;
  --nav-line-strong: #423E96;
  --nav-dot: #5A56A8;
  --nav-btn-hover: #3F3B8C;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --side-w: 264px;
  --top-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1C1B28; --bg-subtle: #22212F; --surface: #232233; --surface-raised: #2F2F4C;
    --surface-sunken: #171622; --surface-hover: #2A2A40;
    --text: #EEEFF4; --text-strong: #FFFFFF; --text-muted: #A3A4B7; --text-faint: #8A8BA3;
    --text-brand: #ACA9F2; --text-accent: #FF9A57;
    --border: #34344D; --border-subtle: #2C2C44; --border-strong: #4E4F68;
    --primary-hover: #706BE8; --primary-subtle: #2E2C55; --primary-subtle-hover: #37356A;
    --accent-subtle: #3A2618;
    --link-live: #8D89ED; --chart-fill: rgba(141,137,237,.18); --chart-bar: #8D89ED; --chart-bar-soft: #47457A;
    --success-text: #4ADE80; --success-subtle: #15302A;
    --warning-text: #FBBF24; --warning-subtle: #36291A;
    --danger-text: #FF8A8A;  --danger-subtle: #3A1E26;
    --info-text: #ACA9F2;    --info-subtle: #2E2C55;
    --overlay: rgba(8,8,14,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,.3);
    --shadow-lg: 0 24px 48px rgba(0,0,0,.4);
    --focus-color: #8D89ED;
    --midnight: #1C1B28;
    --nav-bg: #15141F; --nav-card: #232233; --nav-hover: #232233; --nav-pattern: #1E1D2B;
    --nav-text: #C9CAD6; --nav-muted: #8A8BA3;
    --nav-line: #2C2C44; --nav-line-strong: #3A3A55; --nav-dot: #4E4F68; --nav-btn-hover: #34344D;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1C1B28; --bg-subtle: #22212F; --surface: #232233; --surface-raised: #2F2F4C;
  --surface-sunken: #171622; --surface-hover: #2A2A40;
  --text: #EEEFF4; --text-strong: #FFFFFF; --text-muted: #A3A4B7; --text-faint: #8A8BA3;
  --text-brand: #ACA9F2; --text-accent: #FF9A57;
  --border: #34344D; --border-subtle: #2C2C44; --border-strong: #4E4F68;
  --primary-hover: #706BE8; --primary-subtle: #2E2C55; --primary-subtle-hover: #37356A;
  --accent-subtle: #3A2618;
  --link-live: #8D89ED; --chart-fill: rgba(141,137,237,.18); --chart-bar: #8D89ED; --chart-bar-soft: #47457A;
  --success-text: #4ADE80; --success-subtle: #15302A;
  --warning-text: #FBBF24; --warning-subtle: #36291A;
  --danger-text: #FF8A8A;  --danger-subtle: #3A1E26;
  --info-text: #ACA9F2;    --info-subtle: #2E2C55;
  --overlay: rgba(8,8,14,.66);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 48px rgba(0,0,0,.4);
  --focus-color: #8D89ED;
  --midnight: #1C1B28;
  --nav-bg: #15141F; --nav-card: #232233; --nav-hover: #232233; --nav-pattern: #1E1D2B;
  --nav-text: #C9CAD6; --nav-muted: #8A8BA3;
  --nav-line: #2C2C44; --nav-line-strong: #3A3A55; --nav-dot: #4E4F68; --nav-btn-hover: #34344D;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 14px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { margin: 0; color: var(--text-strong); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -.01em; }
.muted { color: var(--text-muted); }
.strong { color: var(--text-strong); font-weight: 600; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
svg.i.sm { width: 16px; height: 16px; }
svg.i.lg { width: 22px; height: 22px; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--nav-bg); color: var(--nav-text);
  display: flex; flex-direction: column; z-index: 30;
  padding-left: env(safe-area-inset-left, 0px);
}
.sidebar .net { position: absolute; left: -90px; bottom: -40px; width: 460px; height: auto; color: var(--nav-pattern); pointer-events: none; }
.side-brand { position: relative; display: flex; align-items: center; gap: 12px; padding: 20px 22px 18px; color: #FFFFFF; text-decoration: none; }
.side-brand:hover { text-decoration: none; }
.side-brand img { height: 26px; width: auto; display: block; }
.side-brand .div { width: 1px; height: 20px; background: var(--nav-dot); }
.side-brand b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.side-scroll { position: relative; flex: 1; overflow-y: auto; padding: 6px 14px 16px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--nav-line-strong) transparent; }
.side-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-muted); padding: 18px 10px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--nav-text); text-decoration: none; cursor: pointer;
  background: none; border: 0; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--nav-hover); color: #FFFFFF; text-decoration: none; }
.nav-item.on { background: var(--indigo-600); color: #FFFFFF; }
.nav-item .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--midnight); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.nav-item .soon { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-muted); border: 1px solid var(--nav-line-strong); border-radius: 999px; padding: 1px 7px; }
.nav-item.dim { color: var(--nav-muted); }
.nav-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.nav-sub a {
  position: relative; display: flex; align-items: center; height: 34px; padding: 0 10px 0 40px; border-radius: 8px;
  font-size: 13.5px; color: var(--nav-muted); text-decoration: none;
}
.nav-sub a::before { content: ""; position: absolute; left: 19px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--nav-dot); }
.nav-sub a:hover { color: #FFFFFF; background: var(--nav-hover); text-decoration: none; }
.nav-sub a.on { color: #FFFFFF; font-weight: 500; }
.nav-sub a.on::before { background: var(--orange); box-shadow: 0 0 0 3px rgba(255,102,0,.18); }
.nav-sub a .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--midnight); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.side-foot { position: relative; padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--nav-line); }
.me { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--nav-card); }
.me .who { min-width: 0; display: grid; }
.me .who b { color: #FFFFFF; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who span { font-size: 12px; color: var(--nav-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me a { margin-left: auto; color: var(--nav-muted); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.me a:hover { color: #FFFFFF; background: var(--nav-btn-hover); }
.me .me-btn + a, .me .me-btn { width: 28px; height: 28px; }
.me .me-btn { margin-left: auto; color: var(--nav-muted); display: grid; place-items: center; border-radius: 8px; background: none; border: 0; cursor: pointer; flex: none; }
.me .me-btn + a { margin-left: 0; }
.me .me-btn:hover { color: #FFFFFF; background: var(--nav-btn-hover); }
.as-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--accent-subtle); color: var(--text-accent); font: 600 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.as-chip:hover { filter: brightness(.97); }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; background: var(--primary-subtle); color: var(--text-brand); white-space: nowrap; }
.role-chip svg.i { width: 12px; height: 12px; }
.role-chip.admin { background: var(--accent-subtle); color: var(--text-accent); }
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background 120ms; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform 160ms cubic-bezier(.2,0,0,1); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .5; }

.main { min-width: 0; display: flex; flex-direction: column; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--surface); }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--top-h);
  display: flex; align-items: center; gap: 14px;
  padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.menu-btn { margin-left: -8px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text-strong); }
.crumbs b { color: var(--text-strong); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: var(--border-strong); }
.search {
  margin-left: auto; display: flex; align-items: center; gap: 10px; height: 38px; width: min(340px, 34vw); padding: 0 12px;
  border-radius: 10px; background: var(--surface-sunken); border: 1px solid transparent; color: var(--text-muted);
}
.search:focus-within { border-color: var(--indigo); background: var(--surface); }
.search input { all: unset; flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); }
.search input::placeholder { color: var(--text-faint); }
.search kbd { font: 500 11px var(--font-mono); border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 5px; color: var(--text-muted); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: none; border: 0; color: var(--text-muted); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-strong); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--surface); }
.sample-chip { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

.page { padding-block: 28px 64px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.page.narrow { max-width: 1040px; width: 100%; }

.scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 25; }

/* Collapsed sidebar on wide screens (toggled by the menu button) */
@media (min-width: 1081px) {
  .nav-collapsed .app { grid-template-columns: 0 minmax(0, 1fr); }
  .nav-collapsed .sidebar { visibility: hidden; }
}
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  .app { transition: grid-template-columns 200ms cubic-bezier(.2,0,0,1); }
}

@media (max-width: 1080px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); transition: transform 220ms cubic-bezier(.2,0,0,1); padding-top: env(safe-area-inset-top, 0px); }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .sample-chip { display: none; }
}
@media (max-width: 720px) {
  .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); gap: 8px; }
  .search { width: 38px; padding: 0; justify-content: center; background: none; }
  .search input, .search kbd { display: none; }
  .page { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 20px 48px; gap: 18px; }
  .top-actions [data-theme-switch] { display: none; }
}

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.page-head .t { display: grid; gap: 6px; min-width: 0; }
.page-head h1 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; }
.page-head p { color: var(--text-muted); font-size: 14.5px; max-width: 62ch; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-brand); }
.greeting h1 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.04em; }
.greeting h1 .soft { color: var(--text-muted); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent;
  font: 600 14px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms cubic-bezier(.2,0,0,1), border-color 120ms, color 120ms;
}
.btn:hover { text-decoration: none; }
.btn svg.i { width: 18px; height: 18px; }
.btn-primary { background: var(--primary); color: #FFFFFF; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-soft { background: var(--primary-subtle); color: var(--text-brand); }
.btn-soft:hover { background: var(--primary-subtle-hover); }
.btn-ghost { background: none; color: var(--text-brand); }
.btn-ghost:hover { background: var(--primary-subtle); }
.btn-danger { background: var(--danger); color: #FFFFFF; }
.btn-danger-outline { background: var(--surface); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn-danger-outline:hover { background: var(--danger-subtle); }
.btn-success { background: var(--success-text); color: #FFFFFF; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; border-radius: 8px; }
.btn-sm svg.i { width: 16px; height: 16px; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 15px; }
.btn[disabled] { background: var(--surface-sunken); color: var(--text-faint); border-color: transparent; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; flex-wrap: wrap; }
.card-head h2, .card-head h3 { font-size: 15px; letter-spacing: -.01em; }
.card-head .sub { font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
.card-head .tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { padding: 16px 20px 20px; }
.card-foot { padding: 12px 20px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.card.flush .card-body { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }
.grid-detail { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1180px) { .grid-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) { .grid-main, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* KPI row */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: grid; gap: 6px; align-content: start; position: relative; text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--border-strong); text-decoration: none; }
.kpi .lbl { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi .lbl svg { color: var(--text-brand); }
.kpi .val { font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .val small { font-size: 15px; font-weight: 600; color: var(--text-muted); letter-spacing: -.01em; }
.kpi .meta { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kpi.focus { background: var(--midnight); border-color: var(--midnight); }
.kpi.focus .lbl, .kpi.focus .meta { color: #A3A4B7; }
.kpi.focus .lbl svg { color: var(--orange); }
.kpi.focus .val { color: #FFFFFF; }
.kpi.focus .val small { color: #A3A4B7; }
.kpi.focus .go { color: #FFFFFF; font-weight: 600; }
:root[data-theme="dark"] .kpi.focus { background: var(--surface-raised); border-color: var(--border-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kpi.focus { background: var(--surface-raised); border-color: var(--border-strong); } }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; padding: 1px 7px; border-radius: 999px; }
.delta.up { color: var(--danger-text); background: var(--danger-subtle); }
.delta.down { color: var(--success-text); background: var(--success-subtle); }
.delta.flat { color: var(--text-muted); background: var(--surface-sunken); }
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .kpis { grid-template-columns: minmax(0, 1fr); } .kpi .val { font-size: 24px; } }

/* ---------- Badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge svg.i { width: 13px; height: 13px; }
.badge.success { background: var(--success-subtle); color: var(--success-text); }
.badge.warning { background: var(--warning-subtle); color: var(--warning-text); }
.badge.danger { background: var(--danger-subtle); color: var(--danger-text); }
.badge.info { background: var(--info-subtle); color: var(--info-text); }
.badge.neutral { background: var(--surface-sunken); color: var(--text-muted); }
.badge.accent { background: var(--accent-subtle); color: var(--text-accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--surface-sunken); color: var(--text); font-size: 12px; white-space: nowrap; }
.chip svg.i { width: 14px; height: 14px; color: var(--text-muted); }

/* filter chips */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer;
}
.fchip:hover { border-color: var(--border-strong); }
.fchip[aria-pressed="true"] { background: var(--midnight); border-color: var(--midnight); color: #FFFFFF; }
:root[data-theme="dark"] .fchip[aria-pressed="true"] { background: #FFFFFF; border-color: #FFFFFF; color: var(--midnight); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fchip[aria-pressed="true"] { background: #FFFFFF; border-color: #FFFFFF; color: var(--midnight); } }
.fchip .n { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fchip[aria-pressed="true"] .n { color: inherit; opacity: .7; }

/* segmented */
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-sunken); gap: 2px; }
.seg button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.seg button:focus-visible { box-shadow: 0 0 0 2px var(--focus-color); }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--text-strong); }
.tabs button[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--primary); }
.tabs button:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-color); border-radius: 6px; }
.tabs .n { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-subtle); height: 40px; padding: 0 14px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.t td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr.link { cursor: pointer; }
.t tbody tr.link:hover td { background: var(--surface-hover); }
.t th.r, .t td.r { text-align: right; font-variant-numeric: tabular-nums; }
.t td .ttl { color: var(--text-strong); font-weight: 500; }
.t td .ttl a { color: inherit; }
.t td .sub { font-size: 12px; color: var(--text-muted); }
.t tfoot td { font-weight: 600; color: var(--text-strong); border-top: 1px solid var(--border-strong); border-bottom: 0; background: var(--bg-subtle); }
.t .cat { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.t th:first-child, .t td:first-child { padding-left: 20px; }
.t th:last-child, .t td:last-child { padding-right: 20px; }
.empty { padding: 48px 20px; text-align: center; color: var(--text-muted); display: grid; gap: 10px; justify-items: center; }
.empty .node { width: 52px; height: 52px; border-radius: 50%; background: var(--primary-subtle); color: var(--text-brand); display: grid; place-items: center; }
.toolbar { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.toolbar .field-search { flex: 1 1 240px; max-width: 360px; }
.toolbar .spacer { flex: 1; }
.pager { display: flex; align-items: center; gap: 6px; }
.pager button { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: var(--text); }
.pager button:hover { background: var(--surface-sunken); }
.pager button[aria-current="page"] { background: var(--primary); color: #FFFFFF; }

/* ---------- Avatars ---------- */
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-subtle); color: var(--text-brand); display: inline-flex !important; align-items: center; justify-content: center; text-align: center; line-height: 1; font-size: 12px; font-weight: 600; flex: none; letter-spacing: 0; padding: 0; }
.av.sm { width: 24px; height: 24px; font-size: 10px; }
.av.lg { width: 44px; height: 44px; font-size: 15px; }
.av.xl { width: 64px; height: 64px; font-size: 20px; border-radius: 18px; }
.av.dark { background: #34344D; color: #FFFFFF; }
.av.inst { border-radius: 12px; background: var(--midnight); color: #FFFFFF; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .nm { display: grid; min-width: 0; line-height: 1.35; }
.person .nm b { font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .nm span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 28px; }
.fgroup { display: grid; gap: 16px; }
.fgroup > h3 { font-size: 15px; letter-spacing: -.01em; }
.fgroup > p.help { margin-top: -10px; }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.frow.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .frow, .frow.three { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label, .field .label { font-size: 13px; font-weight: 500; color: var(--text-strong); }
.field label .opt { font-weight: 400; color: var(--text-muted); }
.help { font-size: 12.5px; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 14px;
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2360617D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 22%, transparent); }
.input[type="date"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; line-height: 38px; min-height: 40px; text-align: left; }
.input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.date-range { display: grid; gap: 6px; }
.date-range .pair { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 10px; align-items: end; }
.date-range .pair .to { height: 40px; display: grid; place-items: center; color: var(--text-faint); }
@media (max-width: 460px) { .date-range .pair { grid-template-columns: minmax(0, 1fr); } .date-range .pair .to { display: none; } }
.input-money { position: relative; display: block; }
.input-money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 500; }
.input-money .input { padding-left: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.field-search { position: relative; }
.field-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.field-search .input { padding-left: 36px; height: 36px; }
/* Searchable select (combobox) */
.combo { position: relative; }
.combo .input { padding-right: 36px; cursor: text; text-overflow: ellipsis; }
.combo .chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.combo .lead { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-brand); pointer-events: none; display: grid; }
.combo.has-lead .input { padding-left: 38px; }
.combo-list { position: absolute; z-index: 35; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.combo-list.up { top: auto; bottom: calc(100% + 6px); }
.combo-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text); min-width: 0; }
.combo-list li .grow { display: grid; min-width: 0; flex: 1; }
.combo-list li .grow b { font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-list li .grow span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-list li .cat-ico { width: 28px; height: 28px; border-radius: 8px; }
.combo-list li .cat-ico svg { width: 15px; height: 15px; }
.combo-list li .tag { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.combo-list li[aria-selected="true"] .ok { color: var(--text-brand); }
.combo-list li .ok { color: transparent; flex: none; }
.combo-list li.active { background: var(--primary-subtle); }
.combo-list li.add { color: var(--text-brand); font-weight: 600; border-top: 1px solid var(--border-subtle); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 10px; }
.combo-list li.add .cat-ico { background: var(--primary-subtle); }
.combo-list li.none { color: var(--text-muted); cursor: default; }
.combo-list .grp { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; cursor: default; }

/* Picked account / vendor card */
.pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle); min-width: 0; }
.pick .grow { display: grid; min-width: 0; flex: 1; gap: 1px; }
.pick .grow b { font-weight: 600; color: var(--text-strong); font-size: 13.5px; }
.pick .grow span { font-size: 12.5px; color: var(--text-muted); }
.acct-list { display: grid; gap: 10px; }
.acct { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.acct:hover { border-color: var(--border-strong); }
.acct input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; flex: none; }
.acct .grow { display: grid; min-width: 0; flex: 1; gap: 1px; }
.acct .grow b { font-weight: 600; color: var(--text-strong); font-size: 13.5px; }
.acct .grow span { font-size: 12.5px; color: var(--text-muted); }
.acct:has(input:checked) { border-color: var(--primary); background: var(--primary-subtle); box-shadow: inset 0 0 0 1px var(--primary); }
.acct.new { border-style: dashed; width: 100%; font: inherit; color: inherit; text-align: left; }
.subform { display: grid; gap: 14px; padding: 16px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); }
.admin-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-accent); background: var(--accent-subtle); border-radius: 999px; padding: 2px 8px; }
.admin-tag svg.i { width: 12px; height: 12px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-muted); align-self: flex-start; }
.back-link:hover { color: var(--text-strong); text-decoration: none; }

.dropzone { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 22px; display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 13.5px; background: var(--bg-subtle); cursor: pointer; }
.dropzone:hover { background: var(--primary-subtle); border-color: var(--indigo); }
.dropzone .node { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-brand); flex: none; }
.dropzone b { color: var(--text-strong); font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); margin: 1px 0 0; flex: none; }

/* Option cards (request type, client category) */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.option { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.option:hover { border-color: var(--border-strong); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .node { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-brand); }
.option b { font-size: 14px; color: var(--text-strong); font-weight: 600; }
.option span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.option .tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: transparent; }
.option:has(input:checked) { border: 2px solid var(--primary); padding: 15px; background: var(--primary-subtle); }
.option:has(input:checked) .node { background: var(--primary); color: #FFFFFF; }
.option:has(input:checked) .tick { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.option:has(input:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 2px; }

/* Stepper (network motif) */
.stepper { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.stepper li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.stepper li + li::before { content: ""; width: 40px; height: 2px; background: var(--border-strong); margin: 0 12px; border-radius: 2px; }
.stepper .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-strong); font-size: 12px; font-weight: 600; background: var(--surface); }
.stepper li.done { color: var(--text); }
.stepper li.done .n { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.stepper li.done + li::before, .stepper li.current::before { background: var(--primary); }
.stepper li.current { color: var(--text-strong); }
.stepper li.current .n { border-color: var(--primary); background: var(--primary-subtle); color: var(--text-brand); }

/* ---------- Approval chain (connected nodes) ---------- */
.chain { list-style: none; margin: 0; padding: 0; display: grid; }
.chain li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.chain li:last-child { padding-bottom: 0; }
.chain li::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
.chain li:last-child::before { display: none; }
.chain li.done::before { background: var(--link-live); }
.chain .node { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); border: 2px solid var(--border); position: relative; z-index: 1; }
.chain li.done .node { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.chain li.now .node { background: var(--surface); border-color: var(--link-live); color: var(--text-brand); box-shadow: 0 0 0 5px var(--primary-subtle); }
.chain li.stop .node { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.chain .node svg { width: 15px; height: 15px; }
.chain .body { display: grid; gap: 2px; padding-top: 4px; min-width: 0; }
.chain .body b { font-weight: 600; color: var(--text-strong); font-size: 13.5px; }
.chain .body span { font-size: 12.5px; color: var(--text-muted); }
.chain .body q { display: block; quotes: none; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); font-size: 13px; color: var(--text); }

/* key/value list */
.kv { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-strong); min-width: 0; overflow-wrap: anywhere; }
.kv.wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 24px; }
.kv.wide > div { display: grid; gap: 3px; }

/* list rows */
.rows { display: grid; }
.rows > * { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); color: inherit; text-decoration: none; min-width: 0; }
.rows > *:first-child { border-top: 0; }
a.row:hover, .rows > a:hover { background: var(--surface-hover); text-decoration: none; }
.rows .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rows .grow b { font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .grow span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .amt { font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows .end { display: grid; justify-items: end; gap: 4px; flex: none; }

.cat-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-brand); flex: none; }
.cat-ico svg { width: 17px; height: 17px; }

/* ---------- Alerts / notes ---------- */
.alert { display: flex; gap: 12px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; align-items: flex-start; }
.alert svg.i { margin-top: 1px; }
.alert b { color: var(--text-strong); font-weight: 600; }
.alert.info { background: var(--info-subtle); color: var(--text); }
.alert.info svg.i { color: var(--info-text); }
.alert.warning { background: var(--warning-subtle); color: var(--text); }
.alert.warning svg.i { color: var(--warning-text); }
.alert.success { background: var(--success-subtle); color: var(--text); }
.alert.success svg.i { color: var(--success-text); }
.alert .act { margin-left: auto; white-space: nowrap; font-weight: 600; }

/* ---------- Progress ---------- */
.bar { height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; display: flex; gap: 2px; }
.bar i { display: block; height: 100%; background: var(--chart-bar); border-radius: 999px; }
.bar i.paid { background: var(--success); }
.bar i.part { background: var(--warning); }

/* ---------- Charts ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { font: 400 11px var(--font-sans); fill: var(--text-muted); }
.chart .axis.end { text-anchor: end; }
.chart .axis.mid { text-anchor: middle; }
.chart .bar-m { fill: var(--chart-bar-soft); }
.chart .bar-m.on { fill: var(--chart-bar); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:hover + .bar-m, .chart g.col:hover .bar-m { fill: var(--chart-bar); }
.chart .lbl-v { font: 600 11.5px var(--font-sans); fill: var(--text-strong); text-anchor: middle; }
.hbars { display: grid; gap: 12px; }
.hbar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 96px; gap: 12px; align-items: center; font-size: 13px; }
.hbar .nm { display: flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .trk { height: 10px; border-radius: 0 4px 4px 0; background: var(--surface-sunken); }
.hbar .trk i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--chart-bar); }
.hbar .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); }
@media (max-width: 520px) { .hbar { grid-template-columns: minmax(0, 1fr) 90px; } .hbar .trk { grid-column: 1 / -1; grid-row: 2; } }
/* number band: several figures in one card */
.statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.stat { all: unset; box-sizing: border-box; display: grid; gap: 4px; align-content: start; padding: 16px 20px; background: var(--surface); color: inherit; min-width: 0; }
a.stat, button.stat { cursor: pointer; }
a.stat:hover, button.stat:hover { background: var(--surface-hover); text-decoration: none; }
button.stat:focus-visible, a.stat:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-color); }
button.stat[aria-pressed="true"] { background: var(--primary-subtle); }
.stat .k { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .k svg.i { width: 15px; height: 15px; color: var(--text-brand); flex: none; }
.stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .v small { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: 5px; }
.stat .s { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.stat.lead { background: var(--midnight); }
.stat.lead .k, .stat.lead .s, .stat.lead .v small { color: #A3A4B7; }
.stat.lead .k svg.i { color: var(--orange); }
.stat.lead .v { color: #FFFFFF; }
:root[data-theme="dark"] .stat.lead { background: var(--surface-raised); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stat.lead { background: var(--surface-raised); } }
a.hbar, button.hbar { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 96px; gap: 12px; align-items: center; font-size: 13px; cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; }
a.hbar:hover, button.hbar:hover { background: var(--bg-subtle); text-decoration: none; }
button.hbar:focus-visible, a.hbar:focus-visible { box-shadow: 0 0 0 2px var(--focus-color); }
button.hbar[aria-pressed="true"] { background: var(--primary-subtle); }
button.hbar[aria-pressed="true"] .nm { color: var(--text-brand); font-weight: 600; }
@media (max-width: 520px) { a.hbar, button.hbar { grid-template-columns: minmax(0, 1fr) 90px; } }
.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--midnight); color: #FFFFFF; font-size: 12px; padding: 8px 10px; border-radius: 8px; box-shadow: var(--shadow-md); line-height: 1.4; max-width: 240px; }
.tip b { display: block; font-weight: 600; }
.tip span { color: #A3A4B7; }

/* ---------- Drawer & modal ---------- */
.drawer { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 18px; letter-spacing: -.015em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: grid; gap: 18px; align-content: start; }
.drawer-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.modal-wrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: var(--overlay); }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); }
.modal-head { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head h2 { font-size: 18px; letter-spacing: -.015em; }
.modal-body { padding: 16px 24px; display: grid; gap: 16px; }
.modal-foot { padding: 16px 24px 20px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toasts { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 70; display: grid; gap: 10px; }
.toast { display: flex; gap: 12px; align-items: flex-start; width: min(380px, calc(100vw - 40px)); padding: 14px 16px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 13.5px; }
.toast svg.i { color: var(--success-text); margin-top: 1px; }
.toast b { display: block; color: var(--text-strong); font-weight: 600; }
.toast span { color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 220ms cubic-bezier(0,0,0,1); }
  @keyframes toast-in { from { transform: translateY(8px); } to { transform: none; } }
}

/* ---------- Misc ---------- */
.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-title h2 { font-size: 17px; letter-spacing: -.015em; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.total-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; color: var(--text-muted); }
.total-line b { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 600; }
.total-line.big { font-size: 15px; color: var(--text-strong); font-weight: 600; padding-top: 12px; border-top: 1px solid var(--border); }
.total-line.big b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.file .ext { width: 36px; height: 40px; border-radius: 8px; display: grid; place-items: center; font: 700 10px var(--font-sans); letter-spacing: .04em; background: var(--surface-sunken); color: var(--text-muted); flex: none; }
.file .ext.pdf { background: var(--danger-subtle); color: var(--danger-text); }
.file .ext.img { background: var(--info-subtle); color: var(--info-text); }
.file .ext.doc { background: var(--primary-subtle); color: var(--text-brand); }
.file .meta { display: grid; min-width: 0; flex: 1; }
.file .meta b { font-weight: 500; color: var(--text-strong); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file .meta span { font-size: 12px; color: var(--text-muted); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--chart-bar); }
.legend i.soft { background: var(--chart-bar-soft); }
.legend i.paid { background: var(--success); }
.legend i.part { background: var(--warning); }
.legend i.out { background: var(--surface-sunken); border: 1px solid var(--border-strong); }

/* Email preview */
.mail { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.mail-meta { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 10px; padding: 12px 16px; font-size: 12.5px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.mail-meta dt { color: var(--text-muted); margin: 0; }
.mail-meta dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.mail-body { padding: 16px; font-size: 13.5px; display: grid; gap: 10px; }
.mail-body .btn { justify-self: start; }

.coming { display: grid; place-items: center; text-align: center; padding: 72px 20px; position: relative; overflow: hidden; }
.coming .net { position: absolute; inset: auto -10% -30% auto; width: 620px; color: var(--surface-sunken); pointer-events: none; }
.coming > div { position: relative; display: grid; gap: 14px; justify-items: center; max-width: 520px; }
.coming .node-lg { width: 72px; height: 72px; border-radius: 50%; background: var(--indigo); color: #FFFFFF; display: grid; place-items: center; box-shadow: 0 0 0 10px var(--primary-subtle); }
.coming .node-lg svg { width: 32px; height: 32px; }
.coming h1 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.035em; font-weight: 700; }
.coming p { color: var(--text-muted); font-size: 15px; }
.coming ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

@media print {
  .sidebar, .topbar, .no-print, .toasts { display: none !important; }
  .app { display: block; }
  .page { padding: 0; }
  .card { break-inside: avoid; }
}

/* email notification note (drawers) */
.notify-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--info-subtle); font-size: 12.5px; color: var(--text); }
.notify-note svg.i { color: var(--info-text); width: 16px; height: 16px; flex: none; margin-top: 1px; }
.notify-note b { font-weight: 600; color: var(--text-strong); }
/* receipt file chip */
.rcpt { display: inline-flex; align-items: center; gap: 5px; max-width: 190px; height: 24px; padding: 0 8px; margin: 2px 4px 2px 0; border-radius: 6px; background: var(--surface-sunken); font-size: 12px; color: var(--text); vertical-align: middle; }
.rcpt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcpt svg.i { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
/* token input (participants) */
.tok { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: text; }
.tok:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 22%, transparent); }
.tok input { flex: 1; min-width: 160px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text-strong); padding: 4px; }
.tok .chip { padding-right: 2px; }
.tok .chip button { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: var(--text-muted); }
.tok .chip button:hover { background: var(--border); color: var(--text-strong); }
.tok .chip button svg.i { width: 12px; height: 12px; }
/* PR payment drawer */
.bal-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); margin-top: -6px; }
.bal-now > div { background: var(--bg-subtle); padding: 10px 12px; display: grid; gap: 2px; }
.bal-now small { font-size: 11.5px; color: var(--text-muted); }
.bal-now b { font-size: 14.5px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bal-now .bl b { color: var(--text-accent); }
.bal-now .ah b { color: var(--info-text); }
.bal-now .help { grid-column: 1 / -1; background: var(--surface); padding: 8px 12px; }
.adv-box { display: grid; gap: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--info-text); background: var(--info-subtle); }
.adv-hd { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.adv-hd svg.i { color: var(--info-text); flex: none; margin-top: 1px; }
.adv-hd b { color: var(--text-strong); font-weight: 600; }
@media (max-width: 460px) { .bal-now { grid-template-columns: minmax(0, 1fr); } }
/* fee rows editor */
.fee-rows { display: grid; gap: 8px; }
.fee-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.2fr) 36px; gap: 8px; align-items: center; }
.fee-row.hd span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fee-row.ft { grid-template-columns: auto 1fr; }
.fee-row.ft .help { text-align: right; }
.fee-row .icon-btn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 520px) { .fee-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; } .fee-row > select { grid-column: 1 / -1; } .fee-row.hd { display: none; } .fee-row .input-money { grid-column: 2; } .fee-row > .input { grid-column: 1; grid-row: 2; } }
/* in-page breadcrumbs on inner pages */
.pcrumbs { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 18px max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px)); font-size: 13px; color: var(--text-muted); }
.pcrumbs .back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-strong); font-weight: 500; text-decoration: none; white-space: nowrap; }
.pcrumbs .back:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.pcrumbs .trail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pcrumbs .trail a { color: var(--text-muted); text-decoration: none; }
.pcrumbs .trail a:hover { color: var(--text-strong); text-decoration: underline; }
.pcrumbs .trail b { color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }
.pcrumbs .sep { color: var(--border-strong); }
body.has-pcrumbs .topbar .crumbs { visibility: hidden; }
body.has-pcrumbs .page { padding-top: 18px; }
@media (max-width: 720px) { .pcrumbs { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: 14px; } .pcrumbs .trail { display: none; } }
@media print { .pcrumbs { display: none !important; } }