/* Eyekus Capital Hub portal — staged 2026-10-25.
   Uses the site palette and accessibility classes from assets/site.css.
   Colour scheme matched to the site (owner order 2026-10-25 20:47 EDT):
   the Hub wears the same dark-house treatment as the site's indigo
   sections (assets/site.css #company/#structure/#disclosures/#contact) —
   an --indigo to --indigo-deep gradient ground, lifted indigo panels
   with --gold-deep borders, Cormorant Garamond display type in --gold,
   body text in --hero-ink and secondary text in --hero-ink-soft.
   Every value comes from the site's own custom properties; the only
   derived values are the two status tints, mixed from the house
   --crimson / --emerald toward white so they keep AA contrast on
   indigo (plain crimson is 2.45:1 and plain emerald 3.51:1 on
   --indigo-deep; the tints measure about 6.9:1 and 7.2:1). */

.hub-main {
  background: linear-gradient(165deg, var(--indigo) 0%, var(--indigo-deep) 125%);
  color: var(--hero-ink);
  min-height: 72vh;
  padding: 0 0 72px;
}

.hub-content {
  padding-top: 44px;
}

.hub-hero {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}

.hub-hero h1,
.hub-login-card h2,
.hub-section h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 1.08;
  color: var(--gold);
}

.hub-hero h1 {
  font-size: clamp(42px, 7vw, 72px);
  margin: 14px 0 16px;
}

.hub-hero p,
.hub-section-intro,
.hub-note {
  color: var(--hero-ink-soft);
}

.hub-login-card,
.hub-section,
.hub-fixture-notice,
.hub-status-panel {
  background: linear-gradient(165deg, var(--indigo-royal) 0%, var(--indigo) 58%, var(--indigo-deep) 135%);
  border: 1px solid var(--gold-deep);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}

.hub-login-card {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 44px);
}

.hub-login-card h2 {
  font-size: 36px;
  margin-bottom: 12px;
}

.hub-field {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.hub-field label {
  font-weight: 600;
  letter-spacing: .02em;
}

.hub-field input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  background: var(--indigo-deep);
  color: var(--hero-ink);
  font: inherit;
  padding: 12px 14px;
}

.hub-field input:focus-visible,
.hub-main a:focus-visible,
.hub-main button:focus-visible,
.hub-main summary:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
}

.hub-main a:not(.btn) {
  color: var(--gold);
  text-underline-offset: 3px;
}

.hub-help,
.hub-status {
  color: var(--hero-ink-soft);
  font-size: 15px;
}

.hub-status {
  min-height: 1.65em;
  margin-top: 16px;
}

.hub-status[data-kind="error"] {
  color: color-mix(in srgb, var(--crimson) 50%, white);
  font-weight: 600;
}

.hub-status[data-kind="success"] {
  color: color-mix(in srgb, var(--emerald) 62%, white);
  font-weight: 600;
}

.hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.hub-shell-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.hub-shell-head h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  margin: 12px 0;
  color: var(--gold);
}

.hub-status-panel {
  padding: 20px 22px;
  margin-bottom: 22px;
}

.hub-status-panel strong {
  color: var(--hero-ink);
}

.hub-fixture-notice {
  border-color: var(--gold-deep);
  padding: 18px 22px;
  margin-bottom: 22px;
}

.hub-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.hub-section {
  min-width: 0;
  padding: clamp(22px, 4vw, 34px);
}

.hub-section h2 {
  font-size: clamp(32px, 4vw, 44px);
  margin-bottom: 8px;
}

.hub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.hub-card {
  background: var(--indigo-deep);
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 14px;
  padding: 18px;
}

.hub-card .hub-card-label {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hub-card .hub-card-value {
  color: var(--hero-ink);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.hub-card .hub-card-note {
  color: var(--hero-ink-soft);
  font-size: 14.5px;
  margin-top: 6px;
}

.hub-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 22px;
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 12px;
}

.hub-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: transparent;
  color: var(--hero-ink);
}

.hub-table caption {
  text-align: left;
  font-weight: 600;
  padding: 14px 16px;
  color: var(--hero-ink);
}

