/* Audit-specific layouts on the CPG design system.
   Palette, type, radii, elevation and appearance come from vendor/cpg-theme.css. */
[hidden] { display: none !important; }
body { margin: 0; }
button, input { font: inherit; }
button, a, input { outline-offset: 3px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
svg { width: 1rem; height: 1rem; flex-shrink: 0; }
button svg, a svg { pointer-events: none; }
:focus-visible { outline: 2px solid hsl(var(--ring)); }
.content { width: 100%; max-width: var(--layout-content-max); margin-inline: auto; padding: 1.25rem var(--island-gap) 2rem; }
.app-sidebar .nav-item { width: 100%; text-align: left; border: 0; background: transparent; min-height: 2.25rem; }
.app-sidebar .nav-item.active { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-weight: 600; }
.app-sidebar .nav-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
#source-nav { display: flex; flex-direction: column; gap: .125rem; }
.source-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; margin-inline: .3rem; }
.sidebar-user-info { overflow: hidden; }
.topbar-left { min-width: 0; flex: 1; }
.breadcrumb-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-mobile-toggle { display: none; }
.audit-mobile-backdrop { position: fixed; inset: 0; z-index: 25; background: hsl(var(--shadow-color) / .5); }
.page-heading { margin-bottom: 1.25rem; }
.page-heading .eyebrow { display: none; }
.heading-actions { display: flex; align-items: center; gap: .75rem; }
.updated, .fine-print, .section-heading > span, .page-footer, .login-note { font-size: .75rem; color: hsl(var(--muted-foreground)); }
.secondary, .primary { gap: .4rem; }
.scope-banner { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; margin-bottom: 1.25rem; border: 1px solid hsl(var(--info) / .2); border-radius: var(--radius); background: hsl(var(--info) / .07); color: hsl(var(--info-text)); font-size: .8125rem; }
.scope-icon { color: hsl(var(--info)); }
.scope-end { margin-left: auto; white-space: nowrap; font-size: .75rem; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.metrics article, .health-card, .total-card, .flow-map, .flow-tools article { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); box-shadow: var(--shadow-sm); }
.metrics article { padding: 1.25rem; }
.metric-label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.metric-label > span { color: hsl(var(--primary)); }
.metrics strong { display: block; font-size: 1.75rem; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-block: .875rem .375rem; }
.metrics small { color: hsl(var(--muted-foreground)); font-size: .75rem; }
.metric-line { display: none; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.section-heading h2, .ledger-heading h2 { font-size: .9375rem; font-weight: 600; }
.source-section { margin-block: 1.25rem; }
.source-health { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.health-card { display: flex; align-items: center; gap: .625rem; padding: .875rem; text-align: left; min-width: 0; }
.health-card:hover { background: hsl(var(--accent) / .45); }
.health-icon { display: grid; place-items: center; height: 2rem; width: 2rem; flex-shrink: 0; border-radius: var(--radius-sm); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: .6875rem; font-weight: 600; }
.health-card > div { flex: 1; min-width: 0; }
.health-name { font-size: .75rem; font-weight: 550; }
.health-note { font-size: .6875rem; color: hsl(var(--muted-foreground)); line-height: 1.5; margin-top: .125rem; }
.health-status { color: hsl(var(--success-text)); font-size: .5625rem; font-weight: 600; white-space: nowrap; }
.health-status.error, .error-text { color: hsl(var(--destructive-text)); }
.health-card.error { border-color: hsl(var(--destructive) / .3); }
.ledger-card { padding: 0; gap: 0; overflow: hidden; }
.ledger-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; }
.ledger-heading h2 { display: flex; align-items: center; gap: .5rem; }
.ledger-heading p { color: hsl(var(--muted-foreground)); font-size: .8125rem; margin-top: .375rem; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-pill); padding: .1rem .45rem; font-size: .6875rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; padding: 0 1.25rem 1.25rem; }
.filters label { display: flex; flex-direction: column; gap: .375rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.filters input, .flow-search input { height: 2.25rem; border: 1px solid hsl(var(--input)); background: hsl(var(--background) / .35); color: hsl(var(--foreground)); border-radius: calc(var(--radius) - 2px); padding: .5rem .75rem; font-size: .8125rem; min-width: 0; }
.filters input::placeholder, .flow-search input::placeholder { color: hsl(var(--muted-foreground)); }
.filters label:not(.search-field) input { width: 9rem; }
.filters .search-field { flex: 1; min-width: 14rem; display: flex; flex-direction: row; align-items: center; position: relative; }
.search-field input { width: 100%; padding-left: 2.25rem; }
.search-field > svg { position: absolute; left: .75rem; }
.filters button { height: 2.25rem; }
.ledger-tabs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem 1.25rem; border-block: 1px solid hsl(var(--border)); }
.ledger-tabs > div { display: inline-flex; gap: .25rem; border-radius: var(--radius-sm); background: hsl(var(--muted)); padding: .25rem; }
.view-tab, .flow-tab { border: 0; border-radius: calc(var(--radius-sm) - .15rem); background: transparent; color: hsl(var(--muted-foreground)); font-size: .75rem; font-weight: 500; padding: .375rem .75rem; }
.view-tab.active, .flow-tab.active { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
.ledger-tabs > span { color: hsl(var(--muted-foreground)); font-size: .6875rem; max-width: 48%; line-height: 1.5; text-align: right; }
.table-scroll { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.table th { padding: .75rem 1rem; background: hsl(var(--muted) / .45); color: hsl(var(--muted-foreground)); font-size: .75rem; font-weight: 500; text-align: left; white-space: nowrap; }
.table td { padding: .875rem 1rem; border-top: 1px solid hsl(var(--border)); vertical-align: middle; }
.table td strong { font-size: .8125rem; font-weight: 550; }
.table td small { display: block; font-size: .6875rem; color: hsl(var(--muted-foreground)); line-height: 1.5; margin-top: .25rem; }
.table tbody tr:hover { background: hsl(var(--muted) / .4); }
.amount-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-source, .kind { display: inline-flex; align-items: center; gap: .4rem; }
.kind { text-transform: capitalize; font-size: .75rem; }
.kind-icon { color: hsl(var(--success-text)); }
.kind-icon.outgoing { color: hsl(var(--muted-foreground)); }
.mini-dot { display: inline-block; width: .3rem; height: .3rem; border-radius: 50%; background: hsl(var(--muted-foreground)); margin-right: .3rem; }
.mono, .detail-row strong { font-family: var(--font-mono); font-size: .6875rem; }
.pill { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: .2rem .55rem; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); color: hsl(var(--muted-foreground)); font-size: .6875rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.pill.complete { color: hsl(var(--success-text)); background: hsl(var(--success) / .1); border-color: hsl(var(--success) / .25); }
.pill.pending { color: hsl(var(--warning-text)); background: hsl(var(--warning) / .1); border-color: hsl(var(--warning) / .25); }
.pill.attention { color: hsl(var(--destructive-text)); background: hsl(var(--destructive) / .1); border-color: hsl(var(--destructive) / .25); }
.table-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid hsl(var(--border)); padding: .875rem 1.25rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.table-footer > div { display: flex; align-items: center; gap: .75rem; }
.table-footer button { font-size: .75rem; }
.page-error { margin: 1rem; border: 1px solid hsl(var(--destructive) / .2); background: hsl(var(--destructive) / .07); color: hsl(var(--destructive-text)); padding: .875rem 1rem; border-radius: var(--radius); font-size: .8125rem; line-height: 1.6; }
.loading, .empty { padding: 2rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: .8125rem; }
.loading { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.empty h3 { font-size: .875rem; font-weight: 550; color: hsl(var(--foreground)); margin-bottom: .375rem; }
.empty > span, .empty > svg { display: block; margin: 0 auto .75rem; }
.spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); animation: audit-spin 1s linear infinite; }
@keyframes audit-spin { to { transform: rotate(360deg); } }
.totals-section { margin-top: 1.5rem; }
.totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.total-card { padding: 1rem 1.25rem; }
.total-card > span, .total-card > small { display: block; color: hsl(var(--muted-foreground)); font-size: .75rem; }
.total-card strong { display: block; font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-block: .5rem .25rem; overflow-wrap: anywhere; }
.fine-print { line-height: 1.7; margin-top: .75rem; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: 2rem; font-size: .6875rem; }
.detail-backdrop { position: fixed; inset: 0; background: hsl(var(--shadow-color) / .4); backdrop-filter: blur(3px); z-index: 60; }
.details { position: fixed; top: var(--island-gap); bottom: var(--island-gap); right: var(--island-gap); width: min(29rem, calc(100vw - 1.5rem)); padding: 1.5rem; overflow-y: auto; border: 1px solid hsl(var(--border)); border-radius: var(--island-radius); background: hsl(var(--popover)); box-shadow: var(--shadow-lg); z-index: 61; }
.details > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.5rem; }
.details > header button { display: grid; place-items: center; background: transparent; color: hsl(var(--muted-foreground)); border: 0; width: 2rem; height: 2rem; border-radius: var(--radius-sm); font-size: 1.5rem; }
.details > header button:hover { background: hsl(var(--muted)); }
.eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.details h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.018em; margin: .75rem 0 .375rem; }
.details p { font-size: .8125rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.detail-amount { font-size: 1.75rem; font-weight: 600; margin-block: 1.25rem; font-variant-numeric: tabular-nums; }
.detail-amount small { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.detail-section { padding-block: 1rem; border-top: 1px solid hsl(var(--border)); }
.detail-section h3 { font-size: .8125rem; font-weight: 600; margin-bottom: .75rem; }
.detail-row { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; margin: .75rem 0; font-size: .75rem; line-height: 1.6; }
.detail-row span { color: hsl(var(--muted-foreground)); }
.detail-row strong { font-weight: 450; overflow-wrap: anywhere; white-space: pre-wrap; }
.detail-note { padding: .75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--muted) / .5); margin-top: .75rem; }
.related-button { width: 100%; justify-content: flex-start; margin-top: .5rem; }
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; }
.login-container { width: 100%; max-width: 25rem; }
.audit-login-card { margin-top: 1.5rem; }
.login-brand { display: flex; flex-direction: column; align-items: center; }
.login-form label { display: flex; flex-direction: column; gap: .5rem; }
.login-form .primary { width: 100%; }
.login-note { text-align: center; margin-top: 1.5rem; }
.flow-map { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.25rem; overflow: hidden; }
.flow-map article { padding: 1.25rem; }
.flow-map article + article { border-left: 1px solid hsl(var(--border)); }
.audit-flow-step { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-size: .6875rem; font-weight: 600; }
.flow-map h2, .flow-tools h2 { font-size: .875rem; font-weight: 600; margin-block: .75rem .375rem; }
.flow-map p, .flow-tools p { color: hsl(var(--muted-foreground)); font-size: .8125rem; line-height: 1.7; }
.flow-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.flow-tools article { padding: 1.25rem; }
.flow-tools small { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .75rem; }
.flow-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.flow-links a { text-decoration: none; cursor: pointer; }
.flow-search { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.flow-search input { min-width: 13rem; }
.flow-content .pill { white-space: normal; }
.flow-content td { min-width: 7rem; }
.flow-content td:nth-child(3) { min-width: 13rem; }
.flow-detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.flow-blockers { padding-left: 1rem; list-style: disc; font-size: .8125rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1200px) { .source-health { grid-template-columns: repeat(2,minmax(0,1fr)); } .metrics { gap: .75rem; } .metrics article { padding: 1rem; } .scope-end, .updated { display: none; } .flow-map article { padding: 1rem; } }
@media (max-width: 1000px) { .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .flow-map { grid-template-columns: 1fr 1fr; } .flow-map article:nth-child(3) { border-left: 0; } .flow-map article:nth-child(n+3) { border-top: 1px solid hsl(var(--border)); } .flow-tools { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .audit-mobile-toggle { display: inline-flex; }
  .content { padding-top: 1rem; }
  .topbar { gap: .5rem; padding-inline: .75rem; }
  .topbar-actions { gap: .375rem; }
  .topbar #logout span { display: none; }
  .page-heading h1 { font-size: 1.375rem; }
  .page-heading p { font-size: .8125rem; }
  .section-heading { align-items: flex-start; }
  .section-heading > span { text-align: right; max-width: 11rem; }
  .ledger-tabs { gap: .5rem; padding-inline: .75rem; }
  .ledger-tabs > span { display: none; }
  .filters { padding-inline: 1rem; gap: .5rem; }
  .filters .search-field { flex-basis: 100%; }
  .filters label:not(.search-field) { flex: 1; min-width: 6rem; }
  .filters label:not(.search-field) input { width: 100%; }
  .table-footer { flex-wrap: wrap; padding: .875rem; }
  .table-footer > div { gap: .5rem; }
  .flow-search { width: 100%; }
  .flow-search input { min-width: 0; flex: 1; }
}
@media (max-width: 440px) { .health-card { padding: .625rem; } .health-status { display: none; } .health-icon { display: none; } .metrics article { padding: .875rem; } .metrics strong { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.mobile-drawer-open { overflow: hidden; }
/* React workspace: larger figures, stronger hierarchy, vivid CPG accents. */
.page-kicker { display: block; color: hsl(var(--primary)); font-size: .7rem; font-weight: 750; letter-spacing: .1em; margin-bottom: .5rem; }
.page-header h1 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 780; letter-spacing: -.045em; }
.page-header p { max-width: 48rem; font-size: .9375rem; line-height: 1.7; margin-top: .5rem; }
.page-heading { margin-block: .5rem 1.75rem; }
.content { padding-top: 1.75rem; }
.metrics { gap: 1rem; margin-bottom: 1.75rem; }
.metric-card { --metric-color: var(--primary); position: relative; overflow: hidden; border: 0; }
.metric-card.tone-orange { --metric-color: var(--warning); }
.metric-card.tone-red { --metric-color: var(--destructive); }
.metric-card.tone-green { --metric-color: var(--success); }
.metric-card.tone-purple { --metric-color: 280 75% 60%; }
.metric-icon { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .8rem; color: hsl(var(--metric-color)); background: hsl(var(--metric-color) / .13); }
.metric-icon svg { width: 1.2rem; height: 1.2rem; }
.metric-label { font-weight: 600; font-size: .875rem; color: hsl(var(--foreground)); }
.metrics strong { font-size: clamp(2.2rem, 3.2vw, 3.3rem); font-weight: 800; line-height: 1; letter-spacing: -.055em; margin-block: 1.1rem .6rem; }
.metrics small { font-size: .75rem; line-height: 1.6; display: block; }
.section-heading h2, .ledger-heading h2 { font-size: 1.05rem; font-weight: 700; }
.table td { padding-block: 1rem; }
.table td strong { font-size: .9375rem; font-weight: 650; }
.table .amount-cell strong { font-size: 1.125rem; font-weight: 780; letter-spacing: -.02em; }
.table .amount-cell strong small { font-size: .75rem; font-weight: 500; }
.pill { font-size: .75rem; font-weight: 650; padding: .25rem .6rem; }
.health-card { text-decoration: none; }
.health-card:hover { border-color: hsl(var(--primary) / .4); }
.health-icon { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); width: 2.25rem; height: 2.25rem; }
.health-name { font-size: .8125rem; font-weight: 650; }
.total-card { border: 0; }
.total-card strong { font-size: 1.875rem; font-weight: 780; letter-spacing: -.035em; }
.detail-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; }
.details h2 { font-size: 1.5rem; font-weight: 750; }
.audit-flow-step { width: 2.3rem; height: 2.3rem; font-size: .875rem; font-weight: 750; }
.flow-map article { background: linear-gradient(160deg,hsl(var(--primary) / .055),transparent 75%); }
.flow-map h2, .flow-tools h2 { font-size: 1rem; font-weight: 700; }
.flow-content .table td:nth-child(3) { min-width: 14rem; }
.calculation-note { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: hsl(var(--primary) / .035); border: 1px solid hsl(var(--primary) / .15); border-radius: var(--radius); font-size: .8125rem; color: hsl(var(--muted-foreground)); line-height: 1.8; }
.calculation-note summary { cursor: pointer; font-size: .875rem; font-weight: 650; color: hsl(var(--foreground)); }
.calculation-note summary svg { display: inline; vertical-align: middle; margin-inline: .25rem .5rem; color: hsl(var(--primary)); }
.calculation-note p { margin-top: .75rem; max-width: 80rem; }
.calculation-note strong { color: hsl(var(--foreground)); font-weight: 650; }
.report-hero-icon { width: 3rem; height: 3rem; color: hsl(var(--primary)); }
.report-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.report-form label { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 9rem; }
.report-form label:first-child { flex: 1.5; }
.report-form .input { width: 100%; }
.report-builder { margin-bottom: 1.5rem; }
.report-coverage { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--radius); border: 1px solid hsl(var(--success) / .25); background: hsl(var(--success) / .07); margin-block: 1.25rem; }
.report-coverage.partial { border-color: hsl(var(--warning) / .35); background: hsl(var(--warning) / .07); }
.report-coverage strong { display: block; margin-top: .65rem; font-weight: 700; font-size: 1rem; }
.report-coverage p { margin-top: .35rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.report-chart-card { margin-bottom: 1.25rem; }
.daily-chart { width: 100%; overflow: hidden; }
.daily-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.daily-chart rect { fill: hsl(var(--primary)); opacity: .85; }
.daily-chart rect:hover { opacity: 1; }
.daily-chart text { fill: hsl(var(--muted-foreground)); font-family: var(--font-sans); font-size: 11px; }
.daily-chart .chart-max { font-size: 10px; }
.chart-axis { stroke: hsl(var(--border)); }
.report-statuses { display: grid; grid-template-columns: repeat(5,1fr); gap: .75rem; margin-top: 1rem; }
.report-statuses > div { display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: hsl(var(--card)); padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.report-statuses strong { font-size: 1.375rem; font-weight: 750; }
.scope-banner a { text-decoration: underline; font-weight: 600; }
.spin { animation: audit-spin 1s linear infinite; }
/* Liquid glass: floating navigation, quiet content islands, neutral edges.
   Keep financial data on denser surfaces for contrast and readability. */
:root {
  --island-gap: 1.125rem;
  --island-radius: 1.75rem;
  --radius: 1.4rem;
  --radius-sm: .85rem;
  --layout-sidebar-width: 15.25rem;
  --layout-navbar-height: 3.8rem;
  --glass-chrome: rgb(255 255 255 / .6);
  --glass-content: rgb(255 255 255 / .82);
  --glass-raised: rgb(255 255 255 / .94);
  --glass-control: rgb(255 255 255 / .66);
  --glass-hover: rgb(255 255 255 / .9);
  --glass-line: rgb(31 41 55 / .07);
  --glass-shadow: 0 12px 36px -18px rgb(26 39 65 / .18), 0 2px 6px rgb(26 39 65 / .025);
  --glass-float: 0 18px 48px -18px rgb(26 39 65 / .22), inset 0 0 0 1px rgb(255 255 255 / .6);
  --glass-canvas: radial-gradient(ellipse at 9% 0%, #e0e8f0 0%, transparent 48%), radial-gradient(ellipse at 90% 25%, #eae5ef 0%, transparent 45%), linear-gradient(145deg, #f3f5f7, #edf0f3 55%, #f6f3ef);
}
html.dark, html[data-theme='dark'] {
  --glass-chrome: rgb(32 35 42 / .66);
  --glass-content: rgb(33 36 43 / .88);
  --glass-raised: rgb(39 42 50 / .96);
  --glass-control: rgb(255 255 255 / .065);
  --glass-hover: rgb(255 255 255 / .11);
  --glass-line: rgb(255 255 255 / .065);
  --glass-shadow: 0 16px 38px -16px rgb(0 0 0 / .36), 0 2px 5px rgb(0 0 0 / .1);
  --glass-float: 0 20px 48px -18px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .07);
  --glass-canvas: radial-gradient(ellipse at 10% 0%, #202b39 0%, transparent 48%), radial-gradient(ellipse at 95% 35%, #2a2634 0%, transparent 50%), linear-gradient(145deg, #171b22, #11141a);
}
body { background: var(--glass-canvas); background-attachment: fixed; }
.app-shell { background: transparent; }
.app-main::before { display: none; }
.app-sidebar, .app-topbar, .theme-menu {
  border: 0;
  background: var(--glass-chrome);
  backdrop-filter: blur(32px) saturate(145%);
  -webkit-backdrop-filter: blur(32px) saturate(145%);
  box-shadow: var(--glass-float);
}
.app-sidebar { padding: .5rem; }
.app-topbar { border-radius: 999px; padding-inline: 1.3rem; flex-shrink: 0; }
.sidebar-brand { border: 0; padding-inline: .875rem; margin-top: .35rem; }
.sidebar-brand-logo { width: 2.1rem; height: 2.1rem; }
.sidebar-brand-name { letter-spacing: -.035em; font-weight: 720; }
.sidebar-brand-tag { font-size: .6875rem; }
.sidebar-nav { padding: 1rem .25rem; gap: .25rem; }
.sidebar-section-label { font-size: .6rem; letter-spacing: .12em; padding-inline: .9rem; opacity: .85; }
.sidebar-divider { border: 0; height: 0; margin-block: .5rem; }
.app-sidebar .nav-item { min-height: 2.55rem; border-radius: 999px; padding-inline: .85rem; font-size: .8125rem; }
.app-sidebar .nav-item.active { background: var(--glass-hover); color: hsl(var(--foreground)); box-shadow: 0 3px 12px rgb(0 0 0 / .04); font-weight: 650; }
.app-sidebar .nav-item.active svg { color: hsl(var(--primary)); }
.app-sidebar .nav-item:hover { background: var(--glass-control); }
.sidebar-footer { border-color: var(--glass-line); padding: .875rem .6rem .5rem; }
.sidebar-user-avatar { background: var(--glass-control); box-shadow: var(--glass-shadow); }
.content { padding-top: 2rem; }
.page-heading { margin-block: .25rem 1.6rem; padding-inline: .25rem; }
.page-kicker { color: hsl(var(--muted-foreground)); font-size: .625rem; letter-spacing: .14em; font-weight: 600; }
.page-header h1 { font-size: clamp(1.9rem, 2.7vw, 2.8rem); font-weight: 740; letter-spacing: -.055em; }
.page-header p { font-size: .875rem; max-width: 44rem; }
.metrics { gap: 1rem; }
.metrics article, .health-card, .health-card.error, .total-card,
.flow-tools article, .ledger-card, .report-builder, .report-chart-card,
.audit-login-card, .report-statuses > div {
  border: 0;
  border-radius: var(--island-radius);
  background: var(--glass-content);
  box-shadow: var(--glass-shadow);
}
.metrics article { padding: 1.5rem; }
.metric-label { color: hsl(var(--muted-foreground)); font-size: .8125rem; font-weight: 550; }
.metric-label > .metric-icon, .health-icon, .audit-flow-step {
  color: hsl(var(--foreground)); background: var(--glass-control);
  box-shadow: 0 2px 8px rgb(0 0 0 / .035);
}
.metric-icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; }
.metrics strong { font-size: clamp(2.75rem, 3.7vw, 3.75rem); font-weight: 760; margin-block: 1.25rem .65rem; }
.metrics small { font-size: .75rem; line-height: 1.6; }
.health-card { padding: 1.1rem; border-radius: 1.35rem; transition: background-color .2s, transform .2s, box-shadow .2s; }
.health-card:hover { border: 0; background: var(--glass-hover); box-shadow: var(--glass-float); transform: translateY(-2px); }
.health-icon { border-radius: 50%; }
.scope-banner, .calculation-note, .report-coverage, .report-coverage.partial, .page-error {
  border: 0; border-radius: 1.25rem; background: var(--glass-control); box-shadow: none;
}
.scope-banner { color: hsl(var(--muted-foreground)); font-size: .75rem; padding: .95rem 1.15rem; }
.scope-banner a { color: hsl(var(--foreground)); text-underline-offset: 3px; }
.scope-banner .scope-icon { color: hsl(var(--muted-foreground)); }
.ledger-heading { padding: 1.5rem; }
.filters { padding-inline: 1.5rem; }
.ledger-tabs { border: 0; padding: .5rem 1.5rem 1rem; }
.ledger-tabs > div, .theme-segmented { border: 0; border-radius: 999px; background: rgb(125 130 145 / .09); padding: .3rem; gap: .2rem; }
.view-tab, .flow-tab, .theme-segment { border: 0; border-radius: 999px; padding: .5rem .9rem; font-size: .75rem; }
.view-tab.active, .flow-tab.active, .theme-segment[aria-pressed='true'] { background: var(--glass-raised); box-shadow: 0 3px 10px rgb(0 0 0 / .07); }
.table th { border: 0; background: rgb(125 130 145 / .035); font-size: .6875rem; font-weight: 550; padding-block: .9rem; }
.table td { border-color: var(--glass-line); padding-block: 1.15rem; }
.table tbody tr:hover { background: rgb(125 130 145 / .035); }
.table-footer, .detail-section, .detail-row { border-color: var(--glass-line); }
.table-footer { border-top: 0; padding: 1rem 1.5rem; }
.count-badge { border: 0; background: rgb(125 130 145 / .08); padding: .2rem .55rem; }
.pill, .pill.complete, .pill.pending, .pill.attention {
  border: 0; background: rgb(125 130 145 / .075); font-size: .6875rem; font-weight: 600; padding: .4rem .7rem;
}
.flow-map { border: 0; box-shadow: none; background: transparent; gap: .75rem; overflow: visible; }
.flow-map article, .flow-map article + article { border: 0; background: var(--glass-control); border-radius: 1.35rem; padding: 1.25rem; }
.audit-flow-step { border-radius: 50%; font-weight: 600; }
.flow-tools article { padding: 1.5rem; }
.app-shell :is(.btn-outline,.btn-sm-outline,.btn-icon-outline), .details .btn-outline {
  border: 0; background: var(--glass-control); color: hsl(var(--foreground));
  box-shadow: 0 2px 8px rgb(0 0 0 / .045), inset 0 0 0 1px var(--glass-line); border-radius: 999px;
}
.app-shell :is(.btn-outline,.btn-sm-outline,.btn-icon-outline):hover, .details .btn-outline:hover { background: var(--glass-hover); }
.app-shell .btn-sign-out, .app-shell .btn-sign-out:hover { border: 0; color: hsl(var(--muted-foreground)); background: transparent; box-shadow: none; }
.btn-primary { border: 0; border-radius: 999px; box-shadow: 0 5px 14px hsl(var(--primary) / .18); }
.btn-ghost, .btn-icon-ghost { border: 0; border-radius: 999px; }
.filters input, .flow-search input, .report-form .input, .login-form .input {
  border: 0; border-radius: 1rem; background: rgb(125 130 145 / .075); box-shadow: inset 0 0 0 1px var(--glass-line);
  min-height: 2.55rem; color: hsl(var(--foreground));
}
.filters input:focus, .flow-search input:focus, .report-form .input:focus, .login-form .input:focus { box-shadow: inset 0 0 0 1px hsl(var(--foreground) / .2); }
.details { border: 0; border-radius: 2rem; background: var(--glass-raised); backdrop-filter: blur(40px) saturate(140%); -webkit-backdrop-filter: blur(40px) saturate(140%); box-shadow: var(--glass-float); padding: 1.75rem; }
.detail-backdrop { background: rgb(25 31 42 / .18); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.detail-note { border: 0; background: var(--glass-control); border-radius: 1.1rem; padding: 1rem; }
.theme-menu { background: var(--glass-raised); border-radius: 1.5rem; }
.theme-menu-section + .theme-menu-section { border-color: var(--glass-line); }
.theme-swatch[aria-pressed='true'] { outline-color: hsl(var(--foreground)); }
.app-footer { padding-inline: calc(var(--island-gap) + .25rem); font-size: .625rem; opacity: .8; }
@media (max-width: 1000px) { .flow-map article:nth-child(n+3) { border: 0; } }
@media (max-width: 768px) {
  :root { --island-gap: .75rem; --island-radius: 1.4rem; }
  .app-topbar { padding-inline: .75rem; }
  .app-sidebar { background: var(--glass-raised); }
  .content { padding-top: 1.5rem; }
  .metrics article { padding: 1.15rem; }
  .metrics strong { font-size: 2.7rem; }
  .ledger-heading, .flow-tools article { padding: 1.2rem; }
  .ledger-tabs { padding-inline: 1rem; overflow-x: auto; }
  .ledger-tabs > div { flex-shrink: 0; }
  .details { padding: 1.25rem; width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .app-sidebar, .app-topbar, .theme-menu, .details, .metrics article, .health-card, .total-card, .ledger-card, .flow-tools article { background: hsl(var(--card)); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .detail-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(0 0 0 / .4); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar, .app-topbar, .theme-menu, .details { background: hsl(var(--card)); }
}
/* Color lives inside the material, never in a card outline or top stripe. */
.app-topbar { position: relative; top: auto; }
.content { scroll-margin-top: 1.5rem; }
.page-kicker { color: hsl(var(--primary)); }
.metrics .metric-card {
  --metric-ink: var(--primary);
  background: radial-gradient(ellipse at 100% 0%, hsl(var(--metric-color) / .4), transparent 78%), linear-gradient(140deg, hsl(var(--metric-color) / .17), hsl(var(--metric-color) / .055)), var(--glass-content);
  border: 0;
}
.metrics .tone-orange { --metric-ink: var(--warning-text); }
.metrics .tone-red { --metric-ink: var(--destructive-text); }
.metrics .tone-green { --metric-ink: var(--success-text); }
.metrics .tone-purple { --metric-ink: 270 64% 50%; }
.metrics .metric-icon { background: hsl(var(--metric-ink)); color: white; box-shadow: 0 6px 15px hsl(var(--metric-color) / .23); }
.metrics .metric-card > strong { color: hsl(var(--metric-ink)); }
.metrics .metric-action { background: hsl(var(--metric-color) / .15); }
.metrics .metric-action:hover { background: hsl(var(--metric-color) / .25); }
.metrics .metric-label { color: hsl(var(--foreground)); font-weight: 650; }
.metrics small { min-height: 3.6em; }
.metric-action { display: inline-flex; gap: .4rem; align-items: center; margin-top: 1.1rem; padding: .5rem .75rem; border: 0; border-radius: 999px; background: var(--glass-control); color: hsl(var(--foreground)); font-size: .75rem; font-weight: 650; }
.metric-action:hover { background: var(--glass-hover); }
.flow-scope { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .6875rem; color: hsl(var(--muted-foreground)); margin: -.25rem .25rem 1rem; }
.flow-scope > span:first-child { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: hsl(var(--foreground)); }
.live-indicator { width: .4rem; height: .4rem; border-radius: 50%; background: hsl(var(--success)); box-shadow: 0 0 0 4px hsl(var(--success) / .12); }
.section-description { color: hsl(var(--muted-foreground)); font-size: .8125rem; margin-top: .4rem; }
.journey-section { margin-block: 2rem 1.5rem; }
.journey-section .flow-map { gap: 1rem; }
.journey-card { --journey-color: 216 90% 58%; display: flex; flex-direction: column; min-width: 0; text-align: left; padding: 1.4rem; border: 0; border-radius: 1.5rem; color: hsl(var(--foreground)); background: linear-gradient(145deg,hsl(var(--journey-color) / .28),hsl(var(--journey-color) / .065) 90%),var(--glass-content); box-shadow: var(--glass-shadow); transition: transform .18s, box-shadow .18s; }
.journey-card.tone-purple { --journey-color: 270 76% 62%; }
.journey-card.tone-orange { --journey-color: 32 96% 53%; }
.journey-card.tone-green { --journey-color: 158 66% 43%; }
.journey-card:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--glass-float); }
.journey-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 1rem; }
.journey-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; color: white; background: hsl(var(--journey-color)); box-shadow: 0 5px 12px hsl(var(--journey-color) / .22); }
.journey-icon svg { width: 1.2rem; height: 1.2rem; }
.journey-step { display: inline-flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
.journey-card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.025em; }
.journey-count { display: flex; align-items: center; gap: .65rem; margin-block: .8rem; }
.journey-count strong { font-size: 2rem; font-weight: 750; line-height: 1; letter-spacing: -.055em; }
.journey-count span { color: hsl(var(--muted-foreground)); font-size: .7rem; line-height: 1.4; }
.journey-card p { font-size: .75rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.flow-tools .flow-tool-handoff { background: linear-gradient(125deg,hsl(var(--primary) / .095),transparent 70%),var(--glass-content); }
.flow-tools .flow-tool-policy { background: linear-gradient(125deg,hsl(270 70% 65% / .1),transparent 70%),var(--glass-content); }
.flow-tool-handoff .eyebrow { color: hsl(var(--primary)); }
.flow-tool-policy .eyebrow { color: hsl(270 65% 55%); }
.flow-data-notice { display: flex; align-items: center; gap: .85rem; background: var(--glass-control); padding: 1.1rem 1.25rem; border: 0; border-radius: 1.25rem; margin-bottom: 1.5rem; }
.flow-data-notice > svg { color: hsl(var(--primary)); width: 1.3rem; height: 1.3rem; }
.flow-data-notice > div { flex: 1; }
.flow-data-notice strong { font-size: .8125rem; }
.flow-data-notice p { color: hsl(var(--muted-foreground)); font-size: .75rem; margin-top: .35rem; line-height: 1.6; }
.pill.complete { background: hsl(var(--success) / .12); }
.pill.pending { background: hsl(var(--warning) / .12); }
.pill.attention { background: hsl(var(--destructive) / .1); }
.stage-description { max-width: 19rem; min-width: 13rem; }
#withdrawal-queue { scroll-margin-top: 1.25rem; }
.flow-content .ledger-tabs { flex-wrap: wrap; }
.flow-content .ledger-tabs > div { flex-wrap: wrap; }
.health-icon { color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }
.page-kicker { display: inline-flex; padding: .4rem .7rem; border-radius: 999px; background: hsl(var(--primary) / .12); margin-bottom: .8rem; }
.app-sidebar .nav-item.active { background: hsl(var(--primary) / .16); color: hsl(var(--foreground)); }
.app-sidebar a[href='/reports'] svg, .app-sidebar a[href='/sources/lastprop'] svg { color: hsl(270 72% 58%); }
.app-sidebar a[href='/sources/zora'] svg, .app-sidebar a[href='/sources/cpg-withdrawals'] svg { color: hsl(var(--success-text)); }
.app-sidebar a[href='/sources/transfers'] svg, .app-sidebar a[href='/sources/tcpay'] svg { color: hsl(var(--warning-text)); }
.app-sidebar a[href='/sources/fxbo'] svg, .app-sidebar a[href='/sources/cpg-deposits'] svg { color: hsl(var(--primary)); }
.flow-tools .flow-tool-handoff { background: linear-gradient(125deg,hsl(var(--primary) / .15),transparent 85%),var(--glass-content); }
.flow-tools .flow-tool-policy { background: linear-gradient(125deg,hsl(270 70% 65% / .18),transparent 85%),var(--glass-content); }
html.dark .metrics .tone-purple { --metric-ink: 270 85% 77%; }
@media (max-width: 768px) {
  .journey-section .flow-map { gap: .75rem; }
  .journey-card { padding: 1rem; }
  .journey-card h3 { font-size: .875rem; }
  .flow-data-notice { align-items: flex-start; flex-wrap: wrap; }
  .flow-data-notice > div { min-width: 70%; }
  .flow-content .ledger-tabs > div { flex-shrink: 1; }
}
@media (max-width: 440px) { .journey-count { align-items: flex-start; flex-direction: column; } .metric-action { font-size: .6875rem; padding-inline: .5rem; } }
@media (max-width: 1200px) { .report-statuses { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px) { .page-header h1 { font-size: 1.875rem; } .metrics strong { font-size: 2.6rem; } .metric-label { font-size: .8125rem; } .metric-icon { width: 1.8rem; height: 1.8rem; } .report-statuses { grid-template-columns: repeat(2,1fr); } .report-form label { min-width: 8rem; } .report-form label:first-child { flex-basis: 100%; } }