:root {
    color-scheme: light;
    --canvas: #f4f7f5;
    --surface: #ffffff;
    --surface-raised: #fbfcfb;
    --ink: #172c2a;
    --muted-strong: #536966;
    --muted: #748784;
    --border: #dce5e2;
    --brand: #1e756d;
    --brand-dark: #145850;
    --brand-strong: #1e756d;
    --brand-strong-hover: #145850;
    --brand-soft: #e4f2ef;
    --accent: #ef8f3c;
    --accent-soft: #fff0e2;
    --positive: #187350;
    --positive-soft: #e5f4ed;
    --negative: #a13d3d;
    --negative-soft: #f9e9e8;
    --warning: #875910;
    --warning-soft: #fff5d9;
    --on-brand: #ffffff;
    --border-strong: #b9cbc7;
    --control-border: #cbd8d5;
    --danger-border: #efc7c5;
    --warning-border: #d79b2f;
    --warning-ink: #6c490f;
    --track: #e8eeec;
    --switch-track: #bdcac7;
    --surface-warm: #f5f3ea;
    --surface-blue: #e9eef6;
    --blue-ink: #536f9a;
    --danger-copy: #7f5250;
    --footer-background: #172c2a;
    --persistent-background: rgba(13, 33, 30, .96);
    --body-glow: rgba(30, 117, 109, .07);
    --focus-ring: rgba(30, 117, 109, .18);
    --shadow-sm: 0 1px 2px rgba(18, 44, 40, .05), 0 5px 16px rgba(18, 44, 40, .045);
    --shadow-lg: 0 20px 60px rgba(18, 44, 40, .18);
    font-family: Inter, Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-synthesis: none;
}

:root[data-color-scheme="dark"] {
    color-scheme: dark;
    --canvas: #0c1615;
    --surface: #132220;
    --surface-raised: #182a27;
    --ink: #edf7f4;
    --muted-strong: #b8ccc8;
    --muted: #91a9a4;
    --border: #2b433f;
    --brand: #58c0b1;
    --brand-dark: #81d9cc;
    --brand-strong: #286f68;
    --brand-strong-hover: #235f59;
    --brand-soft: #1c3b36;
    --accent: #f2a15a;
    --accent-soft: #3b2b1e;
    --positive: #76d5ab;
    --positive-soft: #18382d;
    --negative: #ffaaa6;
    --negative-soft: #3d2525;
    --warning: #efc46e;
    --warning-soft: #392f1d;
    --border-strong: #405f59;
    --control-border: #405f59;
    --danger-border: #70413f;
    --warning-border: #a87930;
    --warning-ink: #f0c87d;
    --track: #263b37;
    --switch-track: #4a605c;
    --surface-warm: #2a2a22;
    --surface-blue: #222d3d;
    --blue-ink: #afc6ed;
    --danger-copy: #e4aaa7;
    --footer-background: #081211;
    --persistent-background: rgba(6, 16, 15, .97);
    --body-glow: rgba(88, 192, 177, .1);
    --focus-ring: rgba(88, 192, 177, .28);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .18);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, .52);
}

* { box-sizing: border-box; }

html {
    min-width: 320px;
    overflow-x: clip;
    background: var(--canvas);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: clip;
    background: radial-gradient(circle at 4% 4%, var(--body-glow), transparent 28rem), var(--canvas);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
a { color: var(--brand-dark); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; }
h1 { margin-bottom: .65rem; font-size: clamp(1.85rem, 3.5vw, 2.7rem); }
h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h3 { font-size: 1rem; }
h1:focus { outline: none; }

.eyebrow {
    display: block;
    margin-bottom: .55rem;
    color: var(--brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
}

.page-heading p, .section-heading p, .muted { color: var(--muted-strong); }
.page-heading p { max-width: 720px; margin: 0; }

.section-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading h2, .section-heading h3, .section-heading p { margin-bottom: .25rem; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 42px;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 750;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button-primary { color: var(--on-brand); background: var(--brand-strong); box-shadow: 0 7px 16px rgba(30, 117, 109, .18); }
.button-primary:hover:not(:disabled) { color: var(--on-brand); background: var(--brand-strong-hover); }
.button-secondary { border-color: var(--border); color: var(--ink); background: var(--surface); }
.button-secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-raised); }
.button-danger { border-color: var(--danger-border); color: var(--negative); background: var(--negative-soft); }
.button-small { min-height: 36px; padding: .48rem .8rem; border-radius: 9px; font-size: .8rem; }
.button-icon { width: 36px; height: 36px; min-height: 36px; padding: 0; }

.card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.card-body { padding: 1.25rem; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.metric-card {
    position: relative;
    min-height: 134px;
    padding: 1rem;
    overflow: hidden;
}

.metric-card::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -28px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--brand-soft);
    opacity: .7;
}