.hub-table th,
.hub-table td {
  border-top: 1px solid rgba(201, 162, 39, .35);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.hub-table thead th {
  background: var(--indigo-royal);
  border-top: 0;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hub-list {
  margin: 18px 0 0 22px;
  color: var(--hero-ink-soft);
}

.hub-list li + li {
  margin-top: 8px;
}

.hub-definition-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 22px;
  margin-top: 18px;
}

.hub-definition-list dt {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hub-definition-list dd {
  color: var(--hero-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

html.a11y-high-contrast .hub-login-card,
html.a11y-high-contrast .hub-section,
html.a11y-high-contrast .hub-status-panel,
html.a11y-high-contrast .hub-fixture-notice,
html.a11y-high-contrast .hub-card,
html.a11y-high-contrast .hub-table {
  background: #fff !important;
  color: #111 !important;
  border-color: #666 !important;
}

html.a11y-high-contrast .hub-card .hub-card-label,
html.a11y-high-contrast .hub-card .hub-card-note,
html.a11y-high-contrast .hub-section-intro,
html.a11y-high-contrast .hub-note,
html.a11y-high-contrast .hub-help,
html.a11y-high-contrast .hub-status {
  color: #222 !important;
}

@media (max-width: 820px) {
  .hub-main {
    padding-top: 38px;
  }

  .hub-shell-head {
    display: grid;
  }

  .hub-shell-head .hub-actions {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .hub-table {
    min-width: 520px;
  }

  .hub-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   Hub artifact theme, scoped to .hub-app (brief 1182 design match,
   2026-10-26). Generated from the artifact source stylesheets
   theme.css + money/money-theme.css — see DESIGN-MATCH.md.
   ========================================================================== */
.hub-app {
--text-xs: 12px;
  --text-xs--line-height: 16px;
  --text-sm: 14px;
  --text-sm--line-height: 20px;
  --text-base: 16px;
  --text-base--line-height: 24px;
  --text-lg: 18px;
  --text-lg--line-height: 28px;
  --text-xl: 20px;
  --text-xl--line-height: 28px;
  --text-2xl: 24px;
  --text-2xl--line-height: 32px;
  --text-3xl: 30px;
  --text-3xl--line-height: 36px;
  --text-4xl: 36px;
  --text-4xl--line-height: 42px;
}
.hub-app { color-scheme: dark;
  /* RESKIN 2026-10-26: site scheme (assets/site.css :root dark tokens) — the Hub
     wears the website's deep-indigo scheme in both OS colour modes. */
  --bg: #120C2E;
  --surface: #1E1748;
  --surface-raised: #251C52;
  --surface-soft: #2C2352;
  --text: #F3EDDA;
  --dim: #C9C2A8;
  --border: rgba(196,181,253,.30);
  --accent: #E8C15A;
  --accent-ink: #120C2E;
  --profit: #74AD8C;
  --loss: #D2899E;
  --amber: #E8C15A;
  --brand-gold: #C9A227;
  --radius: 16px;
  --shadow: 0 18px 44px rgba(5,2,20,.45);
  --shadow-control: 0 8px 20px rgba(5,2,20,.35);
  --space-surface: var(--surface);
  --space-surface-alt: var(--surface-soft);
  --space-muted: var(--dim);
  --space-border: var(--border);
  --space-accent: var(--accent); }
@media (prefers-color-scheme: dark) {
.hub-app { color-scheme: dark;
    --bg: #120C2E;
    --surface: #1E1748;
    --surface-raised: #251C52;
    --surface-soft: #2C2352;
    --text: #F3EDDA;
    --dim: #C9C2A8;
    --border: rgba(196,181,253,.30);
    --accent: #E8C15A;
    --accent-ink: #120C2E;
    --profit: #74AD8C;
    --loss: #D2899E;
    --amber: #E8C15A;
    --shadow: 0 18px 44px rgba(5,2,20,.45);
    --shadow-control: 0 8px 20px rgba(5,2,20,.35); }
}
.hub-app * { box-sizing: border-box; }
.hub-app { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: "Jost", "Avenir Next", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.hub-app button, .hub-app textarea, .hub-app input { font: inherit; }
.hub-app button { -webkit-tap-highlight-color: transparent; }
.hub-app .app-shell { min-height: 100vh; background: var(--bg); }
.hub-app .hub-stage { width: min(1180px, 100%); margin: 0 auto; padding: 32px 16px 56px; }
.hub-app .mission-hero { padding: 26px 3px 24px; }
.hub-app .mission-topline, .hub-app .section-heading, .hub-app .subhead, .hub-app .note-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hub-app .pair-badge, .hub-app .checkpoint, .hub-app .gate-state, .hub-app .version-chip { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; font: 700 11px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .035em; }
.hub-app .pair-badge { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.hub-app .checkpoint { background: var(--surface-soft); color: var(--dim); }
.hub-app .mission-copy { display: grid; gap: 22px; margin-top: 28px; }
.hub-app .eyebrow { margin: 0 0 7px; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hub-app h1, .hub-app h2, .hub-app h3, .hub-app p { margin-top: 0; }
.hub-app h1 { margin-bottom: 0; max-width: 720px; font-size: clamp(34px, 8vw, 58px); line-height: .98; letter-spacing: -.05em; font-weight: 730; }
.hub-app h1 em { color: var(--accent); font-style: normal; }
.hub-app .mission-copy > p { margin: 0; max-width: 500px; color: var(--dim); font-size: 16px; line-height: 1.55; align-self: end; }
.hub-app .baseline-rail { margin-top: 26px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-soft); border: 1px solid var(--border); box-shadow: inset 0 1px rgba(255,255,255,.05); overflow: hidden; }
.hub-app .baseline-rail span { color: var(--dim); font-size: 12px; }
.hub-app .baseline-rail strong { margin-left: auto; font: 650 13px/1.2 "SFMono-Regular", Consolas, monospace; }
.hub-app .baseline-rail i { color: var(--dim); font-style: normal; }
.hub-app .baseline-rail b { color: var(--profit); font: 750 14px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .top-grid, .hub-app .lower-grid { display: grid; gap: 16px; align-items: start; }
.hub-app .panel { margin-bottom: 16px; padding: 20px; border: 1px solid color-mix(in srgb, var(--border) 84%, transparent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.hub-app .section-heading { margin-bottom: 18px; }
.hub-app .section-heading h2 { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: -.025em; }
.hub-app .section-heading .eyebrow { margin-bottom: 5px; }
.hub-app .gate-state, .hub-app .version-chip { background: var(--surface-soft); color: var(--text); }
.hub-app .gate-state.ready { border-color: color-mix(in srgb, var(--profit) 35%, var(--border)); background: color-mix(in srgb, var(--profit) 10%, var(--surface)); color: var(--profit); }
.hub-app .version-chip { border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
.hub-app .gate-list { display: grid; gap: 6px; }
.hub-app .gate-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 10px; border-radius: 13px; cursor: pointer; color: var(--text); }
.hub-app .gate-item:hover { background: var(--surface-soft); }
.hub-app .gate-item input { width: 25px; height: 25px; margin: 0; flex: 0 0 auto; appearance: none; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-raised); color: transparent; box-shadow: 0 2px 7px rgba(0,0,0,.08); cursor: pointer; }
.hub-app .gate-item input:checked { background: var(--profit); border-color: var(--profit); }
.hub-app .gate-item input:checked::after { content: "✓"; display: grid; place-items: center; width: 100%; height: 100%; color: #120C2E; font-weight: 800; }
.hub-app .gate-item input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .checkmark { display: none; }
.hub-app .gate-item > span:last-child { font-size: 14px; line-height: 1.35; }
.hub-app .gate-verdict { margin-top: 16px; padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 14px; background: color-mix(in srgb, var(--amber) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 36%, transparent); }
.hub-app .gate-verdict span { color: var(--amber); font: 750 11px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; }
.hub-app .gate-verdict strong { font-size: 13px; text-align: right; }
.hub-app .gate-verdict.ready { background: color-mix(in srgb, var(--profit) 12%, var(--surface)); border-color: color-mix(in srgb, var(--profit) 38%, transparent); }
.hub-app .gate-verdict.ready span { color: var(--profit); }
.hub-app .text-button { margin: 14px 4px 0 auto; display: block; border: 0; background: transparent; color: var(--dim); font-size: 12px; cursor: pointer; }
.hub-app .gate-risk-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.hub-app .gate-risk-block label { min-width: 0; display: grid; gap: 6px; }
.hub-app .gate-risk-block label > span { color: var(--dim); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .gate-risk-block input, .hub-app .gate-risk-block select { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--border); border-radius: 11px; outline: none; background: var(--surface-raised); color: var(--text); padding: 9px 11px; }
.hub-app .gate-risk-block input:focus, .hub-app .gate-risk-block select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.hub-app .gate-acceptance { margin-top: 6px; align-items: flex-start; border: 1px dashed var(--border); }
.hub-app .gate-acceptance > span:last-child { font-size: 13px; font-style: italic; }
.hub-app .gate-breaker { display: grid; gap: 5px; padding: 15px 16px; border-radius: 14px; background: color-mix(in srgb, var(--loss) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--loss) 38%, transparent); }
.hub-app .gate-breaker strong { color: var(--loss); font-size: 14px; }
.hub-app .gate-breaker span { color: var(--dim); font-size: 13px; line-height: 1.45; }
.hub-app .programme-state { display: grid; gap: 0; margin-bottom: 18px; }
.hub-app .programme-state > div { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--border); }
.hub-app .programme-state > div:first-child { border-top: 0; padding-top: 0; }
.hub-app .programme-state strong { font-size: 13px; }
.hub-app .programme-state span { color: var(--dim); font-size: 13px; line-height: 1.45; }
.hub-app .status-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--dim); }
.hub-app .status-dot.on { background: var(--profit); box-shadow: 0 0 0 5px color-mix(in srgb, var(--profit) 12%, transparent); }
.hub-app .icon-button { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-control); cursor: pointer; font-size: 13px; font-weight: 650; }
.hub-app .icon-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hub-app .icon-button:disabled { opacity: .55; cursor: wait; }
.hub-app .balance-block { padding: 10px 0 18px; }
.hub-app .balance-block > span { display: block; color: var(--dim); font-size: 13px; }
.hub-app .balance-block > strong { display: block; margin: 3px 0 2px; font: 680 clamp(33px, 9vw, 48px)/1 "SFMono-Regular", Consolas, monospace; letter-spacing: -.055em; }
.hub-app .balance-block small { color: var(--dim); font-size: 12px; }
.hub-app .account-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; border-radius: 15px; overflow: hidden; background: var(--border); border: 1px solid var(--border); }
.hub-app .stat { min-width: 0; padding: 13px; background: var(--surface-raised); }
.hub-app .stat:last-child { grid-column: 1/-1; }
.hub-app .stat span, .hub-app .stat strong { display: block; }
.hub-app .stat span { color: var(--dim); font-size: 11px; }
.hub-app .stat strong { margin-top: 4px; font: 650 14px/1.3 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.hub-app .positive { color: var(--profit) !important; }
.hub-app .negative { color: var(--loss) !important; }
.hub-app .freshness { margin-top: 10px; color: var(--dim); font-size: 11px; }
.hub-app .warning { margin-bottom: 14px; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--amber); font-size: 12px; }
.hub-app .positions-grid { display: grid; gap: 18px; margin-top: 22px; align-items: start; }
.hub-app .subhead { margin-bottom: 8px; }
.hub-app .subhead h3 { margin: 0; font-size: 14px; }
.hub-app .subhead > span { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--dim); font: 700 11px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .position-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); }
.hub-app .direction { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }
.hub-app .direction.buy { color: var(--profit); background: color-mix(in srgb, var(--profit) 12%, transparent); }
.hub-app .direction.sell { color: var(--loss); background: color-mix(in srgb, var(--loss) 12%, transparent); }
.hub-app .direction svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hub-app .position-row strong, .hub-app .position-row span { display: block; }
.hub-app .position-row strong { font: 650 13px/1.25 "SFMono-Regular", Consolas, monospace; }
.hub-app .position-row span { color: var(--dim); font-size: 11px; }
.hub-app .position-value { text-align: right; }
.hub-app .quiet-empty, .hub-app .empty-state { padding: 16px; border-radius: 14px; background: var(--surface-soft); color: var(--dim); font-size: 13px; }
.hub-app #hubCalStrip { overflow-x: auto; }
.hub-app .cal-strip-table { min-width: 0; font-size: 13px; }
.hub-app .cal-strip-table caption { padding: 4px 2px 10px; color: var(--dim); font-weight: 500; font-size: 12.5px; }
.hub-app .cal-strip-table th, .hub-app .cal-strip-table td { padding: 8px; }
.hub-app .cal-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--text); font: 700 10.5px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .03em; white-space: nowrap; }
.hub-app .cal-pill-high { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.hub-app .cal-blackout-tag { display: inline-flex; align-items: center; min-height: 22px; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--amber); color: var(--accent-ink); font: 800 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.hub-app .cal-row-blackout td { background: color-mix(in srgb, var(--amber) 8%, transparent); }
.hub-app .cal-freshness { margin-top: 10px; }
.hub-app .empty-state strong, .hub-app .empty-state span { display: block; }
.hub-app .empty-state span { margin-top: 3px; }
.hub-app .log-heading { margin-bottom: 14px; }
.hub-app .net-chip { font: 700 13px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .metric-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); background: var(--border); border-radius: 15px; overflow: hidden; }
.hub-app .metric-strip > div { padding: 13px; background: var(--surface-raised); }
.hub-app .metric-strip span, .hub-app .metric-strip strong { display: block; }
.hub-app .metric-strip span { color: var(--dim); font-size: 11px; }
.hub-app .metric-strip strong { margin-top: 3px; font: 680 17px/1.2 "SFMono-Regular", Consolas, monospace; }
.hub-app .trade-list { margin-top: 14px; }
.hub-app .trade-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; padding: 15px 2px; border-top: 1px solid var(--border); }
.hub-app .trade-primary { display: flex; gap: 10px; align-items: center; min-width: 0; }
.hub-app .trade-primary strong, .hub-app .trade-primary span { display: block; }
.hub-app .trade-primary strong { font: 700 14px/1.25 "SFMono-Regular", Consolas, monospace; }
.hub-app .trade-primary span { margin-top: 2px; color: var(--dim); font-size: 11px; }
.hub-app .trade-levels { grid-column: 1/-1; display: flex; align-items: center; gap: 8px; color: var(--dim); font: 600 12px/1.2 "SFMono-Regular", Consolas, monospace; }
.hub-app .trade-levels i { font-style: normal; opacity: .5; }
.hub-app .trade-levels em { margin-left: auto; padding: 4px 6px; border-radius: 6px; background: var(--surface-soft); color: var(--dim); font-style: normal; font-size: 10px; }
.hub-app .trade-outcome { grid-column: 2; grid-row: 1; text-align: right; }
.hub-app .trade-outcome > strong, .hub-app .trade-outcome > span { display: block; font: 700 13px/1.25 "SFMono-Regular", Consolas, monospace; }
.hub-app .trade-outcome > span { margin-top: 3px; font-size: 11px; }
.hub-app .note-picker { align-items: center; justify-content: flex-start; gap: 10px; }
.hub-app .note-picker button { min-width: 38px; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #120C2E); font-weight: 750; cursor: pointer; }
.hub-app .note-picker button:disabled { opacity: .45; cursor: default; }
.hub-app .note-picker span { margin-left: auto; }
.hub-app .r-editor { display: flex; justify-content: flex-end; gap: 4px; }
.hub-app .r-editor input { width: 54px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--text); }
.hub-app .r-editor button, .hub-app .note-actions button { padding: 7px 10px; border: 0; border-radius: 9px; background: var(--accent); color: #120C2E; font-weight: 750; cursor: pointer; }
.hub-app .notes-grid { display: grid; gap: 18px; }
.hub-app .note-editor > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.hub-app .note-editor > div:first-child strong { font-size: 15px; }
.hub-app .note-editor > div:first-child span { color: var(--dim); font: 500 12px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .note-editor textarea { width: 100%; margin-top: 9px; padding: 13px; resize: vertical; border: 1px solid var(--border); border-radius: 14px; outline: none; background: var(--surface-raised); color: var(--text); line-height: 1.45; }
.hub-app .note-editor textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.hub-app .note-actions { margin-top: 8px; }
.hub-app .note-actions small { color: var(--dim); font-size: 11px; }
.hub-app .note-actions button { min-height: 38px; padding-inline: 14px; box-shadow: var(--shadow-control); }
.hub-app .note-actions button:disabled { opacity: .55; }
.hub-app .rule-stack { display: grid; gap: 0; }
.hub-app .rule-stack > div { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 13px 0; border-top: 1px solid var(--border); }
.hub-app .rule-stack > div:first-child { border-top: 0; }
.hub-app .rule-stack > div > span { color: var(--dim); font: 700 11px/1.5 "SFMono-Regular", Consolas, monospace; }
.hub-app .rule-stack p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.45; }
.hub-app .rule-stack strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 14px; }
.hub-app .loading-state, .hub-app .fatal-state { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--dim); }
.hub-app .loading-state span { width: 30px; height: 30px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: hub-spin .8s linear infinite; }
.hub-app .loading-state p { margin: 0; }
.hub-app .fatal-state button { border: 0; border-radius: 11px; padding: 10px 14px; background: var(--accent); color: #120C2E; font-weight: 700; }
.hub-app .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; }
@keyframes hub-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hub-app .loading-state span { animation: none; }
}
@media (min-width: 700px) {
.hub-app .hub-stage { padding: 46px 24px 72px; }
.hub-app .mission-copy { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); align-items: end; }
.hub-app .baseline-rail { width: fit-content; min-width: 620px; }
.hub-app .top-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.hub-app .panel { padding: 24px; }
.hub-app .positions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .metric-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hub-app .trade-row { grid-template-columns: minmax(180px, .8fr) minmax(260px, 1fr) minmax(110px, auto); }
.hub-app .trade-levels { grid-column: 2; }
.hub-app .trade-outcome { grid-column: 3; grid-row: 1; }
.hub-app .notes-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.hub-app .lower-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; }
}
@media (max-width: 430px) {
.hub-app .hub-stage { padding-inline: 12px; }
.hub-app .mission-hero { padding-inline: 3px; }
.hub-app .checkpoint { font-size: 11px; }
.hub-app .baseline-rail { flex-wrap: wrap; }
.hub-app .baseline-rail strong { order: 3; width: 100%; margin-left: 0; }
.hub-app .balance-block > strong { font-size: 34px; }
.hub-app .icon-button span { display: none; }
.hub-app .icon-button { width: 42px; justify-content: center; padding: 0; }
}
.hub-app .workspace-nav { position: sticky; top: 0; z-index: 50; isolation: isolate; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0 0 18px; padding: 4px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-control); -webkit-transform: translateZ(0); transform: translateZ(0); }
.hub-app .workspace-nav button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; -webkit-appearance: none; appearance: none; background: transparent; background-image: none; color: var(--dim); box-shadow: none; font-weight: 700; cursor: pointer; }
.hub-app .workspace-nav .nav-number { color: var(--dim); font: 700 10px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .workspace-nav .nav-label { min-width: 0; color: inherit; background: transparent !important; box-shadow: none !important; font: inherit; line-height: inherit; }
.hub-app .workspace-nav button.active { background: var(--accent); background-image: none; color: var(--accent-ink); box-shadow: var(--shadow-control); }
.hub-app .workspace-nav button.active .nav-number { color: var(--accent-ink); }
.hub-app .journal-workspace { display: grid; gap: 16px; }
.hub-app .journal-toolbar { display: grid; grid-template-columns: 46px minmax(0,1fr) 46px auto; gap: 8px; align-items: stretch; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.hub-app .journal-toolbar > button { min-height: 48px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); color: var(--text); cursor: pointer; font-weight: 750; }
.hub-app .journal-toolbar > button:focus-visible, .hub-app .workspace-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .journal-toolbar label { min-width: 0; display: grid; align-content: center; padding: 3px 10px; }
.hub-app .journal-toolbar label span { color: var(--dim); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hub-app .journal-toolbar select { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; font-weight: 720; }
.hub-app .journal-toolbar .primary-action { padding-inline: 18px; border-color: var(--accent); background: var(--accent); color: #120C2E; box-shadow: var(--shadow-control); }
.hub-app .journal-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--border); box-shadow: var(--shadow); }
.hub-app .journal-metrics > div { min-width: 0; padding: 15px; background: var(--surface); }
.hub-app .journal-metrics span, .hub-app .journal-metrics strong { display: block; }
.hub-app .journal-metrics span { color: var(--dim); font-size: 11px; }
.hub-app .journal-metrics strong { margin-top: 4px; font: 680 18px/1.2 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.hub-app .journal-composer { border-top: 4px solid var(--accent); }
.hub-app .text-button.inline { margin: 0; }
.hub-app .journal-form { display: grid; gap: 17px; }
.hub-app .journal-form-grid { display: grid; gap: 10px; }
.hub-app .journal-form-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hub-app .journal-form-grid.levels { grid-template-columns: repeat(5,minmax(0,1fr)); }
.hub-app .journal-form-grid.result-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hub-app .journal-form label { min-width: 0; display: grid; gap: 6px; }
.hub-app .journal-form label > span { color: var(--dim); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .journal-form input, .hub-app .journal-form select, .hub-app .journal-form textarea { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 11px; outline: none; background: var(--surface-raised); color: var(--text); padding: 11px 12px; }
.hub-app .journal-form input, .hub-app .journal-form select { min-height: 46px; }
.hub-app .journal-form textarea { resize: vertical; line-height: 1.45; }
.hub-app .journal-form input:focus, .hub-app .journal-form select:focus, .hub-app .journal-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.hub-app .journal-form input:disabled, .hub-app .journal-form select:disabled { opacity: .7; cursor: not-allowed; }
.hub-app .wide-field { width: 100%; }
.hub-app .journal-evidence { display: grid; grid-template-columns: minmax(180px,.32fr) minmax(0,1fr); gap: 10px; }
.hub-app .voice-slot button, .hub-app .chart-slot > button:first-of-type { width: 100%; min-height: 80px; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-raised); color: var(--text); text-align: left; cursor: pointer; }
.hub-app .voice-slot button span, .hub-app .chart-slot b { color: var(--accent); font: 750 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.hub-app .voice-slot button strong, .hub-app .chart-slot span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.hub-app .chart-slots { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.hub-app .chart-slot { position: relative; min-width: 0; }
.hub-app .chart-slot.selected > button:first-of-type { border-style: solid; border-color: var(--profit); background: color-mix(in srgb,var(--profit) 8%,var(--surface)); }
.hub-app .remove-file { position: absolute; top: 3px; right: 3px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--loss); cursor: pointer; font-size: 18px; }
.hub-app .breach-flag-row { padding: 12px 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.hub-app .breach-flag-row.over { border-color: color-mix(in srgb, var(--loss) 45%, var(--border)); background: color-mix(in srgb, var(--loss) 8%, var(--surface)); }
.hub-app .breach-flag-toggle { display: flex !important; align-items: flex-start; gap: 11px; cursor: pointer; }
.hub-app .breach-flag-toggle input { width: 24px !important; height: 24px; min-height: 24px !important; flex: 0 0 auto; margin: 1px 0 0; padding: 0 !important; appearance: none; border-radius: 8px !important; border: 1px solid var(--border); background: var(--surface-raised); cursor: pointer; }
.hub-app .breach-flag-toggle input:checked { background: var(--loss); border-color: var(--loss); }
.hub-app .breach-flag-toggle input:checked::after { content: "✓"; display: grid; place-items: center; width: 100%; height: 100%; color: #120C2E; font-weight: 800; font-size: 14px; }
.hub-app .breach-flag-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .breach-flag-toggle > span { display: grid; gap: 3px; text-transform: none !important; letter-spacing: normal !important; }
.hub-app .breach-flag-toggle > span strong { font-size: 13.5px; color: var(--text); }
.hub-app .breach-flag-toggle > span small { color: var(--dim); font-size: 11.5px; line-height: 1.45; }
.hub-app .breach-badge { display: inline-flex !important; align-items: center; margin-top: 5px; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--loss) 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--loss) 11%, var(--surface)); color: var(--loss); font: 750 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.hub-app .journal-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.hub-app .journal-actions span { color: var(--dim); font-size: 11px; }
.hub-app .journal-actions button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: #120C2E; font-weight: 780; box-shadow: var(--shadow-control); cursor: pointer; }
.hub-app .journal-actions button:disabled { opacity: .5; cursor: not-allowed; }
.hub-app .form-error { margin: 0; color: var(--loss); font-weight: 700; font-size: 13px; }
.hub-app .queue-status { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.hub-app .live-sync, .hub-app .queue-count, .hub-app .filed-state { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--dim); font: 700 10px/1 "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.hub-app .live-sync { gap: 6px; border-color: color-mix(in srgb, var(--profit) 35%, var(--border)); color: var(--profit); }
.hub-app .live-sync i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
.hub-app .live-sync.degraded { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); color: var(--amber); }
.hub-app .filed-state { border-color: color-mix(in srgb, var(--profit) 35%, var(--border)); background: color-mix(in srgb, var(--profit) 10%, var(--surface)); color: var(--profit); }
.hub-app .queue-list { display: grid; }
.hub-app .queue-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--border); }
.hub-app .queue-row.complete { opacity: .7; }
.hub-app .queue-row strong, .hub-app .queue-row span { display: block; }
.hub-app .queue-row strong { font: 700 13px/1.2 "SFMono-Regular", Consolas, monospace; }
.hub-app .queue-row span { color: var(--dim); font-size: 11px; }
.hub-app .queue-pnl { font: 700 12px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .queue-row button { min-height: 38px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 11px; background: color-mix(in srgb,var(--accent) 12%,var(--surface)); color: var(--accent); font-weight: 750; cursor: pointer; }
.hub-app .journal-records { display: grid; }
.hub-app .journal-record { border-top: 1px solid var(--border); }
.hub-app .journal-record-summary { width: 100%; min-height: 72px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 2px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.hub-app .journal-record-summary > span:nth-child(2) { min-width: 0; }
.hub-app .journal-record-summary small, .hub-app .journal-record-summary strong { display: block; }
.hub-app .journal-record-summary small { color: var(--dim); font-size: 11px; }
.hub-app .journal-record-summary strong { margin-top: 3px; font-size: 15px; }
.hub-app .journal-result { text-align: right; }
.hub-app .journal-result b { display: block; font: 750 14px/1.2 "SFMono-Regular", Consolas, monospace; }
.hub-app .journal-record-detail { padding: 0 0 18px 42px; }
.hub-app .record-thesis { margin: 0 0 12px; color: var(--text); line-height: 1.55; white-space: pre-wrap; }
.hub-app .record-level-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--border); }
.hub-app .record-level-grid > div { min-width: 0; padding: 11px; background: var(--surface-raised); }
.hub-app .record-level-grid span, .hub-app .record-level-grid strong { display: block; }
.hub-app .record-level-grid span { color: var(--dim); font-size: 10px; }
.hub-app .record-level-grid strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; font: 650 12px/1.2 "SFMono-Regular",Consolas,monospace; }
.hub-app .record-images { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.hub-app .record-images figure { overflow: hidden; margin: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-raised); }
.hub-app .record-images img { width: 100%; max-height: 430px; display: block; object-fit: contain; background: var(--surface-soft); }
.hub-app .record-images figcaption { padding: 8px 10px; overflow: hidden; color: var(--dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hub-app .record-audio { display: grid; grid-template-columns: minmax(140px,.5fr) minmax(200px,1fr); gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; border-radius: 13px; background: var(--surface-soft); }
.hub-app .record-audio span { overflow: hidden; color: var(--dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hub-app .record-audio audio { width: 100%; height: 38px; }
.hub-app .record-lesson { margin-bottom: 12px; padding: 13px; border-radius: 13px; background: var(--surface-soft); }
.hub-app .record-lesson span { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.hub-app .record-lesson p { margin: 5px 0 0; line-height: 1.5; white-space: pre-wrap; }
.hub-app .record-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--dim); font-size: 10px; }
.hub-app .record-footer button { border: 0; background: transparent; color: var(--loss); cursor: pointer; }
.hub-app .record-footer button.danger-confirm { padding: 8px 10px; border-radius: 9px; background: var(--loss); color: #120C2E; font-weight: 700; }
.hub-app .journal-section { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); display: grid; gap: 12px; }
.hub-app .journal-section legend { padding: 0 6px; color: var(--accent); font-size: 11px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .journal-section .section-note { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
.hub-app .journal-form-grid.reads { grid-template-columns: minmax(0,1fr) minmax(150px,.35fr); }
.hub-app .journal-form-grid.quad { grid-template-columns: repeat(4,minmax(0,1fr)); }
.hub-app .chart-slots { grid-template-columns: repeat(7,minmax(0,1fr)); }
.hub-app .chart-type-picker { display: grid; gap: 3px; margin-top: 6px; }
.hub-app .chart-type-picker span { color: var(--dim); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hub-app .chart-type-picker select { width: 100%; min-height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-raised); color: var(--text); font-size: 11px; padding: 4px 6px; }
.hub-app .journal-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px 0 4px; }
.hub-app .journal-filters label { display: grid; gap: 5px; }
.hub-app .journal-filters label > span { color: var(--dim); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .journal-filters select { min-height: 42px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-raised); color: var(--text); padding: 8px 10px; }
.hub-app .journal-filters > button { min-height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 11px; background: transparent; color: var(--dim); font-weight: 700; cursor: pointer; }
.hub-app .record-group { margin-bottom: 12px; }
.hub-app .record-group h4 { margin: 0 0 6px; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .record-group dl { margin: 0; display: grid; gap: 5px; }
.hub-app .record-group dl > div { display: grid; grid-template-columns: minmax(110px,.35fr) minmax(0,1fr); gap: 10px; }
.hub-app .record-group dt { color: var(--dim); font-size: 11px; }
.hub-app .record-group dd { margin: 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.hub-app .journal-empty { min-height: 240px; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; }
.hub-app .journal-empty strong { font-size: 22px; }
.hub-app .journal-empty span { margin: 6px 0 17px; color: var(--dim); }
.hub-app .journal-empty button { min-height: 43px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--accent); color: #120C2E; font-weight: 750; cursor: pointer; }
@media (max-width: 760px) {
.hub-app .journal-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
.hub-app .journal-metrics > div:last-child { grid-column: auto; }
.hub-app .journal-form-grid.compact { grid-template-columns: 1fr 1fr; }
.hub-app .journal-form-grid.levels { grid-template-columns: 1fr 1fr; }
.hub-app .journal-form-grid.levels label:last-child { grid-column: 1/-1; }
.hub-app .journal-evidence { grid-template-columns: 1fr; }
.hub-app .journal-form-grid.quad { grid-template-columns: 1fr 1fr; }
.hub-app .journal-form-grid.reads { grid-template-columns: 1fr; }
.hub-app .chart-slots { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hub-app .record-level-grid { grid-template-columns: 1fr 1fr; }
.hub-app .record-level-grid > div:last-child { grid-column: 1/-1; }
}
@media (max-width: 520px) {
.hub-app .workspace-nav button { font-size: 13px; }
.hub-app .journal-toolbar { grid-template-columns: 42px minmax(0,1fr) 42px; }
.hub-app .journal-toolbar .primary-action { grid-column: 1/-1; }
.hub-app .journal-form-grid.compact, .hub-app .journal-form-grid.result-fields { grid-template-columns: 1fr; }
.hub-app .chart-slots { grid-template-columns: 1fr 1fr; }
.hub-app .chart-slot:last-child { grid-column: 1/-1; }
.hub-app .journal-actions { display: grid; }
.hub-app .journal-actions button { width: 100%; }
.hub-app .queue-row { grid-template-columns: auto minmax(0,1fr) auto; }
.hub-app .queue-pnl { grid-column: 2; }
.hub-app .queue-row > button, .hub-app .queue-row .filed-state { grid-column: 3; grid-row: 1 / span 2; }
.hub-app .journal-record-detail { padding-left: 0; }
.hub-app .record-images { grid-template-columns: 1fr; }
.hub-app .record-audio { grid-template-columns: 1fr; }
.hub-app .record-footer { align-items: flex-start; }
}
@media (max-width: 430px) {
.hub-app .workspace-nav button { gap: 4px; padding-inline: 4px; font-size: 11px; line-height: 1.15; text-align: center; }
.hub-app .workspace-nav .nav-number { display: none; }
}
.hub-app .desk-workspace, .hub-app .library-workspace { display: grid; gap: 16px; min-width: 0; }
.hub-app .desk-workspace .panel, .hub-app .library-workspace .panel { margin-bottom: 0; }
.hub-app .desk-workspace .panel { min-width: 0; max-width: 100%; overflow: hidden; }
.hub-app .desk-split { min-width: 0; }
.hub-app .desk-split > .panel { min-width: 0; }
.hub-app .desk-note { margin: 0 0 12px; color: var(--dim); font-size: 12px; line-height: 1.5; }
.hub-app .tv-widget { width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface-raised); }
.hub-app .tv-widget .tradingview-widget-container__widget { width: 100% !important; max-width: 100%; }
.hub-app .tv-widget iframe { display: block; width: 100% !important; max-width: 100%; border: 0; background: #120C2E; }
.hub-app .tv-link { color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hub-app .tv-link:hover { text-decoration: underline; }
.hub-app .tv-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .tv-link.standalone { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); }
.hub-app .watchlist-rows { display: grid; }
.hub-app .watch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--border); }
.hub-app .watch-row:first-child { border-top: 0; }
.hub-app .watch-select { min-width: 0; display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.hub-app .watch-select:hover { background: var(--surface-soft); }
.hub-app .watch-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .watch-row.selectable.selected .watch-select { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--border)); }
.hub-app .watch-row > .watch-main, .hub-app .watch-row > .watch-quote { padding-inline: 2px; }
.hub-app .watch-main strong, .hub-app .watch-main small, .hub-app .watch-quote strong, .hub-app .watch-quote small { display: block; }
.hub-app .watch-main strong { font: 700 14px/1.25 "SFMono-Regular", Consolas, monospace; }
.hub-app .watch-main small { margin-top: 2px; color: var(--dim); font-size: 11px; }
.hub-app .watch-quote { text-align: right; }
.hub-app .watch-quote strong { font: 680 15px/1.25 "SFMono-Regular", Consolas, monospace; }
.hub-app .watch-quote small { margin-top: 2px; color: var(--dim); font-size: 11px; }
.hub-app .watch-quote .watch-unavailable { color: var(--amber); font-size: 12px; font-weight: 700; }
.hub-app .watch-row .tv-link { grid-column: 2; justify-self: end; }
.hub-app .calendar-events { display: grid; }
.hub-app .calendar-event { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 2px; border-top: 1px solid var(--border); }
.hub-app .calendar-time strong, .hub-app .calendar-time span { display: block; }
.hub-app .calendar-time strong { font: 700 14px/1.25 "SFMono-Regular", Consolas, monospace; }
.hub-app .calendar-time span { margin-top: 3px; width: fit-content; padding: 3px 7px; border-radius: 6px; background: var(--surface-soft); color: var(--dim); font: 700 10px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .calendar-body strong, .hub-app .calendar-body span { display: block; }
.hub-app .calendar-body strong { font-size: 14px; }
.hub-app .calendar-body span { margin-top: 2px; color: var(--dim); font-size: 12px; line-height: 1.45; }
.hub-app .calendar-body .blackout-line { color: var(--amber); font-weight: 650; }
.hub-app .calendar-event.blackout-active { margin-inline: -8px; padding-inline: 10px; border-radius: 12px; background: color-mix(in srgb, var(--loss) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--loss) 35%, transparent); }
.hub-app .blackout-chip { padding: 5px 9px; border-radius: 999px; background: var(--loss); color: #120C2E; font: 750 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .05em; white-space: nowrap; }
.hub-app .view-only-chip { display: inline-flex; align-items: center; margin-top: 4px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--amber) 12%, var(--surface)); color: var(--amber); font: 750 9.5px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.hub-app .desk-split { display: grid; gap: 16px; }
.hub-app .scan-controls { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px auto; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.hub-app .scan-controls > button { min-height: 48px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); color: var(--text); cursor: pointer; font-weight: 750; box-shadow: var(--shadow-control); }
.hub-app .scan-controls > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .scan-controls label { min-width: 0; display: grid; align-content: center; gap: 2px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.hub-app .scan-controls label span { color: var(--dim); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hub-app .scan-controls input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 700; }
.hub-app .scan-session { padding: 14px 0 4px; border-top: 1px solid var(--border); }
.hub-app .scan-session:first-of-type { border-top: 0; }
.hub-app .scan-session-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hub-app .scan-session-head h3 { margin: 0; font-size: 15px; }
.hub-app .scan-summary { color: var(--dim); font-size: 12px; }
.hub-app .scan-r { margin-left: auto; font: 700 12px/1 "SFMono-Regular", Consolas, monospace; color: var(--dim); }
.hub-app .scan-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hub-app .scan-cell { min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-raised); }
.hub-app .scan-cell strong { display: block; font: 700 12px/1.2 "SFMono-Regular", Consolas, monospace; }
.hub-app .scan-cell .scan-status { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.hub-app .scan-cell small { display: block; margin-top: 2px; color: var(--dim); font-size: 11px; line-height: 1.4; }
.hub-app .scan-cell.traded { border-color: color-mix(in srgb, var(--profit) 40%, var(--border)); background: color-mix(in srgb, var(--profit) 7%, var(--surface)); }
.hub-app .scan-cell.traded .scan-status { color: var(--profit); }
.hub-app .scan-cell.stood_aside { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); background: color-mix(in srgb, var(--amber) 7%, var(--surface)); }
.hub-app .scan-cell.stood_aside .scan-status { color: var(--amber); }
.hub-app .scan-cell.no_setup .scan-status { color: var(--dim); font-weight: 600; }
.hub-app .alert-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.hub-app .alert-form label { min-width: 0; display: grid; gap: 6px; }
.hub-app .alert-form label > span { color: var(--dim); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .alert-form input, .hub-app .alert-form select { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--border); border-radius: 11px; outline: none; background: var(--surface-raised); color: var(--text); padding: 10px 12px; }
.hub-app .alert-form input:focus, .hub-app .alert-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.hub-app .alert-form .form-error { grid-column: 1 / -1; }
.hub-app .alert-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.hub-app .alert-form-actions button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--accent); color: #120C2E; font-weight: 780; box-shadow: var(--shadow-control); cursor: pointer; }
.hub-app .alert-form-actions button:disabled { opacity: .5; cursor: not-allowed; }
.hub-app .alert-form-actions .alert-cancel { border: 1px solid var(--border); background: var(--surface-raised); color: var(--dim); box-shadow: none; }
.hub-app .alert-list { display: grid; }
.hub-app .alert-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--border); }
.hub-app .alert-row.expired { opacity: .72; }
.hub-app .alert-main strong, .hub-app .alert-main span, .hub-app .alert-main small { display: block; }
.hub-app .alert-main strong { font: 700 13px/1.25 "SFMono-Regular", Consolas, monospace; }
.hub-app .alert-main span { margin-top: 2px; font-size: 13px; }
.hub-app .alert-main small { margin-top: 2px; color: var(--dim); font-size: 11px; }
.hub-app .alert-status { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--profit) 35%, var(--border)); background: color-mix(in srgb, var(--profit) 10%, var(--surface)); color: var(--profit); font: 700 10px/1 "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.hub-app .alert-status.expired { border-color: var(--border); background: var(--surface-soft); color: var(--dim); }
.hub-app .alert-actions { display: flex; gap: 6px; }
.hub-app .alert-actions button { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-raised); color: var(--text); font-weight: 700; cursor: pointer; }
.hub-app .alert-actions button.danger-confirm { border-color: var(--loss); background: var(--loss); color: #120C2E; }
.hub-app .lib-summary { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.hub-app .lib-summary.dim { color: var(--dim); font-size: 13px; }
.hub-app .lib-search { display: grid; gap: 6px; margin-top: 14px; }
.hub-app .lib-search > span { color: var(--dim); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .lib-search input { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 12px; outline: none; background: var(--surface-raised); color: var(--text); padding: 11px 13px; box-shadow: var(--shadow-control); }
.hub-app .lib-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.hub-app .parity-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-bottom: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--border); }
.hub-app .parity-stats > div { min-width: 0; padding: 13px; background: var(--surface-raised); }
.hub-app .parity-stats span, .hub-app .parity-stats strong { display: block; }
.hub-app .parity-stats span { color: var(--dim); font-size: 11px; }
.hub-app .parity-stats strong { margin-top: 3px; font: 680 19px/1.2 "SFMono-Regular", Consolas, monospace; }
.hub-app .parity-stages { display: grid; gap: 0; margin-bottom: 6px; }
.hub-app .parity-stage { padding: 12px 0; border-top: 1px solid var(--border); }
.hub-app .parity-stage:first-child { border-top: 0; }
.hub-app .parity-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hub-app .parity-stage-head strong { font-size: 14px; }
.hub-app .parity-stage p { margin: 5px 0 0; color: var(--dim); font-size: 13px; line-height: 1.5; }
.hub-app .stage-status { min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--dim); font: 700 10px/1 "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.hub-app .stage-status.stage-done { border-color: color-mix(in srgb, var(--profit) 35%, var(--border)); background: color-mix(in srgb, var(--profit) 10%, var(--surface)); color: var(--profit); }
.hub-app .stage-status.stage-this-build { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.hub-app .lib-subhead { margin: 16px 0 8px; color: var(--accent); font-size: 11px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .parity-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.hub-app .parity-area { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.hub-app .parity-area-name { min-width: 0; font-size: 12.5px; line-height: 1.35; }
.hub-app .parity-area-name b { color: var(--dim); font: 700 11px/1 "SFMono-Regular", Consolas, monospace; }
.hub-app .parity-area-tags { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.hub-app .rating-chip, .hub-app .stage2-chip { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; font: 700 9.5px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; white-space: nowrap; }
.hub-app .rating-chip { border: 1px solid var(--border); background: var(--surface-soft); color: var(--dim); }
.hub-app .rating-chip.rating-partial { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); color: var(--amber); }
.hub-app .rating-chip.rating-full { border-color: color-mix(in srgb, var(--profit) 40%, var(--border)); background: color-mix(in srgb, var(--profit) 10%, var(--surface)); color: var(--profit); }
.hub-app .stage2-chip { background: var(--accent); color: var(--accent-ink); }
.hub-app .lib-layout { display: grid; gap: 18px; }
.hub-app .lib-source-list { display: grid; gap: 8px; align-content: start; }
.hub-app .lib-source-button { width: 100%; display: grid; gap: 3px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); color: var(--text); text-align: left; cursor: pointer; box-shadow: var(--shadow-control); }
.hub-app .lib-source-button:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.hub-app .lib-source-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .lib-source-button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.hub-app .lib-source-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-app .lib-source-top b { color: var(--dim); font: 700 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.hub-app .basis-chip { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--profit) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--profit) 30%, var(--border)); color: var(--profit); font: 700 9.5px/1 "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.hub-app .basis-chip.explained { background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); color: var(--amber); }
.hub-app .lib-source-button strong { font-size: 15px; }
.hub-app .lib-source-title { color: var(--dim); font-size: 12.5px; line-height: 1.4; }
.hub-app .lib-source-counts { color: var(--dim); font-size: 11px; }
.hub-app .lib-detail { min-width: 0; }
.hub-app .lib-detail-head h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.hub-app .lib-read-status { margin: 0 0 14px; padding: 12px 13px; border-radius: 12px; background: var(--surface-soft); font-size: 12.5px; line-height: 1.55; }
.hub-app .lib-detail h4 { margin: 16px 0 7px; color: var(--accent); font-size: 11px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.hub-app .lib-doctrine { margin: 0; font-size: 13.5px; line-height: 1.6; }
.hub-app .lib-items { display: grid; }
.hub-app .lib-item { display: grid; grid-template-columns: minmax(86px, .22fr) minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.hub-app .lib-item-ref { font: 700 11.5px/1.45 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.hub-app .lib-item-substance { font-size: 12.5px; line-height: 1.5; }
.hub-app .lib-status { min-height: 24px; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--dim); font: 700 9.5px/1.35 "SFMono-Regular", Consolas, monospace; text-align: center; }
.hub-app .lib-status.status-wave1 { border-color: color-mix(in srgb, var(--profit) 40%, var(--border)); background: color-mix(in srgb, var(--profit) 11%, var(--surface)); color: var(--profit); }
.hub-app .lib-status.status-wave2 { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.hub-app .lib-status.status-banked { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); color: var(--amber); }
.hub-app .lib-operationalised { margin: 14px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.hub-app .lib-operationalised strong { color: var(--text); }
.hub-app .lib-extra { margin: 8px 0 0; color: var(--amber); font-size: 12.5px; line-height: 1.55; font-weight: 600; }
.hub-app .lib-banked-group { padding: 12px 0 4px; border-top: 1px solid var(--border); }
.hub-app .lib-banked-group:first-of-type { border-top: 0; }
.hub-app .lib-banked-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hub-app .lib-banked-head strong { font-size: 13.5px; }
.hub-app .lib-banked-head span { color: var(--dim); font-size: 12px; }
.hub-app .lib-banked-head .lib-count { margin-left: auto; font: 700 11px/1 "SFMono-Regular", Consolas, monospace; color: var(--amber); }
.hub-app .lib-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-app .lib-banked-chip { padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--amber) 6%, var(--surface)); font-size: 11.5px; line-height: 1.3; }
.hub-app .lib-lower-grid { display: grid; gap: 16px; }
.hub-app .theme-list { display: grid; }
.hub-app .theme-row { padding: 11px 0; border-top: 1px solid var(--border); }
.hub-app .theme-row:first-child { border-top: 0; padding-top: 0; }
.hub-app .theme-row strong { font-size: 13.5px; }
.hub-app .theme-row p { margin: 4px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.hub-app .gap-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.hub-app .gap-list li { font-size: 13px; line-height: 1.55; color: var(--text); }
.hub-app .gap-list li::marker { color: var(--amber); }
@media (min-width: 900px) {
.hub-app .desk-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
.hub-app .lib-layout { grid-template-columns: minmax(260px, .38fr) minmax(0, 1fr); }
.hub-app .lib-lower-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
.hub-app .scan-cells { grid-template-columns: 1fr 1fr; }
.hub-app .scan-cell:last-child { grid-column: 1 / -1; }
.hub-app .parity-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .parity-stats > div:last-child { grid-column: 1 / -1; }
.hub-app .parity-areas { grid-template-columns: 1fr; }
.hub-app .lib-item { grid-template-columns: 1fr; gap: 4px; }
.hub-app .lib-status { justify-self: start; }
.hub-app .watch-select { grid-template-columns: 1fr; gap: 3px; }
.hub-app .watch-quote { text-align: left; }
.hub-app .watch-row { grid-template-columns: minmax(0, 1fr) auto; }
.hub-app .calendar-event { grid-template-columns: 70px minmax(0, 1fr); }
.hub-app .blackout-chip { grid-column: 2; justify-self: start; }
.hub-app .alert-row { grid-template-columns: minmax(0, 1fr) auto; }
.hub-app .alert-actions { grid-column: 1 / -1; }
.hub-app .alert-form { grid-template-columns: 1fr; }
}
.hub-app .perf-scope { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; --perf-c2: #7C3AED; --perf-c3: #0E7C7B; --perf-c4: #8A6D2F; }
.hub-app .perf-scope .panel { margin-bottom: 0; min-width: 0; }
.hub-app .perf-a11y-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-control); }
.hub-app .perf-a11y-label { color: var(--dim); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; margin-right: 2px; }
.hub-app .perf-a11y-bar button { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.hub-app .perf-a11y-bar button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hub-app .perf-a11y-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .perf-paper-banner { display: grid; gap: 5px; padding: 16px 18px; border: 2px solid color-mix(in srgb, var(--amber) 62%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--amber) 13%, var(--surface)); box-shadow: var(--shadow); }
.hub-app .perf-paper-banner strong { font-size: clamp(16px, 4.4vw, 21px); line-height: 1.25; letter-spacing: .01em; }
.hub-app .perf-paper-banner span { color: var(--dim); font-size: 13px; line-height: 1.5; }
.hub-app .perf-paper-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--amber); font: 750 10.5px/1.35 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; white-space: normal; }
.hub-app .perf-report { padding: 28px 24px 24px; }
.hub-app .perf-report-head h2 { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
.hub-app .perf-report-status { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.hub-app .perf-report-meta { display: grid; gap: 0; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--border); }
.hub-app .perf-report-meta > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.hub-app .perf-report-meta dt { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding-top: 1px; }
.hub-app .perf-report-meta dd { margin: 0; font-size: 14px; line-height: 1.45; }
.hub-app .perf-report-total { display: grid; gap: 2px; padding: 22px 0 20px; border-bottom: 1px solid var(--border); }
.hub-app .perf-report-total > span:first-child { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hub-app .perf-report-total > strong { font: 700 40px/1.05 "SFMono-Regular", Consolas, monospace; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hub-app .perf-report-total-sub { color: var(--dim); font-size: 13px; }
.hub-app .perf-report-tables { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 700px) {
.hub-app .perf-report-tables { grid-template-columns: 1fr 1fr; align-items: start; }
}
.hub-app .perf-report-table tfoot th, .hub-app .perf-report-table tfoot td { font-weight: 700; border-top: 2px solid var(--text); }
.hub-app .perf-report-table td { text-align: right; font-variant-numeric: tabular-nums; }
.hub-app .perf-report-table thead th:last-child, .hub-app .perf-report-table td:last-child { text-align: right; }
.hub-app .perf-report-table thead th:nth-child(2) { text-align: right; }
.hub-app .perf-report-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 20px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--border); }
.hub-app .perf-report-facts > div { padding: 12px 14px; background: var(--surface-raised); }
.hub-app .perf-report-facts dt { color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hub-app .perf-report-facts dd { margin: 4px 0 0; font: 700 16px/1.2 "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; }
.hub-app .perf-report-note { margin: 18px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.hub-app .perf-report-scope.perf-large .perf-report-head h2 { font-size: 32px; }
.hub-app .perf-report-scope.perf-large .perf-report-total > strong { font-size: 46px; }
.hub-app .perf-report-scope.perf-large .perf-report-meta dd, .hub-app .perf-report-scope.perf-large .perf-report-note { font-size: 15px; }
.hub-app .perf-headline-total { display: grid; gap: 3px; padding: 6px 0 16px; }
.hub-app .perf-headline-total > span { color: var(--dim); font-size: 13px; }
.hub-app .perf-headline-total > strong { font: 700 clamp(30px, 8vw, 46px)/1.08 "SFMono-Regular", Consolas, monospace; letter-spacing: -.03em; overflow-wrap: anywhere; }
.hub-app .perf-headline-total > strong em { font-style: normal; font-size: .62em; color: var(--text); }
.hub-app .perf-headline-total small { color: var(--dim); font-size: 12px; line-height: 1.5; }
.hub-app .perf-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--border); }
.hub-app .perf-stat-grid > div { min-width: 0; padding: 13px; background: var(--surface-raised); }
.hub-app .perf-stat-grid span, .hub-app .perf-stat-grid strong { display: block; }
.hub-app .perf-stat-grid span { color: var(--dim); font-size: 11px; line-height: 1.4; }
.hub-app .perf-stat-grid strong { margin-top: 4px; font: 680 17px/1.25 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.hub-app .perf-era-grid { display: grid; gap: 12px; margin-bottom: 18px; }
.hub-app .perf-era-card { padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-raised); }
.hub-app .perf-era-card h3 { margin: 0 0 7px; font-size: 15px; }
.hub-app .perf-era-card > strong { display: block; font: 700 22px/1.2 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.hub-app .perf-era-card > strong em { font-style: normal; font-size: 15px; color: var(--text); }
.hub-app .perf-era-card > span { display: block; margin-top: 5px; color: var(--dim); font-size: 12px; }
.hub-app .perf-era-card p { margin: 8px 0 0; color: var(--dim); font-size: 13px; line-height: 1.5; }
.hub-app .perf-chart { display: block; width: 100%; height: auto; margin-bottom: 16px; }
.hub-app .perf-grid-line { stroke: var(--border); stroke-width: 1; }
.hub-app .perf-axis-line { stroke: var(--dim); stroke-width: 1.4; }
.hub-app .perf-axis-text { fill: var(--dim); font: 600 12.5px "SFMono-Regular", Consolas, monospace; }
.hub-app .perf-axis-sub { font-size: 10.5px; opacity: .75; }
.hub-app .perf-axis-title { font-weight: 800; }
.hub-app .perf-value-text { fill: var(--text); font: 700 13.5px "SFMono-Regular", Consolas, monospace; }
.hub-app .perf-row-label { fill: var(--text); font: 700 15px "Jost", "Avenir Next", "Segoe UI", sans-serif; }
.hub-app .perf-fill-pos { fill: var(--profit); }
.hub-app .perf-fill-neg { fill: var(--loss); }
.hub-app .perf-fill-zero { fill: var(--dim); }
.hub-app .perf-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.hub-app .perf-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hub-app .perf-point { fill: var(--surface-raised); stroke: var(--accent); stroke-width: 3; }
.hub-app .perf-inline-note { margin: -4px 0 14px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.hub-app .perf-pie-grid { display: grid; gap: 16px; }
.hub-app .perf-donut-wrap { display: grid; justify-items: center; gap: 14px; margin-bottom: 16px; }
.hub-app .perf-donut { width: min(340px, 100%); height: auto; }
.hub-app .perf-donut-center-top { fill: var(--text); font: 700 21px "SFMono-Regular", Consolas, monospace; }
.hub-app .perf-donut-center-bottom { fill: var(--dim); font: 600 12px "Jost", "Avenir Next", "Segoe UI", sans-serif; }
.hub-app .perf-slice { stroke: var(--surface); stroke-width: 2; }
.hub-app .perf-slice-1, .hub-app .perf-outcome-1 { fill: var(--profit); }
.hub-app .perf-slice-2 { fill: var(--perf-c2); }
.hub-app .perf-slice-3 { fill: var(--perf-c3); }
.hub-app .perf-slice-4 { fill: var(--perf-c4); }
.hub-app .perf-outcome-2 { fill: var(--loss); }
.hub-app .perf-outcome-3 { fill: var(--dim); }
.hub-app .perf-slice-label { font: 700 11.5px "SFMono-Regular", Consolas, monospace; pointer-events: none; }
.hub-app .perf-slice-1-label, .hub-app .perf-outcome-1-label, .hub-app .perf-outcome-2-label, .hub-app .perf-outcome-3-label { fill: #120C2E; }
.hub-app .perf-slice-2-label { fill: #F3EDDA; }
.hub-app .perf-slice-3-label, .hub-app .perf-slice-4-label { fill: #FFFFFF; }
.hub-app .perf-external-label { fill: var(--text); font: 700 11.5px "SFMono-Regular", Consolas, monospace; pointer-events: none; }
.hub-app .perf-leader-line { fill: none; stroke: var(--dim); stroke-width: 1; }
@media (prefers-color-scheme: dark) {
.hub-app .perf-slice-1-label, .hub-app .perf-outcome-1-label, .hub-app .perf-outcome-2-label, .hub-app .perf-outcome-3-label { fill: #120C2E; }
.hub-app .perf-slice-2-label { fill: #F3EDDA; }
}
.hub-app .perf-scope.perf-contrast .perf-slice-label { fill: #000000; }
.hub-app .perf-scope.perf-large .perf-slice-label, .hub-app .perf-scope.perf-large .perf-external-label { font-size: 13px; }
.hub-app .perf-swatch { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 4px; }
.hub-app .perf-swatch.perf-slice-1, .hub-app .perf-swatch.perf-outcome-1 { background: var(--profit); }
.hub-app .perf-swatch.perf-slice-2 { background: var(--perf-c2); }
.hub-app .perf-swatch.perf-slice-3 { background: var(--perf-c3); }
.hub-app .perf-swatch.perf-slice-4 { background: var(--perf-c4); }
.hub-app .perf-swatch.perf-outcome-2 { background: var(--loss); }
.hub-app .perf-swatch.perf-outcome-3 { background: var(--dim); }
.hub-app .perf-legend { width: 100%; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hub-app .perf-legend li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hub-app .perf-legend-label { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.hub-app .perf-legend-value { margin-left: auto; font: 650 12.5px "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.hub-app .perf-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }
.hub-app .perf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hub-app .perf-table caption { padding: 11px 13px; text-align: left; color: var(--dim); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; background: var(--surface-soft); }
.hub-app .perf-table th, .hub-app .perf-table td { padding: 9px 13px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.hub-app .perf-table thead th { border-top: 0; color: var(--dim); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.hub-app .perf-table tbody th { font-weight: 700; white-space: nowrap; }
.hub-app .perf-table td { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12.5px; }
.hub-app .perf-table td.perf-note-cell { font-family: inherit; font-size: 12.5px; line-height: 1.45; min-width: 180px; }
.hub-app .perf-breach-note { display: grid; gap: 5px; margin-top: 14px; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--loss) 42%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--loss) 8%, var(--surface)); }
.hub-app .perf-breach-note strong { color: var(--loss); font-size: 13.5px; }
.hub-app .perf-breach-note span { font-size: 13px; line-height: 1.55; }
.hub-app .perf-notes-list { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 20px; }
.hub-app .perf-notes-list li { font-size: 13.5px; line-height: 1.6; }
.hub-app .perf-notes-list li::marker { color: var(--amber); }
.hub-app .perf-scope.perf-large { font-size: 18px; }
.hub-app .perf-scope.perf-large .perf-table { font-size: 15px; }
.hub-app .perf-scope.perf-large .perf-table td { font-size: 14.5px; }
.hub-app .perf-scope.perf-large .perf-axis-text { font-size: 14.5px; }
.hub-app .perf-scope.perf-large .perf-value-text { font-size: 15.5px; }
.hub-app .perf-scope.perf-large .perf-notes-list li, .hub-app .perf-scope.perf-large .perf-era-card p, .hub-app .perf-scope.perf-large .perf-breach-note span { font-size: 15.5px; }
.hub-app .perf-scope.perf-large .section-heading h2 { font-size: 24px; }
.hub-app .perf-scope.perf-contrast { --bg: #000000; --surface: #000000; --surface-raised: #0d0d0d; --surface-soft: #1c1c1c; --text: #ffffff; --dim: #e6e6e6; --border: #f2f2f2; --accent: #00e676; --accent-ink: #000000; --profit: #4dff88; --loss: #ff8080; --amber: #e6e6e6; --perf-c3: #66b2ff; --perf-c4: #cfa9ff; --shadow: none; --shadow-control: none; }
.hub-app .perf-scope.perf-contrast .perf-paper-banner, .hub-app .perf-scope.perf-contrast .perf-breach-note { background: #000000; }
.hub-app .perf-scope.perf-reduce-motion *, .hub-app .perf-scope.perf-reduce-motion *::before, .hub-app .perf-scope.perf-reduce-motion *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
.hub-app .perf-scope *, .hub-app .perf-scope *::before, .hub-app .perf-scope *::after { transition: none !important; animation: none !important; }
}
@media (min-width: 700px) {
.hub-app .perf-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-app .perf-era-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .perf-donut-wrap { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; }
.hub-app .perf-donut { justify-self: center; }
}
@media (min-width: 980px) {
.hub-app .perf-pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 520px) {
.hub-app .perf-headline-panel .section-heading { align-items: flex-start; flex-direction: column; }
.hub-app .perf-paper-chip { width: 100%; }
}
.hub-app .hub-stage { width: min(760px, 100%); padding: 20px 16px 110px; }
@media (min-width: 900px) {
.hub-app .hub-stage { width: min(1060px, 100%); padding: 32px 32px 64px 232px; }
}
.hub-app .panel { border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 20px; }
.hub-app .eyebrow { color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.hub-app h1 { letter-spacing: -.02em; font-weight: 700; }
.hub-app h2 { letter-spacing: -.015em; font-weight: 650; }
.hub-app .mission-hero { padding: 4px 2px 18px; }
.hub-app .mission-copy { margin-top: 14px; }
.hub-app .mission-copy > p { font-size: 15px; }
.hub-app .pair-badge { border-color: var(--border); background: var(--surface); color: var(--text); font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 700; }
.hub-app .brand-mark { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: var(--brand-gold); display: inline-grid; place-items: center; color: #120C2E; font-size: 10px; font-weight: 800; }
.hub-app .checkpoint { background: var(--surface-soft); border-color: var(--border); color: var(--dim); font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; }
.hub-app .baseline-rail { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.hub-app .baseline-rail b, .hub-app .baseline-rail strong { font-family: inherit; }
.hub-app .icon-button, .hub-app .journal-actions button, .hub-app .note-actions button, .hub-app .alert-form-actions button, .hub-app .journal-empty button, .hub-app .fatal-state button, .hub-app .journal-toolbar .primary-action { border-radius: 999px; box-shadow: none; font-weight: 650; }
.hub-app .icon-button { border-color: var(--border); background: var(--surface); }
.hub-app .gate-item input:checked::after, .hub-app .breach-flag-toggle input:checked::after { color: #120C2E; }
.hub-app .journal-actions button, .hub-app .note-actions button, .hub-app .alert-form-actions button, .hub-app .journal-empty button, .hub-app .fatal-state button { color: var(--accent-ink); }
.hub-app .hub-stage { padding-bottom: 110px; }
.hub-app .ws-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 96%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(12px); }
.hub-app .ws-nav button { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 12px; background: transparent; color: var(--dim); font-size: 11px; font-weight: 600; cursor: pointer; }
.hub-app .ws-nav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub-app .ws-nav button.active { color: var(--text); }
.hub-app .ws-nav button.active svg { stroke: var(--accent); }
.hub-app .ws-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .ws-nav .ws-nav-brand { display: none; }
@media (min-width: 900px) {
.hub-app .hub-stage { padding: 32px 32px 64px 232px; }
.hub-app .ws-nav { left: 0; right: auto; top: 0; bottom: 0; width: 200px; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 4px; align-content: start; padding: 28px 14px; border-top: 0; border-right: 1px solid var(--border); background: var(--surface); backdrop-filter: none; }
.hub-app .ws-nav .ws-nav-brand { display: flex; align-items: center; gap: 9px; padding: 2px 10px 22px; font-size: 14px; font-weight: 750; color: var(--text); }
.hub-app .ws-nav button { flex-direction: row; justify-content: flex-start; gap: 11px; min-height: 46px; padding: 0 12px; font-size: 14px; border-radius: 12px; }
.hub-app .ws-nav button.active { background: var(--surface-soft); color: var(--text); }
}
.hub-app .home-focus-card .mission-copy { margin-top: 0; }
.hub-app .home-focus-card .mission-copy > p { max-width: 640px; }
.hub-app .home-focus-card .baseline-rail { margin-top: 16px; }
@media (min-width: 700px) {
.hub-app .home-focus-card .baseline-rail { width: 100%; min-width: 0; }
}
.hub-app .home-summary { display: grid; gap: 4px; }
.hub-app .home-summary .hs-label { color: var(--dim); font-size: 13px; font-weight: 600; }
.hub-app .home-summary .hs-total { font-size: clamp(38px, 9vw, 52px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hub-app .home-summary .hs-change { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hub-app .home-summary .hs-change span { color: var(--dim); font-weight: 500; }
.hub-app .hs-chart-wrap { margin-top: 14px; }
.hub-app .hs-chart { display: block; width: 100%; height: auto; }
.hub-app .hs-line { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hub-app .hs-line.neg { stroke: var(--loss); }
.hub-app .hs-area { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.hub-app .hs-area.neg { fill: color-mix(in srgb, var(--loss) 10%, transparent); }
.hub-app .hs-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.hub-app .hs-dot.neg { stroke: var(--loss); }
.hub-app .hs-axis-text { fill: var(--dim); font-size: 11.5px; font-weight: 500; }
.hub-app .hs-grid-line { stroke: var(--border); stroke-width: 1; }
.hub-app .range-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.hub-app .range-pills button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); font-size: 13px; font-weight: 650; cursor: pointer; }
.hub-app .range-pills button.active { background: var(--surface-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.hub-app .range-pills button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .hs-table-details { margin-top: 12px; }
.hub-app .hs-table-details summary { min-height: 40px; display: inline-flex; align-items: center; color: var(--accent); font-size: 13px; font-weight: 650; cursor: pointer; }
.hub-app .hs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hub-app .hs-table caption { text-align: left; padding: 8px 0; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hub-app .hs-table th, .hub-app .hs-table td { padding: 8px 6px; text-align: left; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.hub-app .hs-table thead th { border-top: 0; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.hub-app .direction { border-radius: 50%; width: 34px; height: 34px; }
.hub-app .stat strong, .hub-app .metric-strip strong, .hub-app .journal-metrics strong, .hub-app .balance-block > strong { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hub-app .balance-block > strong { font-weight: 700; }
.hub-app .trade-primary strong, .hub-app .queue-row strong, .hub-app .alert-main strong, .hub-app .watch-main strong { font-family: inherit; }
.hub-app .gate-verdict, .hub-app .gate-risk-block, .hub-app .breach-flag-row, .hub-app .alert-form, .hub-app .lib-read-status, .hub-app .record-lesson, .hub-app .record-audio { border-radius: 14px; background: var(--surface-soft); border-color: var(--border); }
.hub-app .journal-section { border-radius: 14px; }
.hub-app .scan-cell, .hub-app .perf-era-card { border-radius: 14px; background: var(--surface); }
.hub-app .lib-source-button { border-radius: 14px; box-shadow: none; background: var(--surface); }
.hub-app .journal-toolbar, .hub-app .perf-a11y-bar { border-radius: 16px; box-shadow: var(--shadow); background: var(--surface); border-color: var(--border); }
.hub-app .perf-table-wrap { border-radius: 14px; }
.hub-app .perf-table caption { background: var(--surface-soft); }
.hub-app .more-menu { display: grid; gap: 12px; }
.hub-app .more-row { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-align: left; cursor: pointer; }
.hub-app .more-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-app .more-tile { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--text); }
.hub-app .more-tile svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub-app .more-row strong, .hub-app .more-row small { display: block; }
.hub-app .more-row strong { font-size: 15px; }
.hub-app .more-row small { margin-top: 2px; color: var(--dim); font-size: 12.5px; line-height: 1.4; }
.hub-app .more-chevron { color: var(--dim); font-size: 20px; }
.hub-app .display-toggles { display: grid; }
.hub-app .display-toggles .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.hub-app .display-toggles .toggle-row:first-child { border-top: 0; }
.hub-app .display-toggles .toggle-row span { font-size: 14px; }
.hub-app .display-toggles .toggle-row button { min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--dim); font-size: 13px; font-weight: 650; cursor: pointer; }
.hub-app .display-toggles .toggle-row button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hub-app .app-shell.ws-large { font-size: 18px; }
.hub-app .app-shell.ws-contrast { --bg: #ffffff; --surface: #ffffff; --surface-raised: #ffffff; --surface-soft: #f0f0f0; --text: #000000; --dim: #333333; --border: #8a8a8a; --accent: #005c28; --profit: #005c28; --loss: #8f1d0d; --amber: #333333; --shadow: none; --shadow-control: none; }
@media (prefers-color-scheme: dark) {
.hub-app .app-shell.ws-contrast { --bg: #000000; --surface: #000000; --surface-raised: #0d0d0d; --surface-soft: #1c1c1c; --text: #ffffff; --dim: #e6e6e6; --border: #f2f2f2; --accent: #4dff88; --profit: #4dff88; --loss: #ff9d8a; --amber: #e6e6e6; }
}
.hub-app .app-shell.ws-reduce-motion *, .hub-app .app-shell.ws-reduce-motion *::before, .hub-app .app-shell.ws-reduce-motion *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (max-width: 560px) {
.hub-app .mission-topline { flex-wrap: wrap; }
.hub-app .checkpoint { white-space: normal; text-align: center; }
}
.hub-app ::selection { background: color-mix(in srgb, var(--brand-gold) 35%, transparent); }
.hub-app .app-shell { background: radial-gradient(1200px 480px at 85% -120px, color-mix(in srgb, var(--brand-gold) 7%, transparent), transparent 60%), radial-gradient(900px 420px at -10% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%), var(--bg); }
.hub-app .panel { box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent); }
.hub-app .pair-badge { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #ffffff 12%), var(--accent)); border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--accent)); letter-spacing: .05em; }
.hub-app .brand-mark { background: linear-gradient(135deg, var(--brand-gold), color-mix(in srgb, var(--brand-gold) 55%, var(--accent))); color: #120C2E; }
.hub-app .baseline-rail { background: linear-gradient(90deg, var(--surface-soft), color-mix(in srgb, var(--brand-gold) 7%, var(--surface-soft))); }
.hub-app .more-row { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.hub-app .more-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); }
.hub-app .more-tile { background: linear-gradient(145deg, var(--surface-soft), color-mix(in srgb, var(--brand-gold) 10%, var(--surface-soft))); }
.hub-app .ws-nav button { transition: color .15s ease, background .15s ease; }
.hub-app .ws-nav button.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hub-app button:focus-visible, .hub-app a:focus-visible, .hub-app input:focus-visible, .hub-app select:focus-visible, .hub-app textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.hub-app .more-row, .hub-app .ws-nav button { transition: none; }
.hub-app .more-row:hover { transform: none; }
}
.hub-app .sheet-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 8, 0.52); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.hub-app .receipt-sheet { width: min(680px, 100%); max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
@media (min-width: 720px) {
.hub-app .sheet-backdrop { align-items: center; padding: 24px; }
.hub-app .receipt-sheet { border-radius: 22px; border-bottom: 1px solid var(--border); }
}
.hub-app .receipt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hub-app .rf-field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.hub-app .rf-field > span, .hub-app .rf-field > legend, .hub-app .rf-label { font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: .02em; }
.hub-app .rf-field small { font-weight: 500; }
.hub-app .rf-full { grid-column: 1 / -1; }
.hub-app .rf-field input, .hub-app .rf-field select, .hub-app .rf-field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); color: var(--text); font-size: 15px; }
.hub-app .rf-field textarea { min-height: 0; resize: vertical; }
.hub-app .rf-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hub-app .rf-segmented button { min-height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); color: var(--dim); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.hub-app .rf-segmented button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hub-app .rf-attach-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hub-app .rf-attach-button { min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 650; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-control); }
.hub-app .rf-attach-button:disabled { opacity: .55; cursor: default; }
.hub-app .rf-selected-file { margin: 8px 0 0; font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
.hub-app .rf-error { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--loss) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--loss) 35%, transparent); color: var(--loss); font-size: 14px; }
.hub-app .rf-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-app .rf-save { min-height: 48px; padding: 0 22px; border: 0; border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #ffffff 12%), var(--accent)); color: var(--accent-ink); font-weight: 750; font-size: 15px; cursor: pointer; box-shadow: var(--shadow-control); margin-left: auto; }
.hub-app .rf-save:disabled { opacity: .55; cursor: default; }
.hub-app .rf-delete { min-height: 44px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--loss) 40%, var(--border)); border-radius: 12px; background: transparent; color: var(--loss); font-weight: 650; cursor: pointer; }
.hub-app .rf-delete-confirm { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; flex-wrap: wrap; }
.hub-app .rf-delete-confirm button { min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.hub-app .danger-text { color: var(--loss); }
.hub-app .receipts-hero-grid { display: grid; gap: 16px; }
@media (min-width: 720px) {
.hub-app .receipts-hero-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
}
.hub-app .receipts-hero-main span { display: block; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hub-app .receipts-hero-main strong { display: block; margin-top: 6px; font-size: clamp(30px, 7vw, 44px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hub-app .receipts-hero-main small { color: var(--dim); font-size: 13px; }
.hub-app .receipts-year { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.hub-app .receipts-year select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); color: var(--text); font-size: 14px; }
.hub-app .receipts-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.hub-app .receipts-actions-row .rf-save { margin-left: 0; }
.hub-app .receipts-gmail-note { margin: 10px 0 0; color: var(--dim); font-size: 13px; }
.hub-app .receipts-filters { display: grid; gap: 12px; }
@media (min-width: 720px) {
.hub-app .receipts-filters { grid-template-columns: 1.4fr 1fr 1fr; }
}
.hub-app .receipt-list { display: grid; }
.hub-app .receipt-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); align-items: start; }
.hub-app .receipt-row:first-child { border-top: 0; padding-top: 2px; }
.hub-app .receipt-date-badge { display: grid; place-items: center; gap: 0; padding: 7px 0; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--border); }
.hub-app .receipt-date-badge span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.hub-app .receipt-date-badge strong { font-size: 17px; line-height: 1.1; }
.hub-app .receipt-row-main { min-width: 0; }
.hub-app .receipt-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hub-app .receipt-row-top h3 { margin: 0; font-size: 15.5px; overflow-wrap: anywhere; }
.hub-app .receipt-row-top strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .receipt-row-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; color: var(--dim); font-size: 12.5px; }
.hub-app .receipt-row-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 12.5px; }
.hub-app .receipt-row-foot a { color: var(--accent); overflow-wrap: anywhere; }
.hub-app .treatment-chip, .hub-app .receipt-source-chip { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: var(--surface-soft); color: var(--dim); }
.hub-app .treatment-chip.deductible { color: var(--profit); border-color: color-mix(in srgb, var(--profit) 40%, var(--border)); background: color-mix(in srgb, var(--profit) 9%, var(--surface)); }
.hub-app .treatment-chip.review { color: var(--text); border-color: color-mix(in srgb, var(--brand-gold) 55%, var(--border)); background: color-mix(in srgb, var(--brand-gold) 12%, var(--surface)); }
.hub-app .receipt-nofile { color: var(--dim); }
.hub-app .receipts-summary-totals { display: grid; gap: 1px; border-radius: 15px; overflow: hidden; background: var(--border); border: 1px solid var(--border); }
.hub-app .receipts-summary-totals .stat small { display: block; margin-top: 3px; color: var(--dim); font-size: 12px; }
.hub-app .receipts-subhead { margin: 22px 0 10px; font-size: 16px; }
.hub-app .receipts-category-list { display: grid; }
.hub-app .receipts-category-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.hub-app .receipts-review-note { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--brand-gold) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-gold) 32%, transparent); }
.hub-app .receipts-review-note p { margin: 6px 0 0; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.hub-app .flows-freshness { margin: -6px 0 16px; color: var(--dim); font-size: 12.5px; }
.hub-app .flows-period-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.hub-app .flows-month { min-width: 170px; }
.hub-app .flows-alltime { min-height: 46px; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--dim); font-weight: 650; cursor: pointer; }
.hub-app .flows-alltime.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hub-app .flows-period-label { font-weight: 700; font-size: 14px; padding-bottom: 12px; }
.hub-app .flows-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 15px; overflow: hidden; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 860px) {
.hub-app .flows-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hub-app .flows-card small { display: block; margin-top: 3px; color: var(--dim); font-size: 11.5px; line-height: 1.35; }
.hub-app .flows-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 860px) {
.hub-app .flows-source-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hub-app .flows-source { display: grid; gap: 3px; text-align: left; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); color: var(--text); cursor: pointer; }
.hub-app .flows-source span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.hub-app .flows-source strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.hub-app .flows-source small { color: var(--dim); font-size: 11.5px; line-height: 1.35; }
.hub-app .flows-source.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hub-app .flows-note { margin: 12px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.hub-app .flows-count { font: 700 11px/1 "SFMono-Regular", Consolas, monospace; color: var(--dim); }
.hub-app .flow-list { display: grid; }
.hub-app .flow-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); }
.hub-app .flow-row:first-child { border-top: 0; }
.hub-app .flow-source-chip { justify-self: start; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: .03em; border: 1px solid var(--border); background: var(--surface-soft); color: var(--dim); white-space: nowrap; }
.hub-app .flow-source-chip.trading { color: var(--profit); border-color: color-mix(in srgb, var(--profit) 40%, var(--border)); }
.hub-app .flow-source-chip.pay { color: var(--text); border-color: color-mix(in srgb, var(--brand-gold) 55%, var(--border)); background: color-mix(in srgb, var(--brand-gold) 10%, var(--surface)); }
.hub-app .flow-source-chip.bank { color: var(--text); }
.hub-app .flow-main { min-width: 0; display: grid; }
.hub-app .flow-main strong { font-size: 14px; overflow-wrap: anywhere; }
.hub-app .flow-main span { color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.hub-app .flow-side { text-align: right; display: grid; }
.hub-app .flow-side strong { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .flow-side span { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 560px) {
.hub-app .flow-row { grid-template-columns: minmax(0, 1fr) auto; }
.hub-app .flow-source-chip { grid-column: 1 / -1; }
}
.hub-app .flows-pay-table { display: grid; margin-top: 14px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.hub-app .flows-pay-row { display: grid; grid-template-columns: 1.4fr .6fr 1fr 1fr; gap: 8px; padding: 10px 14px; font-size: 13.5px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.hub-app .flows-pay-row:first-child { border-top: 0; }
.hub-app .flows-pay-head { background: var(--surface-soft); font-weight: 700; font-size: 12px; color: var(--dim); }
.hub-app .flows-coverage { display: grid; gap: 10px; margin-bottom: 8px; }
.hub-app .flows-coverage > span { color: var(--dim); font-size: 13px; }
.hub-app .flows-report-group { margin-top: 20px; }
.hub-app .flows-report-group h3 { margin: 0 0 6px; font-size: 15px; }
.hub-app .flows-report-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); }
.hub-app .flows-report-row > div { display: grid; min-width: 0; }
.hub-app .flows-report-row strong { font-size: 14px; }
.hub-app .flows-report-row span { color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.hub-app .flows-report-amount { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
.hub-app .flows-guardrail-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.hub-app .flows-guardrail-row > div { display: grid; min-width: 0; }
.hub-app .flows-guardrail-row strong { font-size: 14px; }
.hub-app .flows-guardrail-row span { color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.hub-app .flows-guardrail-row small { color: var(--dim); font-size: 11.5px; font-weight: 700; }
.hub-app .flows-guardrail-row button { flex: 0 0 auto; min-width: 58px; min-height: 38px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--dim); font-weight: 700; font-size: 13px; cursor: pointer; }
.hub-app .flows-guardrail-row button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hub-app .flows-pills { display: flex; gap: 8px; margin-bottom: 16px; }
.hub-app .flows-pills button { min-height: 42px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--dim); font-weight: 700; font-size: 14px; cursor: pointer; }
.hub-app .flows-pills button.active { background: var(--text); border-color: var(--text); color: var(--bg); }

.hub-app .money-scope { --accent-dark: var(--accent);
  --micro-accent: var(--accent);
  --gold: var(--accent);
  --wealth-gold: var(--text);
  --green: var(--profit);
  --orange: var(--dim);
  --teal: #0E7C7B;
  --purple: var(--dim);
  --red: var(--loss);
  --yes: var(--profit);
  --no: var(--loss);
  --success: var(--profit);
  --warning: var(--dim);
  --error: var(--loss);
  --info: #2E32A8;
  --success-text: var(--profit);
  --warning-text: var(--text);
  --error-text: var(--loss);
  --info-text: #C4B5FD;
  --money-ink: #120C2E;
  --money-deep: #1B1341;
  --money-mid: #232065;
  min-width: 0;
  color: var(--text);
  background: var(--bg); }
.hub-app .money-scope * { box-sizing: border-box; }
.hub-app .money-scope { background: var(--bg); }
.hub-app .money-scope { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Jost", "Avenir Next", "Segoe UI", sans-serif; }
.hub-app .money-scope button, .hub-app .money-scope input { font: inherit; }
.hub-app .money-scope button { color: inherit; }
.hub-app .money-scope button:focus-visible, .hub-app .money-scope input:focus-visible, .hub-app .money-scope summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: 2px; }
.hub-app .money-scope svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hub-app .money-scope .app-shell { min-height: 100vh; padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
.hub-app .money-scope .topbar { min-height: 94px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; display: flex; justify-content: space-between; align-items: end; gap: 14px; background: linear-gradient(145deg, var(--money-mid), var(--money-ink)); color: var(--text); position: sticky; top: 58px; z-index: 20; box-shadow: 0 5px 18px rgba(5,2,20,.35); }
.hub-app .money-scope .date-lockup { text-align: right; display: grid; gap: 1px; }
.hub-app .money-scope .date-lockup span { font-size: 9px; color: var(--dim); }
.hub-app .money-scope .date-lockup strong { color: #F3EDDA; font-size: 16px; font-weight: 900; letter-spacing: -.2px; }
.hub-app .money-scope .exit-btn, .hub-app .money-scope .primary-btn, .hub-app .money-scope .check-btn { border: 0; border-radius: 999px; min-height: 44px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; cursor: pointer; }
.hub-app .money-scope .exit-btn { height: 44px; min-height: 44px; padding: 0 17px; color: var(--text); border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.1); font-size: 12.5px; }
.hub-app .money-scope .exit-btn svg { width: 20px; height: 20px; }
.hub-app .money-scope .currency-bar { width: min(calc(100% - 24px), 760px); margin: 10px auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(20,10,34,.08); }
.hub-app .money-scope .currency-bar label { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 10px; font-weight: 900; }
.hub-app .money-scope .currency-bar select { min-height: 34px; max-width: min(235px, 58vw); border: 1px solid var(--border); border-radius: 999px; padding: 5px 28px 5px 10px; color: var(--text); background: var(--surface-soft); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .rate-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--dim); font-size: 9px; }
.hub-app .money-scope .rate-status a { color: var(--accent); font-weight: 850; text-underline-offset: 2px; }
.hub-app .money-scope .global-search { position: relative; z-index: 19; width: min(calc(100% - 24px), 760px); margin: 10px auto 0; }
.hub-app .money-scope .search-field { isolation: isolate; min-height: 46px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 10px 0 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); background-image: none; box-shadow: 0 5px 18px rgba(20,10,34,.1); -webkit-transform: translateZ(0); transform: translateZ(0); }
.hub-app .money-scope .search-field svg { color: var(--accent); }
.hub-app .money-scope .search-field input { width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0; outline: 0; -webkit-appearance: none; appearance: none; color: var(--text); -webkit-text-fill-color: var(--text); background: transparent !important; background-image: none !important; box-shadow: none !important; font-weight: 750; }
.hub-app .money-scope .search-field input::placeholder { color: var(--dim); }
.hub-app .money-scope .search-field button { width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--dim); background: var(--surface-soft); font-size: 20px; cursor: pointer; }
.hub-app .money-scope .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: min(62vh, 480px); overflow-y: auto; display: grid; gap: 4px; margin: 0; padding: 7px; list-style: none; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 42px rgba(20,10,34,.22); }
.hub-app .money-scope .search-results > li { min-width: 0; margin: 0; padding: 0; }
.hub-app .money-scope .search-results li > button { min-width: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 0; border-radius: 13px; color: var(--text); background: var(--surface-soft); text-align: left; cursor: pointer; }
.hub-app .money-scope .search-results li > button:active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.hub-app .money-scope .search-results li > button span { min-width: 0; display: grid; gap: 1px; }
.hub-app .money-scope .search-results b { color: var(--accent); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.hub-app .money-scope .search-results strong { font-size: 12px; overflow-wrap: anywhere; }
.hub-app .money-scope .search-results small { color: var(--dim); font-size: 9px; overflow-wrap: anywhere; }
.hub-app .money-scope .search-results em { color: var(--accent); font-size: 10px; font-style: normal; font-weight: 900; }
.hub-app .money-scope .search-results p { margin: 0; padding: 18px; color: var(--dim); font-size: 11px; text-align: center; }
.hub-app .money-scope .search-selection { display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 17px; color: var(--text); background: linear-gradient(135deg, var(--money-deep), var(--accent)); box-shadow: var(--shadow); text-align: left; }
.hub-app .money-scope .search-selection > svg { width: 25px; height: 25px; }
.hub-app .money-scope .search-selection > span { min-width: 0; display: grid; gap: 1px; }
.hub-app .money-scope .search-selection small { color: var(--dim); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.hub-app .money-scope .search-selection strong { font-size: 13px; overflow-wrap: anywhere; }
.hub-app .money-scope .search-selection em { color: var(--text); font-size: 10px; font-style: normal; overflow-wrap: anywhere; }
.hub-app .money-scope .search-selection button { width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--text); background: rgba(255,255,255,.18); font-size: 19px; cursor: pointer; }
.hub-app .money-scope .language-control { position: fixed; z-index: 32; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); display: grid; justify-items: start; gap: 8px; }
.hub-app .money-scope .language-trigger { position: relative; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 50%; color: var(--accent-dark); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 9px 26px rgba(20,10,34,.28); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hub-app .money-scope .language-trigger svg { width: 22px; height: 22px; }
.hub-app .money-scope .language-trigger > span { position: absolute; right: -3px; bottom: -2px; min-width: 21px; height: 17px; padding: 0 4px; display: inline-grid; place-items: center; border: 2px solid var(--bg); border-radius: 999px; color: var(--money-ink); background: var(--accent-dark); font-size: 7px; font-weight: 950; letter-spacing: .02em; line-height: 1; }
.hub-app .money-scope .language-trigger:active { transform: translateY(1px); box-shadow: 0 5px 16px rgba(20,10,34,.3); }
.hub-app .money-scope .language-trigger.translating::after { content: ""; position: absolute; inset: -4px; border: 2px solid color-mix(in srgb, var(--accent-dark) 30%, transparent); border-top-color: var(--accent-dark); border-radius: 50%; animation: hub-language-spin .8s linear infinite; }
.hub-app .money-scope .language-trigger.error { color: var(--error-text); border-color: color-mix(in srgb, var(--error) 58%, var(--border)); }
.hub-app .money-scope .language-popover { width: min(274px, calc(100vw - 28px)); padding: 12px; display: grid; gap: 9px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 16px 42px rgba(20,10,34,.34); }
.hub-app .money-scope .language-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-app .money-scope .language-popover-heading > span { display: grid; gap: 1px; }
.hub-app .money-scope .language-popover-heading strong { color: var(--text); font-size: 12px; }
.hub-app .money-scope .language-popover-heading small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .language-popover-heading button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: var(--dim); background: var(--surface-soft); font-size: 19px; line-height: 1; cursor: pointer; }
.hub-app .money-scope .language-popover select { width: 100%; min-height: 42px; padding: 8px 34px 8px 11px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-soft); font-size: 11px; font-weight: 800; }
.hub-app .money-scope .language-status { display: flex; align-items: center; gap: 6px; color: var(--accent-dark); font-size: 9px; font-weight: 800; }
.hub-app .money-scope .language-status::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.hub-app .money-scope .language-status.error { color: var(--error-text); }
@keyframes hub-language-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hub-app .money-scope .language-trigger.translating::after { animation: none; }
}
.hub-app .money-scope [dir="rtl"] .language-control { right: 14px; left: auto; justify-items: end; }
.hub-app .money-scope [dir="rtl"] .language-trigger > span { right: auto; left: -3px; }
.hub-app .money-scope [dir="rtl"] .language-popover select { padding: 8px 11px 8px 34px; }
.hub-app .money-scope [dir="rtl"] .date-lockup { text-align: left; }
.hub-app .money-scope [dir="rtl"] .search-results li > button, .hub-app .money-scope [dir="rtl"] .search-selection, .hub-app .money-scope [dir="rtl"] .account-card, .hub-app .money-scope [dir="rtl"] .goal-planner-heading, .hub-app .money-scope [dir="rtl"] .goal-selector button, .hub-app .money-scope [dir="rtl"] .goal-question-grid label, .hub-app .money-scope [dir="rtl"] .goal-strategy-preview, .hub-app .money-scope [dir="rtl"] .income-idea, .hub-app .money-scope [dir="rtl"] .allocation-list > button, .hub-app .money-scope [dir="rtl"] .watchlist-row, .hub-app .money-scope [dir="rtl"] .suggestion-list, .hub-app .money-scope [dir="rtl"] .risk-tier-link, .hub-app .money-scope [dir="rtl"] .performance-report > div, .hub-app .money-scope [dir="rtl"] .research-scope-note, .hub-app .money-scope [dir="rtl"] .sector-report-brief, .hub-app .money-scope [dir="rtl"] .sector-list, .hub-app .money-scope [dir="rtl"] .research-method, .hub-app .money-scope [dir="rtl"] .candidate-pulse-heading, .hub-app .money-scope [dir="rtl"] .context-tip, .hub-app .money-scope [dir="rtl"] .streak-banner, .hub-app .money-scope [dir="rtl"] .income-total, .hub-app .money-scope [dir="rtl"] .income-entry, .hub-app .money-scope [dir="rtl"] .annual-summary > div:first-child, .hub-app .money-scope [dir="rtl"] .savings-log > div, .hub-app .money-scope [dir="rtl"] .recommendation-hero, .hub-app .money-scope [dir="rtl"] .recommendation-card, .hub-app .money-scope [dir="rtl"] .automation-card, .hub-app .money-scope [dir="rtl"] .trophy-hero, .hub-app .money-scope [dir="rtl"] .badge-picker button, .hub-app .money-scope [dir="rtl"] .badge-celebration > div { text-align: right; }
.hub-app .money-scope [dir="rtl"] .account-balance, .hub-app .money-scope [dir="rtl"] .recommendation-metric { text-align: left; justify-items: start; }
.hub-app .money-scope [dir="rtl"] .currency-input b { padding-right: 14px; padding-left: 0; }
.hub-app .money-scope [dir="rtl"] .currency-input input { padding-right: 4px !important; padding-left: 14px !important; }
.hub-app .money-scope [dir="rtl"] input:not([type="number"]):not([type="date"]):not([type="month"]) { text-align: right; }
.hub-app .money-scope .section-nav { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 4px; margin: 14px auto 0; padding: 5px; width: min(calc(100% - 24px), 760px); border-radius: 999px; background: var(--surface); box-shadow: 0 4px 16px rgba(20, 10, 34, .09); position: sticky; top: 102px; z-index: 15; }
.hub-app .money-scope .section-nav button, .hub-app .money-scope .segmented button { border: 0; border-radius: 999px; background: transparent; min-height: 40px; font-size: 12px; font-weight: 800; cursor: pointer; }
.hub-app .money-scope .section-nav button.active, .hub-app .money-scope .segmented button.active { background: var(--accent); color: var(--text); }
.hub-app .money-scope .section-nav button { min-height: 44px; padding: 11px 4px; }
.hub-app .money-scope .content { width: min(100% - 24px, 1120px); margin: 14px auto 0; display: grid; gap: 14px; text-align: center; }
.hub-app .money-scope .hero-card { color: var(--text); padding: 28px 18px 18px; border-radius: 28px; background: linear-gradient(145deg, var(--money-deep) 0%, var(--accent) 62%, var(--dim) 140%); box-shadow: 0 14px 38px rgba(20, 10, 34, .24); overflow: hidden; position: relative; }
.hub-app .money-scope .hero-card::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; right: -100px; top: -100px; border: 28px solid rgba(255,255,255,.14); }
.hub-app .money-scope .eyebrow, .hub-app .money-scope .portfolio-hero p { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--text); }
.hub-app .money-scope .hero-value { font-variant-numeric: tabular-nums; font-size: clamp(45px, 13vw, 72px); line-height: 1; font-weight: 900; letter-spacing: -3px; margin: 8px 0; }
.hub-app .money-scope .hero-value.negative { color: var(--dim); }
.hub-app .money-scope .hero-sub { margin: 0 auto 20px; max-width: 440px; color: var(--dim); font-size: 12px; }
.hub-app .money-scope .pulse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; position: relative; z-index: 1; }
.hub-app .money-scope .pulse-grid > div { min-width: 0; display: grid; gap: 2px; padding: 11px 5px; border-radius: 16px; background: rgba(255,255,255,.13); }
.hub-app .money-scope .pulse-grid span { font-size: 10px; color: var(--text); }
.hub-app .money-scope .pulse-grid strong { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hub-app .money-scope .negative { color: var(--red) !important; }
.hub-app .money-scope .positive { color: var(--money-mid) !important; }
.hub-app .money-scope .panel, .hub-app .money-scope .budget-group, .hub-app .money-scope .period-strip, .hub-app .money-scope .portfolio-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 15px; }
.hub-app .money-scope .section-heading { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 15px; color: var(--accent); }
.hub-app .money-scope .section-heading > svg { width: 25px; height: 25px; }
.hub-app .money-scope .section-heading h2, .hub-app .money-scope .panel h2 { margin: 0; font-size: 18px; }
.hub-app .money-scope .section-heading p { margin: 2px 0 0; color: var(--dim); font-size: 12px; }
.hub-app .money-scope .accounts-panel { padding: 18px 12px; }
.hub-app .money-scope .accounts-heading { margin-bottom: 12px; }
.hub-app .money-scope .account-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.hub-app .money-scope .account-totals > div { display: grid; gap: 2px; padding: 11px 8px; border-radius: 16px; background: var(--surface-soft); border: 1px solid var(--border); }
.hub-app .money-scope .account-totals span { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .account-totals strong { font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hub-app .money-scope .account-grid { display: grid; gap: 8px; }
.hub-app .money-scope .account-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px; border-radius: 18px; text-align: left; background: var(--surface-soft); border: 1px solid var(--border); }
.hub-app .money-scope .account-card.unlinked { color: var(--dim); border-style: dashed; }
.hub-app .money-scope .account-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.hub-app .money-scope .account-icon svg { width: 22px; height: 22px; }
.hub-app .money-scope .account-copy { display: grid; gap: 1px; min-width: 0; }
.hub-app .money-scope .account-copy strong { font-size: 12px; overflow-wrap: anywhere; }
.hub-app .money-scope .account-copy small { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .account-type { color: var(--accent); font-size: 10px; font-weight: 900; }
.hub-app .money-scope .account-balance { display: grid; justify-items: end; gap: 1px; text-align: right; }
.hub-app .money-scope .account-balance span { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .account-balance strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .account-balance .not-linked { color: var(--dim); font-size: 11px; }
.hub-app .money-scope .account-note { grid-column: 2 / -1; margin: -2px 0 0; color: var(--dim); font-size: 10px; }
.hub-app .money-scope .account-footnote { max-width: 650px; margin: 11px auto 0; color: var(--dim); font-size: 10px; line-height: 1.45; }
.hub-app .money-scope .plaid-refresh-row { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 7px; margin: 0 0 12px; }
.hub-app .money-scope .plaid-refresh-row > span { color: var(--dim); font-size: 9px; line-height: 1.35; }
.hub-app .money-scope .transactions-panel { overflow: hidden; }
.hub-app .money-scope .transactions-heading { margin-bottom: 9px; }
.hub-app .money-scope .transaction-live-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; color: var(--dim); font-size: 9px; }
.hub-app .money-scope .transaction-live-row > span { display: inline-flex; align-items: center; gap: 6px; }
.hub-app .money-scope .transaction-live-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }
.hub-app .money-scope .transaction-live-row button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--accent-dark); background: var(--surface-soft); font-size: 9px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .transaction-live-row button:disabled { opacity: .6; cursor: default; }
.hub-app .money-scope .transaction-filters { display: grid; grid-template-columns: 1fr; gap: 8px; text-align: left; }
.hub-app .money-scope .transaction-filters label { min-width: 0; display: grid; gap: 5px; color: var(--dim); font-size: 9px; font-weight: 850; }
.hub-app .money-scope .transaction-search-field { min-width: 0; min-height: 44px; display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: center; gap: 7px; padding: 0 11px; border: 1.5px solid var(--border); border-radius: 15px; background: var(--surface-soft); }
.hub-app .money-scope .transaction-search-field svg { width: 17px; color: var(--accent); }
.hub-app .money-scope .transaction-search-field input { min-width: 0; width: 100%; min-height: 42px; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
.hub-app .money-scope .transaction-search-field input::placeholder { color: var(--dim); }
.hub-app .money-scope .transaction-filters select { min-width: 0; width: 100%; min-height: 44px; padding: 9px 28px 9px 11px; border: 1.5px solid var(--border); border-radius: 15px; color: var(--text); background: var(--surface-soft); font: inherit; font-size: 11px; font-weight: 800; }
.hub-app .money-scope .transaction-summary { display: flex; justify-content: center; align-items: baseline; gap: 5px; margin: 13px 0 8px; color: var(--dim); font-size: 10px; }
.hub-app .money-scope .transaction-summary strong { color: var(--accent); font-size: 15px; }
.hub-app .money-scope .transaction-list { display: grid; gap: 7px; }
.hub-app .money-scope .transaction-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: 17px; background: var(--surface-soft); border: 1px solid var(--border); text-align: left; }
.hub-app .money-scope .transaction-copy { min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .transaction-copy > div { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.hub-app .money-scope .transaction-copy strong { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.hub-app .money-scope .transaction-copy small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .transaction-copy > span { color: var(--text); font-size: 10px; overflow-wrap: anywhere; }
.hub-app .money-scope .transaction-row > b { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .money-scope .transaction-out { color: var(--text); }
.hub-app .money-scope .transaction-in { color: var(--success-text); }
.hub-app .money-scope .pending-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; color: var(--warning-text); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); font-size: 8px; font-weight: 900; }
.hub-app .money-scope .food-review-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; color: var(--text); background: #7C3AED; font-size: 8px; font-weight: 900; }
.hub-app .money-scope .uber-review-callout { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid color-mix(in srgb, #7C3AED 42%, var(--border)); border-radius: 16px; color: var(--text); background: color-mix(in srgb, #7C3AED 9%, var(--surface-soft)); text-align: left; }
.hub-app .money-scope .uber-review-callout > svg { width: 20px; height: 20px; justify-self: center; color: #7C3AED; }
.hub-app .money-scope .uber-review-callout > span { min-width: 0; display: grid; gap: 1px; color: var(--dim); font-size: 9px; }
.hub-app .money-scope .uber-review-callout strong { color: var(--text); font-size: 11px; }
.hub-app .money-scope .uber-review-callout button { grid-column: 2; width: max-content; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 999px; color: var(--text); background: #7C3AED; font-size: 9px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .transaction-empty { margin-top: 3px; }
.hub-app .money-scope .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.hub-app .money-scope .skip-link { position: absolute; left: 12px; top: -64px; z-index: 200; padding: 10px 16px; border-radius: 12px; background: var(--accent); color: var(--money-deep); font-size: 13px; font-weight: 900; text-decoration: none; box-shadow: var(--shadow); transition: top .15s ease; }
.hub-app .money-scope .skip-link:focus, .hub-app .money-scope .skip-link:focus-visible { top: 12px; }
.hub-app .money-scope #main-content:focus { outline: none; }
.hub-app .money-scope .receipt-scan-panel { overflow: hidden; }
.hub-app .money-scope .receipt-scan-button { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 18px; color: var(--text); background: #7C3AED; font-size: 13px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .receipt-scan-button svg { width: 21px; height: 21px; }
.hub-app .money-scope .receipt-scan-button:disabled { opacity: .65; cursor: default; }
.hub-app .money-scope .receipt-confirm { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-soft); text-align: left; }
.hub-app .money-scope .receipt-confirm-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hub-app .money-scope .receipt-confirm-title > span { font-size: 12px; font-weight: 900; }
.hub-app .money-scope .receipt-confirm-title button { min-height: 34px; padding: 6px 10px; border: 0; border-radius: 999px; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-size: 9px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .receipt-confirm label { min-width: 0; display: grid; gap: 5px; color: var(--dim); font-size: 10px; font-weight: 850; }
.hub-app .money-scope .receipt-confirm label > input { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface); }
.hub-app .money-scope .receipt-confirm .currency-input input { min-width: 0; width: 100%; min-height: 42px; color: var(--text); }
.hub-app .money-scope .receipt-confirm .primary-btn { min-height: 46px; }
.hub-app .money-scope .receipt-scan-status { margin: 10px 0 0; color: var(--success-text); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .receipt-scan-status.error { color: var(--warning-text); }
.hub-app .money-scope .receipt-scan-note { margin: 10px 0 0; color: var(--dim); font-size: 9px; line-height: 1.45; }
.hub-app .money-scope .credit-calendar { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 2px; }
.hub-app .money-scope .credit-prompt-stack { display: grid; gap: 6px; }
.hub-app .money-scope .credit-prompt { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.hub-app .money-scope .credit-prompt.urgent { color: var(--amber); background: color-mix(in srgb, var(--wealth-gold) 14%, var(--surface)); }
.hub-app .money-scope .credit-prompt > svg { width: 18px; height: 18px; justify-self: center; }
.hub-app .money-scope .credit-prompt > span { min-width: 0; display: grid; gap: 1px; }
.hub-app .money-scope .credit-prompt strong { color: var(--text); font-size: 11px; }
.hub-app .money-scope .credit-prompt small { color: var(--dim); font-size: 9px; line-height: 1.35; }
.hub-app .money-scope .credit-calendar-settings { border-top: 1px solid var(--border); padding-top: 7px; }
.hub-app .money-scope .credit-calendar-settings > summary { width: max-content; margin-inline: auto; padding: 5px 9px; border-radius: 999px; color: var(--accent); font-size: 10px; font-weight: 900; cursor: pointer; list-style: none; }
.hub-app .money-scope .credit-calendar-settings > summary::-webkit-details-marker { display: none; }
.hub-app .money-scope .credit-calendar-settings > summary::after { content: "  +"; }
.hub-app .money-scope .credit-calendar-settings[open] > summary::after { content: "  −"; }
.hub-app .money-scope .credit-calendar-settings form { display: grid; gap: 9px; margin-top: 7px; padding: 10px; border-radius: 14px; background: var(--surface); }
.hub-app .money-scope .credit-calendar-settings form > p { margin: 0; color: var(--dim); font-size: 9px; line-height: 1.45; text-align: center; }
.hub-app .money-scope .calendar-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.hub-app .money-scope .calendar-field-grid label { min-width: 0; display: grid; gap: 4px; color: var(--dim); font-size: 9px; font-weight: 800; text-align: center; }
.hub-app .money-scope .calendar-field-grid input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface-soft); text-align: center; }
.hub-app .money-scope .calendar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hub-app .money-scope .calendar-actions .primary-btn, .hub-app .money-scope .calendar-actions .enable-btn { min-height: 42px; }
@media (prefers-color-scheme: dark) {
.hub-app .money-scope .credit-prompt.urgent { color: var(--amber); }
}
.hub-app .money-scope .spend-form, .hub-app .money-scope .holding-form { display: grid; gap: 11px; }
.hub-app .money-scope .spend-form label, .hub-app .money-scope .holding-form label, .hub-app .money-scope .money-field { display: grid; gap: 5px; color: var(--dim); font-size: 11px; font-weight: 800; }
.hub-app .money-scope .spend-form input, .hub-app .money-scope .holding-form input, .hub-app .money-scope .budget-row input { width: 100%; min-height: 44px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--text); padding: 10px 14px; text-align: center; }
.hub-app .money-scope .currency-input { display: flex; align-items: center; overflow: hidden; border: 1.5px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.hub-app .money-scope .currency-input b { padding-left: 14px; color: var(--money-deep); }
.hub-app .money-scope .currency-input input { border: 0 !important; background: transparent !important; padding-left: 4px !important; }
.hub-app .money-scope .currency-input.large { min-height: 50px; }
.hub-app .money-scope .currency-input.large input { font-size: 20px; font-weight: 900; }
.hub-app .money-scope .segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.hub-app .money-scope .primary-btn { background: var(--accent); color: var(--text); }
.hub-app .money-scope .primary-btn:disabled, .hub-app .money-scope .check-btn:disabled { opacity: .62; cursor: default; }
.hub-app .money-scope .check-btn { background: var(--yes); color: var(--text); }
.hub-app .money-scope .check-btn.done { background: color-mix(in srgb, var(--yes) 18%, var(--surface)); color: var(--yes); }
.hub-app .money-scope .today-log, .hub-app .money-scope .holding-list { display: grid; gap: 7px; margin-top: 14px; }
.hub-app .money-scope .spend-row, .hub-app .money-scope .holding-row { display: grid; grid-template-columns: 1fr auto 38px; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-radius: 17px; background: var(--surface-soft); border: 1px solid var(--border); }
.hub-app .money-scope .spend-row > div, .hub-app .money-scope .holding-row > div { display: grid; gap: 2px; min-width: 0; }
.hub-app .money-scope .spend-row strong, .hub-app .money-scope .spend-row small, .hub-app .money-scope .holding-row strong, .hub-app .money-scope .holding-row small { overflow-wrap: anywhere; }
.hub-app .money-scope .spend-row small, .hub-app .money-scope .holding-row small { color: var(--dim); font-size: 11px; }
.hub-app .money-scope .icon-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; cursor: pointer; }
.hub-app .money-scope .icon-btn.danger { color: var(--no); background: color-mix(in srgb, var(--no) 10%, var(--surface)); }
.hub-app .money-scope .icon-btn svg { width: 17px; }
.hub-app .money-scope .empty, .hub-app .money-scope .empty-chart { color: var(--dim); font-size: 13px; padding: 18px 8px; margin: 0; }
.hub-app .money-scope .needed-items-panel { overflow: hidden; }
.hub-app .money-scope .needed-items-list { display: grid; gap: 10px; }
.hub-app .money-scope .needed-item { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-soft); box-shadow: 0 8px 22px rgba(20,10,34,.16); text-align: left; }
.hub-app .money-scope .needed-item.funded { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.hub-app .money-scope .needed-item-top { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.hub-app .money-scope .needed-item-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); box-shadow: 0 5px 13px rgba(20,10,34,.18); }
.hub-app .money-scope .needed-item-icon svg { width: 22px; height: 22px; }
.hub-app .money-scope .needed-item-top > div { min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .needed-item-top > div > span { color: var(--accent-dark); font-size: 9px; font-weight: 900; }
.hub-app .money-scope .needed-item-top h3 { margin: 0; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.hub-app .money-scope .needed-item-top p { margin: 2px 0 0; color: var(--dim); font-size: 10px; line-height: 1.42; }
.hub-app .money-scope .needed-item-top > strong { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .money-scope .needed-item-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.hub-app .money-scope .needed-item-status > span { min-height: 27px; padding: 6px 10px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.hub-app .money-scope .needed-item-status .save-first { color: var(--warning-text); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); }
.hub-app .money-scope .needed-item-status .ready { color: var(--success-text); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
.hub-app .money-scope .needed-item-status small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .needed-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hub-app .money-scope .needed-progress-copy strong { font-size: 13px; }
.hub-app .money-scope .needed-progress-copy span { color: var(--dim); font-size: 10px; text-align: right; }
.hub-app .money-scope .needed-progress { height: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.hub-app .money-scope .needed-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--success)); }
.hub-app .money-scope .needed-rule { margin: -5px 0 0; color: var(--dim); font-size: 10px; line-height: 1.4; }
.hub-app .money-scope .needed-item.funded .needed-rule { color: var(--success-text); }
.hub-app .money-scope .needed-save-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.hub-app .money-scope .needed-save-form label { min-width: 0; display: grid; gap: 5px; color: var(--dim); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .needed-save-form .primary-btn { min-height: 44px; white-space: nowrap; }
.hub-app .money-scope .food-budget-panel { overflow: hidden; }
.hub-app .money-scope .food-budget-grid { display: grid; grid-template-columns: 1fr; gap: 8px; text-align: left; }
.hub-app .money-scope .food-budget-grid article { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-soft); }
.hub-app .money-scope .food-budget-grid h3 { margin: 0; font-size: 14px; }
.hub-app .money-scope .food-budget-grid strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .food-budget-grid strong small { color: var(--dim); font-size: 9px; font-weight: 800; }
.hub-app .money-scope .food-budget-grid p { margin: 0; color: var(--dim); font-size: 9px; line-height: 1.45; }
.hub-app .money-scope .food-budget-tag { width: max-content; padding: 4px 8px; border-radius: 999px; font-size: 8px; font-weight: 900; }
.hub-app .money-scope .food-budget-tag.household { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.hub-app .money-scope .food-budget-tag.personal { color: var(--text); background: #7C3AED; }
.hub-app .money-scope .food-budget-input { margin-top: 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-soft); text-align: left; }
.hub-app .money-scope .food-budget-input .budget-row { border: 0; }
.hub-app .money-scope .food-budget-footnote { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; margin: 10px 0 0; color: var(--dim); font-size: 9px; line-height: 1.4; text-align: left; }
.hub-app .money-scope .food-budget-footnote svg { width: 18px; height: 18px; color: #7C3AED; }
.hub-app .money-scope .family-allocation { position: relative; overflow: hidden; padding: 0; text-align: left; background: color-mix(in srgb, var(--surface) 90%, var(--money-ink)); box-shadow: 0 18px 44px rgba(20,10,34,.35); }
.hub-app .money-scope .family-allocation::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #7C3AED 0 33.333%, var(--text) 33.333% 66.666%, #7C3AED 66.666%); }
.hub-app .money-scope .family-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 11px; padding: 20px 15px 15px; }
.hub-app .money-scope .family-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px 16px 8px 16px; color: var(--text); background: #7C3AED; box-shadow: 0 9px 22px rgba(0,135,81,.25); }
.hub-app .money-scope .family-icon svg { width: 24px; height: 24px; }
.hub-app .money-scope .family-heading > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .family-heading > div:nth-child(2) > span { color: #74AD8C; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.hub-app .money-scope .family-heading h2 { margin: 0; font-size: 20px; line-height: 1.1; }
.hub-app .money-scope .family-heading p { margin: 2px 0 0; color: var(--dim); font-size: 10px; line-height: 1.4; }
.hub-app .money-scope .family-lines { display: grid; gap: 1px; margin: 0 15px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px 18px 10px 18px; background: var(--border); }
.hub-app .money-scope .family-lines article { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 8px; padding: 13px; background: var(--surface-soft); }
.hub-app .money-scope .family-line-copy { grid-column: 1 / -1; min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .family-line-copy strong { font-size: 12px; }
.hub-app .money-scope .family-line-copy span { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .family-line-amount { min-width: 0; display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--border); }
.hub-app .money-scope .family-line-amount > span { color: var(--dim); font-size: 8px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.hub-app .money-scope .family-line-amount b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .money-scope .family-line-amount small { color: var(--dim); font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .money-scope .family-lines article.tbd b, .hub-app .money-scope .family-lines article.tbd small { color: var(--warning-text); }
.hub-app .money-scope .family-budget-total { margin: 10px 15px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 12px 20px 20px 20px; color: var(--text); background: linear-gradient(135deg, #232065, #1B1341); box-shadow: 0 10px 22px rgba(5,2,20,.35); }
.hub-app .money-scope .family-budget-total > div { min-width: 0; display: grid; gap: 3px; padding: 13px; }
.hub-app .money-scope .family-budget-total > div + div { border-left: 1px solid rgba(242,236,249,.2); }
.hub-app .money-scope .family-budget-total span { color: #C9C2A8; font-size: 8px; font-weight: 900; line-height: 1.3; }
.hub-app .money-scope .family-budget-total strong { font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .money-scope .family-budget-total small { color: #C9C2A8; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .money-scope .family-funding { display: grid; gap: 8px; margin: 10px 15px 0; padding: 12px 13px; border: 1px solid var(--border); border-radius: 10px 17px 17px 17px; background: var(--surface-soft); }
.hub-app .money-scope .family-funding > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; }
.hub-app .money-scope .family-funding > div:first-child > span { width: max-content; padding: 4px 8px; border-radius: 999px; font-size: 8px; font-weight: 900; }
.hub-app .money-scope .family-funding .save-first { color: var(--warning-text); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); }
.hub-app .money-scope .family-funding .ready { color: var(--success-text); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
.hub-app .money-scope .family-funding strong { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .family-funding small { grid-column: 1 / -1; color: var(--dim); font-size: 9px; }
.hub-app .money-scope .family-progress { height: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.hub-app .money-scope .family-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C3AED, var(--accent-dark)); }
.hub-app .money-scope .family-funding p { margin: 0; color: var(--warning-text); font-size: 9px; line-height: 1.4; }
.hub-app .money-scope .family-form { display: grid; gap: 10px; margin: 12px 15px 0; padding-top: 13px; border-top: 1px solid var(--border); }
.hub-app .money-scope .family-form > label { min-width: 0; display: grid; gap: 5px; color: var(--dim); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .family-form > label > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.hub-app .money-scope .family-form > label > span:first-child small { color: #74AD8C; font-size: 9px; }
.hub-app .money-scope .family-input-prefix, .hub-app .money-scope .family-rate-input { min-width: 0; min-height: 45px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); }
.hub-app .money-scope .family-rate-input { grid-template-columns: minmax(0, 1fr) auto; }
.hub-app .money-scope .family-input-prefix b, .hub-app .money-scope .family-rate-input b { padding: 0 13px; color: #74AD8C; font-size: 11px; }
.hub-app .money-scope .family-input-prefix input, .hub-app .money-scope .family-rate-input input { min-width: 0; width: 100%; min-height: 43px; padding: 9px 4px; border: 0; outline: 0; color: var(--text); background: transparent; text-align: left; }
.hub-app .money-scope .family-rate-input input { padding-left: 13px; }
.hub-app .money-scope .family-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hub-app .money-scope .family-refresh-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 1px solid color-mix(in srgb, #7C3AED 60%, var(--border)); border-radius: 999px; color: #74AD8C; background: color-mix(in srgb, #7C3AED 11%, var(--surface)); font-size: 10px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .family-refresh-btn svg { width: 16px; height: 16px; }
.hub-app .money-scope .family-refresh-btn:disabled { opacity: .6; cursor: default; }
.hub-app .money-scope .family-rate-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 9px; margin: 10px 15px 0; color: var(--dim); font-size: 8px; line-height: 1.4; }
.hub-app .money-scope .family-rate-note a { color: var(--accent-dark); font-weight: 900; text-underline-offset: 2px; }
.hub-app .money-scope .family-notice { margin: 7px 15px 0; color: var(--accent-dark); font-size: 9px; text-align: center; }
.hub-app .money-scope .family-rule { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; margin: 14px 0 0; padding: 12px 15px; color: var(--dim); background: color-mix(in srgb, #7C3AED 8%, var(--surface-soft)); font-size: 10px; line-height: 1.4; }
.hub-app .money-scope .family-rule svg { width: 23px; height: 23px; color: #74AD8C; }
.hub-app .money-scope .family-rule strong { color: #74AD8C; }
.hub-app .money-scope .goal-planner { overflow: hidden; }
.hub-app .money-scope .goal-planner-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 15px; text-align: left; }
.hub-app .money-scope .goal-planner-heading > div:first-child { display: grid; gap: 3px; }
.hub-app .money-scope .goal-planner-heading > div:first-child > span { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hub-app .money-scope .goal-planner-heading h2 { margin: 0; font-size: 20px; line-height: 1.15; }
.hub-app .money-scope .goal-planner-heading p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.4; }
.hub-app .money-scope .goal-readiness { width: 64px; height: 64px; display: grid; place-content: center; border-radius: 50%; color: var(--text); background: var(--accent); text-align: center; box-shadow: 0 8px 18px rgba(20,10,34,.22); }
.hub-app .money-scope .goal-readiness strong { font-size: 18px; line-height: 1; }
.hub-app .money-scope .goal-readiness span { font-size: 8px; font-weight: 800; text-transform: uppercase; }
.hub-app .money-scope .goal-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; }
.hub-app .money-scope .goal-selector button { min-width: 0; min-height: 54px; display: grid; align-content: center; gap: 2px; padding: 9px 10px; border-radius: 16px; background: var(--surface-soft); text-align: left; }
.hub-app .money-scope .goal-selector button.active { color: var(--text); background: var(--accent); box-shadow: 0 8px 18px rgba(20,10,34,.22); }
.hub-app .money-scope .goal-selector button span { font-size: 11px; font-weight: 900; overflow-wrap: anywhere; }
.hub-app .money-scope .goal-selector button small { color: var(--dim); font-size: 8px; font-weight: 800; }
.hub-app .money-scope .goal-selector button.active small { color: var(--dim); }
.hub-app .money-scope .goal-selector button.complete:not(.active) small { color: var(--yes); }
.hub-app .money-scope .goal-questionnaire { display: grid; gap: 12px; }
.hub-app .money-scope .goal-question-grid { display: grid; gap: 10px; padding: 13px; border-radius: 18px; background: var(--surface-soft); }
.hub-app .money-scope .goal-question-grid label { min-width: 0; display: grid; gap: 6px; color: var(--dim); font-size: 10px; font-weight: 800; text-align: left; }
.hub-app .money-scope .goal-question-grid label > span:first-child { display: flex; align-items: center; gap: 7px; }
.hub-app .money-scope .goal-question-grid label > span:first-child b { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: var(--accent); }
.hub-app .money-scope .goal-question-grid input, .hub-app .money-scope .goal-question-grid select { width: 100%; min-height: 44px; padding: 10px 13px; border-radius: 999px; color: var(--text); }
.hub-app .money-scope .goal-question-grid .currency-input strong { padding-left: 13px; color: var(--accent); font-size: 11px; }
.hub-app .money-scope .goal-strategy-preview { display: grid; gap: 3px; padding: 13px; border-radius: 17px; text-align: left; }
.hub-app .money-scope .goal-strategy-preview strong { font-size: 13px; }
.hub-app .money-scope .goal-strategy-preview span { font-size: 11px; line-height: 1.45; }
.hub-app .money-scope .goal-strategy-preview small { font-size: 9px; line-height: 1.4; }
.hub-app .money-scope .goal-strategy-preview.waiting { color: var(--dim); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.hub-app .money-scope .goal-strategy-preview.on-track { color: var(--profit); background: color-mix(in srgb, var(--yes) 12%, var(--surface)); }
.hub-app .money-scope .goal-strategy-preview.needs-adjustment { color: var(--loss); background: color-mix(in srgb, var(--no) 10%, var(--surface)); }
.hub-app .money-scope .goal-save { width: 100%; }
.hub-app .money-scope .goals { display: grid; gap: 17px; }
.hub-app .money-scope .goal-copy { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 5px 10px; }
.hub-app .money-scope .goal-copy strong { color: var(--accent); }
.hub-app .money-scope .goal-copy span, .hub-app .money-scope .goal small { color: var(--dim); font-size: 12px; }
.hub-app .money-scope .progress { height: 13px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 7px 0 4px; }
.hub-app .money-scope .progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); }
.hub-app .money-scope .progress.pending { background: repeating-linear-gradient(135deg, var(--surface-soft), var(--surface-soft) 7px, color-mix(in srgb, var(--border) 65%, var(--surface)) 7px, color-mix(in srgb, var(--border) 65%, var(--surface)) 14px); }
.hub-app .money-scope .alerts { display: grid; gap: 9px; }
.hub-app .money-scope .alert { display: flex; align-items: flex-start; justify-content: center; gap: 9px; padding: 13px; border-radius: 18px; font-size: 13px; }
.hub-app .money-scope .alert svg { flex: 0 0 auto; }
.hub-app .money-scope .alert.warning { color: var(--money-deep); background: var(--money-ink); border: 1px solid var(--money-mid); }
.hub-app .money-scope .alert.good { color: var(--money-mid); background: var(--money-ink); border: 1px solid var(--money-mid); }
.hub-app .money-scope .alert.info { color: var(--money-deep); background: var(--money-ink); border: 1px solid var(--money-mid); }
.hub-app .money-scope .period-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-app .money-scope .period-strip p { margin: 0; color: var(--dim); font-size: 11px; }
.hub-app .money-scope .period-strip strong { display: block; font-size: 16px; }
.hub-app .money-scope .segmented.compact { min-width: 190px; }
.hub-app .money-scope .totals-grid, .hub-app .money-scope .asset-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.hub-app .money-scope .metric { padding: 15px 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 5px 18px rgba(20,10,34,.07); display: grid; gap: 3px; }
.hub-app .money-scope .metric span { color: var(--dim); font-size: 11px; }
.hub-app .money-scope .metric strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .metric.teal strong { color: var(--teal); }
.hub-app .money-scope .metric.orange strong { color: var(--orange); }
.hub-app .money-scope .metric.green strong { color: var(--accent); }
.hub-app .money-scope .metric.blue strong { color: var(--accent); }
.hub-app .money-scope .metric.red strong { color: var(--red); }
.hub-app .money-scope .chart-grid { display: grid; gap: 14px; align-items: start; }
.hub-app .money-scope .chart-card { min-width: 0; }
.hub-app .money-scope .chart-card > h2 { margin-bottom: 6px; }
.hub-app .money-scope .chart-intro { margin: -1px 0 4px; color: var(--dim); font-size: 11px; }
.hub-app .money-scope .chart-shell { height: 225px; position: relative; }
.hub-app .money-scope .bar-chart { width: 100%; min-height: 230px; margin-top: 4px; }
.hub-app .money-scope .income-growth { overflow: hidden; }
.hub-app .money-scope .income-roadmap { display: grid; gap: 9px; }
.hub-app .money-scope .income-idea { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 13px; border-radius: 18px; background: var(--surface-soft); border: 1px solid var(--border); text-align: left; }
.hub-app .money-scope .idea-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--text); font-weight: 900; }
.hub-app .money-scope .income-idea > div { min-width: 0; display: grid; gap: 3px; }
.hub-app .money-scope .income-idea p { margin: 0; color: var(--teal); font-size: 10px; font-weight: 900; }
.hub-app .money-scope .income-idea h3 { margin: 0; font-size: 15px; }
.hub-app .money-scope .income-idea span { color: var(--text); font-size: 12px; line-height: 1.45; }
.hub-app .money-scope .income-idea small { color: var(--dim); font-size: 10px; overflow-wrap: anywhere; }
.hub-app .money-scope .growth-note { margin: 13px auto 0; max-width: 720px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.hub-app .money-scope .savings-roadmap > p { max-width: 720px; margin: 14px auto 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
.hub-app .money-scope .funding-order { display: grid; grid-template-columns: 1fr; gap: 7px; align-items: center; }
.hub-app .money-scope .funding-order span { min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 9px 12px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); font-size: 12px; font-weight: 800; text-align: left; }
.hub-app .money-scope .funding-order span b { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--text); }
.hub-app .money-scope .funding-order i { width: 2px; height: 10px; justify-self: center; background: var(--border); }
.hub-app .money-scope .chart-center { position: absolute; inset: 0; display: grid; place-content: center; pointer-events: none; }
.hub-app .money-scope .chart-center { position: absolute; inset: 0; display: grid; place-content: center; pointer-events: none; }
.hub-app .money-scope .chart-center strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .chart-center span { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 12px; font-size: 11px; color: var(--dim); }
.hub-app .money-scope .legend span { display: inline-flex; align-items: center; gap: 4px; }
.hub-app .money-scope .legend i { width: 9px; height: 9px; border-radius: 50%; }
.hub-app .money-scope .legend b { color: var(--text); }
.hub-app .money-scope .budget-group { padding: 0; overflow: hidden; }
.hub-app .money-scope .budget-group summary { list-style: none; cursor: pointer; padding: 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; color: var(--accent); font-weight: 900; }
.hub-app .money-scope .budget-group summary::-webkit-details-marker { display: none; }
.hub-app .money-scope .budget-group summary b { color: var(--dim); font-size: 11px; }
.hub-app .money-scope .budget-group[open] summary { border-bottom: 1px solid var(--border); }
.hub-app .money-scope .budget-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.hub-app .money-scope .budget-row:last-child { border-bottom: 0; }
.hub-app .money-scope .budget-copy { display: grid; gap: 2px; }
.hub-app .money-scope .budget-copy strong { font-size: 13px; }
.hub-app .money-scope .budget-copy small { font-size: 10px; color: var(--dim); }
.hub-app .money-scope .money-field { justify-self: center; width: min(100%, 230px); }
.hub-app .money-scope .saved-field .currency-input { background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.hub-app .money-scope .preference-panel { display: grid; gap: 10px; }
.hub-app .money-scope .preference-panel h2, .hub-app .money-scope .tips-panel h2 { margin-bottom: 4px; }
.hub-app .money-scope .toggle-row { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 7px; font-weight: 700; }
.hub-app .money-scope .switch { width: 48px; height: 27px; border: 0; border-radius: 999px; background: var(--dim); padding: 3px; cursor: pointer; }
.hub-app .money-scope .switch i { display: block; width: 21px; height: 21px; border-radius: 50%; background: var(--text); transition: transform .2s ease; }
.hub-app .money-scope .switch.on { background: var(--green); }
.hub-app .money-scope .switch.on i { transform: translateX(21px); }
.hub-app .money-scope .tips-panel ul { display: grid; gap: 8px; padding: 0; margin: 14px 0 0; list-style: none; }
.hub-app .money-scope .tips-panel li { padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 15%, var(--surface)); font-size: 13px; }
.hub-app .money-scope .tips-panel li strong { color: var(--accent); }
.hub-app .money-scope .net-worth-overview { display: grid; gap: 18px; padding: 25px 17px 17px; border-radius: 28px; background: color-mix(in srgb, var(--surface) 88%, var(--money-ink)); box-shadow: 0 16px 38px rgba(20,10,34,.28); }
.hub-app .money-scope .net-worth-copy { display: grid; justify-items: center; gap: 3px; }
.hub-app .money-scope .net-worth-copy > span { color: var(--dim); font-size: 11px; font-weight: 850; }
.hub-app .money-scope .net-worth-copy > strong { font-size: clamp(42px, 12vw, 66px); line-height: 1; letter-spacing: -2.5px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .net-worth-copy > small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .overview-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.hub-app .money-scope .overview-tiles button { min-width: 0; min-height: 118px; display: grid; align-content: space-between; justify-items: start; gap: 5px; padding: 15px; border: 0; border-radius: 20px; color: var(--text); background: var(--surface-soft); text-align: left; cursor: pointer; }
.hub-app .money-scope .overview-tiles button span { color: var(--dim); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .overview-tiles button strong { max-width: 100%; font-size: clamp(18px, 6vw, 27px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hub-app .money-scope .overview-tiles button small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .portfolio-hero { padding: 26px 16px; background: linear-gradient(145deg, var(--money-deep), var(--money-deep) 54%, var(--money-ink)); color: var(--text); }
.hub-app .money-scope .portfolio-hero p { margin-bottom: 4px; }
.hub-app .money-scope .portfolio-hero strong { display: block; font-size: clamp(38px, 11vw, 60px); line-height: 1.05; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .portfolio-hero > span, .hub-app .money-scope .portfolio-hero > small { display: block; margin-top: 7px; color: var(--dim); font-size: 11px; }
.hub-app .money-scope .portfolio-performance { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; }
.hub-app .money-scope .portfolio-performance span { display: inline-flex; margin: 0; padding: 5px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: var(--text); background: rgba(255,255,255,.1); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .portfolio-performance .gain, .hub-app .money-scope .portfolio-performance .loss { color: var(--text); }
.hub-app .money-scope .market-reference { display: grid; gap: 12px; padding: 17px 0; text-align: left; }
.hub-app .money-scope .market-reference-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-inline: 3px; }
.hub-app .money-scope .market-reference-heading > div > span, .hub-app .money-scope .stock-recommendations-heading > div > span { color: var(--accent-dark); font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.hub-app .money-scope .market-reference h2, .hub-app .money-scope .stock-recommendations-heading h2 { margin: 2px 0 0; font-size: 21px; }
.hub-app .money-scope .market-reference > p { margin: 0; color: var(--dim); font-size: 8px; text-align: center; }
.hub-app .money-scope .market-reference .report-refresh { flex: 0 0 auto; min-height: 38px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--accent-dark); background: var(--surface-soft); font-size: 9px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .market-reference .report-refresh:disabled { opacity: .6; cursor: default; }
.hub-app .money-scope .market-loading { min-height: 92px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 20px; color: var(--dim); background: var(--surface); font-size: 11px; }
.hub-app .money-scope .reference-ticker-list { display: grid; gap: 1px; overflow: hidden; border-radius: 20px; background: var(--border); box-shadow: 0 10px 26px rgba(20,10,34,.16); }
.hub-app .money-scope .market-watch-card { min-width: 0; width: 100%; min-height: 72px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 13px; border: 0; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
.hub-app .money-scope .market-watch-card.active { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.hub-app .money-scope .ticker-mark { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: var(--money-ink); background: var(--accent-dark); font-size: 11px; font-weight: 950; letter-spacing: -.03em; }
.hub-app .money-scope .market-watch-copy, .hub-app .money-scope .market-watch-price { min-width: 0; display: grid; gap: 1px; }
.hub-app .money-scope .market-watch-copy strong { font-size: 14px; }
.hub-app .money-scope .market-watch-copy small { color: var(--dim); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-app .money-scope .market-watch-copy em { color: var(--dim); font-size: 8px; font-style: normal; }
.hub-app .money-scope .market-watch-price { justify-items: end; text-align: right; }
.hub-app .money-scope .market-watch-price strong { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .money-scope .market-watch-price small { font-size: 9px; font-weight: 900; }
.hub-app .money-scope .gain { color: var(--success-text) !important; }
.hub-app .money-scope .loss { color: var(--warning-text) !important; }
.hub-app .money-scope .market-detail { display: grid; gap: 15px; padding: 16px 14px; border: 1px solid var(--border); border-radius: 24px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 88px; }
.hub-app .money-scope .market-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-app .money-scope .market-detail-head button { min-height: 38px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--accent-dark); background: var(--surface-soft); font-size: 10px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .market-detail-head > span { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .market-detail-price { display: flex; align-items: end; justify-content: space-between; gap: 12px; text-align: left; }
.hub-app .money-scope .market-detail-price > div { min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .market-detail-price > div:last-child { justify-items: end; text-align: right; }
.hub-app .money-scope .market-detail-price span { color: var(--dim); font-size: 9px; overflow-wrap: anywhere; }
.hub-app .money-scope .market-detail-price h2 { margin: 0; font-size: 26px; }
.hub-app .money-scope .market-detail-price strong { font-size: clamp(24px, 8vw, 38px); font-variant-numeric: tabular-nums; }
.hub-app .money-scope .market-detail-price small { font-size: 10px; font-weight: 900; }
.hub-app .money-scope .market-chart { width: 100%; height: 280px; overflow: hidden; border-radius: 18px; background: var(--surface-soft); }
.hub-app .money-scope .market-chart-empty { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; border-radius: 18px; color: var(--dim); background: var(--surface-soft); text-align: center; }
.hub-app .money-scope .market-chart-empty svg { width: 30px; color: var(--accent); }
.hub-app .money-scope .market-chart-empty strong { color: var(--text); font-size: 13px; }
.hub-app .money-scope .market-chart-empty span { max-width: 300px; font-size: 10px; }
.hub-app .money-scope .market-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--border); }
.hub-app .money-scope .market-stats > div { display: grid; gap: 3px; padding: 12px; background: var(--surface-soft); }
.hub-app .money-scope .market-stats dt { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .market-stats dd { margin: 0; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .market-detail-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; color: var(--dim); font-size: 8px; }
.hub-app .money-scope .market-detail-meta a { color: var(--accent-dark); font-weight: 900; text-underline-offset: 2px; }
.hub-app .money-scope .stock-recommendations-panel { overflow: hidden; }
.hub-app .money-scope .stock-recommendations-heading { display: grid; grid-template-columns: minmax(0, 1fr) 50px; align-items: center; gap: 12px; margin-bottom: 14px; text-align: left; }
.hub-app .money-scope .stock-recommendations-heading p { margin: 3px 0 0; color: var(--dim); font-size: 10px; line-height: 1.42; }
.hub-app .money-scope .stock-recommendations-heading > strong { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: var(--money-ink); background: var(--accent-dark); font-size: 20px; }
.hub-app .money-scope .stock-pick-list { display: grid; gap: 11px; }
.hub-app .money-scope .stock-pick-card { display: grid; gap: 12px; padding: 14px; border-radius: 21px; background: var(--surface-soft); box-shadow: 0 8px 22px rgba(20,10,34,.17); text-align: left; }
.hub-app .money-scope .stock-pick-head { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.hub-app .money-scope .stock-pick-head > div:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.hub-app .money-scope .stock-pick-head > div:nth-child(2) > span { color: var(--dim); font-size: 9px; overflow-wrap: anywhere; }
.hub-app .money-scope .stock-pick-head h3 { margin: 0; font-size: 19px; line-height: 1.05; }
.hub-app .money-scope .stock-pick-head small { color: var(--dim); font-size: 8px; }
.hub-app .money-scope .pick-status { padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 900; text-transform: capitalize; }
.hub-app .money-scope .pick-status.watch { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.hub-app .money-scope .pick-status.ready { color: var(--success-text); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.hub-app .money-scope .stock-pick-body { display: grid; gap: 7px; }
.hub-app .money-scope .stock-pick-body section { display: grid; gap: 3px; padding: 11px; border-radius: 15px; background: var(--surface); }
.hub-app .money-scope .stock-pick-body section > span { color: var(--accent-dark); font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.hub-app .money-scope .stock-pick-body p { margin: 0; color: var(--text); font-size: 10px; line-height: 1.48; }
.hub-app .money-scope .stock-pick-body .risk-notes { background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.hub-app .money-scope .stock-pick-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hub-app .money-scope .stock-pick-card footer > span { color: var(--dim); font-size: 8px; }
.hub-app .money-scope .stock-pick-card footer button { min-height: 36px; padding: 7px 12px; border: 0; border-radius: 999px; color: var(--dim); background: var(--surface); font-size: 9px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .stock-pick-boundary { margin: 12px auto 0; color: var(--dim); font-size: 9px; line-height: 1.45; }
.hub-app .money-scope .stock-pick-empty { min-height: 170px; place-content: center; }
.hub-app .money-scope .stock-pick-empty span { max-width: 480px; }
.hub-app .money-scope .allocation-panel { overflow: hidden; }
.hub-app .money-scope .allocation-list { display: grid; gap: 7px; max-width: 820px; margin-inline: auto; }
.hub-app .money-scope .allocation-list > button { width: 100%; min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); color: var(--text); text-align: left; cursor: pointer; }
.hub-app .money-scope .allocation-list > button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.hub-app .money-scope .allocation-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.hub-app .money-scope .allocation-icon svg { width: 19px; height: 19px; }
.hub-app .money-scope .allocation-name { min-width: 0; display: grid; gap: 5px; }
.hub-app .money-scope .allocation-name > strong { font-size: 11px; overflow-wrap: anywhere; }
.hub-app .money-scope .allocation-name i { display: block; height: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.hub-app .money-scope .allocation-name i b { display: block; height: 100%; min-width: 0; border-radius: inherit; }
.hub-app .money-scope .allocation-value { display: grid; justify-items: end; gap: 1px; }
.hub-app .money-scope .allocation-value strong { font-size: 11px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .allocation-value small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .asset-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-app .money-scope .asset-summary button { min-width: 0; padding: 10px 3px; border: 2px solid transparent; border-radius: 18px; background: var(--surface); box-shadow: 0 5px 16px rgba(20,10,34,.07); display: grid; place-items: center; gap: 3px; cursor: pointer; }
.hub-app .money-scope .asset-summary button.active { border-color: var(--accent); }
.hub-app .money-scope .asset-summary svg { color: var(--accent); }
.hub-app .money-scope .asset-summary span { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .asset-summary strong { max-width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hub-app .money-scope .asset-heading { color: var(--asset-color); }
.hub-app .money-scope .holding-form { border-radius: 18px; padding: 14px; background: var(--surface-soft); }
.hub-app .money-scope .holding-entry { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface-soft); }
.hub-app .money-scope .holding-entry summary { list-style: none; cursor: pointer; }
.hub-app .money-scope .holding-entry summary::-webkit-details-marker { display: none; }
.hub-app .money-scope .holding-row { grid-template-columns: 1fr auto 40px; border: 0; border-radius: 0; }
.hub-app .money-scope .holding-value { text-align: center; }
.hub-app .money-scope .holding-category { width: max-content; padding: 3px 7px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); font-size: 8px; font-weight: 900; }
.hub-app .money-scope .edit-label { font-size: 10px; font-weight: 800; color: var(--accent); }
.hub-app .money-scope .holding-edit { display: grid; gap: 9px; padding: 12px; border-top: 1px solid var(--border); }
.hub-app .money-scope .holding-edit label { display: grid; gap: 4px; color: var(--dim); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .holding-edit input { min-height: 42px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); padding: 9px 12px; text-align: center; }
.hub-app .money-scope .delete-btn { border: 1px solid color-mix(in srgb, var(--no) 42%, var(--border)); border-radius: 999px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: color-mix(in srgb, var(--no) 8%, var(--surface)); color: var(--no); font-weight: 800; cursor: pointer; }
.hub-app .money-scope .delete-btn svg { width: 17px; }
.hub-app .money-scope .watchlist, .hub-app .money-scope .suggestion-list { display: grid; gap: 9px; max-width: 820px; margin-inline: auto; }
.hub-app .money-scope .watchlist-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 13px; border-radius: 18px; background: var(--surface-soft); text-align: left; box-shadow: 0 4px 14px rgba(20,10,34,.08); }
.hub-app .money-scope .watchlist-icon, .hub-app .money-scope .suggestion-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 4px 11px rgba(20,10,34,.09); }
.hub-app .money-scope .watchlist-row > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .watchlist-row span, .hub-app .money-scope .suggestion-title span { color: var(--accent); font-size: 9px; font-weight: 900; }
.hub-app .money-scope .watchlist-row h3, .hub-app .money-scope .suggestion-card h3 { margin: 0; font-size: 14px; }
.hub-app .money-scope .watchlist-row strong, .hub-app .money-scope .suggestion-copy > strong { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .watchlist-row p { margin: 3px 0 0; color: var(--dim); font-size: 10px; line-height: 1.42; }
.hub-app .money-scope .watchlist-row > button { grid-column: 1 / -1; min-height: 38px; border: 0; border-radius: 999px; background: var(--surface); color: var(--accent); box-shadow: 0 4px 12px rgba(20,10,34,.12); font-size: 10px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .suggestion-list { text-align: left; }
.hub-app .money-scope .suggestion-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 19px; background: var(--surface-soft); box-shadow: 0 5px 16px rgba(20,10,34,.09); }
.hub-app .money-scope .suggestion-copy { min-width: 0; display: grid; gap: 3px; }
.hub-app .money-scope .suggestion-title { display: flex; justify-content: space-between; gap: 8px; }
.hub-app .money-scope .suggestion-copy > p { margin: 3px 0 0; color: var(--text); font-size: 11px; line-height: 1.45; }
.hub-app .money-scope .research-check { display: grid; gap: 2px; margin-top: 5px; padding: 9px 10px; border-radius: 13px; color: var(--dim); background: var(--surface); font-size: 10px; line-height: 1.42; }
.hub-app .money-scope .research-check b { color: var(--accent); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.hub-app .money-scope .suggestion-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hub-app .money-scope .confirm-btn, .hub-app .money-scope .deny-btn { min-height: 42px; border: 0; border-radius: 999px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 7px 16px rgba(0,0,0,.14); }
.hub-app .money-scope .confirm-btn { background: var(--yes); }
.hub-app .money-scope .deny-btn { background: var(--no); }
.hub-app .money-scope .confirm-btn svg { width: 15px; height: 15px; }
.hub-app .money-scope .confirm-btn:disabled, .hub-app .money-scope .deny-btn:disabled, .hub-app .money-scope .watchlist-row > button:disabled { opacity: .6; cursor: default; }
.hub-app .money-scope .research-disclaimer { max-width: 720px; margin: 14px auto 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.hub-app .money-scope .risk-tier-grid { display: grid; gap: 11px; max-width: 820px; margin-inline: auto; }
.hub-app .money-scope .risk-tier-link { min-width: 0; padding: 16px; border: 0; border-radius: 19px; background: var(--surface-soft); color: var(--text); text-align: left; cursor: pointer; display: grid; gap: 5px; }
.hub-app .money-scope .risk-tier-link > span { width: max-content; padding: 4px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.hub-app .money-scope .risk-tier-link > strong { font-size: 17px; }
.hub-app .money-scope .risk-tier-link > p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.45; }
.hub-app .money-scope .risk-tier-link > b { color: var(--accent); font-size: 10px; }
.hub-app .money-scope .risk-tier-link.risk-low > span, .hub-app .money-scope .risk-tag.risk-low { color: var(--profit); background: rgba(36,173,119,.13); }
.hub-app .money-scope .risk-tier-link.risk-medium > span, .hub-app .money-scope .risk-tag.risk-medium { color: var(--text); background: color-mix(in srgb, var(--dim) 16%, var(--surface)); }
.hub-app .money-scope .risk-tier-link.risk-high > span, .hub-app .money-scope .risk-tag.risk-high { color: var(--loss); background: rgba(220,71,91,.12); }
.hub-app .money-scope .research-tier-header { display: grid; gap: 12px; }
.hub-app .money-scope .tier-back { width: max-content; min-height: 38px; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 10px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .report-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 820px; margin: 0 auto 12px; }
.hub-app .money-scope .report-controls button { min-height: 42px; border: 0; border-radius: 14px; background: var(--surface-soft); color: var(--accent); font-size: 10px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .report-controls button.active { color: var(--text); background: linear-gradient(145deg, var(--accent), var(--accent-dark)); }
.hub-app .money-scope .report-controls .report-refresh { grid-column: 1 / -1; background: var(--surface); }
.hub-app .money-scope .performance-report { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; max-width: 820px; margin: 0 auto 12px; }
.hub-app .money-scope .performance-report > div { min-width: 0; display: grid; gap: 3px; padding: 11px; border-radius: 15px; background: var(--surface-soft); text-align: left; }
.hub-app .money-scope .performance-report span { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .performance-report strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .candidate-period-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 5px; padding: 10px 11px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.hub-app .money-scope .candidate-period-result span { color: var(--dim); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .candidate-period-result b { font-size: 18px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .candidate-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 0; }
.hub-app .money-scope .candidate-metrics > div { min-width: 0; display: grid; gap: 2px; padding: 9px; border-radius: 12px; background: var(--surface); }
.hub-app .money-scope .candidate-metrics dt { color: var(--dim); font-size: 8px; font-weight: 800; }
.hub-app .money-scope .candidate-metrics dd { margin: 0; color: var(--text); font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hub-app .money-scope .candidate-metrics .metric-range { grid-column: 1 / -1; }
.hub-app .money-scope .risk-tag { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; }
.hub-app .money-scope .gain { color: var(--yes) !important; }
.hub-app .money-scope .loss { color: var(--no) !important; }
.hub-app .money-scope .metric-note, .hub-app .money-scope .metric-error { margin: 4px 0 0; padding: 9px 10px; border-radius: 12px; color: var(--dim); background: var(--surface); font-size: 10px; line-height: 1.4; }
.hub-app .money-scope .metric-error { max-width: 820px; margin: 0 auto 10px; color: var(--no); }
.hub-app .money-scope .candidate-source { min-height: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; color: var(--dim); font-size: 8px; }
.hub-app .money-scope .candidate-source a { color: var(--accent); font-weight: 900; }
.hub-app .money-scope .research-scope-note { max-width: 820px; margin: 0 auto 12px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); text-align: left; }
.hub-app .money-scope .research-scope-note strong { color: var(--accent); font-size: 13px; }
.hub-app .money-scope .research-scope-note span { color: var(--dim); font-size: 9px; line-height: 1.4; }
.hub-app .money-scope .risk-tier-link > small { color: var(--dim); font-size: 9px; font-weight: 750; }
.hub-app .money-scope .sector-report-controls { margin-top: 2px; }
.hub-app .money-scope .sector-report-brief { max-width: 820px; margin: 0 auto 12px; display: grid; gap: 4px; padding: 13px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); text-align: left; }
.hub-app .money-scope .sector-report-brief strong { color: var(--accent); font-size: 12px; }
.hub-app .money-scope .sector-report-brief p { margin: 0; color: var(--text); font-size: 10px; line-height: 1.48; }
.hub-app .money-scope .sector-report-brief span { color: var(--dim); font-size: 8px; line-height: 1.4; }
.hub-app .money-scope .sector-list { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; text-align: left; }
.hub-app .money-scope .sector-card { min-width: 0; display: grid; gap: 11px; padding: 15px; border-radius: 19px; background: var(--surface-soft); box-shadow: 0 6px 18px rgba(20,10,34,.09); }
.hub-app .money-scope .sector-card.risk-low { background: color-mix(in srgb, var(--profit) 5%, var(--surface-soft)); }
.hub-app .money-scope .sector-card.risk-medium { background: color-mix(in srgb, var(--amber) 5%, var(--surface-soft)); }
.hub-app .money-scope .sector-card.risk-high { background: color-mix(in srgb, var(--loss) 4%, var(--surface-soft)); }
.hub-app .money-scope .sector-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hub-app .money-scope .sector-card-top > div:first-child { min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .sector-card-top > div:first-child > span { color: var(--accent); font-size: 9px; font-weight: 900; }
.hub-app .money-scope .sector-card-top h3 { margin: 0; font-size: 16px; line-height: 1.2; }
.hub-app .money-scope .sector-rank { flex: 0 0 auto; display: grid; justify-items: end; gap: 1px; }
.hub-app .money-scope .sector-rank span { color: var(--dim); font-size: 8px; }
.hub-app .money-scope .sector-rank strong { color: var(--accent); font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .sector-return-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.hub-app .money-scope .sector-return-grid > div { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 11px; border-radius: 14px; background: var(--surface); }
.hub-app .money-scope .sector-return-grid > div > span:first-child { color: var(--dim); font-size: 8px; font-weight: 850; }
.hub-app .money-scope .sector-return-grid strong { color: var(--wealth-gold); font-size: 15px; font-style: italic; font-weight: 950; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hub-app .money-scope .sector-return-grid strong.unavailable { color: var(--dim); font-size: 11px; font-style: normal; line-height: 1.28; }
.hub-app .money-scope .sector-return-grid small { color: var(--dim); font-size: 8px; line-height: 1.38; }
.hub-app .money-scope .source-links { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 2px; }
.hub-app .money-scope .source-links a { color: var(--accent); font-size: 8px; font-weight: 900; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent); text-underline-offset: 2px; }
.hub-app .money-scope .sector-risk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.hub-app .money-scope .sector-risk-row .risk-tag { width: max-content; font-size: 9px; font-weight: 900; }
.hub-app .money-scope .sector-risk-row small { color: var(--dim); font-size: 8px; line-height: 1.35; }
.hub-app .money-scope .sector-thesis { display: grid; gap: 4px; padding: 11px; border-radius: 14px; background: var(--surface); }
.hub-app .money-scope .sector-thesis > span { color: var(--accent); font-size: 9px; font-weight: 900; }
.hub-app .money-scope .sector-thesis p, .hub-app .money-scope .sector-more p { margin: 0; color: var(--text); font-size: 10px; line-height: 1.5; }
.hub-app .money-scope .sector-more { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding-top: 8px; }
.hub-app .money-scope .sector-more summary { width: max-content; max-width: 100%; padding: 5px 0; list-style: none; color: var(--accent); font-size: 9px; font-weight: 900; cursor: pointer; box-shadow: none !important; }
.hub-app .money-scope .sector-more summary::-webkit-details-marker { display: none; }
.hub-app .money-scope .sector-more[open] { display: grid; gap: 5px; }
.hub-app .money-scope .research-method { max-width: 820px; margin: 12px auto 0; border-radius: 16px; background: var(--surface-soft); overflow: hidden; text-align: left; }
.hub-app .money-scope .research-method summary { min-height: 44px; display: flex; align-items: center; padding: 11px 13px; list-style: none; color: var(--accent); font-size: 10px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .research-method summary::-webkit-details-marker { display: none; }
.hub-app .money-scope .research-method > div { display: grid; gap: 7px; padding: 0 13px 13px; }
.hub-app .money-scope .research-method p { margin: 0; color: var(--dim); font-size: 9px; line-height: 1.5; }
.hub-app .money-scope .research-method strong { color: var(--text); }
.hub-app .money-scope .research-method a { color: var(--accent); font-weight: 900; }
.hub-app .money-scope .candidate-pulse-section { max-width: 820px; margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--border); }
.hub-app .money-scope .candidate-pulse-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-bottom: 10px; text-align: left; }
.hub-app .money-scope .candidate-pulse-heading > div { display: grid; gap: 2px; }
.hub-app .money-scope .candidate-pulse-heading span { color: var(--accent); font-size: 9px; font-weight: 900; }
.hub-app .money-scope .candidate-pulse-heading h3 { margin: 0; font-size: 15px; }
.hub-app .money-scope .candidate-pulse-heading .report-refresh { min-height: 40px; border: 0; border-radius: 14px; background: var(--surface); color: var(--accent); font-size: 10px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .form-error { margin: 0; color: var(--red); font-size: 12px; }
.hub-app .money-scope .context-tip { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 auto 15px; max-width: 760px; padding: 10px 10px 10px 13px; border-radius: 15px; background: color-mix(in srgb, var(--teal) 10%, var(--surface)); color: var(--text); text-align: left; font-size: 12px; line-height: 1.4; }
.hub-app .money-scope .context-tip span { display: flex; gap: 7px; align-items: baseline; }
.hub-app .money-scope .context-tip strong { color: var(--money-mid); }
.hub-app .money-scope .context-tip button { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; }
.hub-app .money-scope .income-tracker { overflow: hidden; }
.hub-app .money-scope .income-heading { margin-bottom: 11px; }
.hub-app .money-scope .streak-banner { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 11px; max-width: 640px; margin: 0 auto 16px; padding: 10px 12px; border-radius: 18px; background: color-mix(in srgb, var(--gold) 17%, var(--surface)); text-align: left; }
.hub-app .money-scope .streak-orbit { width: 58px; height: 58px; display: grid; place-content: center; border: 2px solid var(--gold); border-radius: 50%; text-align: center; line-height: 1; background: var(--surface); }
.hub-app .money-scope .streak-orbit strong { color: var(--accent); font-size: 23px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .streak-orbit span { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .streak-banner > div:last-child { display: grid; gap: 2px; }
.hub-app .money-scope .streak-banner > div:last-child > span { color: var(--money-deep); font-size: 10px; font-weight: 900; }
.hub-app .money-scope .streak-banner > div:last-child > strong { font-size: 12px; line-height: 1.35; }
.hub-app .money-scope .streak-banner small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .streak-badges { display: flex; justify-content: center; gap: 8px; margin: -7px 0 16px; }
.hub-app .money-scope .streak-badges > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 4px; border-radius: 999px; background: var(--surface-soft); color: var(--dim); font-size: 9px; }
.hub-app .money-scope .streak-badges i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--border); font-style: normal; font-weight: 900; }
.hub-app .money-scope .streak-badges svg { width: 14px; height: 14px; }
.hub-app .money-scope .streak-badges .earned { color: var(--money-deep); background: color-mix(in srgb, var(--gold) 20%, var(--surface)); }
.hub-app .money-scope .streak-badges .earned i { color: var(--text); background: var(--gold); }
.hub-app .money-scope .income-overview { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px auto 10px; }
.hub-app .money-scope .income-ring { --ring-progress: 0deg; width: 112px; height: 112px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) var(--ring-progress), var(--surface-soft) 0); position: relative; }
.hub-app .money-scope .income-ring::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.hub-app .money-scope .income-ring > div { position: relative; z-index: 1; display: grid; gap: 1px; }
.hub-app .money-scope .income-ring strong { color: var(--accent); font-size: 25px; }
.hub-app .money-scope .income-ring span { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .income-total { display: grid; justify-items: start; text-align: left; gap: 2px; }
.hub-app .money-scope .income-total > span { color: var(--dim); font-size: 11px; }
.hub-app .money-scope .income-total > strong { color: var(--accent); font-size: clamp(26px, 8vw, 42px); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.hub-app .money-scope .income-total p { margin: 2px 0 0; color: var(--dim); font-size: 11px; }
.hub-app .money-scope .milestone-line { max-width: 620px; margin: 8px auto 14px; color: var(--dim); font-size: 12px; font-weight: 700; }
.hub-app .money-scope .milestone-line.hit { color: var(--money-mid); }
.hub-app .money-scope .target-form, .hub-app .money-scope .income-form { display: grid; gap: 10px; max-width: 720px; margin: 0 auto; }
.hub-app .money-scope .target-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: 13px; }
.hub-app .money-scope .target-form label, .hub-app .money-scope .income-form label { display: grid; gap: 5px; color: var(--dim); font-size: 11px; font-weight: 800; }
.hub-app .money-scope .income-form { margin-top: 11px; padding: 13px; border-radius: 18px; background: var(--surface-soft); }
.hub-app .money-scope .income-form input { width: 100%; min-height: 44px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); padding: 10px 14px; text-align: center; }
.hub-app .money-scope .text-btn { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 900; cursor: pointer; padding: 6px 10px 10px; }
.hub-app .money-scope .income-log { display: grid; gap: 7px; max-width: 720px; margin: 13px auto 0; }
.hub-app .money-scope .income-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; padding: 9px 8px 9px 13px; border-radius: 16px; background: var(--surface-soft); text-align: left; }
.hub-app .money-scope .income-entry > div { min-width: 0; display: grid; gap: 1px; }
.hub-app .money-scope .income-entry strong { font-size: 12px; overflow-wrap: anywhere; }
.hub-app .money-scope .income-entry small { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .income-entry > b { color: var(--money-mid); font-size: 13px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .empty-state { display: grid; justify-items: center; gap: 3px; padding: 17px 12px; border: 1px dashed var(--border); border-radius: 16px; color: var(--dim); }
.hub-app .money-scope .empty-state svg { color: var(--teal); }
.hub-app .money-scope .empty-state strong { color: var(--text); font-size: 13px; }
.hub-app .money-scope .empty-state span { font-size: 11px; }
.hub-app .money-scope .goal-impact { display: grid; gap: 12px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border); }
.hub-app .money-scope .impact-heading h3 { margin: 0; font-size: 15px; }
.hub-app .money-scope .impact-heading p { margin: 3px 0 0; color: var(--dim); font-size: 10px; }
.hub-app .money-scope .impact-row { display: grid; gap: 5px; max-width: 720px; width: 100%; margin-inline: auto; }
.hub-app .money-scope .impact-copy { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }
.hub-app .money-scope .impact-copy strong { color: var(--accent); font-size: 12px; }
.hub-app .money-scope .impact-copy span, .hub-app .money-scope .impact-row small { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .impact-progress { height: 11px; overflow: hidden; position: relative; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); }
.hub-app .money-scope .impact-progress i, .hub-app .money-scope .impact-progress b { position: absolute; inset-block: 0; display: block; }
.hub-app .money-scope .impact-progress i { left: 0; background: var(--green); }
.hub-app .money-scope .impact-progress b { background: repeating-linear-gradient(135deg, var(--teal), var(--teal) 5px, color-mix(in srgb, var(--teal) 62%, var(--surface)) 5px, color-mix(in srgb, var(--teal) 62%, var(--surface)) 10px); }
.hub-app .money-scope .impact-progress.pending { background: repeating-linear-gradient(135deg, var(--surface-soft), var(--surface-soft) 7px, color-mix(in srgb, var(--border) 65%, var(--surface)) 7px, color-mix(in srgb, var(--border) 65%, var(--surface)) 14px); }
.hub-app .money-scope .annual-goal { overflow: hidden; }
.hub-app .money-scope .annual-goal .section-heading > svg { width: 31px; height: 35px; }
.hub-app .money-scope .annual-summary { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 10px; }
.hub-app .money-scope .annual-summary > div:first-child { display: grid; gap: 2px; text-align: left; }
.hub-app .money-scope .annual-summary span, .hub-app .money-scope .annual-summary small { color: var(--dim); font-size: 10px; }
.hub-app .money-scope .annual-summary > div:first-child strong { color: var(--accent); font-size: clamp(24px, 7vw, 38px); font-variant-numeric: tabular-nums; }
.hub-app .money-scope .annual-ring { --ring-progress: 0deg; width: 78px; height: 78px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) var(--ring-progress), var(--surface-soft) 0); position: relative; }
.hub-app .money-scope .annual-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.hub-app .money-scope .annual-ring strong { position: relative; z-index: 1; color: var(--accent); }
.hub-app .money-scope .annual-progress, .hub-app .money-scope .mini-progress { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); }
.hub-app .money-scope .annual-progress i, .hub-app .money-scope .mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--teal)); }
.hub-app .money-scope .annual-pace { margin: 9px 0 14px; color: var(--dim); font-size: 11px; }
.hub-app .money-scope .annual-pace strong { color: var(--text); }
.hub-app .money-scope .month-tracker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.hub-app .money-scope .month-tracker article { display: grid; gap: 5px; padding: 9px; border-radius: 14px; background: var(--surface-soft); }
.hub-app .money-scope .month-tracker article > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.hub-app .money-scope .month-tracker strong { font-size: 11px; color: var(--accent); }
.hub-app .money-scope .month-tracker span { color: var(--dim); font-size: 8px; }
.hub-app .money-scope .quarter-tracker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.hub-app .money-scope .quarter-tracker article { display: grid; gap: 3px; padding: 11px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.hub-app .money-scope .quarter-tracker strong { color: var(--accent); font-size: 12px; }
.hub-app .money-scope .quarter-tracker span { font-weight: 900; font-size: 13px; }
.hub-app .money-scope .quarter-tracker small { color: var(--dim); font-size: 8px; }
.hub-app .money-scope .savings-log-box { max-width: 760px; margin: 18px auto 0; padding-top: 17px; border-top: 1px solid var(--border); }
.hub-app .money-scope .savings-log-box h3 { margin: 0; font-size: 15px; }
.hub-app .money-scope .savings-log-box > p { margin: 3px 0 12px; color: var(--dim); font-size: 10px; }
.hub-app .money-scope .savings-form { display: grid; gap: 9px; padding: 13px; border-radius: 17px; background: var(--surface-soft); }
.hub-app .money-scope .savings-form label { display: grid; gap: 5px; color: var(--dim); font-size: 10px; font-weight: 800; }
.hub-app .money-scope .savings-form input, .hub-app .money-scope .savings-form select { width: 100%; min-height: 44px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); padding: 9px 13px; text-align: center; }
.hub-app .money-scope .savings-log { display: grid; gap: 7px; margin-top: 11px; }
.hub-app .money-scope .savings-log > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; padding: 9px 8px 9px 12px; border-radius: 15px; background: var(--surface-soft); text-align: left; }
.hub-app .money-scope .savings-log > div > span { display: grid; gap: 1px; }
.hub-app .money-scope .savings-log strong { font-size: 11px; }
.hub-app .money-scope .savings-log small { color: var(--dim); font-size: 9px; }
.hub-app .money-scope .savings-log > div > b { color: var(--money-mid); font-size: 12px; }
.hub-app .money-scope .recommendation-hero { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 22px 16px; border-radius: 24px; color: var(--text); background: linear-gradient(145deg, var(--money-deep), var(--accent) 65%, var(--money-mid)); box-shadow: var(--shadow); text-align: left; }
.hub-app .money-scope .recommendation-shield { width: 72px; height: 80px; flex: 0 0 auto; color: var(--gold); position: relative; display: grid; place-items: center; filter: drop-shadow(0 6px 9px rgba(0,0,0,.18)); }
.hub-app .money-scope .recommendation-shield > svg { width: 100%; height: 100%; stroke-width: 3; }
.hub-app .money-scope .recommendation-shield > span { position: absolute; display: grid; place-items: center; color: var(--text); }
.hub-app .money-scope .recommendation-shield > span svg { width: 24px; height: 24px; }
.hub-app .money-scope .recommendation-hero p { margin: 0; color: var(--dim); font-size: 11px; font-weight: 800; }
.hub-app .money-scope .recommendation-hero strong { display: block; font-size: clamp(24px, 7vw, 34px); line-height: 1.1; }
.hub-app .money-scope .recommendation-hero > div:last-child > span { display: block; margin-top: 4px; color: var(--dim); font-size: 10px; }
.hub-app .money-scope .recommendation-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.hub-app .money-scope .recommendation-summary > div { min-width: 0; display: grid; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 5px 16px rgba(20,10,34,.07); }
.hub-app .money-scope .recommendation-summary span, .hub-app .money-scope .recommendation-summary small { color: var(--dim); font-size: 9px; overflow-wrap: anywhere; }
.hub-app .money-scope .recommendation-summary strong { color: var(--accent); font-size: 17px; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .recommendation-panel, .hub-app .money-scope .automation-panel { overflow: hidden; }
.hub-app .money-scope .recommendation-list, .hub-app .money-scope .automation-list { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.hub-app .money-scope .recommendation-card { display: grid; gap: 9px; padding: 14px; border-radius: 18px; background: var(--surface-soft); border: 1px solid var(--border); text-align: left; }
.hub-app .money-scope .recommendation-card.priority-high { border-top: 4px solid var(--red); }
.hub-app .money-scope .recommendation-card.priority-medium { border-top: 4px solid var(--gold); }
.hub-app .money-scope .recommendation-card.priority-low { border-top: 4px solid var(--teal); }
.hub-app .money-scope .recommendation-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-app .money-scope .priority-pill { padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; text-transform: capitalize; }
.hub-app .money-scope .priority-high .priority-pill { color: var(--money-deep); background: color-mix(in srgb, var(--red) 13%, var(--surface)); }
.hub-app .money-scope .priority-medium .priority-pill { color: var(--money-deep); background: color-mix(in srgb, var(--gold) 20%, var(--surface)); }
.hub-app .money-scope .priority-low .priority-pill { color: var(--money-mid); background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.hub-app .money-scope .recommendation-metric { color: var(--dim); font-size: 9px; text-align: right; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .recommendation-card h3, .hub-app .money-scope .automation-card h3 { margin: 0; font-size: 15px; }
.hub-app .money-scope .recommendation-card > p, .hub-app .money-scope .automation-copy p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.5; }
.hub-app .money-scope .smart-target { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 7px; padding: 9px 10px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-size: 11px; line-height: 1.42; }
.hub-app .money-scope .smart-target svg { color: var(--purple); }
.hub-app .money-scope .smart-target span { display: grid; gap: 1px; }
.hub-app .money-scope .smart-target strong { color: var(--accent); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.hub-app .money-scope .recommendation-actions, .hub-app .money-scope .automation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hub-app .money-scope .done-btn, .hub-app .money-scope .enable-btn, .hub-app .money-scope .dismiss-btn { min-height: 40px; border-radius: 999px; padding: 8px 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 900; cursor: pointer; }
.hub-app .money-scope .done-btn, .hub-app .money-scope .enable-btn { border: 0; color: var(--text); background: var(--yes); }
.hub-app .money-scope .done-btn svg { width: 15px; height: 15px; }
.hub-app .money-scope .enable-btn.on { color: var(--text); background: var(--yes); border: 1px solid color-mix(in srgb, var(--yes) 70%, var(--border)); }
.hub-app .money-scope .dismiss-btn { border: 1px solid color-mix(in srgb, var(--no) 50%, var(--border)); color: var(--no); background: color-mix(in srgb, var(--no) 7%, var(--surface)); }
.hub-app .money-scope .done-btn:disabled, .hub-app .money-scope .enable-btn:disabled, .hub-app .money-scope .dismiss-btn:disabled { opacity: .6; cursor: default; }
.hub-app .money-scope .caught-up { display: grid; justify-items: center; gap: 5px; padding: 20px; border: 1px dashed var(--border); border-radius: 18px; }
.hub-app .money-scope .caught-up .mini-shield { width: 52px; height: 58px; color: var(--green); }
.hub-app .money-scope .caught-up .mini-shield svg { width: 100%; height: 100%; stroke-width: 3; }
.hub-app .money-scope .caught-up p { max-width: 520px; margin: 0; color: var(--dim); font-size: 11px; line-height: 1.5; }
.hub-app .money-scope .automation-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 13px; border-radius: 18px; background: var(--surface-soft); border: 1px solid var(--border); text-align: left; }
.hub-app .money-scope .automation-card.enabled { background: color-mix(in srgb, var(--green) 8%, var(--surface)); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.hub-app .money-scope .automation-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, var(--surface)); }
.hub-app .money-scope .automation-copy { min-width: 0; display: grid; gap: 4px; }
.hub-app .money-scope .automation-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hub-app .money-scope .automation-copy > strong { color: var(--accent); font-size: 10px; }
.hub-app .money-scope .automation-copy > small { color: var(--dim); font-size: 9px; line-height: 1.4; }
.hub-app .money-scope .active-badge { padding: 3px 7px; border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--green) 24%, var(--surface)); font-size: 8px; font-weight: 900; }
.hub-app .money-scope .automation-actions { grid-column: 1 / -1; }
.hub-app .money-scope .trophy-hero { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px 18px; border-radius: 24px; background: linear-gradient(145deg, var(--money-deep), var(--money-ink)); color: var(--text); text-align: left; box-shadow: var(--shadow); }
.hub-app .money-scope .hero-shield { width: 78px; height: 88px; flex: 0 0 auto; color: var(--gold); }
.hub-app .money-scope .hero-shield svg { width: 100%; height: 100%; stroke-width: 3; }
.hub-app .money-scope .trophy-hero p { margin: 0; color: var(--text); font-size: 11px; }
.hub-app .money-scope .trophy-hero strong { display: block; font-size: 28px; }
.hub-app .money-scope .trophy-hero span { color: var(--text); font-size: 11px; }
.hub-app .money-scope .badge-section { padding: 17px 13px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hub-app .money-scope .badge-heading { margin-bottom: 13px; }
.hub-app .money-scope .badge-heading h2 { margin: 0; font-size: 17px; }
.hub-app .money-scope .badge-heading p { margin: 3px 0 0; color: var(--dim); font-size: 10px; }
.hub-app .money-scope .badge-3d-shelf { width: 100%; min-width: 0; display: grid; gap: 9px; }
.hub-app .money-scope .badge-3d-stage { min-width: 0; position: relative; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 8%, rgba(255,245,178,.8), transparent 25%), radial-gradient(circle at 14% 55%, rgba(61,26,94,.48), transparent 35%), radial-gradient(circle at 86% 50%, rgba(75,33,112,.42), transparent 36%), linear-gradient(180deg, var(--money-mid) 0%, var(--money-deep) 52%, var(--money-ink) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -24px 60px rgba(20,10,34,.28); isolation: isolate; }
.hub-app .money-scope .badge-3d-stage canvas { width: 100%; min-height: 176px; display: block; pointer-events: none; }
.hub-app .money-scope .badge-stage-hit { position: absolute; inset: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 8px 10px; border: 0; border-radius: 18px; background: transparent; box-shadow: none !important; cursor: pointer; overflow: hidden; }
.hub-app .money-scope .badge-stage-hit:hover, .hub-app .money-scope .badge-stage-hit:active, .hub-app .money-scope .badge-stage-hit[aria-pressed="true"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent) !important; }
.hub-app .money-scope .badge-stage-hit[aria-pressed="true"] { background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.18), transparent 54%); }
.hub-app .money-scope .badge-hotspot-copy { width: min(100%, 460px); min-width: 0; min-height: 68px; display: grid; align-content: end; gap: 2px; padding: 30px 6px 0; background: linear-gradient(180deg, transparent, rgba(20,10,34,.9) 42%); text-align: center; pointer-events: none; }
.hub-app .money-scope .badge-hotspot-copy strong { color: var(--text); font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; }
.hub-app .money-scope .badge-hotspot-copy small { color: var(--dim); font-size: 9px; line-height: 1.25; overflow-wrap: anywhere; }
.hub-app .money-scope .badge-hotspot-copy em { color: #F3EDDA; font-size: 8px; line-height: 1.2; font-style: normal; font-weight: 900; }
.hub-app .money-scope .badge-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hub-app .money-scope .badge-picker button { min-width: 0; min-height: 44px; display: grid; align-content: center; gap: 1px; padding: 6px 8px; border: 0; border-radius: 13px; background: var(--surface-soft); color: var(--text); text-align: left; cursor: pointer; }
.hub-app .money-scope .badge-picker button.active { color: var(--text); background: var(--accent); box-shadow: 0 6px 16px rgba(20,10,34,.22) !important; }
.hub-app .money-scope .badge-picker button span { font-size: 9px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.hub-app .money-scope .badge-picker button small { color: var(--dim); font-size: 7px; font-weight: 850; }
.hub-app .money-scope .badge-picker button.active small { color: var(--dim); }
.hub-app .money-scope .badge-picker button.earned:not(.active) small { color: var(--yes); }
.hub-app .money-scope .badge-3d-shelf.compact .badge-hotspot-copy { min-height: 40px; padding-top: 12px; }
.hub-app .money-scope .badge-3d-shelf.compact .badge-hotspot-copy small, .hub-app .money-scope .badge-3d-shelf.compact .badge-hotspot-copy em { display: none; }
.hub-app .money-scope .badge-3d-shelf.compact .badge-hotspot-copy strong { font-size: 10px; }
.hub-app .money-scope .badge-3d-shelf.compact .badge-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-app .money-scope .badge-3d-shelf.compact .badge-picker button { min-height: 36px; text-align: center; }
.hub-app .money-scope .badge-3d-shelf.compact .badge-picker button small { display: none; }
.hub-app .money-scope .streak-badges-3d { margin: -4px 0 14px; }
.hub-app .money-scope .trophy-model { width: 150px; min-width: 150px; }
.hub-app .money-scope .trophy-model .badge-3d-stage { background: transparent; box-shadow: none; }
.hub-app .money-scope .trophy-model .badge-hotspot-copy { background: linear-gradient(180deg, transparent, rgba(20,10,34,.92)); }
.hub-app .money-scope .trophy-model .badge-hotspot-copy strong { color: var(--text); }
.hub-app .money-scope .badge-category-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.hub-app .money-scope .badge-category-map span { min-width: 0; display: grid; gap: 2px; padding: 10px 7px; border-radius: 14px; background: var(--surface); color: var(--dim); font-size: 8px; box-shadow: 0 5px 14px rgba(20,10,34,.08); }
.hub-app .money-scope .badge-category-map strong { color: var(--text); font-size: 10px; overflow-wrap: anywhere; }
.hub-app .money-scope .badge-celebration { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 28px), 430px); display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding: 11px; border-radius: 18px; color: var(--text); background: var(--gold); box-shadow: 0 12px 30px rgba(0,0,0,.28); animation: hub-badge-pop .45s cubic-bezier(.2,.9,.2,1); }
.hub-app .money-scope .badge-celebration .mini-shield { width: 40px; height: 45px; }
.hub-app .money-scope .badge-celebration .mini-shield svg { width: 100%; height: 100%; }
.hub-app .money-scope .badge-celebration > div { display: grid; gap: 1px; text-align: left; }
.hub-app .money-scope .badge-celebration strong { font-size: 12px; }
.hub-app .money-scope .badge-celebration span { font-size: 10px; }
.hub-app .money-scope .badge-celebration button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.34); color: var(--text); font-size: 20px; cursor: pointer; }
@keyframes hub-badge-pop {
  from { opacity: 0; transform: translate(-50%, 18px) scale(.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.hub-app .money-scope .toast { position: fixed; z-index: 50; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 999px; color: var(--text); background: var(--money-ink); box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: 12px; text-align: center; }
.hub-app .money-scope .loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; background: var(--bg); }
.hub-app .money-scope .pulse-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--text); }
.hub-app .money-scope .pulse-mark svg { width: 28px; height: 28px; }
@media (prefers-color-scheme: dark) {
.hub-app .money-scope .alert.warning { color: var(--dim); background: var(--money-deep); border-color: var(--money-mid); }
.hub-app .money-scope .alert.good { color: var(--dim); background: var(--money-deep); border-color: var(--money-mid); }
.hub-app .money-scope .alert.info { color: var(--dim); background: var(--money-deep); border-color: var(--money-mid); }
.hub-app .money-scope .positive { color: var(--profit) !important; }
}
@media (min-width: 640px) {
.hub-app .money-scope .content { gap: 18px; margin-top: 18px; }
.hub-app .money-scope .panel, .hub-app .money-scope .portfolio-hero, .hub-app .money-scope .period-strip { padding: 22px; }
.hub-app .money-scope .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .money-scope .account-totals { max-width: 540px; margin: 0 auto 12px; }
.hub-app .money-scope .spend-form { grid-template-columns: 1fr 1fr; align-items: end; }
.hub-app .money-scope .spend-form .primary-btn, .hub-app .money-scope .spend-form .check-btn { width: 100%; }
.hub-app .money-scope .income-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.hub-app .money-scope .income-form .primary-btn { min-width: 140px; }
.hub-app .money-scope .receipt-confirm { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.hub-app .money-scope .receipt-confirm-title, .hub-app .money-scope .receipt-confirm .primary-btn { grid-column: 1 / -1; }
.hub-app .money-scope .food-budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .money-scope .month-tracker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-app .money-scope .quarter-tracker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-app .money-scope .savings-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.hub-app .money-scope .savings-form .primary-btn { grid-column: 1 / -1; }
.hub-app .money-scope .badge-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-app .money-scope .sector-return-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .money-scope .candidate-pulse-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.hub-app .money-scope .candidate-pulse-heading .report-refresh { min-width: 180px; }
.hub-app .money-scope .holding-form { grid-template-columns: repeat(2, 1fr); align-items: end; }
.hub-app .money-scope .holding-form .primary-btn, .hub-app .money-scope .holding-form .form-error { grid-column: 1 / -1; }
.hub-app .money-scope .goal-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-app .money-scope .goal-question-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .money-scope .budget-row { grid-template-columns: minmax(180px, 1fr) 190px 190px; align-items: center; }
.hub-app .money-scope .budget-row.savings-row { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(140px, 180px)); }
.hub-app .money-scope .budget-row.savings-row .target-field { grid-column: 2 / -1; }
.hub-app .money-scope .budget-row:not(:has(.saved-field)) { grid-template-columns: minmax(180px, 1fr) 190px; }
.hub-app .money-scope .family-allocation { padding: 0; }
.hub-app .money-scope .family-lines article { grid-template-columns: minmax(180px, 1fr) minmax(140px, .65fr) minmax(140px, .65fr); align-items: center; }
.hub-app .money-scope .family-line-copy { grid-column: auto; }
.hub-app .money-scope .family-line-amount { padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--border); }
.hub-app .money-scope .income-roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
.hub-app .money-scope .funding-order { grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr; }
.hub-app .money-scope .funding-order i { width: 100%; height: 2px; }
}
@media (min-width: 860px) {
.hub-app .money-scope .topbar { padding-left: 28px; padding-right: 28px; }
.hub-app .money-scope .budget-row.savings-row { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(140px, 180px)); }
.hub-app .money-scope .budget-row.savings-row .target-field { grid-column: auto; }
.hub-app .money-scope .section-nav { top: 106px; }
.hub-app .money-scope .chart-grid { grid-template-columns: repeat(2, 1fr); }
.hub-app .money-scope .totals-grid { grid-template-columns: repeat(4, 1fr); }
.hub-app .money-scope .hero-card { padding-left: 40px; padding-right: 40px; }
.hub-app .money-scope .pulse-grid { max-width: 760px; margin-inline: auto; }
}
.hub-app .money-scope 
:root { --control-shadow: 0 7px 17px rgba(20,10,34,.15), 0 2px 5px rgba(20,10,34,.08), inset 0 1px 0 rgba(255,255,255,.58);
  --control-shadow-hover: 0 10px 23px rgba(20,10,34,.2), 0 3px 7px rgba(20,10,34,.1), inset 0 1px 0 rgba(255,255,255,.68);
  --control-shadow-pressed: 0 3px 8px rgba(20,10,34,.14), inset 0 2px 4px rgba(20,10,34,.14); }
.hub-app .money-scope button, .hub-app .money-scope select, .hub-app .money-scope input, .hub-app .money-scope summary { -webkit-tap-highlight-color: transparent; }
.hub-app .money-scope button, .hub-app .money-scope summary { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; }
.hub-app .money-scope button:not(.badge-stage-hit) { border-color: transparent !important;
  box-shadow: var(--control-shadow); }
.hub-app .money-scope button:not(:disabled):not(.badge-stage-hit):hover { transform: translateY(-1px);
  box-shadow: var(--control-shadow-hover); }
.hub-app .money-scope button:not(:disabled):not(.badge-stage-hit):active { transform: translateY(1px) scale(.985);
  box-shadow: var(--control-shadow-pressed); }
.hub-app .money-scope button:disabled { opacity: .6; cursor: default; box-shadow: none !important; filter: saturate(.66); }
.hub-app .money-scope input, .hub-app .money-scope select { border: 0 !important;
  background: color-mix(in srgb, var(--surface-soft) 92%, var(--surface));
  box-shadow: inset 0 1px 3px rgba(20,10,34,.1), 0 4px 12px rgba(20,10,34,.07), inset 0 0 0 1px rgba(92,92,88,.12);
  transition: box-shadow .16s ease, background-color .16s ease; }
.hub-app .money-scope input:hover, .hub-app .money-scope select:hover { background: var(--surface); box-shadow: inset 0 1px 2px rgba(20,10,34,.08), 0 6px 15px rgba(20,10,34,.1), inset 0 0 0 1px rgba(92,92,88,.2); }
.hub-app .money-scope button:focus-visible, .hub-app .money-scope input:focus-visible, .hub-app .money-scope select:focus-visible, .hub-app .money-scope summary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 8px 19px rgba(20,10,34,.18); }
.hub-app .money-scope .currency-input, .hub-app .money-scope .segmented, .hub-app .money-scope .progress, .hub-app .money-scope .annual-progress, .hub-app .money-scope .mini-progress, .hub-app .money-scope .impact-progress, .hub-app .money-scope .allocation-name i { border: 0; box-shadow: inset 0 1px 3px rgba(20,10,34,.11), inset 0 0 0 1px rgba(92,92,88,.1); }
.hub-app .money-scope .panel, .hub-app .money-scope .budget-group, .hub-app .money-scope .period-strip, .hub-app .money-scope .portfolio-hero, .hub-app .money-scope .badge-section { border-color: transparent; box-shadow: 0 12px 30px rgba(20,10,34,.11); }
.hub-app .money-scope .account-card, .hub-app .money-scope .holding-entry, .hub-app .money-scope .recommendation-card, .hub-app .money-scope .automation-card, .hub-app .money-scope .empty-state, .hub-app .money-scope .context-tip { border-color: color-mix(in srgb, var(--border) 42%, transparent); box-shadow: 0 5px 16px rgba(20,10,34,.08); }
.hub-app .money-scope .section-nav { box-shadow: 0 9px 24px rgba(20,10,34,.13), inset 0 1px 0 rgba(255,255,255,.72); }
.hub-app .money-scope .section-nav button, .hub-app .money-scope .segmented button { box-shadow: none; }
.hub-app .money-scope .section-nav button:not(.active):hover, .hub-app .money-scope .segmented button:not(.active):hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: none; transform: none; }
.hub-app .money-scope .section-nav button.active, .hub-app .money-scope .segmented button.active { background: linear-gradient(145deg, var(--money-mid), var(--accent-dark));
  box-shadow: 0 7px 15px rgba(20,10,34,.25), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(20,10,34,.34); }
.hub-app .money-scope .primary-btn, .hub-app .money-scope .check-btn, .hub-app .money-scope .done-btn, .hub-app .money-scope .enable-btn, .hub-app .money-scope .confirm-btn, .hub-app .money-scope .deny-btn, .hub-app .money-scope .pay-save { box-shadow: 0 9px 19px rgba(20,10,34,.22), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(20,10,34,.16); }
.hub-app .money-scope .primary-btn { background: linear-gradient(145deg, var(--accent), var(--accent-dark)); }
.hub-app .money-scope .check-btn, .hub-app .money-scope .done-btn, .hub-app .money-scope .enable-btn, .hub-app .money-scope .confirm-btn { background: linear-gradient(145deg, color-mix(in srgb, var(--yes) 80%, var(--text)), var(--yes)); }
.hub-app .money-scope .exit-btn { background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: 0 7px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.24) !important; }
.hub-app .money-scope .icon-btn, .hub-app .money-scope .context-tip button, .hub-app .money-scope .badge-celebration button, .hub-app .money-scope .search-field button, .hub-app .money-scope .search-selection button { box-shadow: 0 4px 11px rgba(20,10,34,.13), inset 0 1px 0 rgba(255,255,255,.56); }
.hub-app .money-scope .delete-btn, .hub-app .money-scope .dismiss-btn, .hub-app .money-scope .text-btn, .hub-app .money-scope .watchlist-row > button { color: var(--accent); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-soft) 90%, var(--border))); box-shadow: 0 6px 15px rgba(20,10,34,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.hub-app .money-scope .goal-selector button, .hub-app .money-scope .allocation-list > button, .hub-app .money-scope .asset-summary button, .hub-app .money-scope .badge-picker button, .hub-app .money-scope .search-results li > button { box-shadow: 0 5px 14px rgba(20,10,34,.1), inset 0 1px 0 rgba(255,255,255,.62); }
.hub-app .money-scope .goal-selector button.active, .hub-app .money-scope .allocation-list > button.active, .hub-app .money-scope .asset-summary button.active, .hub-app .money-scope .badge-picker button.active { box-shadow: 0 8px 18px rgba(20,10,34,.22), inset 0 1px 0 rgba(255,255,255,.2) !important; }
.hub-app .money-scope .switch { box-shadow: inset 0 2px 4px rgba(20,10,34,.16), 0 4px 10px rgba(20,10,34,.11) !important; }
.hub-app .money-scope .switch i { box-shadow: 0 2px 6px rgba(20,10,34,.22), inset 0 1px 0 rgba(255,255,255,.82); }
.hub-app .money-scope .credit-calendar-settings > summary, .hub-app .money-scope .budget-group summary, .hub-app .money-scope .holding-entry summary { border-radius: 14px; }
.hub-app .money-scope .credit-calendar-settings > summary:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 5px 13px rgba(20,10,34,.1); }
.hub-app .money-scope 
.deny-btn { color: var(--text); background: linear-gradient(145deg, color-mix(in srgb, var(--no) 78%, var(--text)), var(--no)); box-shadow: 0 8px 18px color-mix(in srgb, var(--no) 28%, transparent); }
.hub-app .money-scope .confirm-btn { box-shadow: 0 8px 18px color-mix(in srgb, var(--yes) 28%, transparent); }
.hub-app .money-scope .holding-form, .hub-app .money-scope .income-form, .hub-app .money-scope .savings-form, .hub-app .money-scope .unity-pay-form { box-shadow: inset 0 1px 2px rgba(20,10,34,.05); }
@media (prefers-color-scheme: dark) {
.hub-app .money-scope { --control-shadow: 0 7px 18px rgba(0,0,0,.32), 0 2px 5px rgba(0,0,0,.22), inset 0 1px 0 rgba(185,168,214,.16);
    --control-shadow-hover: 0 10px 24px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.24), inset 0 1px 0 rgba(185,168,214,.22);
    --control-shadow-pressed: 0 3px 8px rgba(0,0,0,.3), inset 0 2px 4px rgba(0,0,0,.34); }
.hub-app .money-scope input, .hub-app .money-scope select { box-shadow: inset 0 1px 3px rgba(0,0,0,.34), 0 5px 13px rgba(0,0,0,.2), inset 0 0 0 1px rgba(185,168,214,.1); }
.hub-app .money-scope .panel, .hub-app .money-scope .budget-group, .hub-app .money-scope .period-strip, .hub-app .money-scope .portfolio-hero, .hub-app .money-scope .badge-section { box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.hub-app .money-scope .section-nav { box-shadow: 0 9px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(185,168,214,.12); }
}
@media (prefers-reduced-motion: reduce) {
.hub-app .money-scope *, .hub-app .money-scope *::before, .hub-app .money-scope *::after { scroll-behavior: auto !important; transition: none !important; }
}
.hub-app .hero-value, .hub-app .money-scope .pulse-grid > div:nth-child(-n + 2) strong, .hub-app .money-scope .income-total > strong, .hub-app .money-scope .income-total > p, .hub-app .money-scope .income-entry > b, .hub-app .money-scope .impact-copy span, .hub-app .money-scope .account-totals strong, .hub-app .money-scope .account-balance strong:not(.not-linked), .hub-app .money-scope .account-note, .hub-app .money-scope .spend-row > b, .hub-app .money-scope .goal-copy span, .hub-app .money-scope .goal > small, .hub-app .money-scope .goal-strategy-preview > span, .hub-app .money-scope .goal-strategy-preview > small, .hub-app .money-scope .alert strong, .hub-app .money-scope .metric strong, .hub-app .money-scope .income-idea p, .hub-app .money-scope .annual-summary > div:first-child span, .hub-app .money-scope .annual-summary > div:first-child strong, .hub-app .money-scope .annual-summary > div:first-child small, .hub-app .money-scope .annual-pace strong, .hub-app .money-scope .month-tracker span, .hub-app .money-scope .quarter-tracker span, .hub-app .money-scope .quarter-tracker small, .hub-app .money-scope .savings-log > div > b, .hub-app .money-scope .chart-center strong, .hub-app .money-scope .budget-group summary b, .hub-app .money-scope .recommendation-metric, .hub-app .money-scope .recommendation-summary small, .hub-app .money-scope .recommendation-card h3, .hub-app .money-scope .recommendation-card > p, .hub-app .money-scope .automation-copy h3, .hub-app .money-scope .automation-copy > p, .hub-app .money-scope .portfolio-hero > strong, .hub-app .money-scope .portfolio-performance span, .hub-app .money-scope .allocation-value strong, .hub-app .money-scope .holding-row > div:first-child small, .hub-app .money-scope .holding-value > strong, .hub-app .money-scope .holding-value > small:last-of-type, .hub-app .money-scope .asset-heading p { color: var(--wealth-gold) !important;
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: tabular-nums; }
.hub-app .money-scope 
.hero-card .hero-value, .hub-app .money-scope .hero-card .pulse-grid > div:nth-child(-n + 2) strong, .hub-app .money-scope .portfolio-hero > strong, .hub-app .money-scope .portfolio-hero .portfolio-performance span { color: #F3EDDA !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.hub-app .money-scope 
.currency-input > b, .hub-app .money-scope .currency-input > strong, .hub-app .money-scope .currency-input input { color: var(--wealth-gold) !important;
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: tabular-nums; }
.hub-app .money-scope 
.eyebrow, .hub-app .money-scope .pulse-grid > div:nth-child(-n + 2) span, .hub-app .money-scope .income-total > span, .hub-app .money-scope .money-field > span:first-child, .hub-app .money-scope .target-form label > span:first-child, .hub-app .money-scope .income-form label:first-child > span:first-child, .hub-app .money-scope .spend-form label:first-child > span:first-child, .hub-app .money-scope .savings-form label:first-child > span:first-child, .hub-app .money-scope .holding-form label:nth-child(3) > span:first-child, .hub-app .money-scope .holding-form label:nth-child(4) > span:first-child, .hub-app .money-scope .holding-edit label:nth-child(3) > span:first-child, .hub-app .money-scope .holding-edit label:nth-child(4) > span:first-child, .hub-app .money-scope .goal-question-grid label:nth-child(1) > span:first-child, .hub-app .money-scope .goal-question-grid label:nth-child(2) > span:first-child, .hub-app .money-scope .goal-question-grid label:nth-child(4) > span:first-child, .hub-app .money-scope .account-totals span, .hub-app .money-scope .account-balance span, .hub-app .money-scope .metric span, .hub-app .money-scope .annual-summary > div:first-child span, .hub-app .money-scope .goal-copy > strong, .hub-app .money-scope .portfolio-hero > p, .hub-app .money-scope .allocation-value small { text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 850; }
.hub-app .money-scope .recharts-xAxis .recharts-cartesian-axis-tick-value, .hub-app .money-scope .recharts-tooltip-item-value { fill: var(--wealth-gold) !important;
  color: var(--wealth-gold) !important;
  font-style: italic;
  font-weight: 900; }
.hub-app .money-scope 
.unity-pay-tracker { display: grid; gap: 18px; }
.hub-app .money-scope .unity-pay-summary { display: grid; grid-template-columns: 1fr; gap: 8px; }
.hub-app .money-scope .unity-pay-summary article { min-width: 0; padding: 15px; background: var(--surface-soft); border-radius: 12px; display: grid; gap: 3px; }
.hub-app .money-scope .unity-pay-summary span, .hub-app .money-scope .unity-pay-summary small { color: var(--dim); font-size: .78rem; font-weight: 800; }
.hub-app .money-scope .unity-pay-summary strong { color: var(--wealth-gold); font-size: 1.25rem; font-style: italic; font-weight: 900; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .pay-month-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-app .money-scope .pay-month-control label { color: var(--dim); font-size: .78rem; font-weight: 900; }
.hub-app .money-scope .pay-month-control input { width: auto; min-height: 42px; }
.hub-app .money-scope .unity-pay-form { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; background: var(--surface-soft); border-radius: 14px; }
.hub-app .money-scope .unity-pay-form > label { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--dim); font-size: .76rem; font-weight: 900; }
.hub-app .money-scope .unity-pay-form > label > small { color: var(--dim); font-weight: 700; line-height: 1.3; }
.hub-app .money-scope .unity-pay-form input, .hub-app .money-scope .unity-pay-form select { min-height: 44px; width: 100%; }
.hub-app .money-scope .unity-pay-form .currency-input { width: 100%; }
.hub-app .money-scope .unity-pay-form .currency-input input { min-width: 0; }
.hub-app .money-scope .pay-save { width: 100%; min-height: 46px; justify-content: center; }
.hub-app .money-scope .unity-pay-log { display: grid; gap: 8px; }
.hub-app .money-scope .unity-pay-log > article { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 10px; padding: 12px 10px 12px 13px; background: var(--surface-soft); border-radius: 12px; }
.hub-app .money-scope .unity-pay-log > article > div:first-child { min-width: 0; display: grid; gap: 2px; }
.hub-app .money-scope .unity-pay-log > article > div:first-child > span { color: var(--accent); font-size: .7rem; font-weight: 950; }
.hub-app .money-scope .unity-pay-log > article > div:first-child > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-app .money-scope .unity-pay-log > article small { color: var(--dim); font-size: .74rem; }
.hub-app .money-scope .pay-entry-total { display: grid; justify-items: end; gap: 5px; }
.hub-app .money-scope .pay-entry-total > strong { color: var(--wealth-gold); font-style: italic; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .pay-status { min-height: 28px; padding: 5px 9px; border-radius: 999px; font-size: .68rem; font-weight: 950; }
.hub-app .money-scope .pay-status.expected { background: var(--surface); color: var(--accent); }
.hub-app .money-scope .pay-status.received { background: color-mix(in srgb, var(--yes) 16%, var(--surface)); color: var(--yes); }
.hub-app .money-scope .auto-income { background: color-mix(in srgb, var(--yes) 9%, var(--surface-soft)); }
.hub-app .money-scope .auto-tag { color: var(--yes); font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.hub-app .money-scope .calculated-row input:disabled { opacity: 1; color: var(--wealth-gold); -webkit-text-fill-color: var(--wealth-gold); }
.hub-app .money-scope .calculated-row .money-field > small { color: var(--yes); }
@media (min-width: 520px) {
.hub-app .money-scope .transaction-filters { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.hub-app .money-scope .unity-pay-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-app .money-scope .unity-pay-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-app .money-scope .unity-pay-form .pay-save, .hub-app .money-scope .unity-pay-form .form-error { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
.hub-app .money-scope .unity-pay-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-app .money-scope .unity-pay-form .pay-save { grid-column: 1 / -1; }
}
.hub-app .money-scope 
.topbar { background: linear-gradient(145deg, var(--surface-soft), var(--bg)); box-shadow: 0 5px 18px rgba(20, 10, 34, .42); }
.hub-app .money-scope .hero-card { background: linear-gradient(145deg, var(--surface) 0%, var(--surface-soft) 72%, var(--surface) 140%); }
.hub-app .money-scope .search-selection, .hub-app .money-scope .portfolio-hero, .hub-app .money-scope .recommendation-hero, .hub-app .money-scope .trophy-hero { background: linear-gradient(145deg, var(--surface), var(--surface-soft)); }
.hub-app .money-scope .hero-card::after { border-color: color-mix(in srgb, var(--micro-accent) 18%, transparent); }
.hub-app .money-scope .primary-btn, .hub-app .money-scope .check-btn, .hub-app .money-scope .done-btn, .hub-app .money-scope .enable-btn, .hub-app .money-scope .confirm-btn, .hub-app .money-scope .deny-btn, .hub-app .money-scope .pay-save, .hub-app .money-scope .exit-btn, .hub-app .money-scope .section-nav button.active, .hub-app .money-scope .segmented button.active, .hub-app .money-scope .goal-selector button.active, .hub-app .money-scope .badge-picker button.active, .hub-app .money-scope .report-controls button.active, .hub-app .money-scope .goal-readiness, .hub-app .money-scope .goal-question-grid label > span:first-child b, .hub-app .money-scope .idea-number, .hub-app .money-scope .funding-order span b, .hub-app .money-scope .pulse-mark { color: var(--bg) !important;
  background: var(--accent) !important;
  background-image: none !important;
  border-color: transparent !important; }
.hub-app .money-scope .primary-btn svg, .hub-app .money-scope .check-btn svg, .hub-app .money-scope .done-btn svg, .hub-app .money-scope .enable-btn svg, .hub-app .money-scope .confirm-btn svg, .hub-app .money-scope .deny-btn svg, .hub-app .money-scope .pay-save svg, .hub-app .money-scope .exit-btn svg { color: var(--bg); }
.hub-app .money-scope .badge-celebration { color: var(--bg); background: var(--accent); }
.hub-app .money-scope .badge-celebration button { color: var(--bg); background: color-mix(in srgb, var(--bg) 12%, transparent); }
.hub-app .money-scope .positive, .hub-app .money-scope .gain, .hub-app .money-scope .auto-tag, .hub-app .money-scope .calculated-row .money-field > small { color: var(--success-text) !important; }
.hub-app .money-scope .negative, .hub-app .money-scope .loss, .hub-app .money-scope .form-error, .hub-app .money-scope .metric-error, .hub-app .money-scope .icon-btn.danger { color: var(--error-text) !important; }
.hub-app .money-scope .alert.warning { color: var(--warning-text); background: color-mix(in srgb, var(--warning) 12%, var(--bg)); border-color: color-mix(in srgb, var(--warning) 44%, var(--surface-soft)); }
.hub-app .money-scope .alert.good { color: var(--success-text); background: color-mix(in srgb, var(--success) 12%, var(--bg)); border-color: color-mix(in srgb, var(--success) 44%, var(--surface-soft)); }
.hub-app .money-scope .alert.info { color: var(--info-text); background: color-mix(in srgb, var(--info) 12%, var(--bg)); border-color: color-mix(in srgb, var(--info) 44%, var(--surface-soft)); }
.hub-app .money-scope .risk-tier-link.risk-low > span, .hub-app .money-scope .risk-tag.risk-low { color: var(--bg); background: var(--success); }
.hub-app .money-scope .risk-tier-link.risk-medium > span, .hub-app .money-scope .risk-tag.risk-medium { color: var(--bg); background: var(--warning); }
.hub-app .money-scope .risk-tier-link.risk-high > span, .hub-app .money-scope .risk-tag.risk-high { color: var(--bg); background: var(--error); }
.hub-app .money-scope .pay-status.received, .hub-app .money-scope .active-badge { color: var(--success-text); }
.hub-app .badge-3d-stage { background: radial-gradient(circle at 50% 8%, rgba(92,92,88,.18), transparent 25%), radial-gradient(circle at 14% 55%, rgba(61,26,94,.58), transparent 35%), radial-gradient(circle at 86% 50%, rgba(75,33,112,.52), transparent 36%), linear-gradient(180deg, var(--surface-soft) 0%, var(--surface) 52%, var(--bg) 100%); }
.hub-app .money-scope .trophy-model .badge-3d-stage { background: transparent; }
.hub-app .money-scope .badge-hotspot-copy { background: linear-gradient(180deg, transparent, rgba(20,10,34,.92) 42%); }
.hub-app .money-scope .trophy-model .badge-hotspot-copy { background: linear-gradient(180deg, transparent, rgba(20,10,34,.94)); }
.hub-app .money-scope 
:root { --control-shadow: 0 7px 17px rgba(20,10,34,.28), 0 2px 5px rgba(20,10,34,.18), inset 0 1px 0 rgba(242,236,249,.16);
  --control-shadow-hover: 0 10px 23px rgba(20,10,34,.36), 0 3px 7px rgba(20,10,34,.22), inset 0 1px 0 rgba(242,236,249,.2);
  --control-shadow-pressed: 0 3px 8px rgba(20,10,34,.3), inset 0 2px 4px rgba(20,10,34,.34); }
.hub-app .money-scope 
.app-shell :is(small, label, dt, dd), .hub-app .money-scope .language-popover :is(small, label), .hub-app .money-scope .search-results small, .hub-app .money-scope .search-selection small, .hub-app .money-scope .language-status, .hub-app .money-scope .date-lockup, .hub-app .money-scope .rate-status, .hub-app .money-scope .account-balance span, .hub-app .money-scope .transaction-filters label, .hub-app .money-scope .transaction-copy small, .hub-app .money-scope .credit-prompt small, .hub-app .money-scope .needed-item-top > div > span, .hub-app .money-scope .needed-item-top p, .hub-app .money-scope .needed-progress-copy span, .hub-app .money-scope .needed-rule, .hub-app .money-scope .needed-save-form label, .hub-app .money-scope .watchlist-row span, .hub-app .money-scope .watchlist-row strong, .hub-app .money-scope .sector-thesis > span, .hub-app .money-scope .research-method p, .hub-app .money-scope .candidate-pulse-heading span, .hub-app .money-scope .streak-banner small, .hub-app .money-scope .performance-report span, .hub-app .money-scope .recommendation-summary span, .hub-app .money-scope .recommendation-summary small, .hub-app .money-scope .recommendation-metric, .hub-app .money-scope .automation-copy > small, .hub-app .money-scope .badge-hotspot-copy small, .hub-app .money-scope .goal-planner-heading > div:first-child > span, .hub-app .money-scope .goal-question-grid label, .hub-app .money-scope .impact-heading p, .hub-app .money-scope .impact-copy span, .hub-app .money-scope .income-idea p, .hub-app .money-scope .income-idea small, .hub-app .money-scope .chart-center span, .hub-app .money-scope .holding-edit label, .hub-app .money-scope .asset-summary span, .hub-app .money-scope .research-scope-note span, .hub-app .money-scope .badge-category-map strong, .hub-app .money-scope .badge-celebration span, .hub-app .money-scope .account-copy small, .hub-app .money-scope .account-note, .hub-app .money-scope .account-footnote, .hub-app .money-scope .transaction-summary, .hub-app .money-scope .currency-bar, .hub-app .money-scope .pulse-grid { font-size: 12px; }
.hub-app .money-scope .language-trigger > span, .hub-app .money-scope .search-results b, .hub-app .money-scope .pending-badge, .hub-app .money-scope .holding-category, .hub-app .money-scope .sector-rank span, .hub-app .money-scope .source-links a, .hub-app .money-scope .candidate-metrics dt, .hub-app .money-scope .active-badge, .hub-app .money-scope .month-tracker span, .hub-app .money-scope .quarter-tracker small, .hub-app .money-scope .candidate-source, .hub-app .money-scope .goal-readiness span, .hub-app .money-scope .badge-category-map span, .hub-app .money-scope .goal-selector button small, .hub-app .money-scope .priority-pill, .hub-app .money-scope .research-check, .hub-app .money-scope .pay-status, .hub-app .money-scope .needed-item-status > span { font-size: 11px; }
.hub-app .money-scope 
.language-shell button, .hub-app .money-scope .app-shell button, .hub-app .money-scope .app-shell input, .hub-app .money-scope .app-shell select, .hub-app .money-scope .app-shell textarea, .hub-app .money-scope .app-shell a { min-block-size: 44px; }
.hub-app .money-scope .language-shell button, .hub-app .money-scope .app-shell button, .hub-app .money-scope .app-shell a { min-inline-size: 44px; }
.hub-app .money-scope .app-shell a { display: inline-flex; align-items: center; }
.hub-app .money-scope .large-text-toggle { position: fixed;
  z-index: 90;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  min-width: 126px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--control-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); }
.hub-app .money-scope .large-text-toggle strong { font-family: Georgia, serif; font-size: 18px; line-height: 1; }
.hub-app .money-scope .large-text-toggle span { font-size: 12px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.hub-app .money-scope .large-text-toggle.active { color: var(--bg); background: var(--accent); border-color: transparent; }
.hub-app .money-scope .large-text-toggle:hover { box-shadow: var(--control-shadow-hover); }
.hub-app .money-scope .large-text-toggle:active { box-shadow: var(--control-shadow-pressed); }
.hub-app .money-scope html[data-large-text="true"] .language-shell > div:last-child { zoom: 1.15; }
.hub-app .money-scope .needed-purchase-btn { width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
  border-radius: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--accent) 22%);
  font-weight: 850;
  box-shadow: 0 6px 16px rgba(20,10,34,.12); }
.hub-app .money-scope .needed-purchase-btn:disabled { color: var(--dim);
  background: var(--surface-soft);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed; }
.hub-app .money-scope .needed-item-status .purchased { color: var(--bg); background: var(--success); }
@media (max-width: 460px) {
.hub-app .money-scope .large-text-toggle { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-width: 112px; padding-inline: 12px; }
.hub-app .money-scope html[data-large-text="true"] .language-shell > div:last-child { zoom: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
.hub-app .money-scope *, .hub-app .money-scope *::before, .hub-app .money-scope *::after { scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important; }
.hub-app .money-scope .badge-3d-stage canvas, .hub-app .money-scope .language-trigger.translating svg { animation: none !important; }
.hub-app .money-scope .large-text-toggle:hover, .hub-app .money-scope .large-text-toggle:active { transform: none !important; }
}
.hub-app .money-scope { --money-ink: var(--text); --money-deep: var(--surface); --money-mid: var(--accent); font-family: "Jost", "Avenir Next", "Segoe UI", sans-serif; }
.hub-app .money-scope .topbar { background: var(--surface); color: var(--text); box-shadow: none; border-bottom: 1px solid var(--border); top: 0; }
.hub-app .money-scope .date-lockup strong { color: var(--text); }
.hub-app .money-scope .hero-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); border-radius: var(--radius); }
.hub-app .money-scope .hero-card::after { display: none; }
.hub-app .money-scope .pulse-grid > div { background: var(--surface-soft); border: 1px solid var(--border); }
.hub-app .money-scope .search-selection { background: var(--surface-soft); color: var(--text); box-shadow: none; border: 1px solid var(--border); }
.hub-app .money-scope .search-selection small, .hub-app .money-scope .search-selection em { color: var(--dim); }
.hub-app .money-scope .panel, .hub-app .money-scope .budget-group, .hub-app .money-scope .period-strip, .hub-app .money-scope .portfolio-hero { border-radius: var(--radius); box-shadow: var(--shadow); }
.hub-app .money-scope .section-nav { border: 1px solid var(--border); box-shadow: var(--shadow); top: 8px; }
.hub-app .money-scope .section-nav button.active, .hub-app .money-scope .segmented button.active { background: var(--surface-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.hub-app .money-scope .exit-btn { color: var(--text); border-color: var(--border); background: var(--surface); }
.hub-app .money-scope .primary-btn, .hub-app .money-scope .check-btn { background: var(--accent); color: var(--accent-ink); }
.hub-app .money-scope .currency-bar, .hub-app .money-scope .search-field, .hub-app .money-scope .search-results { border-radius: 16px; box-shadow: var(--shadow); }
@media (max-width: 899px) {
.hub-app .money-scope .large-text-toggle { bottom: calc(84px + env(safe-area-inset-bottom)); }
.hub-app .money-scope .language-control { bottom: calc(84px + env(safe-area-inset-bottom)); }
.hub-app .money-scope .toast, .hub-app .money-scope .badge-celebration { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
/* ==========================================================================
   Portal glue (hub design match, brief 1182, 2026-10-26).
   The block above is the Hub artifact's own theme (theme.css +
   money/money-theme.css) with every selector scoped under .hub-app, so the
   dashboard inside the hub content region renders with the artifact's
   design while the fleet page around it keeps site.css. The rules below
   only adapt placement to the portal page; they change no artifact value.
   ========================================================================== */
.hub-app { position: relative; }
.hub-app .hub-view[hidden] { display: none !important; }
.hub-app .hub-sections { display: block; }

/* Snapshot status + fixture notice: quiet lines in artifact dress. */
.hub-app .hub-status-panel { margin: 0 0 10px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hub-app .hub-status { margin: 0; color: var(--dim); font-size: 12px; font-weight: 600; }
.hub-app .hub-status[data-kind="error"] { color: var(--loss); }
.hub-app .hub-fixture-notice { margin: 0 0 16px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--brand-gold) 12%, var(--surface)); color: var(--text); font-size: 13px; line-height: 1.5; box-shadow: none; }

/* Desktop rail anchoring (brief 1189): SUPERSEDED by the owner's
   2026-10-26 10:14 EDT redesign order — the left sidebar is removed
   entirely and the menu now lives in a bottom bar at every width.
   The full redesign block sits at the end of this file. */

/* Sign-out placement (owner order 2026-10-27 07:37 EDT, superseding
   the 2026-10-26 18:02 EDT stack): the "< SIGNOUT" button lives ONLY
   in the signed-in app, at the end of the primary nav, BESIDE the
   Contact button on the same line — Contact left, Sign out right of
   it — so the header bar keeps the site-standard single-row height
   and the Hub charts get the full view. On mobile the pair sits side
   by side inside the nav panel, after the links. */
.nav-cta-stack { display: flex; flex-direction: row; gap: 8px; align-items: center; flex: none; }
.nav-cta-stack .btn { justify-content: center; }
.hub-header-signout { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 14px; border: 1px solid var(--gold-deep, #C9A227); border-radius: 999px; background: transparent; color: var(--gold, #E8C15A); font: 650 12.5px/1 "Jost", sans-serif; letter-spacing: .05em; cursor: pointer; }
.hub-header-signout:hover { background: rgba(232, 193, 90, .14); }
.hub-header-signout:focus-visible { outline: 3px solid var(--gold-deep, #C9A227); outline-offset: 3px; }
@media (max-width: 820px) { .nav-cta-stack { margin-top: 14px; } nav.main .nav-cta-stack .btn { margin-top: 0; } }
@media (max-width: 560px) { .hub-header-signout { padding: 0 10px; font-size: 12px; min-height: 38px; } }

/* Hub logo (owner order 2026-10-26 18:02 EDT): the header emblem on
   the Hub pages (sign-in + app) is enlarged — 44px to 56px. Scoped to
   body[data-hub-page] and this Hub-only stylesheet, so the rest of
   the site keeps the standard brand size. */
body[data-hub-page] .brand img { width: 56px; height: 56px; }

/* Legacy generic renderer (unknown future snapshot sections, More view). */
.hub-app .hub-legacy-panel .hub-section { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hub-app .hub-legacy-panel .hub-section > h2 { font-size: 21px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 12px; }

/* Money view: the exit button returns to the More menu (portal routing). */
.hub-app .money-scope .exit-btn { cursor: pointer; }

/* Read-only website view: write controls from the artifact render disabled. */
.hub-app .hub-ro-note { margin: 10px 0 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
.hub-app button:disabled.hub-ro { opacity: .55; cursor: default; }

/* ===== Hub design-match glue 2 (brief 1182): portal-only equivalents =====
   The artifact renders its badge shelves as a 3D component, its charts via
   Recharts and its receipt category rows with component-local styles; the
   portal renders flat equivalents, dressed here in the artifact's own
   palette, radii and type so the presentation matches. */
.hub-app .money-scope .badge-flat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hub-app .money-scope .badge-flat { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); color: var(--text); }
.hub-app .money-scope .badge-flat strong { font-size: 13px; line-height: 1.25; }
.hub-app .money-scope .badge-flat small { color: var(--dim); font-size: 11px; line-height: 1.35; }
.hub-app .money-scope .badge-flat-mark { justify-self: start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--dim); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hub-app .money-scope .badge-flat.earned { background: var(--surface); box-shadow: var(--shadow-control); }
.hub-app .money-scope .badge-flat.earned .badge-flat-mark { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.hub-app .money-scope .badge-flat.tone-gold.earned .badge-flat-mark { background: var(--brand-gold); color: #120C2E; }
.hub-app .money-scope .badge-flat.tone-teal.earned .badge-flat-mark { background: #2E32A8; color: #F3EDDA; }
.hub-app .money-scope .badge-flat.tone-blue.earned .badge-flat-mark { background: #2E32A8; color: #F3EDDA; }
.hub-app .money-scope .badge-flat-state { font-size: 11px; font-weight: 650; color: var(--dim); }
.hub-app .money-scope .badge-flat.earned .badge-flat-state { color: var(--accent); }
.hub-app .money-scope .donut-svg { display: block; width: 100%; height: 100%; max-height: 225px; margin: 0 auto; }
.hub-app .money-scope .bar-chart { display: grid; gap: 10px; }
.hub-app .money-scope .bar-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: 10px; font-size: 12px; }
.hub-app .money-scope .bar-row > span { color: var(--dim); }
.hub-app .money-scope .bar-row > strong { font-variant-numeric: tabular-nums; }
.hub-app .money-scope .bar-track { height: 10px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); overflow: hidden; }
.hub-app .money-scope .bar-track > i { display: block; height: 100%; border-radius: 999px; }
.hub-app .receipts-category-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.hub-app .receipts-category-row:last-child { border-bottom: 0; }
.hub-app .receipts-category-row strong { font-variant-numeric: tabular-nums; }

/* ===== Owner order 2026-10-26 09:27 EDT: portal line beneath the header =====
   The fleet header is position:fixed (77px tall) and the hub pages gave
   their content no clearance, so the app shell's "Private owner portal"
   kicker rendered inside the header band, over the Eyekus logo (measured
   on the production page at desktop width: kicker top 44px, header bottom
   77px). The hub main now starts below the header bar on both hub pages
   (sign-in and app shell), and the app shell carries the "Private owner
   portal" line as the first line of its content, beneath the header. */
.hub-main { padding-top: 95px; }
.hub-app .hub-portal-line { margin: 0 2px 10px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--dim); }

/* ===== Owner redesign, 2026-10-26 10:14 + 10:15 EDT (brief 1189) =====
   "I want the hub to fill the screen once I log in. The dashboard menu
   bar on the left — bring that to the bottom of the screen, on the
   horizontal axis. Remove the 'EyekusCapital Hub' title above it. And
   the Hub should match the colour scheme of the website." Plus: "ensure
   all texts are filled to center and their respective buttons or pills."
   This block supersedes the sidebar repair: the left rail is gone at
   every width (its brand block is also removed from the markup), the
   menu is one horizontal bar fixed to the bottom of the screen in the
   site's indigo + gold scheme, the app fills the viewport width, and
   text, buttons and pills are centred throughout the stage. */

/* Full-screen frame: the app column is no longer capped at the site
   wrap width, and the stage spans the whole shell with room at the
   bottom for the fixed bar. */
body[data-hub-page="app"] .hub-content { max-width: none; padding-left: clamp(12px, 2vw, 28px); padding-right: clamp(12px, 2vw, 28px); }
.hub-app .app-shell { min-height: calc(100vh - 95px); }
.hub-app .hub-stage { width: 100%; max-width: none; margin: 0; padding: 28px clamp(10px, 3vw, 40px) 132px; }

/* App ground aligned to the site's cream in the light scheme. */
@media (prefers-color-scheme: light) {
  /* RESKIN 2026-10-26: the Hub keeps the site's deep-indigo ground in light mode too. */
  .hub-app { --bg: #120C2E; }
}

/* The bottom bar: one form at every width, site colours, gold active.
   (Resets every left-rail declaration from the >=900px block above:
   offsets, width, single-column grid, row buttons, light surface.) */
.hub-app .ws-nav { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; z-index: 60;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0; align-content: normal;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  border-top: 1px solid color-mix(in srgb, var(--gold-deep) 60%, transparent); border-right: 0;
  backdrop-filter: none; box-shadow: 0 -10px 34px rgba(10, 6, 26, .38); }
.hub-app .ws-nav .ws-nav-brand { display: none; }
.hub-app .ws-nav button { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--hero-ink-soft);
  font-size: 11px; font-weight: 600; cursor: pointer; }
.hub-app .ws-nav button svg { width: 22px; height: 22px; stroke: currentColor; }
.hub-app .ws-nav button.active { color: var(--gold); background: color-mix(in srgb, var(--gold) 15%, transparent); }
.hub-app .ws-nav button.active svg { stroke: var(--gold); }
.hub-app .ws-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Centring pass (10:15 order): stage text centred; buttons and pills
   centred in their rows; the bar's items sit centred in their cells
   (flex column, align/justify center, above). */
.hub-app .hub-stage { text-align: center; }
.hub-app .hub-stage th, .hub-app .hub-stage td { text-align: center; }
.hub-app .gate-item, .hub-app .journal-record-summary, .hub-app .more-row, .hub-app .lib-source-button,
.hub-app .watch-select, .hub-app .flows-source, .hub-app .voice-slot button, .hub-app .chart-slot > button:first-of-type,
.hub-app .money-scope .search-results li > button { text-align: center; }
.hub-app .position-value, .hub-app .trade-outcome, .hub-app .journal-result, .hub-app .watch-quote,
.hub-app .flow-side, .hub-app .gate-verdict strong, .hub-app .money-scope .date-lockup,
.hub-app .perf-table caption, .hub-app .hs-table caption { text-align: center; }
.hub-app .mission-topline, .hub-app .section-heading, .hub-app .subhead, .hub-app .note-actions,
.hub-app .journal-actions, .hub-app .alert-form-actions, .hub-app .gate-verdict, .hub-app .toggle-row,
.hub-app .gate-item, .hub-app .baseline-rail { justify-content: center; }
.hub-app .baseline-rail strong { margin-left: 0; }
.hub-app .mission-copy { justify-items: center; }
.hub-app .section-heading { flex-wrap: wrap; }
.hub-app input, .hub-app textarea, .hub-app select { text-align: center; }

/* ==========================================================================
   RESKIN ADDITIONS 2026-10-26 — scrollbars, TradingView pane size, and the
   Performance chart set (pie / bars / line) in the site scheme.
   ========================================================================== */
.hub-app { scrollbar-color: #3A2E66 #120C2E; }
.hub-app *::-webkit-scrollbar { width: 10px; height: 10px; }
.hub-app *::-webkit-scrollbar-track { background: #120C2E; }
.hub-app *::-webkit-scrollbar-thumb { background: #3A2E66; border-radius: 8px; border: 2px solid #120C2E; }
.hub-app *::-webkit-scrollbar-thumb:hover { background: #232065; }

/* TradingView advanced-chart pane — FULL VIEW (owner direction 2026-10-26
   11:14 EDT, strengthened 11:58 EDT): the chart is the trading screen's main
   object — full width of its panel and a full, generous viewport height on
   desktop and phone alike; no half-window embed anywhere. !important
   overrides the fixed pixel height mountTvWidget sets inline; the widget
   itself runs autosize:true and fills this pane. The indigo ground is pinned
   on the host, the widget well and the iframe so the pane can never flash or
   sit pale — before, during or after the widget paints, the surface the
   owner sees is the house ground #120C2E; the widget's own dark theme +
   pane overrides (hub.js mountTradingWidgets) carry the same ground inside
   the chart, with grid lines coloured to the ground (none render) and the
   house candle colours. */
.hub-app #hubTvChart.tv-widget { width: 100%; height: clamp(640px, 86vh, 1100px) !important; background: #120C2E; }
.hub-app #hubTvChart .tradingview-widget-container__widget { background: #120C2E; }
.hub-app #hubTvChart iframe { background: #120C2E; }
@media (max-width: 700px) {
  .hub-app #hubTvChart.tv-widget { height: clamp(520px, 82vh, 820px) !important; }
}

/* OWN CHART 2026-10-27 (brief 1391): the Trading view's main chart is
   now the Hub's own — TradingView Lightweight Charts (vendored) over
   live OANDA candles from /hub/candles. WATERMARK, brief 1396
   (owner correction 2026-10-27 14:51 EDT — "I only want the mandala
   eye and the text under — not the full picture of the logo"): the
   frame's overlay is a two-part lockup. (1) The mandala EYE ITSELF —
   assets/eyekus-eye-mark.webp, a faithful extraction from the
   emblem of record (crop around the eye + luminance key; the
   artwork's own pixels, never a redraw) — centred exactly on the
   frame: the .tv-chart-eye wrapper's box is the eye's box (the name
   is absolutely positioned and adds no height), and left/top 50% +
   translate(-50%,-50%) puts the eye's centre on the frame's centre
   at any frame size, 32% of frame width, opacity 0.12 combined.
   (2) Directly under the eye, the name "Eyekus Capital Ventures" in
   the site's display serif (Cinzel) and gold, at the same watermark
   opacity. The lockup rides above the chart (canvas or the
   TradingView iframe alike), pointer-events none, decorative only
   (aria-hidden in hub.js markup); the chart region keeps its
   aria-label and the candles table below carries the same data. */
.hub-app .tv-chart-frame { position: relative; }
/* Brief 1439 (owner live-review corrections 2026-10-28): the chart frame
   bleeds across the panel padding (14px at every width) so the drawing
   strip sits flush at the card's left edge and the frame spans the full
   card width; the card heading block above the chart is gone, and its
   height is returned to the chart clamps below. */
.hub-app .chart-panel .tv-chart-frame { margin-left: -14px; margin-right: -14px; }
.hub-app .tv-chart-frame .tv-chart-watermark { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hub-app .tv-chart-frame .tv-chart-eye { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32%; opacity: .12; }
.hub-app .tv-chart-frame .tv-chart-eye img { display: block; width: 100%; height: auto; }
.hub-app .tv-chart-frame .tv-chart-name { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: "Cinzel", "Times New Roman", serif; font-weight: 600; font-size: clamp(11px, 1.5vw, 19px); letter-spacing: .32em; text-indent: .32em; color: #E8C15A; }
.hub-app #hubOwnChart { width: 100%; height: clamp(560px, calc(78vh + 67px), 947px); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #120C2E; }
/* Brief 1411: the pane's content starts right of the left drawing
   strip (46px, hub-drawings.css); the strip overlays the frame's
   left edge and the frame's own indigo shows through the gap. */
.hub-app .tv-chart-frame #hubOwnChart, .hub-app .tv-chart-frame #hubLegacyChart { margin-left: 46px; width: calc(100% - 46px); }
.hub-app .tv-chart-frame #hubLegacyChart { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #120C2E; min-height: 420px; }

/* Brief 1411 chart header — TradingView's top-left cluster in the
   house scheme: symbol button + picker modal, timeframe dropdown,
   in-chart legend with the OHLC readout and the quote strip. */
.hub-app .chart-heading-actions { display: inline-flex; align-items: center; gap: 10px; }
.hub-app .chart-expand { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); color: var(--text); cursor: pointer; }
.hub-app .chart-expand:hover { border-color: var(--amber); color: var(--amber); }
.hub-app .chart-expand.on { background: var(--amber); border-color: var(--amber); color: #120C2E; }
.hub-app .chart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.hub-app .chart-sym-btn { display: inline-flex; align-items: baseline; gap: 9px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text); cursor: pointer; }
.hub-app .chart-sym-btn strong { font: 700 15px/1.2 inherit; letter-spacing: .03em; }
.hub-app .chart-sym-btn .chart-sym-desc { color: var(--dim); font: 500 12px/1.2 inherit; }
.hub-app .chart-sym-btn:hover, .hub-app .chart-tf-btn:hover { border-color: var(--amber); }
.hub-app .chart-caret { color: var(--amber); font-size: 11px; }
.hub-app .chart-tf-wrap { position: relative; display: inline-flex; }
.hub-app .chart-tf-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text); font: 700 13px/1 inherit; cursor: pointer; }
.hub-app .chart-tf-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 150px; padding: 5px; border: 1px solid var(--border); border-radius: 10px; background: #1D1542; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.hub-app .chart-tf-menu[hidden] { display: none; }
.hub-app .chart-tf-opt { display: block; width: 100%; min-height: 32px; padding: 5px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); font: 600 12.5px/1.3 inherit; text-align: left; cursor: pointer; }
.hub-app .chart-tf-opt:hover { background: var(--surface-soft); }
.hub-app .chart-tf-opt[aria-selected="true"] { background: var(--amber); border-color: var(--amber); color: #120C2E; }
.hub-app .chart-head .chart-status { margin-left: auto; }
.hub-app .chart-legend { position: absolute; left: 52px; top: 6px; z-index: 4; display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - 220px); color: var(--text); font-size: 11px; font-weight: 500; line-height: 1.4; pointer-events: none; text-shadow: 0 1px 6px rgba(18, 12, 46, .9); }
.hub-app .chart-legend .cl-line strong { font-weight: 700; }
.hub-app .chart-legend .cl-ohlc { color: #C9C2A8; font-variant-numeric: tabular-nums; }
.hub-app .chart-legend .cl-up { color: var(--amber); }
.hub-app .chart-legend .cl-down { color: #F3EDDA; }
.hub-app .chart-legend .cl-quote { display: inline-flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.hub-app .chart-legend .cl-sell { color: #F0A3A3; }
.hub-app .chart-legend .cl-buy { color: var(--amber); }
.hub-app .chart-legend .cl-spread { color: var(--dim); font-size: 10.5px; }
.hub-app .chart-modal-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: rgba(10, 6, 26, .72); }
.hub-app .chart-modal-backdrop[hidden] { display: none; }
.hub-app .chart-modal { width: min(520px, 100%); max-height: 76vh; display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #1D1542; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.hub-app .chart-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hub-app .chart-modal-head h3 { margin: 0; font: 600 16px/1.2 "Cinzel", serif; letter-spacing: .06em; color: var(--text); }
.hub-app .chart-modal-close { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.hub-app .chart-modal input[type="search"] { width: 100%; min-height: 40px; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 9px; background: #120C2E; color: var(--text); font: 400 14px/1.3 inherit; }
.hub-app .chart-sym-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hub-app .chart-sym-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.hub-app .chart-sym-row:hover { background: var(--surface-soft); }
.hub-app .chart-sym-row[aria-selected="true"] { border-color: var(--amber); background: rgba(232, 193, 90, .12); }
.hub-app .chart-sym-row .csr-main { display: flex; flex-direction: column; gap: 1px; }
.hub-app .chart-sym-row .csr-main strong { font: 700 13.5px/1.25 inherit; letter-spacing: .03em; }
.hub-app .chart-sym-row .csr-main small { color: var(--dim); font: 500 11.5px/1.25 inherit; }
.hub-app .chart-sym-row .csr-src { color: var(--dim); font: 600 10.5px/1 inherit; letter-spacing: .08em; white-space: nowrap; }

/* Brief 1411 full view: the whole chart panel (header + left bar +
   chart + favourites strip) fills the screen; the chart flexes to
   the remaining height and Lightweight Charts resizes into it. */
.hub-app .chart-panel:fullscreen { display: flex; flex-direction: column; height: 100%; overflow-y: auto; background: var(--surface); border-radius: 0; }
.hub-app .chart-panel:fullscreen .tv-chart-frame { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hub-app .chart-panel:fullscreen #hubOwnChart { flex: 1; height: auto; min-height: 0; }
.hub-app .chart-panel:fullscreen #hubLegacyChart { flex: 1; }
@media (max-width: 640px) {
  .hub-app .chart-legend { max-width: calc(100% - 70px); font-size: 10.5px; left: 54px; }
  .hub-app .tv-chart-frame #hubOwnChart, .hub-app .tv-chart-frame #hubLegacyChart { margin-left: 48px; width: calc(100% - 48px); }
  .hub-app .chart-head .chart-status { margin-left: 0; width: 100%; }
}
.hub-app #hubOwnChart .quiet-empty { padding: 24px; }
/* Brief 1396: TradingView's chart host for DXY / US10Y — the same
   frame slot and geometry as the own chart, site indigo throughout
   (the element itself can never paint white). */
.hub-app #hubLegacyChart { width: 100%; height: clamp(560px, calc(78vh + 67px), 947px); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #120C2E; }
.hub-app #hubLegacyChart iframe { background: #120C2E; }
/* Brief 1396 scheme sync (owner order 2026-10-27 14:50 EDT): the
   gauge and the week-ahead desk currencies carry the site ground at
   the element level too — hosts and iframes are #120C2E, and the
   widgets run TradingView's dark colour theme with transparency on
   (hub.js gaugeConfig / events config), so no white can show. */
.hub-app #hubTvGauge, .hub-app #hubTvEvents { background: #120C2E; }
.hub-app #hubTvGauge iframe, .hub-app #hubTvEvents iframe { background: #120C2E; }
.hub-app .chart-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.hub-app .chart-tf { min-height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--text); font: 700 12px/1 inherit; letter-spacing: .04em; cursor: pointer; }
.hub-app .chart-tf[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #120C2E; }
.hub-app .chart-status { margin-left: auto; color: var(--dim); font-size: 12.5px; }
/* Brief 1396: the chart panel's own instrument list — all eleven
   rows, the nine OANDA-fed plus DXY and US10Y — restoring the
   in-chart selection the TradingView embed used to carry. */
.hub-app .chart-symbols { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hub-app .chart-chip { min-height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--text); font: 700 11.5px/1 inherit; letter-spacing: .05em; cursor: pointer; }
.hub-app .chart-chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #120C2E; }
.hub-app .chart-a11y { margin-top: 12px; }
.hub-app .chart-a11y summary { cursor: pointer; color: var(--dim); font-size: 13px; padding: 6px 0; }
.hub-app .chart-a11y-scroll { overflow-x: auto; }
.hub-app .candles-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hub-app .candles-table caption { text-align: left; color: var(--dim); padding: 6px 2px 10px; }
.hub-app .candles-table th, .hub-app .candles-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-app .candles-table th:first-child, .hub-app .candles-table td:first-child { text-align: left; }
@media (max-width: 700px) {
  .hub-app #hubOwnChart { height: clamp(420px, calc(62vh + 60px), 620px); }
  .hub-app #hubLegacyChart { height: clamp(420px, 62vh, 560px); }
  .hub-app .chart-status { margin-left: 0; width: 100%; }
}

/* Performance chart set — one panel family for pie, bars and line, styled
   identically to the Hub's other chart panels (.panel + .tv-widget). The
   live-feed pass mounts the cumulative-return line chart into
   #hubPerfLineChart; pie styles live in the perf-scope block above. */
.hub-app .perf-chart-panel { margin-bottom: 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.hub-app .perf-line-chart { min-height: 260px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); padding: 12px; }
.hub-app .perf-line-chart svg { display: block; width: 100%; height: auto; }
.hub-app .perf-line-grid { stroke: var(--border); stroke-width: 1; }
.hub-app .perf-line-zero { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 4 4; }
.hub-app .perf-line-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hub-app .perf-line-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.hub-app .perf-line-dot { fill: var(--accent); stroke: var(--surface-raised); stroke-width: 2; }
.hub-app .perf-line-axis { fill: var(--dim); font: 600 11px "SFMono-Regular", Consolas, monospace; }
.hub-app .perf-bars { display: grid; gap: 10px; }
.hub-app .perf-bar-row { display: grid; grid-template-columns: minmax(86px, .34fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hub-app .perf-bar-track { height: 14px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.hub-app .perf-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.hub-app .perf-bar-fill.profit { background: var(--profit); }
.hub-app .perf-bar-fill.loss { background: var(--loss); }

/* ==========================================================================
   DENSITY PASS 2026-10-26 (owner direction 11:55 EDT) — compact tables,
   tighter space between panels, buttons and tables, and compact pills.
   These rules intentionally sit last: they restate the original selectors
   at equal specificity so the compact values win over every earlier layer,
   including the min-width media layers. Nothing here changes a colour, a
   layout placement or a data behaviour — spacing values only. Tappable
   rows keep honest hit areas (the row's own control keeps its min-height;
   full-row buttons keep their content height). The fixed bottom
   navigation and the hub-stage bottom clearance are functional chrome and
   are deliberately untouched.
   ========================================================================== */

/* --- Tables: cell padding (rows run roughly a third shorter) --- */
.hub-table th, .hub-table td { padding: 5px 10px; }
.hub-app .perf-table th, .hub-app .perf-table td { padding: 4px 9px; }
.hub-app .hs-table th, .hub-app .hs-table td { padding: 4px 6px; }
.hub-app .hs-table caption { padding: 5px 0; }

/* --- Rows & tabular lists --- */
.hub-app .trade-row { padding: 9px 2px; }
.hub-app .position-row { padding: 7px 0; }
.hub-app .queue-row { padding: 8px 2px; }
.hub-app .watch-row { padding: 8px 2px; }
.hub-app .alert-row { padding: 8px 2px; }
.hub-app .calendar-event { padding: 8px 2px; }
.hub-app .lib-item { padding: 7px 0; }
.hub-app .rule-stack > div { padding: 8px 0; }
.hub-app .parity-area { padding: 5px 0; }
.hub-app .flow-row { padding: 7px 0; }
.hub-app .flows-pay-row { padding: 6px 10px; }
.hub-app .flows-report-row { padding: 6px 0; }
.hub-app .flows-guardrail-row { padding: 6px 0; }
.hub-app .perf-report-meta > div { padding: 6px 0; }
.hub-app .journal-record-summary { min-height: 56px; padding: 8px 2px; }
.hub-app .money-scope .transaction-row { padding: 8px; }
.hub-app .money-scope .account-card { padding: 8px; }
.hub-app .money-scope .account-totals > div { padding: 8px 7px; }
.hub-app .money-scope .budget-row { padding: 9px; }
.hub-app .money-scope .income-entry { padding: 7px 7px 7px 10px; }
.hub-app .money-scope .spend-row, .hub-app .money-scope .holding-row { padding: 7px 7px 7px 10px; }
.hub-app .money-scope .allocation-list > button { padding: 7px 9px; }
.hub-app .money-scope .search-results li > button { padding: 7px 9px; }
.hub-app .money-scope .search-selection { padding: 8px 10px; }

/* --- Panels & blocks --- */
.hub-app .panel { margin-bottom: 10px; padding: 14px; }
.hub-app .perf-chart-panel { margin-bottom: 10px; padding: 16px; }
.hub-app .money-scope .panel, .hub-app .money-scope .budget-group, .hub-app .money-scope .period-strip, .hub-app .money-scope .portfolio-hero { padding: 12px 11px; }
.hub-app .money-scope .accounts-panel { padding: 12px 10px; }
.hub-app .perf-report { padding: 18px 16px 14px; }
.hub-app .perf-report-facts > div { padding: 8px 10px; }
.hub-app .perf-paper-banner { padding: 11px 13px; }
.hub-app .gate-verdict { margin-top: 10px; padding: 10px 12px; }
.hub-app .gate-breaker { padding: 10px 12px; }
.hub-app .gate-risk-block { margin-bottom: 9px; padding: 10px; }
.hub-app .alert-form { margin-bottom: 10px; padding: 10px; }
.hub-app .journal-section { padding: 10px; gap: 9px; }
.hub-app .record-audio { margin-bottom: 8px; padding: 9px; }
.hub-app .rf-error { padding: 9px 11px; }
.hub-app .receipts-review-note { margin-top: 12px; padding: 10px 12px; }
.hub-app .money-scope .badge-section { padding: 12px 10px; }
.hub-app .money-scope .language-popover { padding: 10px; gap: 7px; }
.hub-app .perf-a11y-bar { padding: 7px 9px; gap: 6px; }
.hub-app .metric-strip > div { padding: 9px; }
.hub-app .baseline-rail { margin-top: 16px; padding: 9px 12px; }
.hub-app .more-row { padding: 11px; gap: 10px; }
.hub-app .money-scope .hero-card { padding: 20px 15px 14px; }
.hub-app .money-scope .net-worth-overview { gap: 12px; padding: 18px 14px 13px; }
.hub-app .money-scope .family-heading { padding: 14px 12px 11px; }
.hub-app .money-scope .pulse-grid > div { padding: 8px 5px; }
.hub-app .money-scope .budget-group summary { padding: 11px; }
.hub-app .money-scope .alert { padding: 10px; }
.hub-app .money-scope .goal-question-grid { gap: 8px; padding: 10px; }
.hub-app .money-scope .receipt-confirm { padding: 10px; }
.hub-app .money-scope .metric { padding: 10px 7px; }
.hub-app .money-scope .income-idea { padding: 9px; }
.hub-app .money-scope .needed-item { padding: 11px; }
.hub-app .money-scope .food-budget-grid article { padding: 9px; }
.hub-app .money-scope .family-lines article { padding: 9px; }
.hub-app .money-scope .tips-panel li { padding: 9px; }
.hub-app .money-scope .goal-strategy-preview { padding: 9px; }
.hub-app .money-scope .search-results p { padding: 12px; }
.hub-app .money-scope .empty, .hub-app .money-scope .empty-chart { padding: 12px 8px; }
.hub-login-card { padding: clamp(20px, 4vw, 32px); }
.hub-section { padding: clamp(16px, 3vw, 24px); }
.hub-card { padding: 13px; }
.hub-status-panel { padding: 14px 16px; margin-bottom: 14px; }
.hub-fixture-notice { padding: 13px 16px; margin-bottom: 14px; }

/* --- Buttons: trim min-heights and inline padding (primary actions stay
       at or above a 38px target; form fields stay at or above 40px) --- */
.hub-app .journal-toolbar > button { min-height: 42px; }
.hub-app .scan-controls > button { min-height: 42px; }
.hub-app .rf-save { min-height: 42px; padding: 0 16px; }
.hub-app .journal-actions button { min-height: 40px; padding: 0 14px; }
.hub-app .alert-form-actions button { min-height: 40px; padding: 0 13px; }
.hub-app .rf-delete { min-height: 40px; padding: 0 12px; }
.hub-app .rf-segmented button { min-height: 38px; }
.hub-app .rf-attach-button { min-height: 38px; padding: 0 13px; }
.hub-app .journal-empty button { min-height: 38px; padding: 0 12px; }
.hub-app .icon-button { min-height: 38px; padding: 0 11px; }
.hub-app .journal-filters > button { min-height: 38px; padding: 0 11px; }
.hub-app .note-actions button { min-height: 34px; padding-inline: 11px; }
.hub-app .alert-actions button { min-height: 34px; padding: 0 10px; }
.hub-app .queue-row button { min-height: 34px; padding: 0 10px; }
.hub-app .flows-guardrail-row button { min-height: 32px; }
.hub-app .rf-delete-confirm button { min-height: 34px; padding: 0 10px; }
.hub-app .fatal-state button { padding: 8px 12px; }
.hub-app .gate-item { min-height: 40px; padding: 6px 9px; }
.hub-app .lib-source-button { padding: 9px 11px; }
.hub-app .rf-field input, .hub-app .rf-field select, .hub-app .rf-field textarea { min-height: 42px; padding: 8px 11px; }
.hub-app .money-scope .primary-btn, .hub-app .money-scope .exit-btn, .hub-app .money-scope .check-btn { min-height: 38px; padding: 7px 14px; }
.hub-app .money-scope .spend-form input, .hub-app .money-scope .holding-form input, .hub-app .money-scope .budget-row input, .hub-app .money-scope .goal-question-grid input, .hub-app .money-scope .goal-question-grid select, .hub-app .money-scope .receipt-confirm label > input { min-height: 40px; }
.hub-app .money-scope .badge-picker button { min-height: 38px; padding: 5px 7px; }
.hub-app .money-scope .goal-selector button { min-height: 44px; padding: 7px 9px; }
.hub-app .money-scope .overview-tiles button { min-height: 96px; padding: 11px; }
.hub-field { gap: 6px; margin-top: 16px; }
.hub-field input { min-height: 46px; padding: 10px 13px; }

/* --- Pills & chips: smaller padding, tighter min-heights, whole and
       categorical as ever (pill integrity holds — nothing clipped,
       nothing merged) --- */
.hub-app .pair-badge, .hub-app .checkpoint, .hub-app .gate-state, .hub-app .version-chip { min-height: 27px; padding: 0 9px; }
.hub-app .range-pills { gap: 3px; margin-top: 8px; }
.hub-app .range-pills button { min-height: 30px; padding: 0 11px; }
.hub-app .flows-pills { gap: 6px; margin-bottom: 10px; }
.hub-app .flows-pills button { min-height: 34px; padding: 0 13px; font-size: 13px; }
.hub-app .perf-a11y-bar button { min-height: 34px; padding: 0 11px; }
.hub-app .display-toggles .toggle-row button { min-height: 32px; padding: 0 11px; }
.hub-app .perf-paper-chip { padding: 5px 9px; }
.hub-app .flow-source-chip { padding: 2px 7px; }
.hub-app .lib-status { min-height: 21px; padding: 2px 8px; }
.hub-app .money-scope .transaction-live-row button { min-height: 30px; padding: 5px 10px; }
.hub-app .money-scope .receipt-confirm-title button { min-height: 30px; padding: 5px 9px; }
.hub-app .money-scope .section-nav button, .hub-app .money-scope .segmented button { min-height: 34px; }
.hub-app .money-scope .section-nav button { min-height: 38px; padding: 8px 4px; }
.hub-app .money-scope .badge-category-map { gap: 5px; }
.hub-app .money-scope .badge-category-map span { padding: 7px 6px; }
.hub-app .tv-link.standalone { min-height: 28px; padding: 0 10px; }

/* --- Gaps & margins between panels, sections and tables --- */
.hub-app .top-grid, .hub-app .lower-grid { gap: 10px; }
.hub-app .positions-grid { gap: 11px; margin-top: 12px; }
.hub-app .notes-grid { gap: 11px; }
.hub-app .desk-split { gap: 10px; }
.hub-app .perf-scope { gap: 10px; }
.hub-app .journal-workspace { gap: 10px; }
.hub-app .desk-workspace, .hub-app .library-workspace { gap: 10px; }
.hub-app .lib-layout { gap: 11px; }
.hub-app .lib-lower-grid { gap: 10px; }
.hub-app .receipts-hero-grid { gap: 10px; }
.hub-app .mission-copy { gap: 14px; margin-top: 18px; }
.hub-app .section-heading { margin-bottom: 10px; }
.hub-app .programme-state { margin-bottom: 10px; }
.hub-app .perf-report-tables { gap: 10px; margin-top: 12px; }
.hub-app .perf-report-facts { margin-top: 12px; }
.hub-app .perf-report-note { margin-top: 12px; }
.hub-app .perf-report-meta { margin-top: 12px; }
.hub-app .perf-report-total { padding: 14px 0 12px; }
.hub-app .flows-report-group { margin-top: 12px; }
.hub-app .flows-pay-table { margin-top: 9px; }
.hub-app .hs-table-details { margin-top: 8px; }
.hub-app .hs-chart-wrap { margin-top: 9px; }
.hub-app .journal-actions { padding-top: 9px; }
.hub-app .journal-form { gap: 12px; }
.hub-app .journal-filters { padding: 8px 0 2px; }
.hub-app .perf-bars { gap: 7px; }
.hub-app .perf-bar-row { gap: 8px; }
.hub-app .money-scope .savings-log-box { margin-top: 12px; padding-top: 11px; }
.hub-app .money-scope .chart-grid { gap: 9px; }
.hub-sections { gap: 14px; }
.hub-card-grid { gap: 10px; margin-top: 14px; }
.hub-actions { gap: 9px; margin-top: 16px; }
.hub-shell-head { gap: 16px; margin-bottom: 16px; }
.hub-content { padding-top: 28px; }
.hub-hero { margin-bottom: 20px; }
.hub-status { margin-top: 10px; }

/* ==========================================================================
   DE-BOX + EYE (owner order 2026-10-26 14:44 EDT): the snapshot-status
   header block is gone from the top of the app; in its place the mandala
   eye emblem alone sits directly on the page ground — no card, no banner.
   The app shell no longer paints its own ground or radial decoration:
   tables and sections sit ON THE PAGE ITSELF (the .hub-main site-scheme
   gradient), full width with per-device margins. High-contrast mode
   (ws-contrast) keeps its own flipped ground, as before. */
.hub-eye { display: block; width: 84px; height: 84px; margin: 2px auto 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(232, 193, 90, .55); }
.hub-app, .hub-app .app-shell { background: transparent; }
.hub-app .app-shell.ws-contrast { background: var(--bg); }

/* ==========================================================================
   BUTTON START ALIGNMENT (owner order 2026-10-26 14:44 EDT): every
   button/action row in the Hub aligns to the START of the block it
   resides in — rows centred by the brief-1189 centring pass, and the
   end-aligned alert-form row, move to flex-start, and the Money
   currency control bar starts at its block's edge. Text centring is
   unchanged; the bottom menu bar is unchanged. */
.hub-app .mission-topline, .hub-app .section-heading, .hub-app .subhead,
.hub-app .note-actions, .hub-app .journal-actions, .hub-app .alert-form-actions,
.hub-app .gate-verdict, .hub-app .toggle-row, .hub-app .gate-item,
.hub-app .baseline-rail { justify-content: flex-start; }
.hub-app .money-scope .currency-bar { justify-content: flex-start; margin-left: 0; margin-right: 0; }

/* ==========================================================================
   TOP PANEL + TABLE ALIGNMENT + PILL CENTRING PASS 2026-10-27
   (CRM brief 1365 — owner orders 08:50–08:51 EDT, with his screenshots as
   the spec.) Four pieces, appended last so they win at equal specificity
   over every earlier layer, including the 2026-10-26 centring pass:

   1. The Total value panel lives in the app shell (#hubValuePanel) directly
      under the site header, first on every Hub view. The mission-hero's
      topline (badge + checkpoint) is removed from the markup, so the hero
      box keeps no padding of its own — it now carries only the focus rail,
      which keeps its own spacing. The removed standalone emblem (.hub-eye)
      and badge styles above are inert: no markup references them any more.
   2. ACCOUNT CARD PLACEMENT: the Performance tables grid puts the ACCOUNT
      card in the left column directly underneath REALISED RETURN BY ERA
      (grid areas era / account stacked left, instrument spanning right),
      no gap content between them.
   3. TABLE ALIGNMENT: the blanket stage centring no longer applies inside
      data tables. Label columns sit left, figure columns sit right on a
      shared edge, and each header cell takes the alignment of its own
      column, so headers line up over their figures. The report tables run
      table-layout: fixed with one column scheme per table, so widths are
      identical from row to row and the side-by-side cards share one grid.
   4. PILL CENTRING: every pill-shaped control/label centres its text on
      the pill's own centre, horizontally and vertically, by construction
      (flex centring), not by inherited text alignment.
   ========================================================================== */

/* --- 1. Shell value panel + emptied hero --- */
.hub-app #hubValuePanel:empty { display: none; }
.hub-app .mission-hero { padding: 0; }

/* --- 2. Performance tables: account under era, left column --- */
@media (min-width: 700px) {
  .hub-app .perf-report-tables { grid-template-columns: 1fr 1fr; grid-template-areas: "era instrument" "account instrument"; align-items: start; }
  .hub-app .perf-wrap-era { grid-area: era; }
  .hub-app .perf-wrap-account { grid-area: account; }
  .hub-app .perf-wrap-instrument { grid-area: instrument; }
}

/* --- 3. Table alignment (beats the stage centring inside tables) --- */
.hub-app .hub-stage .perf-report-meta dt,
.hub-app .hub-stage .perf-report-meta dd { text-align: left; }
.hub-app .hub-stage .perf-table { table-layout: fixed; }
.hub-app .hub-stage .perf-table th,
.hub-app .hub-stage .perf-table td { text-align: left; }
.hub-app .hub-stage .perf-table td,
.hub-app .hub-stage .perf-table thead th { text-align: right; }
.hub-app .hub-stage .perf-table thead th:first-child,
.hub-app .hub-stage .perf-table tbody th,
.hub-app .hub-stage .perf-table tfoot th { text-align: left; }
.hub-app .hub-stage .perf-table tbody th { white-space: normal; }
.hub-app .hub-stage .perf-report-table tr > :nth-child(1) { width: 38%; }
.hub-app .hub-stage .perf-report-table tr > :nth-child(2) { width: 33%; }
.hub-app .hub-stage .perf-report-table tr > :nth-child(3) { width: 29%; }
.hub-app .hub-stage .perf-wrap-account .perf-report-table tr > :nth-child(1) { width: 52%; }
.hub-app .hub-stage .perf-wrap-account .perf-report-table tr > :nth-child(2) { width: 48%; }
.hub-app .hub-stage .hs-table { table-layout: fixed; }
.hub-app .hub-stage .hs-table th,
.hub-app .hub-stage .hs-table td { text-align: left; }
.hub-app .hub-stage .hs-table td:nth-child(3),
.hub-app .hub-stage .hs-table td:nth-child(4),
.hub-app .hub-stage .hs-table thead th:nth-child(3),
.hub-app .hub-stage .hs-table thead th:nth-child(4) { text-align: right; }
.hub-app .hub-stage .hs-table tr > :nth-child(1) { width: 30%; }
.hub-app .hub-stage .hs-table tr > :nth-child(2) { width: 24%; }
.hub-app .hub-stage .hs-table tr > :nth-child(3) { width: 23%; }
.hub-app .hub-stage .hs-table tr > :nth-child(4) { width: 23%; }
.hub-app .hub-stage .hub-table th,
.hub-app .hub-stage .hub-table td { text-align: left; }
.hub-app .hub-stage .flows-pay-row > :nth-child(1) { text-align: left; }
.hub-app .hub-stage .flows-pay-row > :nth-child(n+2) { text-align: right; }

/* --- 4. Pill text centred on the pill's centre --- */
.hub-app .range-pills button,
.hub-app .perf-a11y-bar button,
.hub-app .segmented button,
.hub-app .gate-state,
.hub-app .version-chip,
.hub-app .net-chip,
.hub-app .priority-pill,
.hub-app .flow-source-chip,
.hub-app .receipt-source-chip,
.hub-app .treatment-chip,
.hub-app .perf-paper-chip { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.hub-app .ws-nav button { align-items: center; justify-content: center; text-align: center; }

/* --- Money nav Edit action + holdings focus target (brief 1383, 2026-10-27).
   The Edit button sits in the Money section nav as its own gold pill, in the
   same treatment as the section's primary actions; the holdings panel takes
   a scroll margin so the Edit jump lands it clear of the sticky chrome, and
   a visible focus ring when the Edit action moves focus to it. --- */
.hub-app .money-scope .section-nav .money-edit-btn { background: var(--accent); color: var(--accent-ink); font-weight: 850; padding-left: 16px; padding-right: 16px; white-space: nowrap; }
@media (max-width: 460px) {
.hub-app .money-scope .section-nav .money-edit-btn { padding-left: 11px; padding-right: 11px; }
}
.hub-app .money-scope .section-nav button.money-edit-btn:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.07); }
.hub-app .money-scope .investment-card { scroll-margin-top: 168px; }
.hub-app .money-scope .investment-card:focus { outline: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: 2px; }

/* Brief 1393 (2026-10-27): Receipts capture + import, Journal note,
   and the Receipts value-panel cut. */
.hub-app #hubValuePanel[hidden] { display: none !important; }
.hub-app .receipt-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.hub-app .receipt-add-label { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hub-app .receipt-add-form { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.hub-app .receipt-add-form[hidden] { display: none; }
.hub-app .receipt-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.hub-app .receipt-add-photo { display: flex; align-items: center; gap: 12px; }
.hub-app .receipt-add-photo img { max-width: 150px; max-height: 150px; border-radius: 10px; border: 1px solid var(--border); }
.hub-app .receipt-add-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hub-app .receipt-add-actions .rf-save { margin-left: 0; }
.hub-app .receipt-add-status { margin: 0; font-size: 13px; color: var(--dim); }
.hub-app .receipt-add-status[data-kind="error"] { color: #e88; }
.hub-app .receipt-source-chip.pending { border-color: var(--gold, #C9A227); color: var(--gold, #C9A227); }
.hub-app .journal-sync-note { margin: 10px 0 0; font-size: 12.5px; color: var(--dim); }

/* Brief 1394 — Library reader (existing Library section, populated). */
.hub-app .lib-intro { color: var(--dim); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; max-width: 72ch; }
.hub-app .lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub-app .lib-book { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--surface-soft); color: inherit; border: 1px solid transparent; cursor: pointer; font: inherit; }
.hub-app .lib-book:hover, .hub-app .lib-book:focus-visible { border-color: var(--gold, #E8C15A); }
.hub-app .lib-book strong { display: block; font-size: 16px; line-height: 1.35; }
.hub-app .lib-author { display: block; color: var(--gold, #E8C15A); font-size: 13px; margin-top: 2px; }
.hub-app .lib-meta { display: block; color: var(--dim); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.hub-app .lib-gap-heading { margin: 22px 0 10px; font-size: 15px; }
.hub-app .lib-gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub-app .lib-gaps li { padding: 12px 16px; border-radius: 14px; background: var(--surface-soft); }
.hub-app .lib-gaps .lib-author { display: inline; margin: 0; }
.hub-app .lib-gaps p { margin: 6px 0 0; color: var(--dim); font-size: 13px; line-height: 1.55; }
.hub-app .lib-author-line { color: var(--dim); font-size: 13.5px; margin: 0 0 6px; }
.hub-app .lib-note { color: var(--dim); font-size: 13px; line-height: 1.6; margin: 0 0 14px; max-width: 72ch; }
.hub-app .lib-reader-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 18px; }
.hub-app .lib-reader-nav-bottom { margin: 18px 0 4px; }
.hub-app .lib-reader-nav .btn[disabled] { opacity: 0.45; pointer-events: none; }
.hub-app .lib-chapter-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.hub-app .lib-chapter-pick select { max-width: 46vw; padding: 8px 10px; border-radius: 10px; background: var(--surface-soft); color: inherit; border: 1px solid var(--line, rgba(255,255,255,0.14)); font: inherit; font-size: 13.5px; }
.hub-app .lib-progress { color: var(--dim); font-size: 12.5px; }
.hub-app .lib-text { max-width: 72ch; font-size: 16.5px; line-height: 1.8; }
.hub-app .lib-text h3 { font-size: 19px; line-height: 1.4; margin: 0 0 14px; }
.hub-app .lib-text p { margin: 0 0 1.05em; overflow-wrap: break-word; }
@media (max-width: 640px) { .hub-app .lib-text { font-size: 16px; } .hub-app .lib-chapter-pick select { max-width: 52vw; } }

/* ==========================================================================
   WEEK-NOTES LOCK + FULL-WIDTH BOX + RULES CENTRED (brief 1399 —
   owner orders 2026-10-27 15:20–15:21 EDT). Appended last so these
   win at equal specificity over every earlier layer:
   1. The notes grid is ONE column: the note box (and a locked past
      week's text) extends all the way to the far right of its card
      at phone, tablet and desktop — the >=700px two-column rule
      above is superseded for .notes-grid.
   2. A locked week's settled text presents in a full-width block in
      the editor's own colours, line breaks kept.
   3. "Rules that protect the edge" (the adopted-system card): its
      texts sit centred to the middle of the card — each rule row
      becomes a single centred column (number, title, body), and the
      card's heading block centres with it. Alignment only. */
.hub-app .notes-grid { grid-template-columns: minmax(0, 1fr); }
.hub-app .note-editor { width: 100%; }
.hub-app .note-text { width: 100%; margin-top: 9px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); color: var(--text); line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; }
.hub-app .rules-panel .rule-stack > div { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hub-app .rules-panel .rule-stack p { text-align: center; }
.hub-app .rules-panel .section-heading { flex-direction: column; align-items: center; text-align: center; }

/* Brief 1406 — desk gauge + week-ahead list: the Hub's own builds in
   the two slots the TradingView widgets vacated. Everything here is
   scheme-native (indigo ground, cream ink, gold accents) because the
   markup is ours — no cross-origin interior is involved. */
.hub-app .gauge-tfs { margin-bottom: 10px; flex-wrap: wrap; }
.hub-app .gauge-wrap { text-align: center; }
.hub-app .gauge-svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.hub-app .gauge-svg-label { fill: #8E88A8; font-size: 9.5px; letter-spacing: .04em; }
.hub-app .gauge-verdict { font-size: 26px; font-weight: 700; margin: 2px 0 6px; letter-spacing: .01em; }
.hub-app .gauge-counts { display: flex; justify-content: center; gap: 26px; max-width: 340px; margin: 0 auto; padding: 8px 0 2px; border-top: 1px solid rgba(243, 237, 218, .12); }
.hub-app .gauge-counts span { font-size: 13px; color: #C9C2A8; }
.hub-app .gauge-counts strong { font-size: 15px; margin-left: 4px; }
.hub-app .gc-sell strong { color: #C0764F; }
.hub-app .gc-neutral strong { color: #F3EDDA; }
.hub-app .gc-buy strong { color: #E8C15A; }
.hub-app .gauge-groups { color: #C9C2A8; font-size: 13px; margin: 6px 0 2px; }
.hub-app .gauge-details { text-align: left; margin-top: 12px; }
.hub-app .gauge-details summary { cursor: pointer; color: #E8C15A; font-size: 14px; padding: 6px 0; }
.hub-app .gauge-table { margin: 10px 0 4px; }
.hub-app .gauge-table caption { caption-side: top; text-align: left; font-weight: 600; color: #F3EDDA; padding: 4px 0; }
.hub-app .gauge-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hub-app .sig-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; border: 1px solid rgba(243, 237, 218, .25); color: #C9C2A8; }
.hub-app .sig-buy { color: #E8C15A; border-color: rgba(232, 193, 90, .55); }
.hub-app .sig-sell { color: #D98E6A; border-color: rgba(192, 118, 79, .6); }
.hub-app .week-cal-day { font-size: 15px; color: #F3EDDA; margin: 16px 0 6px; }
/* Week tables sit in the app's standard scroll wrap (as the flows and
   receipts tables do) with their measure restored, so at phone width
   they scroll instead of crushing letter-by-letter the way the
   strip's min-width: 0 override makes its own table wrap. */
.hub-app .week-cal-wrap { margin-top: 6px; }
.hub-app #hubWeekAhead .cal-strip-table { min-width: 520px; }