/* Product presentation. Loaded last; financial DOM and behavior stay owned by
   the existing controllers. Dimensions respect the compact mobile summary. */
.app-body,
.auth-body {
  --product-radius: 12px;
  --product-ink: #25251f;
  -webkit-font-smoothing: antialiased;
}
.app-body :is(.button, .theme-control, .sidebar-control),
.auth-body :is(.button, .theme-control) {
  border-radius: 9px;
  font-weight: 550;
  box-shadow: none;
}
.app-body .button-primary,
.auth-body .button-primary {
  color: var(--ft-on-accent);
  background: var(--ft-accent);
  border-color: transparent;
}
.app-body .button-primary:hover:not(:disabled),
.auth-body .button-primary:hover:not(:disabled) {
  background: var(--ft-accent-hover);
}
.app-body :is(input, select, textarea),
.auth-body :is(input, select, textarea) {
  accent-color: var(--ft-accent-text);
}
.app-body :is(.field input, .field select, .field textarea),
.auth-body :is(.field input, .field select) {
  border-radius: 9px;
  background: var(--ft-raised);
}
.app-body :is(.panel, .account-card, .confirm-dialog, .personalize-dialog,
  .analytics-panel, .analytics-kpi, .install-card),
.auth-body .auth-illustration {
  border-radius: var(--product-radius);
  box-shadow: none;
}
.app-body .view-heading h1 {
  font-weight: 650;
  letter-spacing: -.9px;
}
.app-body :is(.panel-heading h2, .analytics-section-heading h2,
  .analytics-panel-heading h3, .account-card-heading h3) {
  font-weight: 600;
  letter-spacing: -.3px;
}
.app-body .panel-heading > div,
.app-body .analytics-panel-heading { min-width: 0; }
.app-body :is(.panel-heading p, .analytics-panel-heading p) { max-width: 70ch; }
.app-body .app-topbar { background: var(--ft-surface); }
.app-body .breadcrumb-brand { font-weight: 400; }
.app-body .secure-indicator { font-size: 11px; }

/* The current position is the visual anchor. Movements remain comparable,
   with equal dimensions and tabular numerals rather than extra decoration. */
.app-body .metrics [data-slot="card"] {
  border-radius: var(--product-radius);
  background: var(--ft-surface);
  box-shadow: none;
}
#financial-overview .metrics .balance-card {
  --ft-accent-text: var(--product-ink);
  --ft-muted: #544d2b;
  --ft-surface: #ffe86d;
  --ft-border: #cbb54f;
  background: #ffe86d;
  border-color: #ffe86d;
  color: var(--product-ink);
}
#financial-overview .metrics .balance-card :is(.metric-label, strong, p) {
  color: var(--product-ink);
}
#financial-overview .metrics .balance-card [data-slot="card-footer"] p {
  color: #544d2b;
}
.app-body .metrics .metric-icon {
  border: 0;
  border-radius: 4px;
  background: transparent;
}
.app-body .metrics .metric-icon svg { stroke-width: 1.7; }
.app-body .metrics strong[id^="metric-"] { font-weight: 650; }
.app-body .metrics .metric-label { font-weight: 450; }
.app-body .analytics-kpi[data-kpi="net"] {
  background: var(--ft-accent-soft);
  border-color: var(--ft-accent-border);
}
.app-body .analytics-kpi-value { font-weight: 600; }
.app-body .analytics-insight { border-radius: 9px; background: var(--ft-raised); }
.app-body :is(.cashflow-panel, .categories-panel, .balances-panel, .recent-panel) {
  box-shadow: none;
}
.app-body .chart-legend { border-radius: 6px; }
.app-body .transactions-table tbody tr:hover td { background: var(--ft-raised); }
.app-body :is(.transactions-table th, .analytics-table th) {
  font-size: 11px;
  font-weight: 500;
}
.app-body :is(.transactions-table .amount-cell, .account-balance,
  .analytics-number) { font-variant-numeric: tabular-nums; }
.app-body .account-card {
  background: var(--ft-surface);
  border-color: var(--ft-border);
}
.app-body .account-card .institution-avatar {
  border-radius: 9px;
  background: var(--ft-raised);
  border-color: var(--ft-border);
  color: var(--ft-text);
}
.app-body .account-card .account-balance { font-weight: 600; letter-spacing: -.7px; }
.app-body .person-type-badge { border-radius: 5px; }
.app-body .empty-hero {
  background: var(--ft-surface);
  border-color: var(--ft-border);
  border-radius: var(--product-radius);
}
.app-body .empty-hero h2 { font-weight: 600; letter-spacing: -.7px; }
.app-body .empty-hero .empty-symbol {
  background: var(--ft-accent-soft);
  border-color: transparent;
  border-radius: 10px;
}
.app-body .explanation-card { background: var(--ft-raised); border-radius: 9px; }
.app-body .connection-row { border-color: var(--ft-border); }
.app-body :is(.connection-progress, .pluggy-integration-panel,
  .pg-guide, .identifier-guide, .webhook-guide) { border-radius: var(--product-radius); }
.app-body .app-footer { font-size: 11px; }

@media (min-width: 701px) {
  .app-body .app-stage { border-radius: 14px; }
  .app-body .app-topbar { border-radius: 14px 14px 0 0; }
  .app-body .sidebar .supplied-brand { margin-bottom: 18px; }
  .app-body .sidebar .workspace {
    padding: 10px 8px 14px;
    margin-bottom: 12px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }
  .app-body .sidebar .workspace-avatar {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--ft-raised); color: var(--ft-text);
  }
  .app-body .sidebar .sidebar-quick-create {
    margin-bottom: 20px;
    background: var(--ft-surface);
    border-color: var(--ft-border);
    color: var(--ft-text);
    border-radius: 8px;
    box-shadow: none;
  }
  .app-body .sidebar .sidebar-quick-create:hover {
    background: var(--ft-accent-soft);
    border-color: var(--ft-accent-border);
    color: var(--ft-accent-text);
  }
  .app-body .sidebar-quick-create > svg:last-child { display: none; }
  .app-body .sidebar .nav-label {
    color: var(--ft-muted); font-weight: 450; letter-spacing: 0;
  }
  .app-body .sidebar .app-nav a { border-radius: 7px; }
  .app-body .sidebar .app-nav a[aria-current="page"] {
    background: var(--ft-accent-soft);
    box-shadow: inset 3px 0 var(--ft-accent-text);
  }
  .app-body .sidebar .sidebar-note {
    padding: 10px 4px;
    background: transparent;
    border-width: 0 0 1px;
    border-radius: 0;
  }
  .app-body .sidebar .sidebar-note .tiny-lock {
    width: 22px; height: 22px;
    background: transparent; border: 0;
  }
  :root[data-sidebar-collapsed="true"] .app-body .sidebar .workspace {
    padding: 8px 0 12px;
  }
}

/* Auth is the same product: clear type and a quiet, structured brand panel. */
.auth-body .auth-brand { background: var(--ft-raised); }
.auth-body .auth-brand::before { display: none; }
.auth-body .auth-pitch > .eyebrow,
.auth-body .auth-card > .eyebrow { display: none; }
.auth-body .auth-pitch h1 {
  max-width: 12ch;
  font-weight: 700;
  font-size: clamp(35px, 3.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -1.7px;
}
.auth-body .auth-pitch > p { max-width: 40ch; margin-top: 22px; }
.auth-body .auth-card h2 { font-weight: 650; letter-spacing: -.9px; }
.auth-body .auth-illustration {
  background: var(--ft-surface);
  border-color: var(--ft-border);
  border-top: 5px solid var(--ft-accent);
}
.auth-body .illustration-label { font-weight: 500; }
.auth-body .illustration-foot { text-transform: none; letter-spacing: 0; }
.auth-body .auth-trust { align-items: flex-start; }
.auth-body .auth-trust .trust-icon {
  background: transparent; border: 0; width: 24px; height: 24px;
}
.auth-body .auth-divider { color: var(--ft-muted); }

@media (max-width: 700px) {
  .app-body .mobile-nav {
    background: var(--ft-surface);
    border-top-color: var(--ft-border);
  }
  .app-body .mobile-nav :is(a, button)[aria-current="page"] {
    border-radius: 10px;
    background: var(--ft-accent-soft);
    color: var(--ft-accent-text);
  }
  #financial-overview .metrics .balance-card { border-radius: 12px; }
  .app-body .view-heading h1 { font-size: 25px; }
  .app-body .account-card { border-radius: 12px; }
  .app-body .mobile-overview-switch { border-radius: 10px; }
  .app-body .mobile-overview-switch button { border-radius: 7px; }
  .app-body .financial-filter-button { border-radius: 9px; }
  .auth-body .auth-brand { background: var(--ft-bg); padding: 18px 24px; }
  .auth-body .auth-brand > .supplied-brand { --brand-width: 138px; }
  .auth-body .auth-pitch { display: none; }
  .auth-body .auth-main { padding: 18px 24px 28px; }
  .auth-body .auth-card { padding: 24px 0; }
  .auth-body .auth-card h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-body :is(button, a, input), .auth-body :is(button, a, input) {
    transition: none;
  }
}