/* VA Cards UI. Design tokens, shell and components ported from the PP Labs client portal
   (ppexch.com, inspired by Beautiful UI): neutral surfaces, indigo accent, hairline borders,
   Manrope, light/dark theme stored in this browser. Legacy class names are restyled at the end. */
@font-face { font-family: Manrope; src: url('fonts/manrope.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
:root {
  color-scheme: light;
  --paper: #f6f6f7; --sheet: #ffffff; --inset: #f2f3f5; --hover: #f5f5f7;
  --ink: #25262b; --muted: #62646e; --faint: #71737e;
  --rule: #e8e8ec; --rule-soft: #f0f0f3; --control-border: #dedee5;
  --blue: #5753de; --blue-hover: #4641c5; --blue-soft: #efeffc; --accent-ink: #ffffff;
  --green: #267961; --green-soft: #eaf5ef; --warning: #916117; --warning-soft: #fcf5e8;
  --danger: #b44346; --danger-soft: #fcedee; --focus: #9d99ed;
  --warning-line: #f0dfbd; --danger-line: #f3cfd1; --blue-line: #d9d8f7;
  --shadow: 0 1px 3px #18182908, 0 3px 9px #18182904;
  --card-a: #1d1e24; --card-b: #34353f; --card-glow: #5753de55;
  --font: Manrope, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #18191c; --sheet: #202125; --inset: #25262b; --hover: #292a30;
  --ink: #e9e9ee; --muted: #aaaab6; --faint: #9595a2;
  --rule: #323339; --rule-soft: #2a2b31; --control-border: #41424c;
  --blue: #ada8ff; --blue-hover: #c1bdff; --blue-soft: #302e48; --accent-ink: #1c1937;
  --green: #75ccaa; --green-soft: #24382f; --warning: #e8bd77; --warning-soft: #352e23;
  --danger: #ee9296; --danger-soft: #3b282d; --focus: #aaa4ff;
  --warning-line: #4a3c22; --danger-line: #55333a; --blue-line: #403d63;
  --shadow: 0 1px 3px #00000020;
  --card-a: #2a2b33; --card-b: #3c3d49; --card-glow: #ada8ff40;
}
/* Aliases so older templates pick up the new palette. */
:root, :root[data-theme="dark"] {
  --bg: var(--paper); --card: var(--sheet); --mute: var(--muted); --line: var(--rule); --soft: var(--blue-soft);
  --ok: var(--green); --okbg: var(--green-soft); --warn: var(--warning); --warnbg: var(--warning-soft);
  --bad: var(--danger); --badbg: var(--danger-soft); --acc: var(--blue); --acc2: var(--blue-hover);
  --field: var(--inset); --fieldline: var(--control-border); --th: var(--sheet); --lowbg: var(--warning-soft);
  --warnline: var(--warning-line); --badline: var(--danger-line); --flashline: var(--blue-line);
  --button: var(--blue); --button-hover: var(--blue-hover);
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 13px/1.5 var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; font-family: var(--font); }
button, a, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -1.1px; font-weight: 650; }
h2 { font-size: 16px; line-height: 1.35; letter-spacing: -.5px; font-weight: 650; }
h3 { font-size: 14px; line-height: 1.4; letter-spacing: -.2px; font-weight: 650; }
[hidden] { display: none !important; }
button, a, input, select, summary { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 40; top: 8px; left: 8px; padding: 10px 18px; background: var(--blue); color: var(--accent-ink); border-radius: 6px; }
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }

