/* Direction: premium fintech — ivory paper, midnight navy ink, jade accent, champagne gold details */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f8f7f2;
  --surface: #ffffff;
  --surface-2: #ecece7;
  --border: #e3e0d4;
  --border-strong: #afb2ae;
  --ink: #17243a;
  --muted: #566176;
  --accent: #167f62;
  --accent-hover: #136c53;
  --accent-ink: #ffffff;
  --accent-text: #11694f;
  --accent-strong: #126c53;
  --accent-soft: #d8e6de;
  --accent-border: #92c1b1;
  --success: #1c9a76;
  --success-ink: #17243a;
  --success-soft: #deece3;
  --success-strong: #146f55;
  --warning: #d8b56d;
  --warning-ink: #17243a;
  --warning-soft: #f4efe2;
  --warning-strong: #79663d;
  --danger: #b4372f;
  --danger-ink: #ffffff;
  --danger-soft: #f0e0db;
  --danger-strong: #b4372f;
  --chart-1: #167f62;
  --chart-2: #0f94c0;
  --chart-3: #554699;
  --chart-4: #b85e8e;
  --chart-5: #863a00;
  --chart-6: #8b890b;

  --x-navy: #17243a;
  --x-gold: #d8b56d;
  --x-info: #2f5c9e;
  --x-on-photo: #f8f7f2;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius-card: 18px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 1px 2px rgba(23, 36, 58, 0.06), 0 10px 28px -14px rgba(23, 36, 58, 0.22);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #03120e;
  --surface: #1c2a26;
  --surface-2: #101e1a;
  --border: #263330;
  --border-strong: #4f5956;
  --ink: #f8f7f2;
  --muted: #969b97;
  --accent: #167f62;
  --accent-hover: #39927a;
  --accent-ink: #ffffff;
  --accent-text: #58a390;
  --accent-strong: #4a9b86;
  --accent-soft: #072a20;
  --accent-border: #0c4334;
  --success: #1c9a76;
  --success-ink: #ffffff;
  --success-soft: #093025;
  --success-strong: #2ea281;
  --warning: #d8b56d;
  --warning-ink: #ffffff;
  --warning-soft: #323623;
  --warning-strong: #d8b56d;
  --danger: #b4372f;
  --danger-ink: #ffffff;
  --danger-soft: #2a1a15;
  --danger-strong: #ca706a;
  --chart-1: #167f62;
  --chart-2: #0f94c0;
  --chart-3: #7e71c8;
  --chart-4: #b85e8e;
  --chart-5: #bd6532;
  --chart-6: #8b890b;
}

.side { background: var(--x-navy); color: var(--x-on-photo); }
.side .brand-sub { color: var(--x-gold); }
.mark { background: var(--x-gold); color: var(--x-navy); }
.navlink { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: 10px; font-size: .9rem; font-weight: 500; white-space: nowrap; color: color-mix(in srgb, var(--x-on-photo) 78%, transparent); transition: background .15s, color .15s; }
.navlink:hover { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); color: var(--x-on-photo); }
.navlink:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 2px; }
.navlink[aria-current="page"] { background: color-mix(in srgb, var(--x-gold) 20%, transparent); color: var(--x-gold); }

.auth-bg { background: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--x-gold) 22%, transparent), transparent 60%), radial-gradient(50rem 30rem at -10% 110%, color-mix(in srgb, var(--success) 30%, transparent), transparent 60%), var(--x-navy); color: var(--x-on-photo); }

.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: .65rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl a:not(.btn) { color: var(--accent-text); font-weight: 600; }
.tbl a:not(.btn):hover { text-decoration: underline; }

.st { --c: var(--muted); --p: 100%; display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .15rem .65rem; font-size: .75rem; font-weight: 700; white-space: nowrap; color: color-mix(in srgb, var(--c) var(--p), var(--ink)); background: color-mix(in srgb, var(--c) 15%, transparent); }
.st::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.st-ok { --c: var(--success); --p: 62%; }
.st-warn { --c: var(--warning); --p: 32%; }
.st-bad { --c: var(--danger); --p: 75%; }
.st-info { --c: var(--x-info); --p: 75%; }
.st-idle { --c: var(--muted); --p: 100%; }

.errbox, .okbox { border-radius: 10px; padding: .65rem .9rem; font-size: .875rem; font-weight: 500; }
.errbox { background: color-mix(in srgb, var(--danger) 12%, transparent); color: color-mix(in srgb, var(--danger) 78%, var(--ink)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.okbox { background: color-mix(in srgb, var(--success) 13%, transparent); color: color-mix(in srgb, var(--success) 60%, var(--ink)); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
.errbox:empty { display: none; }

.metric-ico { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); }
.metric-ico.gold { background: color-mix(in srgb, var(--x-gold) 30%, transparent); color: color-mix(in srgb, var(--x-gold) 30%, var(--ink)); }
.metric-ico.red { background: color-mix(in srgb, var(--danger) 12%, transparent); color: color-mix(in srgb, var(--danger) 78%, var(--ink)); }
.metric { transition: transform .2s; }
.metric:hover { transform: translateY(-2px); }

.bar { background: linear-gradient(180deg, var(--success), color-mix(in srgb, var(--success) 60%, var(--x-navy))); border-radius: 8px 8px 3px 3px; min-height: 2px; transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.8,.2,1) both; }
.bar.gold { background: linear-gradient(180deg, var(--x-gold), color-mix(in srgb, var(--x-gold) 70%, var(--x-navy))); }
@keyframes grow { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
html.reduced-motion .bar { animation: none; }

.meter { height: .6rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; display: flex; }
.meter > span { display: block; height: 100%; }
.seg-ok { background: var(--success); }
.seg-bad { background: var(--danger); }
.seg-idle { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.seg-gold { background: var(--x-gold); }

.page-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.dl dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.dl dd { margin: .1rem 0 .9rem; font-weight: 600; }