.brand { display: inline-flex; align-items: baseline; gap: .04em; text-decoration: none; color: var(--fm-ink); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1; }
.brand-mark { width: auto; height: .71em; flex: none; align-self: baseline; color: var(--fm-accent); }
.brand-inverse { color: #fff; }
.brand-inverse .brand-mark { color: #fff; }

.surface { background: var(--fm-surface); border: 1px solid var(--fm-line); border-radius: .875rem; overflow: hidden; }
.surface:has(.dropdown-menu) { overflow: visible; }
.surface-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--fm-line); }
.surface-title { font-size: 1rem; font-weight: 650; margin: 0; display: flex; align-items: center; gap: .5rem; letter-spacing: -.01em; }
.surface-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--fm-line); }
.toolbar-search { width: 100%; max-width: 16rem; }
@media (max-width: 575.98px) { .toolbar-search { max-width: none; } }
.sticky-summary { position: sticky; top: 5rem; }
.eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fm-muted); margin-bottom: .35rem; }
.step-number { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--fm-accent-soft); color: var(--fm-accent); font-size: .8rem; font-weight: 700; }
.cell-wide { max-width: 14rem; }
@media (min-width: 1600px) { .cell-wide { max-width: 22rem; } }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); margin: 0; }
.page-subtitle { color: var(--fm-muted); margin: .25rem 0 0; max-width: 60ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; font-weight: 550; color: var(--fm-muted); text-decoration: none; margin-bottom: .5rem; }
.back-link:hover { color: var(--fm-ink); }

.stat { background: var(--fm-surface); border: 1px solid var(--fm-line); border-radius: .875rem; padding: 1rem; height: 100%; }
.stat-label { font-size: .85rem; font-weight: 550; color: var(--fm-muted); }
.stat-value { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; margin: .4rem 0 .1rem; line-height: 1.15; }
.stat-detail { font-size: .8rem; color: var(--fm-muted); margin: 0; }
.stat-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; font-size: 1rem; flex-shrink: 0; }
.stat-icon-primary { background: var(--fm-accent-soft); color: var(--fm-accent); }
.stat-icon-warning { background: var(--fm-warn-soft); color: var(--fm-warn); }
.stat-icon-danger  { background: var(--fm-danger-soft); color: var(--fm-danger); }

.callout { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem 1rem; border-radius: .75rem; font-size: .925rem; }
.callout > .bi { flex-shrink: 0; margin-top: .1rem; }
.callout-warning { background: var(--fm-warn-soft); color: var(--fm-warn); }
.callout-warning a:not(.btn) { color: inherit; }
.callout-info { background: var(--fm-info-soft); color: var(--fm-info); }
.callout-info a:not(.btn) { color: inherit; }
.callout[hidden] { display: none; }

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--fm-muted); }
.empty-state .bi { font-size: 1.75rem; display: block; margin-bottom: .4rem; opacity: .7; }

.filter-pills { gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }

@media (max-width: 575.98px) { .filter-pills { flex-wrap: wrap; overflow-x: visible; } }
.filter-pills .nav-link { white-space: nowrap; padding: .4rem .8rem; font-weight: 550; font-size: .9rem; }
.filter-count { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 99px; background: var(--fm-surface-2); color: var(--fm-muted); font-size: .75rem; text-align: center; }
.nav-link.active .filter-count { background: rgba(255, 255, 255, .2); color: inherit; }

.filter-pills .nav-link { cursor: pointer; }
.filter-pills .btn-check:checked + .nav-link { color: var(--bs-nav-pills-link-active-color); background-color: var(--bs-nav-pills-link-active-bg); }
.filter-pills .btn-check:checked + .nav-link .filter-count { background: rgba(255, 255, 255, .2); color: inherit; }
.filter-pills .btn-check:focus-visible + .nav-link { box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); }
.d-contents { display: contents; }

tbody tr:has(.stretched-link-row[href]) { cursor: pointer; }