/* Shell */
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { padding: 22px 16px 16px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 34px; position: sticky; top: 0; height: 100vh; background: var(--paper); z-index: 6; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); padding: 0 8px; }
.brand:hover { color: var(--ink); }
.brand-symbol { width: 32px; height: 32px; flex: none; }
.brand-name { min-width: 0; }
.brand-sub { font-size: 10px; letter-spacing: .05px; font-weight: 450; color: var(--muted); display: block; margin-top: 2px; }
.nav-label { font-size: 9px; letter-spacing: .1em; color: var(--faint); font-weight: 650; margin: 0 12px 10px; text-transform: uppercase; }
.side-nav { display: grid; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
.side-nav a::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.side-nav a:hover { background: var(--inset); color: var(--ink); }
.side-nav a[aria-current="page"] { background: var(--sheet); color: var(--ink); border-color: var(--rule); box-shadow: var(--shadow); font-weight: 650; }
.side-nav a[aria-current="page"]::before { background: var(--blue); }
.side-bottom { margin-top: auto; display: grid; gap: 4px; }
.account-mini { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--rule); padding: 16px 8px 8px; min-width: 0; }
.account-mini > div { min-width: 0; }
.account-mini b { display: block; font-size: 11px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-mini small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--blue-soft); color: var(--blue); border: 1px solid var(--rule); border-radius: 10px; font-size: 12px; font-weight: 650; text-transform: uppercase; }
.side-logout button, .logout { background: none; border: 0; padding: 9px 12px; width: 100%; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; border-radius: 8px; min-height: 0; box-shadow: none; }
.side-logout button:hover { background: var(--inset); color: var(--ink); }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 64px; padding: 12px 36px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper); position: sticky; top: 0; z-index: 5; }
.top-context { display: flex; align-items: center; gap: 16px; min-width: 0; }
.breadcrumbs { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.breadcrumbs b { color: var(--ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs > span[aria-hidden] { color: var(--faint); opacity: .6; }
.top-tools { display: flex; align-items: center; gap: 10px; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); box-shadow: none; }
.icon-button:hover { color: var(--ink); background: var(--inset); border-color: var(--rule); }
.icon-button .icon { width: 17px; height: 17px; }
.theme-toggle { background: var(--sheet); border-color: var(--rule); box-shadow: var(--shadow); }
.theme-toggle .icon:first-child { display: none; }
[data-theme="dark"] .theme-toggle .icon:first-child { display: block; }
[data-theme="dark"] .theme-toggle .icon:last-child { display: none; }
.top-logout { display: none; }
.hsearch { display: flex; align-items: center; gap: 8px; width: 240px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); padding: 0 10px; }
.hsearch .icon { width: 14px; height: 14px; color: var(--faint); }
.hsearch input { border: 0; padding: 8px 0; min-height: 34px; font-size: 11px; background: transparent; border-radius: 0; width: 100%; }
.hsearch input:hover { border: 0; }
.hsearch:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.hsearch input:focus-visible { outline: 0; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 36px; background: var(--blue-soft); border-bottom: 1px solid var(--blue-line); font-size: 11px; color: var(--muted); }
.demo-bar b { color: var(--ink); font-weight: 650; }
.demo-switch { display: flex; align-items: center; gap: 3px; padding: 3px; background: var(--sheet); border: 1px solid var(--blue-line); border-radius: 9px; }
.demo-switch a { padding: 5px 10px; border-radius: 7px; color: var(--muted); font-weight: 550; font-size: 11px; border: 1px solid transparent; }
.demo-switch a:hover { color: var(--ink); }
.demo-switch a[aria-current] { background: var(--blue); color: var(--accent-ink); }
.demo-switch a.inbox { color: var(--blue); }
main.content { width: 100%; max-width: 1320px; margin: 0 auto; padding: 32px 40px 28px; flex: 1; }
.page-foot { display: flex; justify-content: space-between; gap: 14px; padding-top: 30px; font-size: 10px; color: var(--faint); }

@media (min-width: 901px) {
  .sidebar-compact .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar-compact .sidebar { padding-left: 12px; padding-right: 12px; }
  .sidebar-compact .brand { padding: 0; justify-content: center; }
  .sidebar-compact .brand-name, .sidebar-compact .nav-label, .sidebar-compact .account-mini > div { display: none; }
  .sidebar-compact .side-nav a { font-size: 0; gap: 0; justify-content: center; padding: 11px 0; }
  .sidebar-compact .side-logout button { font-size: 0; justify-content: center; }
  .sidebar-compact .account-mini { justify-content: center; padding-left: 0; padding-right: 0; }
}
@media (max-width: 1150px) and (min-width: 901px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  main.content { padding: 28px 26px; }
  .topbar, .demo-bar { padding-left: 24px; padding-right: 24px; }
  .hsearch { width: 180px; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; }
  .brand { padding: 0; flex: none; }
  .brand-name { white-space: nowrap; }  /* 601-900 px: the nav used to squeeze it to one letter per line */
  .brand-sub, .nav-label, .side-bottom, .sidebar-toggle { display: none; }
  .side-nav { display: flex; gap: 2px; }
  .side-nav a { padding: 8px 9px; }
  .topbar { position: static; min-height: 54px; padding: 10px 20px; }
  .top-logout { display: block; }
  .demo-bar { padding: 8px 20px; }
  main.content { padding: 24px 20px; }
}
@media (max-width: 600px) {
  .sidebar { padding: 10px 12px; }
  .brand-name { display: none; }
  .sidebar > div { flex: 1; min-width: 0; }
  .side-nav { gap: 0; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a { flex: 0 0 auto; min-width: 58px; flex-direction: column; gap: 3px; padding: 6px 6px; font-size: 9px; }
  .topbar { padding: 8px 14px; gap: 8px; }
  .breadcrumb-root, .breadcrumbs > span[aria-hidden] { display: none; }
  .hsearch { width: auto; flex: 1; min-width: 0; }
  main.content { padding: 20px 14px 18px; }
  input, select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  main.content > section, main.content > .sheet { animation: arrive .35s ease both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  html { scroll-behavior: smooth; }
  /* First paint only: base.html adds .settled after 1.5 s, so the minute refresh of [data-live] blocks (which
     re-inserts these rows) does not replay them. */
  html:not(.settled) :is(.task, .c-list > li, .mv-row, .acct-card, .cl-card) { animation: rise .32s cubic-bezier(.2, .8, .2, 1) both; }
  html:not(.settled) :is(.task, .c-list > li, .mv-row, .acct-card, .cl-card):nth-child(2) { animation-delay: 40ms; }
  html:not(.settled) :is(.task, .c-list > li, .mv-row, .acct-card, .cl-card):nth-child(3) { animation-delay: 80ms; }
  html:not(.settled) :is(.task, .c-list > li, .mv-row, .acct-card, .cl-card):nth-child(4) { animation-delay: 120ms; }
  html:not(.settled) :is(.task, .c-list > li, .mv-row, .acct-card, .cl-card):nth-child(5) { animation-delay: 160ms; }
  html:not(.settled) :is(.task, .c-list > li, .mv-row, .acct-card, .cl-card):nth-child(6) { animation-delay: 200ms; }
  html:not(.settled) :is(.task, .c-list > li, .mv-row, .acct-card, .cl-card):nth-child(n+7) { animation-delay: 240ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* The one number each home is about counts in with a small scale-up. */
  html:not(.settled) :is(.t-wallet-value, .cl-value, .pp-verdict) { animation: pop .45s cubic-bezier(.2, .8, .2, 1) .12s both; }
  @keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  /* Toasts slide up in and drift down on the way out (fill backwards so .out can still fade them). */
  .flash { animation: toast-in .3s cubic-bezier(.2, .8, .2, 1) backwards; transition: opacity .4s ease, transform .4s ease; }
  .flash.out { transform: translateY(8px); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  /* Press feedback, opening disclosures, the card lifting under the pointer and a small bounce when its data shows. */
  button, .btn { transition-property: background-color, border-color, color, box-shadow, transform; }
  button:not(:disabled):active, .btn:active { transform: translateY(1px) scale(.985); }
  details[open] > .disclosure-body { animation: rise .25s ease both; }
  .vcard { transition: box-shadow .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
  .vcard.shown { animation: reveal .4s cubic-bezier(.2, .8, .2, 1); }
  @keyframes reveal { 0% { transform: scale(.97); } 60% { transform: scale(1.012); } 100% { transform: none; } }
  .side-nav a::before { transition: transform .2s ease, background-color .15s ease; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .vcard:hover { transform: translateY(-3px); }
  .side-nav a:hover::before { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Page header */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.eyebrow { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 650; margin-bottom: 8px; }
.heading-dot { color: var(--blue); }
.subheading { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.7; max-width: 70ch; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin: 30px 0 12px; }
.section-head:first-child { margin-top: 0; }
.section-caption { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Surfaces */
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; }
.sheet.pad { padding: 22px 24px; }
.sheet + .sheet { margin-top: 16px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.sheet-head h2, .sheet-head h3 { font-size: 13px; letter-spacing: -.2px; }
.sheet-head p { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sheet-body { padding: 18px 20px; }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--rule-soft); font-size: 10px; color: var(--muted); }
.cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols > * { min-width: 0; }
.stack-gap { display: grid; gap: 16px; }
@media (max-width: 1000px) { .cols, .cols.even { grid-template-columns: minmax(0, 1fr); } }

/* Balance hero */
.balance-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 26px 28px; }
.balance-label { font-size: 11px; font-weight: 550; color: var(--muted); margin-bottom: 8px; }
.balance-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.balance-code { font-size: 14px; font-weight: 550; color: var(--faint); }
.balance-value { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.15; letter-spacing: -2px; font-weight: 600; }
.balance-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.period-summary { border-left: 1px solid var(--rule); padding-left: 30px; display: grid; gap: 9px; }
.period-summary h2 { font-size: 10px; font-weight: 550; color: var(--muted); letter-spacing: 0; margin-bottom: 2px; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.summary-line span { color: var(--muted); }
.summary-line b { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.summary-line.total { border-top: 1px solid var(--rule); padding-top: 9px; }
.summary-line.total span, .summary-line.total b { color: var(--ink); font-weight: 650; }
.freshness { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--rule-soft); font-size: 10px; color: var(--muted); }
.freshness > span { display: flex; align-items: center; gap: 7px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }
.status-dot.warn { background: var(--warning); } .status-dot.bad { background: var(--danger); } .status-dot.off { background: var(--faint); }
.favor { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 550; color: var(--green); background: var(--green-soft); }
.favor.due { color: var(--warning); background: var(--warning-soft); }
@media (max-width: 760px) { .balance-layout { grid-template-columns: 1fr; gap: 22px; padding: 22px; } .period-summary { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; } }

/* KPI tiles */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-strip.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-strip.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0; color: var(--ink); }
a.stat:hover { border-color: var(--control-border); background: var(--hover); color: var(--ink); }
.stat > span { font-size: 11px; color: var(--muted); }
.stat > b { font-size: 19px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.stat > b small { font-size: 10px; color: var(--faint); font-weight: 550; letter-spacing: 0; }
.stat > small { font-size: 10px; color: var(--faint); font-weight: 500; }
.stat.total { border-color: var(--blue); }
.stat.warn { border-color: var(--warning-line); background: var(--warning-soft); }
.stat.warn > small { color: var(--warning); font-weight: 600; }
@media (max-width: 900px) { .stat-strip, .stat-strip.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-strip.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-strip.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tables */
table { border-collapse: collapse; width: 100%; }
th { font-size: 10px; font-weight: 550; color: var(--muted); text-align: left; background: var(--sheet); border-bottom: 1px solid var(--rule); padding: 10px 16px; vertical-align: bottom; text-transform: none; letter-spacing: 0; }
td { border-bottom: 1px solid var(--rule-soft); padding: 12px 16px; vertical-align: middle; font-size: 12px; overflow-wrap: anywhere; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, table.data tr:hover td { background: var(--hover); }
td.num, th.num, .numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
td small, .cell-sub { display: block; font-size: 10px; color: var(--faint); margin-top: 2px; }
.table-wrap { overflow-x: auto; }
.table-foot { padding: 11px 16px; border-top: 1px solid var(--rule-soft); font-size: 10px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.amount-positive, .pos { color: var(--green); }
.neg { color: var(--warning); }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-cell b { font-weight: 650; }
.who-cell .avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.day-row th { background: var(--inset); font-size: 11px; font-weight: 650; color: var(--ink); padding: 8px 16px; }
.mv-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--inset); color: var(--muted); flex: none; }
.mv-icon.in { background: var(--green-soft); color: var(--green); }
.mv-icon.bad { background: var(--danger-soft); color: var(--danger); }
.mv-icon .icon { width: 14px; height: 14px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 550; color: var(--green); background: var(--green-soft); padding: 3px 7px; border-radius: 5px; white-space: nowrap; line-height: 1.5; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.neutral { background: var(--inset); color: var(--muted); }
.badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--blue-soft); color: var(--blue); }
.chip-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; background: var(--inset); color: var(--muted); border: 1px solid var(--rule); padding: 2px 6px; border-radius: 5px; }

/* Buttons and controls */
button, .btn { border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); border-radius: 9px; padding: 8px 13px; min-height: 36px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: var(--shadow); text-decoration: none; flex-shrink: 0; }
button:hover, .btn:hover { background: var(--hover); color: var(--ink); border-color: var(--control-border); }
button.primary, .btn.primary { background: var(--blue); border-color: var(--blue); color: var(--accent-ink); box-shadow: 0 2px 3px #5753de18, inset 0 1px 0 #ffffff18; }
button.primary:hover, .btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--accent-ink); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
button.ghost:hover, .btn.ghost:hover { background: var(--inset); color: var(--ink); }
button.danger, .btn.danger { color: var(--danger); }
button.danger:hover, .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger-line); }
button.lg, .btn.lg { width: 100%; min-height: 42px; font-size: 12px; }
button.sm, .btn.sm { min-height: 36px; padding: 5px 12px; font-size: 12px; }
button.link { background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; color: var(--blue); font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.btn .icon, button .icon { width: 15px; height: 15px; }
.text-link { color: var(--blue); font-weight: 550; }
input, select, textarea { color: var(--ink); background: var(--inset); border: 1px solid transparent; padding: 8px 11px; border-radius: 8px; font-size: 14px; min-height: 40px; max-width: 100%; min-width: 0; }
input:hover, select:hover, textarea:hover { border-color: var(--control-border); }
input:focus-visible, select:focus-visible, textarea:focus-visible { background: var(--sheet); outline: 3px solid var(--focus); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
select { cursor: pointer; }
textarea { width: 100%; resize: vertical; }
input[type=number] { width: 120px; font-variant-numeric: tabular-nums; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 16px; height: 16px; padding: 0; accent-color: var(--blue); vertical-align: middle; margin: 0; }
label.f, .field { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 550; color: var(--muted); min-width: 0; }
label.f input, label.f select, label.f textarea { font-weight: 450; }
label.chk { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); }
.hint { font-size: 10px; color: var(--faint); line-height: 1.6; }
[aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-line); }
form { margin: 0; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0; max-width: 100%; }
form.stackf { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
form.stackf label.f { flex: 1 1 180px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.seg, .chips { display: flex; align-items: center; gap: 3px; padding: 3px; background: var(--inset); border-radius: 9px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg a, .seg button, button.chip { border: 1px solid transparent; padding: 5px 10px; border-radius: 7px; background: transparent; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 550; white-space: nowrap; color: var(--muted); min-height: 28px; box-shadow: none; }
.seg a:hover, .seg button:hover, button.chip:hover { color: var(--ink); background: transparent; border-color: transparent; }
.seg [aria-current], .seg [aria-pressed="true"], button.chip[aria-pressed="true"] { color: var(--ink); background: var(--sheet); border-color: var(--rule); box-shadow: var(--shadow); font-weight: 650; }
button.chip b, .seg b { font-size: 10px; color: var(--faint); font-weight: 550; margin-left: 2px; }
[data-chip-hidden] { display: none !important; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); padding: 0 10px; min-width: 200px; }
.search-box .icon { width: 14px; height: 14px; color: var(--faint); }
.search-box input { border: 0; background: transparent; padding: 7px 0; min-height: 32px; width: 100%; font-size: 11px; }
.search-box:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.search-box input:focus-visible { outline: 0; }

/* Notices and toasts */
.notice, .alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; border: 1px solid var(--blue-line); border-radius: 10px; background: var(--blue-soft); color: var(--ink); padding: 12px 16px; font-size: 12px; line-height: 1.6; }
.notice .icon, .alert .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--blue); }
.alert, .notice.warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.alert { display: block; }
.alert .icon, .notice.warning .icon { color: var(--warning); }
.notice.error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.notice.success { background: var(--green-soft); border-color: transparent; color: var(--green); }
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 24px)); }
.flash { display: flex; align-items: center; gap: 12px; background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); padding: 12px 14px 12px 16px; border-radius: 12px; box-shadow: 0 12px 40px #18182918; font-size: 12px; transition: opacity .4s; }
.flash::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
.flash.out { opacity: 0; }
.flash > span { flex: 1; }
.flash.error::before { background: var(--danger); } .flash.error { border-color: var(--danger-line); }
.flash.warning::before { background: var(--warning); } .flash.warning { border-color: var(--warning-line); }
.flash.success::before { background: var(--green); }
.flash button { min-height: 28px; padding: 4px 9px; font-size: 10px; box-shadow: none; }
/* Touch: every tap target at least 44px (WCAG 2.5.8 / Apple HIG), operative text at least 14px. */
@media (pointer: coarse) {
  button, .btn, input, select, textarea, .seg a, .seg button, button.chip { min-height: 44px; font-size: 14px; }
  button.sm, .btn.sm, .flash button { min-height: 44px; font-size: 14px; }
  .side-nav a, label.chk, .hint, td, .muted { font-size: 14px; }
  .table-wrap, .sheet:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
body { overflow-x: clip; } /* no horizontal scroll on 320/360px; clip keeps position: sticky working */
#live-status { margin: -12px 0 14px; font-size: 10px; color: var(--faint); }
@media (max-width: 600px) { .toasts { right: 12px; left: 12px; width: auto; bottom: 12px; } }

/* Empty states and disclosure */
.empty, .empty-row { text-align: center; color: var(--muted); padding: 32px 20px; font-size: 12px; }
.empty b, .empty-row b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 4px; }
.empty .icon { width: 24px; height: 24px; color: var(--faint); margin-bottom: 10px; }
details.disclosure { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); }
details.disclosure + details.disclosure { margin-top: 10px; }
details.disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 14px 18px; font-size: 12px; font-weight: 650; list-style: none; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after { content: ""; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transition: transform .15s; }
details.disclosure[open] > summary::after { transform: rotate(180deg); }
details.disclosure > summary small { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 6px; }
details.disclosure > .disclosure-body { padding: 0 18px 18px; }
dl.kv { display: grid; margin: 0; }
dl.kv > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 12px; }
dl.kv > div:first-child { border-top: 0; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; text-align: right; font-weight: 550; font-variant-numeric: tabular-nums; }