.metric-label { display: block; margin-bottom: .65rem; color: var(--muted-strong); font-size: .78rem; font-weight: 700; }
.metric-value { position: relative; z-index: 1; display: block; font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -.04em; }
.metric-note { position: relative; z-index: 1; display: block; margin-top: .45rem; color: var(--muted); font-size: .72rem; }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.warning { color: var(--warning); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    font-size: .7rem;
    font-weight: 750;
}

.pill-positive { color: var(--positive); background: var(--positive-soft); }
.pill-negative { color: var(--negative); background: var(--negative-soft); }
.pill-warning { color: var(--warning); background: var(--warning-soft); }

.data-list { margin: 0; padding: 0; list-style: none; }
.data-row { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .72rem 0; border-bottom: 1px solid var(--border); }
.data-row:last-child { border-bottom: 0; }
.data-row-main { min-width: 0; flex: 1; }
.data-row-main strong, .data-row-main small { display: block; }
.data-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-row-main small { margin-top: .18rem; color: var(--muted); font-size: .76rem; }
.data-row-value { text-align: right; font-weight: 800; white-space: nowrap; }

.empty-state {
    padding: 2rem 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    color: var(--muted-strong);
    background: var(--surface-raised);
    text-align: center;
}

.empty-state strong { display: block; margin-bottom: .3rem; color: var(--ink); }

.callout { padding: 1rem 1.1rem; border-left: 4px solid var(--brand); border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); }
.callout-warning { border-left-color: var(--warning-border); color: var(--warning-ink); background: var(--warning-soft); }

.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--track); }
.progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #39a491); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field-wide { grid-column: 1 / -1; }
.field label, .field-label { color: var(--muted-strong); font-size: .76rem; font-weight: 750; }

.input, .field input, .field select, .field textarea {
    width: 100%;
    min-height: 44px;
    padding: .65rem .75rem;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    outline: none;
    color: var(--ink);
    background: var(--surface);
}

.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.field input:disabled, .field select:disabled, .field textarea:disabled { color: var(--muted); background: var(--surface-raised); opacity: 1; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .82; }
.field-help { color: var(--muted); font-size: .7rem; }

.checkbox-row { display: flex; align-items: start; gap: .55rem; color: var(--muted-strong); font-size: .84rem; }
.checkbox-row input { width: 18px; height: 18px; margin-top: .12rem; accent-color: var(--brand); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(13, 33, 30, .62); backdrop-filter: blur(3px); }
.modal-card { width: min(620px, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-header, .modal-body, .modal-actions { padding: 1.15rem 1.3rem; }
.modal-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); }
.modal-header h2, .modal-header p { margin-bottom: .25rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .65rem; border-top: 1px solid var(--border); background: var(--surface-raised); }

.valid.modified:not([type=checkbox]) { border-color: var(--positive); }
.invalid { border-color: var(--negative) !important; }
.validation-message { color: var(--negative); font-size: .72rem; }

.legal-document { max-width: 820px; margin-inline: auto; }
.legal-document .card-body { padding: clamp(1.25rem, 4vw, 2.5rem); }
.legal-document h2 { margin-top: 2rem; font-size: 1.08rem; }
.legal-document p, .legal-document li { color: var(--muted-strong); }
.legal-meta { padding-bottom: 1rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .8rem; }

@media (max-width: 900px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-4, .span-5, .span-7, .span-8 { grid-column: span 6; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    .page-heading, .section-heading { align-items: stretch; flex-direction: column; }
    .metric-grid, .form-grid { grid-template-columns: 1fr; }
    .card-grid > [class*="span-"] { grid-column: 1 / -1; }
    .metric-card { min-height: 112px; }
    .field-wide { grid-column: auto; }
    .data-row { flex-wrap: wrap; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions .button { width: 100%; }
}