.choice-card { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--fm-line); border-radius: .75rem; background: var(--fm-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.choice-card:hover { border-color: var(--fm-muted); }
.choice-card:has(:checked) { border-color: var(--fm-accent); background: var(--fm-accent-soft); }
.choice-card .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.choice-card small { display: block; color: var(--fm-muted); margin-top: .15rem; }
.price-tag { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-top: .35rem; }
.price-tag small { display: inline; font-size: .85rem; font-weight: 500; }

.stepper { display: flex; list-style: none; padding: 0; margin: 0 0 1.75rem; counter-reset: step; }
.stepper-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; position: relative; font-size: .8rem; color: var(--fm-muted); text-align: center; }
.stepper-item:not(:last-child)::after { content: ""; position: absolute; top: .95rem; left: calc(50% + 1.15rem); right: calc(-50% + 1.15rem); height: 2px; background: var(--fm-line); transition: background-color .2s ease; }
.stepper-item.done:not(:last-child)::after { background: var(--fm-accent); }
.stepper-dot { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--fm-line); background: var(--fm-surface); font-weight: 700; font-size: .85rem; transition: all .2s ease; }
.stepper-check { display: none; }
.stepper-item.active { color: var(--fm-ink); font-weight: 600; }
.stepper-item.active .stepper-dot { border-color: var(--fm-accent); color: var(--fm-accent); }
.stepper-item.done .stepper-dot { background: var(--fm-accent); border-color: var(--fm-accent); color: var(--fm-accent-ink); }
.stepper-item.done .stepper-num { display: none; }
.stepper-item.done .stepper-check { display: block; }
@media (max-width: 575.98px) { .stepper:not(.stepper-compact) .stepper-label { display: none; } }
.stepper-compact { max-width: 26rem; margin-inline: auto; }

.wizard-step { min-width: 0; }
.wizard-legend { font-size: 1.1rem; font-weight: 650; margin-bottom: .75rem; }
.wizard-actions { display: flex; gap: .5rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--fm-line); }
.wizard-actions [hidden] { display: none !important; }
.help-accordion .accordion-button { font-size: .9rem; font-weight: 550; padding: .85rem 0; }
.help-accordion .accordion-body { padding: 0 0 1rem; color: var(--fm-muted); }

.line-items { display: grid; gap: .5rem; }
.line-item { display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; border: 1px solid var(--fm-line); border-radius: .75rem; background: var(--fm-surface-2); animation: line-in .2s ease-out; }
.line-total { min-width: 5.5rem; text-align: right; white-space: nowrap; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--fm-line); border-radius: .55rem; background: var(--fm-surface); }
.qty-stepper .form-control { width: 2.75rem; border: 0; text-align: center; padding: .25rem; background: transparent; -moz-appearance: textfield; }
.qty-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; }
@keyframes line-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 575.98px) {
  .line-item { flex-wrap: wrap; }
  .line-item > .min-w-0 { flex-basis: calc(100% - 3rem); }
  .line-total { margin-left: auto; }
}

.totals { display: grid; gap: .45rem; }
.totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.totals dt { font-weight: 500; color: var(--fm-muted); }
.totals dd { margin: 0; font-weight: 550; }
.totals-grand { padding-top: .6rem; border-top: 1px solid var(--fm-line); }
.totals-grand dt, .totals-grand dd { color: var(--fm-ink); font-size: 1.2rem; font-weight: 700; }
.totals-narrow { max-width: 20rem; }

.detail-list { display: grid; gap: .2rem; }
.detail-list dt { font-size: .8rem; font-weight: 550; color: var(--fm-muted); margin-top: .6rem; }
.detail-list dt:first-child { margin-top: 0; }
.detail-list dd { margin: 0; }
@media (min-width: 576px) {
  .detail-list-inline { grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: .5rem; }
  .detail-list-inline dt { margin: 0; }
}

.folio-display { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.4rem); font-weight: 700; letter-spacing: .06em; line-height: 1.1; }
.receipt-card { background: var(--fm-accent-soft); border-radius: 1rem; padding: 1.25rem; border: 1px solid transparent; }
.folio-input { letter-spacing: .12em; text-align: center; font-size: 1.4rem; }