/* Meters and small charts */
.meter { height: 6px; background: var(--inset); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.meter > span { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.meter.warn > span { background: var(--warning); } .meter.ok > span { background: var(--green); }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bars .lab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 11px; }
.bars .track { height: 8px; background: var(--inset); border-radius: 99px; overflow: hidden; display: flex; }
.bars .track > i { display: block; height: 100%; background: var(--blue-line); position: relative; min-width: 2px; }
.bars .track > i > b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); }
.spark { width: 100%; height: 88px; display: block; }
.spark .grid { stroke: var(--rule); stroke-width: 1; }
.spark .spend { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.5; }
.spark .load { fill: none; stroke: var(--green); stroke-width: 1.5; }
.spark-bars { display: flex; align-items: stretch; gap: 3px; height: 120px; }
.spark-bars i { flex: 1; position: relative; background: var(--inset); border-radius: 3px; min-width: 0; }
.spark-bars i b, .spark-bars i em { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 0 0; }
.spark-bars i b { background: var(--blue); opacity: .85; }
.spark-bars i em { background: var(--green); opacity: .45; }

/* Card visual (shared by client, reseller and admin) */
.vwrap { display: flex; flex-direction: column; gap: 14px; }
.vcard { position: relative; overflow: hidden; color: #fff; border-radius: 16px; padding: 18px 20px; width: 100%; max-width: 400px; aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  background: radial-gradient(120% 110% at 100% 0%, var(--card-glow) 0%, transparent 60%), linear-gradient(150deg, var(--card-a) 0%, var(--card-b) 100%); box-shadow: 0 1px 2px #0000001a, 0 12px 28px #1d1e2426; transition: box-shadow .2s; }
.vcard::after { content: ""; position: absolute; right: -70px; bottom: -100px; width: 240px; height: 240px; border-radius: 50%; border: 28px solid #ffffff08; pointer-events: none; }
.vcard.off { background: linear-gradient(150deg, #5d5f6a, #7c7e89); box-shadow: none; }
.vcard.shown { box-shadow: 0 0 0 3px var(--focus), 0 12px 28px #1d1e2426; }
.vtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vbrand { display: flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: -.2px; font-size: 13px; }
.vbrand .brand-symbol { width: 22px; height: 22px; }
.vcard .pill, .vcard .badge { background: #ffffffe6; flex-shrink: 0; }
.vlabel { font-size: 11px; opacity: .75; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard .chip { width: 34px; height: 25px; border-radius: 6px; background: linear-gradient(135deg, #e9d8a6, #b99a52); opacity: .9; }
.vpan, .vfoot span { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vpan { font-size: 18px; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
.vfoot { display: flex; gap: 22px; align-items: flex-end; }
.vfoot small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.vfoot span { font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.vnet { margin-left: auto; font-style: italic; font-weight: 700; font-size: 17px; letter-spacing: -.3px; opacity: .9; }
.reveal form { margin: 0; }
input.otp { font-size: 22px; letter-spacing: .3em; text-align: center; width: 100%; max-width: 220px; font-variant-numeric: tabular-nums; }

/* Login and narrow pages */
.login, .narrow { max-width: 420px; margin: 56px auto; }
.login .brand { justify-content: center; margin-bottom: 22px; font-size: 18px; }
.login form, .narrow form.col { display: flex; flex-direction: column; gap: 14px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 550; color: var(--muted); }
.login input { width: 100%; padding: 11px 12px; }
body.bare { background: var(--paper); }
body.bare main.content { max-width: 480px; padding-top: 48px; }

/* Demo entry page (/demo) */
body.bare main.content:has(.demo-start) { max-width: 1080px; padding-top: 0; }
.demo-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: calc(100vh - 60px); padding: 40px 0; }
.demo-story .brand { padding: 0; margin-bottom: 44px; }
.demo-story h1 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -1.6px; line-height: 1.15; }
.demo-story .subheading { font-size: 13px; margin: 14px 0 24px; }
.demo-entries { display: grid; gap: 12px; }
.demo-entry { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); color: var(--ink); }
a.demo-entry:hover { border-color: var(--control-border); background: var(--hover); color: var(--ink); }
.demo-entry > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.demo-entry b { font-size: 14px; font-weight: 650; letter-spacing: -.3px; }
.demo-entry small { font-size: 11px; color: var(--muted); }
.demo-entry .avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; text-transform: none; }
.demo-entry > .icon { color: var(--faint); }
.demo-client { align-items: flex-end; }
.demo-client .avatar { align-self: center; }
.demo-client label.f { margin-top: 10px; }
@media (max-width: 860px) { .demo-start { grid-template-columns: 1fr; gap: 28px; min-height: 0; } .demo-story .brand { margin-bottom: 24px; } }

/* Legacy components (restyled; templates not yet redesigned still use them) */
h1 + .muted, h2 + .muted { margin-top: 4px; }
.box { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0; }
.box > h2:first-child, .box > h3:first-child { margin-bottom: 8px; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; margin-bottom: 14px; }
.head p { margin: 2px 0 0; }
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.jump a { background: var(--sheet); border: 1px solid var(--rule); color: var(--muted); padding: 5px 11px; border-radius: 7px; font-size: 11px; font-weight: 550; }
.jump a:hover { color: var(--ink); border-color: var(--control-border); }
[id] { scroll-margin-top: 80px; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
.kpi { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.kpi .muted:first-child { margin: 0; font-size: 11px; }
.kpi.alertk { border-color: var(--warning-line); background: var(--warning-soft); }
.kpi.hero { border-color: var(--blue-line); }
table.stack th, table.stack td { vertical-align: top; }
tr.low td { background: var(--warning-soft); }
tr[hidden] { display: none !important; }
tr.is-sel td { background: var(--blue-soft); }
input.search { width: 220px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; line-height: 1.5; max-width: 100%; background: var(--inset); color: var(--muted); }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.ACTIVE, .pill.ok { background: var(--green-soft); color: var(--green); }
.FROZEN, .pill.bad { background: var(--danger-soft); color: var(--danger); }
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.info { background: var(--blue-soft); color: var(--blue); }
.muted { color: var(--muted); font-size: 12px; }
.big { font-size: 24px; font-weight: 650; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.note { background: var(--warning-soft); color: var(--warning); border-radius: 9px; padding: 10px 12px; font-size: 12px; }
.sort-button { font: inherit; color: inherit; border: 0; background: transparent; padding: 2px 0; min-height: 0; box-shadow: none; text-align: inherit; }
.sort-button:hover { background: transparent; color: var(--ink); }
th[aria-sort=ascending]::after { content: " ↑"; } th[aria-sort=descending]::after { content: " ↓"; }
.mobile-sort { display: none; }
.filter-state { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; font-size: 11px; color: var(--muted); }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
code.secret, code.addr { display: block; font-family: var(--mono); background: var(--inset); border-radius: 9px; padding: 9px 12px; word-break: break-all; }
code.secret { font-size: 20px; letter-spacing: .12em; }
ol.steps { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.faq details { border-bottom: 1px solid var(--rule); padding: 2px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 650; padding: 12px 0; font-size: 12px; }
.faq details p, .faq details ul { margin: 0 0 12px; color: var(--muted); }
ul.moves, ul.rows { list-style: none; margin: 0; padding: 0; }
ul.moves li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
ul.moves li:last-child { border-bottom: 0; }
ul.moves .mvw { display: flex; flex-direction: column; min-width: 0; }
ul.moves .mva { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
ul.rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 0; border-top: 1px solid var(--rule-soft); }
ul.rows > li:first-child { border-top: 0; padding-top: 2px; }
ul.rows .who2 { flex: 1 1 160px; min-width: 0; }
ul.rows .amt { font-weight: 650; font-variant-numeric: tabular-nums; }
p.flow { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 11px; color: var(--muted); }
p.flow b { color: var(--ink); }
.qr svg { width: min(222px, 100%); height: auto; border-radius: 10px; display: block; margin-top: 8px; }
.home2 { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
.home2 > .box, .home2 > .grid { margin: 0; }
.home2 > .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.home2 > .col > * { margin: 0; }
@media (min-width: 900px) { .home2 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .home2.one { grid-template-columns: minmax(0, 1fr); } }
.scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; background: var(--blue-soft); border: 1px solid var(--blue-line); padding: 10px 14px; border-radius: 10px; margin: 0 0 16px; font-size: 12px; }
.scope > span { flex: 1 1 320px; }
.stv { border-left: 3px solid var(--rule); padding-left: 14px; }
.stv.st-ok { border-left-color: var(--green); } .stv.st-warn { border-left-color: var(--warning); } .stv.st-bad { border-left-color: var(--danger); } .stv.st-info { border-left-color: var(--blue); }
.money3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.money3 > div { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.money3 .k { margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.money3 .s, .stamp { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
nav.qa { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); margin: 0 0 16px; }
nav.qa a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 10px 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; color: var(--ink); font-weight: 650; font-size: 12px; }
nav.qa a small { font-size: 10px; font-weight: 450; color: var(--muted); }
nav.qa a:hover { border-color: var(--control-border); background: var(--hover); }
nav.qa a.go { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
details.acct-more { margin-top: 8px; }
details.acct-more > summary, .cc-edit > summary, details.m > summary { cursor: pointer; font-size: 11px; color: var(--blue); font-weight: 550; padding: 4px 0; }
details.invite { margin-top: 16px; }
nav.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.acct { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.acct.low { border-color: var(--warning-line); background: var(--warning-soft); }
.acct.bad { border-color: var(--danger-line); background: var(--danger-soft); }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 11px; }
dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
fieldset.modes { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
fieldset.modes label.chk { align-items: flex-start; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
a.tile { display: flex; flex-direction: column; gap: 2px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; color: var(--ink); min-width: 0; }
a.tile:hover { border-color: var(--control-border); background: var(--hover); color: var(--ink); }
.tile-k { font-size: 11px; font-weight: 550; color: var(--muted); }
.tile-v { font-size: 22px; font-weight: 650; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.tile-v small { font-size: 11px; font-weight: 550; color: var(--faint); letter-spacing: 0; }
.tile-s { font-size: 11px; color: var(--muted); }
a.tile.warnt { border-color: var(--warning-line); background: var(--warning-soft); }
a.tile.warnt .tile-s { color: var(--warning); font-weight: 600; }
.cgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.cgrid > .empty { grid-column: 1 / -1; }
.ccard { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px 14px; box-shadow: var(--shadow); }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
a.cc-num { font-family: var(--mono); font-size: 16px; font-weight: 650; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
a.cc-num:hover { color: var(--blue); }
.cc-label { margin: -6px 0 0; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.cc-bal small { flex-basis: 100%; font-size: 10px; font-weight: 550; color: var(--muted); }
.cc-bal b { font-size: 24px; line-height: 1.1; letter-spacing: -.8px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cc-bal > span { font-weight: 550; color: var(--faint); font-size: 11px; }
.ccard .meter { margin: 0; }
.cc-meta { display: flex; gap: 22px; font-size: 12px; }
.cc-meta span { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.cc-meta small { font-size: 10px; font-weight: 550; color: var(--muted); }
.cc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
a.cc-who { font-weight: 650; min-width: 0; }
.cc-act { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-edit form { margin-top: 10px; }
td.money b.amt { font-size: 15px; }
section.hero { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 24px 26px; margin-bottom: 16px; box-shadow: var(--shadow); color: var(--ink); }
.hero-k { font-size: 11px; font-weight: 550; color: var(--muted); }
.hero-v { margin: 6px 0 14px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; font-weight: 600; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.hero-v small { font-size: 14px; font-weight: 550; color: var(--faint); letter-spacing: 0; }
.hero-f { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.hero-f span { display: flex; flex-direction: column; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hero-f small { font-size: 10px; font-weight: 550; color: var(--muted); }
.hero-n { margin: 14px 0 0; font-size: 11px; color: var(--muted); }
body.offline [data-live] { opacity: .45; filter: grayscale(1); }
@media (max-width: 900px) {
  table.stack tr:has(th), table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-sort { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; font-size: 11px; }
  table.stack, table.stack tbody { display: block; }
  table.stack tr { display: block; padding: 10px 14px; margin: 0 0 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); }
  table.stack tr:has(.empty) { border: 0; }
  table.stack tr.low { background: var(--warning-soft); border-color: var(--warning-line); }
  table.stack td.lead { font-size: 13px; text-align: left; padding-bottom: 8px; }
  table.stack tr.low td, table.stack tr.is-sel td, table.stack tr:hover td { background: none; }
  table.stack tr.is-sel { border-color: var(--blue); }
  table.stack td { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border: 0; padding: 4px 0; text-align: right; }
  table.stack td[data-col]::before { content: attr(data-col); color: var(--muted); font-size: 10px; font-weight: 550; flex: 0 0 34%; text-align: left; padding-top: 2px; }
  table.stack td[data-col]:empty { display: none; }
  table.stack td:not([data-col]), table.stack td.form { display: block; text-align: left; }
  table.stack td form.inline { width: 100%; }
}
@media (max-width: 720px) {
  .wide { display: none; }
  .box { padding: 16px; }
  .big { font-size: 20px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  input[type=number] { width: 100%; }
  form.inline { width: 100%; }
  form.inline label.f { flex: 1 1 140px; }
  table.stack td.opt { display: none; }
}
@media (min-width: 721px) { :not(td) > details.m > summary { display: none; } }
@media print { .sidebar, .topbar, .demo-bar, .toasts { display: none !important; } .app-shell { display: block; } }

/* Icon masks (navigation and disclosures). SVG data URIs are allowed by img-src 'self' data:. */
:root {
  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  --i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6.5 15h4'/%3E%3C/svg%3E");
  --i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.2a6.5 6.5 0 0 1 3.5 5.8'/%3E%3C/svg%3E");
  --i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
  --i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M21 20H3'/%3E%3C/svg%3E");
  --i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
  --i-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.3a2.6 2.6 0 0 1 5 .9c0 1.7-2.5 2.3-2.5 3.8M12 17h.01'/%3E%3C/svg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --i-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h12v4M4 7v11a2 2 0 0 0 2 2h14V9H6a2 2 0 0 1-2-2zM16 14.5h.01'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.ni-home { --i: var(--i-home); } .ni-card { --i: var(--i-card); } .ni-users { --i: var(--i-users); } .ni-list { --i: var(--i-list); }
.ni-chart { --i: var(--i-chart); } .ni-file { --i: var(--i-file); } .ni-pulse { --i: var(--i-pulse); } .ni-help { --i: var(--i-help); }
.ni-user { --i: var(--i-user); } .ni-wallet { --i: var(--i-wallet); }

/* ===== Task-first pages (shared by the three roles) =====
   One job per screen: what to do first with its button, the wallet as the one dark focal block,
   larger text than the read-only portal, color only for state. */
body.role-reseller main.content, body.role-admin main.content { max-width: 1180px; }
.t-head { align-items: center; margin-bottom: 22px; }
.t-head h1 { font-size: clamp(26px, 2.4vw, 32px); }
.t-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.t-section-head { display: flex; align-items: center; gap: 10px; padding: 20px 24px 12px; }
.t-section-head h2 { font-size: 17px; letter-spacing: -.4px; }
.t-section-head .t-link { margin-left: auto; font-size: 13px; font-weight: 600; }
.t-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--ink); color: var(--sheet); font-size: 12px; font-weight: 700; }

/* To-do list */
.t-tasks, .t-clients, .t-sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); min-width: 0; }
.t-list { list-style: none; margin: 0; padding: 0 0 6px; }
.task { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--rule-soft); }
.task-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--inset); color: var(--muted); }
.task-icon .icon { width: 18px; height: 18px; }
.task.request .task-icon { background: var(--blue-soft); color: var(--blue); }
.task.bad .task-icon { background: var(--danger-soft); color: var(--danger); }
.task.low .task-icon { background: var(--warning-soft); color: var(--warning); }
.task-text { min-width: 0; }
.task-text b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.2px; line-height: 1.4; }
.task-text small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.task-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.task-actions form { margin: 0; }
.task-actions button, .task-actions .btn { min-height: 38px; padding: 8px 16px; font-size: 12px; min-width: 112px; }
.task-more { font-size: 12px; color: var(--muted); white-space: nowrap; }
.task-more:hover { color: var(--ink); }
.t-done { display: grid; justify-items: center; gap: 4px; padding: 36px 24px 40px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--rule-soft); }
.t-done .icon { width: 28px; height: 28px; color: var(--green); margin-bottom: 6px; }
.t-done b { color: var(--ink); font-size: 15px; }

/* Wallet: the single dark block of the page */
.t-wallet { background: var(--ink); color: var(--sheet); border-radius: 16px; padding: 22px 24px; display: grid; gap: 4px; }
.t-wallet-label { font-size: 12px; font-weight: 600; opacity: .7; }
.t-wallet-value { font-size: 38px; line-height: 1.15; font-weight: 650; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; }
.t-wallet-value small { font-size: 14px; font-weight: 600; opacity: .6; letter-spacing: 0; }
.t-wallet-note { font-size: 12px; opacity: .78; line-height: 1.5; margin-bottom: 10px; }
.t-wallet-note.warn { opacity: 1; color: var(--ink); background: var(--warning-soft); border-radius: 8px; padding: 8px 10px; }
.t-wallet-facts { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--sheet) 18%, transparent); display: grid; gap: 8px; }
.t-wallet-facts > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.t-wallet-facts dt { opacity: .7; }
.t-wallet-facts dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.t-wallet-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--sheet); opacity: .85; }
.t-wallet-link:hover { color: var(--sheet); opacity: 1; }
.t-wallet-link .icon { width: 14px; height: 14px; }

/* Client list rows */
.t-clients { margin-top: 20px; }
.c-list { list-style: none; margin: 0; padding: 0 0 6px; }
.c-list > li { border-top: 1px solid var(--rule-soft); }
.c-list > li > a, .c-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 92px 16px; gap: 14px; align-items: center; padding: 12px 24px; color: var(--ink); }
.c-list > li > a:hover { background: var(--hover); color: var(--ink); }
.c-list .avatar { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
.c-name { min-width: 0; }
.c-name b { display: block; font-size: 14px; font-weight: 650; }
.c-name small { display: block; font-size: 11px; color: var(--faint); font-family: var(--mono); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-name .badge { margin-left: 6px; vertical-align: 1px; }
.c-bal { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.c-bal small { font-size: 11px; color: var(--faint); font-weight: 550; }
.c-days { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.c-days.warn { color: var(--warning); font-weight: 650; }
.c-days.bad { color: var(--danger); font-weight: 650; }
.c-go { width: 16px; height: 16px; color: var(--faint); }

@media (max-width: 900px) {
  .t-layout { grid-template-columns: minmax(0, 1fr); }
  .t-layout > .t-wallet { order: -1; }
}
@media (max-width: 600px) {
  .t-head .head-actions { width: 100%; }
  .t-head .head-actions .btn { flex: 1 1 0; }
  .t-section-head { padding: 16px 16px 10px; }
  .task { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; }
  .task-icon { width: 36px; height: 36px; }
  .task-actions { grid-column: 2; justify-content: flex-start; }
  .c-list > li > a, .c-row { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px 16px; gap: 12px; }
  .c-list .c-days { grid-column: 2; grid-row: 2; text-align: left; margin-top: -8px; }
  .c-row { grid-template-columns: minmax(0, 1fr) auto; }
  .c-row .c-days { grid-column: 1; grid-row: 2; text-align: left; margin: -6px 0 0 50px; }
  .c-row .c-act { grid-column: 2; grid-row: 2; }
  .t-toolbar { padding: 12px 16px; }
  .t-toolbar .seg { width: 100%; }
  .t-invite .form-grid { padding: 4px 16px 18px; }
  .c-go { display: none; }
  .t-wallet-value { font-size: 32px; }
}
/* Hardening (workstream B): error page, two-step verification, details.m without JavaScript. */
.nc-error { max-width: 520px; margin: 32px auto; padding: 30px 26px; text-align: center; }
.nc-error .auth-symbol { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); }
.nc-error .form-actions { justify-content: center; margin-top: 18px; }
.nc-steps { margin: 0 0 18px; padding-left: 20px; line-height: 1.7; }
.nc-steps li + li { margin-top: 10px; }
.nc-secret, .nc-recovery code { font-family: Consolas, Menlo, monospace; letter-spacing: .04em; word-break: break-all; }
.nc-recovery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 18px; margin: 0 0 14px; padding-left: 22px; font-size: 13px; }
/* Closed details.m keep their summary on desktop, so their form opens without JavaScript; the script still opens them. */
@media (min-width: 721px) {
  :not(td) > details.m:not([open]) > summary { display: list-item; }
  :not(td) > details.m:not([open]) > summary.btn { display: inline-flex; }
}
/* Guided tour (tour.js): a spotlight dims everything but the current section; the card sits next to it. */
.tour-spot { position: fixed; z-index: 60; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 3px var(--blue), 0 0 0 100vmax #0b0c1073; transition: top .3s cubic-bezier(.2, .8, .2, 1), left .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1); }
.tour-pop { position: fixed; z-index: 61; width: min(360px, calc(100vw - 32px)); padding: 18px 18px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: 0 18px 50px #0b0c1038; }
.tour-pop h2 { margin: 4px 0 6px; font-size: 17px; line-height: 1.3; }
.tour-pop p { margin: 0; color: var(--muted); line-height: 1.55; }
.tour-pop .tour-count { color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; }
.tour-nav span { display: flex; gap: 8px; }
.tour-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-dock { top: auto; left: 16px; right: 16px; bottom: 16px; width: auto; max-width: 420px; margin: 0 auto; }
.tour-in { animation: tour-in .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tour-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media print { .tour-spot, .tour-pop { display: none !important; } }

/* Bloque 6: campos de contraseña con Mostrar/Ocultar */
.pw { display: flex; align-items: center; gap: 6px; }
.pw input { flex: 1 1 auto; min-width: 0; }
.pw button.link { flex: 0 0 auto; font-size: 13px; }
.auth-resend { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }