/* Instituto Lotus Prosperidade v3: tokens e componentes em um unico arquivo. */
:root {
  --primary: #A9532F;
  --primary-dark: #8C4123;
  --on-primary: #FFF8F2;
  --primary-container: #F6E1D6;
  --on-primary-container: #6B2E15;
  --secondary: #7A4220;
  --tertiary: #44432A;
  --on-tertiary: #F5EBDD;
  --gold: #C9A35E;
  --gold-light: #E6CB8F;
  --gold-deep: #86632A;
  --gold-container: #F5EAD3;
  --on-gold: #15100C;
  --accent-gold: #B8925A;
  --surface: #FCF5EF;
  --surface-bright: #FFFDFB;
  --surface-variant: #F5E6D9;
  --surface-deep: #EFD9C6;
  --on-surface: #3A2A22;
  --on-surface-emphasis: #2B1A12;
  --on-surface-variant: #6E5A4E;
  --outline: #E8D8C8;
  --outline-strong: #9F8673;
  --neutral: #D9C2AC;
  --inverse-surface: #15100C;
  --inverse-surface-variant: #231A14;
  --inverse-surface-high: #2E231B;
  --on-inverse-surface: #F3E9DC;
  --on-inverse-surface-variant: #BFAF9C;
  --neutral-dark: #3A2E24;
  --outline-strong-dark: #80705F;
  --success: #5E6B2F;
  --success-container: #E8ECD8;
  --warning: #B7791F;
  --warning-container: #F8EAD0;
  --on-warning-container: #7A4E0E;
  --error: #9E1B32;
  --error-container: #F6DEE0;
  --info: #3F5B70;
  --info-container: #E2E9EF;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --gutter: 24px;
  --margin: 32px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-e1: 0 1px 2px rgba(58,42,34,.06), 0 1px 1px rgba(58,42,34,.04);
  --shadow-e2: 0 8px 24px -8px rgba(58,42,34,.14);
  --shadow-e3: 0 24px 56px -16px rgba(43,26,18,.28);
  --focus-ring: 0 0 0 2px #FFFDFB, 0 0 0 4px #A9532F;
  --focus-ring-dark: 0 0 0 2px #15100C, 0 0 0 4px #C9A35E;
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --gold-metallic: linear-gradient(115deg, #86632A 0%, #C9A35E 30%, #E6CB8F 50%, #C9A35E 70%, #86632A 100%);
}

/* Estilos de texto */
.ds-display-xl { font-family: var(--font-sans); font-size: 72px; line-height: 1.0; font-weight: 600; letter-spacing: -0.035em; }
.ds-headline-lg { font-family: var(--font-sans); font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; }
.ds-headline-md { font-family: var(--font-sans); font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.ds-headline-sm { font-family: var(--font-sans); font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.ds-title-md { font-family: var(--font-sans); font-size: 17px; line-height: 1.35; font-weight: 600; }
.ds-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.ds-body-md { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.ds-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.ds-label-lg { font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 600; }
.ds-label-md { font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 600; }
.ds-label-sm { font-family: var(--font-sans); font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.01em; }
.ds-numeric-xl { font-family: var(--font-sans); font-size: 40px; line-height: 1.0; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ds-numeric-md { font-family: var(--font-sans); font-size: 22px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-accent-statement { font-family: var(--font-serif); font-size: 76px; line-height: 1.04; font-weight: 500; letter-spacing: -0.01em; font-style: italic; }
.ds-accent-md { font-family: var(--font-serif); font-size: 28px; line-height: 1.25; font-weight: 500; font-style: italic; }
@media (max-width: 767px) { .ds-display-xl { font-size: 44px; } .ds-headline-lg { font-size: 34px; } .ds-headline-md { font-size: 26px; } .ds-accent-statement { font-size: 44px; } .ds-numeric-xl { font-size: 34px; } }

/* Instituto Lotus Prosperidade: componentes. Cores, raios, sombras e fontes vêm de tokens.css (gerado de tokens.json). */
:root { color-scheme: light; --page-margin: 16px; --gold-metallic: linear-gradient(115deg, #86632A 0%, #C9A35E 30%, #E6CB8F 50%, #C9A35E 70%, #86632A 100%); }
@media (min-width: 768px) { :root { --page-margin: 32px; } }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--on-surface); font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; color: var(--on-surface-emphasis); text-wrap: balance; }
p, li, blockquote, figcaption, label, .card, .option-card, .alert, .toast, .text-box { text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dark :focus-visible { outline-color: var(--gold-light); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--page-margin); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--on-surface-variant); }
.dark { background: var(--inverse-surface); color: var(--on-inverse-surface); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--on-inverse-surface); }
.dark .muted { color: var(--on-inverse-surface-variant); }

/* Type scale */
.t-display { font-size: clamp(42px, 5.5vw + 14px, 72px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; }
.t-h1 { font-size: clamp(32px, 2.4vw + 22px, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.t-h2 { font-size: clamp(24px, 1vw + 20px, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.t-h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.t-title { font-size: 17px; line-height: 1.35; }
.t-body-lg { font-size: 18px; }
.t-sm { font-size: 14px; line-height: 1.5; }
.t-xs { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; }
.t-num-xl { font-size: clamp(34px, 1vw + 28px, 40px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--on-surface-emphasis); }
.t-num-md { font-size: 22px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--on-surface-emphasis); }
.dark .t-num-xl, .dark .t-num-md, .card-dark .t-num-xl, .card-dark .t-num-md { color: var(--on-inverse-surface); }
.t-accent { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 1vw + 20px, 30px); line-height: 1.25; }
.t-statement { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(44px, 5vw + 18px, 80px); line-height: 1.04; letter-spacing: -0.01em; background: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }

/* ===== Icons ===== */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-16 { width: 16px; height: 16px; }
.i-24 { width: 24px; height: 24px; }
.i-28 { width: 28px; height: 28px; }

/* ===== Buttons ===== */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 22px; border-radius: var(--radius-full); border: 1px solid transparent; font: 600 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s; position: relative; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dark .btn:focus-visible { box-shadow: var(--focus-ring-dark); }
.btn-sm { --h: 36px; padding: 0 14px; font-size: 14px; }
.btn-sm .i { width: 16px; height: 16px; }
.btn-lg { --h: 56px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--inverse-surface); color: var(--on-inverse-surface); }
.btn-secondary:hover { background: var(--inverse-surface-high); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { background: var(--surface-bright); border-color: var(--outline-strong); color: var(--on-surface-emphasis); }
.btn-outline:hover { border-color: var(--on-surface-variant); }
.btn-outline-gold { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn-outline-gold:hover { background: rgba(201,163,94,.1); }
.btn-tonal { background: var(--gold-container); color: var(--gold-deep); }
.btn-tonal:hover { background: #EEDDBB; }
.btn-ghost { background: transparent; color: var(--on-surface-emphasis); }
.btn-ghost:hover { background: var(--surface-variant); }
.dark .btn-ghost { color: var(--on-inverse-surface); }
.dark .btn-ghost:hover { background: var(--inverse-surface-high); }
.btn-link { background: none; padding: 0; height: auto; color: var(--primary); border-radius: 4px; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn-icon.btn-sm { width: 36px; height: 36px; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--on-primary); border-right-color: transparent; animation: spin .8s linear infinite; }
.btn-gold.is-loading::after { border-color: var(--on-gold); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ===== Badges & chips ===== */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font: 600 12px/1 var(--font-sans); letter-spacing: .01em; white-space: nowrap; background: var(--surface-variant); color: var(--on-surface); }
.badge .i { width: 14px; height: 14px; }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-container); color: var(--success); }
.badge-warning { background: var(--warning-container); color: var(--on-warning-container); }
.badge-error { background: var(--error-container); color: var(--error); }
.badge-info { background: var(--info-container); color: var(--info); }
.badge-gold { background: var(--gold-container); color: var(--gold-deep); }
.badge-primary { background: var(--primary-container); color: var(--on-primary-container); }
.badge-dark { background: var(--inverse-surface); color: var(--gold); }
.dark .badge-outline, .badge-outline { background: transparent; border: 1px solid rgba(201,163,94,.4); color: var(--gold); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--outline); background: var(--surface-bright); color: var(--on-surface); font: 400 14px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; }
.chip:hover { border-color: var(--neutral); }
.chip[aria-pressed="true"] { background: var(--inverse-surface); border-color: var(--inverse-surface); color: var(--on-inverse-surface); font-weight: 600; }
.chip .i { width: 16px; height: 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Forms ===== */
.field { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; min-width: 0; }
.label { font: 600 14px/1.2 var(--font-sans); color: var(--on-surface-emphasis); display: flex; justify-content: space-between; gap: 8px; }
.label small { font-weight: 400; color: var(--on-surface-variant); }
.help { font-size: 13px; line-height: 1.4; color: var(--on-surface-variant); display: flex; gap: 6px; align-items: flex-start; }
.help .i { width: 16px; height: 16px; margin-top: 1px; }
.control { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; background: var(--surface-bright); border: 1px solid var(--outline-strong); border-radius: var(--radius-md); color: var(--on-surface-variant); transition: border-color .18s, box-shadow .18s; }
.control:hover { border-color: var(--on-surface-variant); }
.control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.control input, .control select, .control textarea { flex: 1 1 0; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--on-surface-emphasis); font-size: 16px; padding: 14px 0; }
.control input::placeholder, .control textarea::placeholder { color: #9C8778; }
.control select { appearance: none; cursor: pointer; }
.control textarea { resize: vertical; min-height: 96px; }
.control .prefix { font-weight: 600; color: var(--on-surface-variant); }
.control.is-textarea { align-items: flex-start; }
.field.has-error .control { border-color: var(--error); }
.field.has-error .control:focus-within { box-shadow: 0 0 0 1px var(--error); }
.field.has-error .help { color: var(--error); }
.field.is-success .control { border-color: var(--success); }
.field.is-disabled .control { background: var(--surface-variant); opacity: .7; }
.dark .label { color: var(--on-inverse-surface); }
.dark .help { color: var(--on-inverse-surface-variant); }
.dark .control { background: var(--inverse-surface-high); border-color: var(--outline-strong-dark); color: var(--on-inverse-surface-variant); }
.dark .control:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.dark .control input, .dark .control select, .dark .control textarea { color: var(--on-inverse-surface); }
.dark .control input::placeholder { color: #8D7D6C; }
.dark .control select option { color: #2B1A12; }

.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.4; }
.check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--outline-strong); border-radius: var(--radius-xs); background: var(--surface-bright) center/14px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background-color: var(--primary); border-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF8F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--surface-bright); }
.check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.check input[type="radio"]:checked:focus-visible { box-shadow: inset 0 0 0 4px var(--surface-bright), var(--focus-ring); }
.dark .check input { border-color: var(--outline-strong-dark); background-color: var(--inverse-surface-high); }
.dark .check input:checked { background-color: var(--gold); border-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315100C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.switch input { appearance: none; flex: none; width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--outline-strong); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::before { transform: translateX(18px); }
.switch input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.range { width: 100%; accent-color: var(--primary); height: 24px; }
.option-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1.5px solid var(--outline); border-radius: var(--radius-lg); background: var(--surface-bright); cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.option-card:hover { border-color: var(--neutral); box-shadow: var(--shadow-e1); }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card .oc-mark { margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--outline-strong); display: grid; place-items: center; color: transparent; }
.option-card .oc-mark .i { width: 14px; height: 14px; stroke-width: 3; }
.option-card:has(input:checked) { border-color: var(--primary); background: var(--primary-container); }
.option-card:has(input:checked) .oc-mark { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.option-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.option-card strong { display: block; color: var(--on-surface-emphasis); font-size: 15px; line-height: 1.3; }
.option-card span.t-sm { color: var(--on-surface-variant); }

/* ===== Cards ===== */
.card { background: var(--surface-bright); border: 1px solid var(--outline); border-radius: var(--radius-lg); padding: 24px; min-width: 0; }
.card-raised { box-shadow: var(--shadow-e2); border-color: transparent; }
.card-tinted { background: var(--gold-container); border-color: transparent; }
.card-terra { background: var(--primary-container); border-color: transparent; }
.card-dark, .dark .card { background: var(--inverse-surface-variant); border-color: var(--neutral-dark); color: var(--on-inverse-surface); }
.card-dark h3, .card-dark h4 { color: var(--on-inverse-surface); }
.card-dark .muted { color: var(--on-inverse-surface-variant); }
.card-hover { transition: box-shadow .2s, transform .2s; }
.card-hover:hover { box-shadow: var(--shadow-e2); transform: translateY(-2px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.icon-tile { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--gold-container); color: var(--gold-deep); }
.icon-tile.lg { width: 56px; height: 56px; border-radius: var(--radius-md); }
.icon-tile.lg .i { width: 28px; height: 28px; }
.icon-tile.terra { background: var(--primary-container); color: var(--on-primary-container); }
.icon-tile.olive { background: var(--success-container); color: var(--success); }
.icon-tile.info { background: var(--info-container); color: var(--info); }
.icon-tile.dark, .card-dark .icon-tile, .dark .icon-tile { background: var(--inverse-surface-high); color: var(--gold); }
.card-tinted .icon-tile { background: var(--surface-bright); }
.trend { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1 var(--font-sans); color: var(--success); font-variant-numeric: tabular-nums; }
.trend .i { width: 16px; height: 16px; }
.dark .trend, .card-dark .trend { color: #B7C48A; }

.progress { height: 8px; border-radius: var(--radius-full); background: var(--surface-deep); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.card-dark .progress, .dark .progress { background: var(--inverse-surface-high); }
.card-dark .progress > span, .dark .progress > span { background: var(--gold); }
.ring { --v: 68; --c: var(--primary); --t: var(--surface-deep); width: 96px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--t) 0); display: grid; place-items: center; flex: none; }
.ring::before { content: ""; grid-area: 1/1; width: calc(100% - 16px); aspect-ratio: 1; border-radius: 50%; background: var(--ring-bg, var(--surface-bright)); }
.ring > span { grid-area: 1/1; font: 600 20px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--on-surface-emphasis); }
.card-dark .ring, .dark .ring { --c: var(--gold); --t: var(--inverse-surface-high); --ring-bg: var(--inverse-surface-variant); }
.card-dark .ring > span, .dark .ring > span { color: var(--on-inverse-surface); }

.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 14px/1 var(--font-sans); color: var(--on-primary); background: linear-gradient(150deg, #E6B996, #A9532F); }
.avatar.a2 { background: linear-gradient(150deg, #D9C79B, #86632A); }
.avatar.a3 { background: linear-gradient(150deg, #B9B98E, #44432A); }
.avatar.a4 { background: linear-gradient(150deg, #8E7766, #3A2A22); }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { width: 36px; height: 36px; font-size: 12px; box-shadow: 0 0 0 2px var(--stack-bg, var(--surface-bright)); }
.avatar-stack .avatar + .avatar { margin-left: -10px; }

.date-block { width: 56px; flex: none; border-radius: var(--radius-md); overflow: hidden; text-align: center; border: 1px solid var(--outline); background: var(--surface-bright); }
.date-block b { display: block; background: var(--primary); color: var(--on-primary); font: 600 11px/1 var(--font-sans); padding: 5px 0; letter-spacing: .04em; }
.date-block span { display: block; font: 600 22px/1 var(--font-sans); padding: 8px 0 9px; color: var(--on-surface-emphasis); font-variant-numeric: tabular-nums; }
.card-dark .date-block { border-color: var(--neutral-dark); background: var(--inverse-surface-high); }
.card-dark .date-block b { background: var(--gold); color: var(--on-gold); }
.card-dark .date-block span { color: var(--on-inverse-surface); }

.stars { display: flex; gap: 2px; color: var(--gold); }
.stars .i { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* ===== Navigation ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--outline); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 0; background: none; cursor: pointer; font: 600 15px/1 var(--font-sans); color: var(--on-surface-variant); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--on-surface-emphasis); }
.tab[aria-selected="true"] { color: var(--on-surface-emphasis); border-bottom-color: var(--primary); }
.tab .count { font-size: 12px; background: var(--surface-variant); padding: 3px 7px; border-radius: var(--radius-full); }
.tab:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--radius-full); background: var(--surface-variant); max-width: 100%; }
.segmented button { height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer; font: 600 14px/1 var(--font-sans); color: var(--on-surface-variant); white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s; }
.segmented button[aria-pressed="true"] { background: var(--surface-bright); color: var(--on-surface-emphasis); box-shadow: var(--shadow-e1); }
.dark .segmented { background: var(--inverse-surface-high); }
.dark .segmented button { color: var(--on-inverse-surface-variant); }
.dark .segmented button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--on-surface-variant); list-style: none; padding: 0; margin: 0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--on-surface-emphasis); }
.breadcrumb [aria-current] { color: var(--on-surface-emphasis); font-weight: 600; }
.breadcrumb .i { width: 14px; height: 14px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination button { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--outline); background: var(--surface-bright); cursor: pointer; font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--on-surface); display: grid; place-items: center; }
.pagination button[aria-current="page"] { background: var(--inverse-surface); color: var(--on-inverse-surface); border-color: var(--inverse-surface); }
.stepper { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.stepper li { display: flex; gap: 12px; align-items: flex-start; }
.stepper .dot { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--font-sans); border: 1.5px solid var(--outline-strong); color: var(--on-surface-variant); background: var(--surface-bright); }
.stepper .dot .i { width: 16px; height: 16px; stroke-width: 2.5; }
.stepper .done .dot { background: var(--success); border-color: var(--success); color: #fff; }
.stepper .current .dot { border-color: var(--primary); color: var(--primary); box-shadow: var(--focus-ring); }
.stepper strong { display: block; font-size: 15px; color: var(--on-surface-emphasis); line-height: 1.3; }
.stepper span.t-sm { color: var(--on-surface-variant); }
@media (min-width: 768px) {
  .stepper.horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .stepper.horizontal li { flex-direction: column; gap: 10px; position: relative; padding-right: 16px; }
  .stepper.horizontal li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 44px; right: 12px; height: 2px; background: var(--outline); border-radius: 2px; }
  .stepper.horizontal li.done::after { background: var(--success); }
}

.dropdown { position: relative; display: inline-block; }
.dropdown summary { list-style: none; }
.dropdown summary::-webkit-details-marker { display: none; }
.menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 6px; background: var(--surface-bright); border: 1px solid var(--outline); border-radius: var(--radius-md); box-shadow: var(--shadow-e3); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: var(--radius-sm); text-decoration: none; font-size: 14px; color: var(--on-surface); cursor: pointer; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--surface-variant); }
.menu hr { border: 0; border-top: 1px solid var(--outline); margin: 6px 0; }
.menu .danger { color: var(--error); }

/* ===== Feedback ===== */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid; font-size: 14px; line-height: 1.5; color: var(--on-surface); }
.alert .i { margin-top: 1px; }
.alert strong { display: block; color: var(--on-surface-emphasis); font-size: 15px; margin-bottom: 2px; }
.alert-info { background: var(--info-container); border-color: #C9D5E0; }
.alert-info > .i { color: var(--info); }
.alert-success { background: var(--success-container); border-color: #D2D9B6; }
.alert-success > .i { color: var(--success); }
.alert-warning { background: var(--warning-container); border-color: #EFD6A6; }
.alert-warning > .i { color: var(--warning); }
.alert-error { background: var(--error-container); border-color: #ECC1C6; }
.alert-error > .i { color: var(--error); }
.alert .close { margin-left: auto; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--radius-md); background: var(--inverse-surface); color: var(--on-inverse-surface); box-shadow: var(--shadow-e3); font-size: 14px; max-width: 420px; }
.toast > .i { color: var(--gold); }
.toast .btn-link { color: var(--gold); margin-left: auto; font-size: 14px; }
.toast-region { position: fixed; z-index: 50; bottom: 16px; left: 16px; right: 16px; display: grid; justify-items: center; pointer-events: none; }
.toast-region .toast { pointer-events: auto; animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--inverse-surface); color: var(--on-inverse-surface); font: 600 12px/1.3 var(--font-sans); padding: 6px 10px; border-radius: var(--radius-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--inverse-surface); }
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip, .tooltip.is-static { opacity: 1; }
.skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-variant) 25%, var(--surface-deep) 50%, var(--surface-variant) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 32px 16px; }
.empty svg.illus { width: 120px; height: auto; color: var(--accent-gold); }

/* ===== Data ===== */
.table-wrap { overflow-x: auto; border: 1px solid var(--outline); border-radius: var(--radius-lg); background: var(--surface-bright); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.table th { text-align: left; font: 600 13px/1.2 var(--font-sans); color: var(--on-surface-variant); padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--outline); white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--outline); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FFF8F1; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .who { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--on-surface-emphasis); }
.list { list-style: none; padding: 0; margin: 0; display: grid; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--outline); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list strong { display: block; color: var(--on-surface-emphasis); font-size: 15px; line-height: 1.3; }
.card-dark .list li, .dark .list li { border-color: var(--neutral-dark); }
.card-dark .list strong, .dark .list strong { color: var(--on-inverse-surface); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.timeline li { position: relative; padding-left: 28px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-gold); background: var(--surface-bright); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: -18px; width: 2px; background: var(--outline); }
.timeline li.done::before { background: var(--accent-gold); }
.timeline strong { display: block; color: var(--on-surface-emphasis); font-size: 15px; }
.accordion { display: grid; gap: 10px; }
.accordion details { border: 1px solid var(--outline); border-radius: var(--radius-lg); background: var(--surface-bright); transition: box-shadow .2s; }
.accordion details[open] { box-shadow: var(--shadow-e1); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 600 16px/1.35 var(--font-sans); color: var(--on-surface-emphasis); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .i { transition: transform .2s; color: var(--on-surface-variant); }
.accordion details[open] summary .i { transform: rotate(45deg); }
.accordion summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
.accordion .body { padding: 0 20px 20px; color: var(--on-surface-variant); font-size: 15px; max-width: 70ch; }

/* ===== Modal ===== */
dialog.modal { border: 0; padding: 0; border-radius: var(--radius-xl); background: var(--surface-bright); color: var(--on-surface); box-shadow: var(--shadow-e3); width: min(480px, calc(100% - 32px)); }
dialog.modal::backdrop { background: rgba(21,16,12,.55); backdrop-filter: blur(3px); }
.modal-body { padding: 28px; display: grid; gap: 16px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }

/* ===== Layout helpers ===== */
.section { padding-block: 64px; }
@media (min-width: 768px) { .section { padding-block: 96px; } }
.section-head { display: grid; gap: 16px; margin-bottom: 40px; }
.section-head p { color: var(--on-surface-variant); max-width: 52ch; }
.dark .section-head p { color: var(--on-inverse-surface-variant); }
@media (min-width: 900px) { .section-head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 48px; } .section-head p { justify-self: end; } }
.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .grid { gap: 24px; } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stack { display: grid; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  html { scroll-behavior: auto; }
}