.timeline { list-style: none; margin: 0; padding: 1rem 1rem 1rem 2.25rem; position: relative; }
.timeline li { position: relative; padding-bottom: 1rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -1.5rem; top: .35rem; width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--fm-warn); background: var(--fm-surface); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: calc(-1.5rem + 5px); top: 1.2rem; bottom: .1rem; width: 2px; background: var(--fm-line); }
.timeline li.done::before { background: var(--fm-accent); border-color: var(--fm-accent); }
.timeline li.muted::before { border-color: var(--fm-muted); }
.timeline strong { display: block; font-weight: 600; }
.timeline small { color: var(--fm-muted); }

.state-card { text-align: center; background: var(--fm-surface); border: 1px solid var(--fm-line); border-radius: 1rem; padding: 2rem 1.25rem; }
.hero-icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--fm-accent-soft); color: var(--fm-accent); font-size: 1.6rem; }
.hero-icon-success { background: var(--fm-accent-soft); color: var(--fm-accent); }
.hero-icon-muted { background: var(--fm-surface-2); color: var(--fm-muted); border: 1px solid var(--fm-line); }

.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--fm-accent-soft); color: var(--fm-accent); font-weight: 700; font-size: .8rem; }

.csd-banner { align-items: center; flex-wrap: wrap; }
.csd-banner > .bi { margin-top: 0; }
.csd-banner > div { flex: 1 1 20rem; min-width: 0; }

.usage .progress { --bs-progress-height: .6rem; }
.usage-count { font-size: .95rem; }
.usage-count strong { font-size: 1.35rem; letter-spacing: -.02em; }
.usage-left { font-size: .85rem; font-weight: 600; color: var(--fm-accent); white-space: nowrap; }
.usage-low .progress-bar { background-color: var(--fm-warn); }
.usage-low .usage-left { color: var(--fm-warn); }
.usage-over .progress-bar { background-color: var(--fm-danger); }
.usage-over .usage-left { color: var(--fm-danger); }
.callout-danger { background: var(--fm-danger-soft); color: var(--fm-danger); }

:root, [data-bs-theme="light"] {
  --chart-1: #008f7c; --chart-2: #2a78d6; --chart-3: #eb6834;
  --chart-muted: #a6b5b1; --chart-grid: #e6eeec; --chart-surface: #ffffff;
}
[data-bs-theme="dark"] {
  --chart-1: #25a090; --chart-2: #3987e5; --chart-3: #d95926;
  --chart-muted: #557069; --chart-grid: #223834; --chart-surface: #152724;
}
.chart { position: relative; }
.chart-canvas { width: 100%; min-height: 1px; }
.chart-canvas svg { display: block; overflow: visible; }
.chart-tick { font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart-label { font-size: 13px; fill: var(--fm-ink); }
.chart-value { font-size: 13px; font-weight: 600; fill: var(--fm-ink); font-variant-numeric: tabular-nums; }
.chart-hit { cursor: default; outline: none; }
.chart-hit:focus-visible { outline: 2px solid var(--fm-accent); outline-offset: 2px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--fm-muted); margin-bottom: .75rem; }
.chart-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.chart-legend-key { display: inline-block; flex-shrink: 0; }
.chart-legend-box { width: .7rem; height: .7rem; border-radius: 3px; }
.chart-legend-line { width: 1rem; height: 2px; border-radius: 2px; }
.chart-tooltip { position: absolute; z-index: 5; pointer-events: none; min-width: 10rem; padding: .55rem .7rem; border-radius: .6rem;
  background: var(--fm-surface); border: 1px solid var(--fm-line); box-shadow: 0 8px 24px -12px rgba(18, 48, 44, .35); font-size: .8rem; }
.chart-tooltip-title { color: var(--fm-muted); margin-bottom: .3rem; }
.chart-tooltip-row { display: flex; align-items: center; gap: .45rem; line-height: 1.6; }
.chart-tooltip-row strong { font-variant-numeric: tabular-nums; }
.chart-tooltip-row span:last-child { color: var(--fm-muted); }
.chart-tooltip-row.is-total { border-top: 1px solid var(--fm-line); margin-top: .25rem; padding-top: .25rem; }
.chart-tooltip-key { width: .8rem; height: 2px; border-radius: 2px; flex-shrink: 0; }
.chart-table { margin-top: .75rem; font-size: .85rem; }
.chart-table summary { color: var(--fm-muted); cursor: pointer; width: fit-content; }
.chart-table table { margin-top: .5rem; }

.metric-list { display: grid; grid-template-columns: 1fr 1fr; }
.metric-list > div { padding: 1rem; border-bottom: 1px solid var(--fm-line); }
.metric-list > div:nth-child(odd) { border-right: 1px solid var(--fm-line); }
.metric-list > div:nth-last-child(-n+2) { border-bottom: 0; }
.metric-list dt { font-size: .8rem; font-weight: 550; color: var(--fm-muted); }
.metric-list dd { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin: .2rem 0 0; }
.metric-list small { color: var(--fm-muted); font-size: .75rem; }

.modal { --bs-modal-bg: var(--fm-surface); --bs-modal-border-color: var(--fm-line); --bs-modal-border-radius: 1rem; --bs-modal-header-border-color: var(--fm-line); --bs-modal-footer-border-color: var(--fm-line); }
.modal-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.modal-list li { display: flex; gap: .55rem; align-items: flex-start; }
.modal-list .bi { margin-top: .15rem; flex-shrink: 0; }
.modal-list .bi-x-circle { color: var(--fm-danger); }
.modal-list .bi-check-circle { color: var(--fm-accent); }
.modal-list .bi-info-circle, .modal-list .bi-key { color: var(--fm-muted); }
.form-narrow { max-width: 40rem; }
.toolbar-search-wide { max-width: 44rem; }
.toolbar-search-wide .form-select { max-width: 14rem; }
@media (max-width: 575.98px) { .toolbar-search-wide { flex-wrap: wrap; } .toolbar-search-wide .form-select { max-width: none; } }
.chart-legend-dash { width: 1rem; height: 0; border-top: 2px dashed; background: none !important; }

:root, [data-bs-theme="light"] { --chart-heat-low: #d7efe9; }
[data-bs-theme="dark"] { --chart-heat-low: #1d3a35; }
.heat-legend { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--fm-muted); }
.heat-legend-bar { width: 6rem; height: .5rem; border-radius: 99px; background: linear-gradient(90deg, var(--chart-heat-low), var(--chart-1)); }

.analytics-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.analytics-filters > div { min-width: 12rem; }
@media (max-width: 575.98px) { .analytics-filters > div { flex: 1 1 100%; } }
.plan-summary { padding: 1rem; border: 1px solid var(--fm-line); border-radius: .875rem; background: var(--fm-surface-2); }

[hidden][class] { display: none !important; }

.legal-doc { max-width: 52rem; margin-inline: auto; padding-block: 2.5rem 3rem; line-height: 1.65; }
.legal-doc h1 { margin-bottom: .25rem; }
.legal-doc h2 { font-size: 1.2rem; margin-top: 2.25rem; margin-bottom: .75rem; }
.legal-doc h3 { font-size: 1rem; margin-top: 1.5rem; }
.legal-doc li { margin-bottom: .35rem; }
.legal-doc .legal-meta { color: var(--fm-muted); font-size: .9rem; }
.legal-doc .legal-toc { background: var(--fm-surface-2); border: 1px solid var(--fm-line); border-radius: .875rem; padding: 1rem 1.25rem; }
.legal-doc .legal-toc ol { margin-bottom: 0; columns: 2 16rem; }

.theme-switch { min-width: 15rem; }
.theme-switch .btn { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--bs-tertiary-bg); --bs-btn-active-border-color: var(--bs-border-color); }
.theme-switch .btn.active, .theme-switch .btn.active:hover { background: var(--fm-accent); border-color: var(--fm-accent); color: var(--fm-accent-ink); }