@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Regular.woff2') format('woff2'), url('fonts/Satoshi-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Medium.woff2') format('woff2'), url('fonts/Satoshi-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Bold.woff2') format('woff2'), url('fonts/Satoshi-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Black.woff2') format('woff2'), url('fonts/Satoshi-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }

    /* ---- Reset & Base ---- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ---- Luca design tokens (source of truth: styles/luca-ds.css) ---- */
      --ink-blue:  #0F1D2D;
      --parchment: #F7F4EE;
      --copper:    #B87333;
      --ink-900:#0A1420; --ink-800:#0F1D2D; --ink-700:#16293D; --ink-600:#20384F;
      --ink-500:#2E4A64; --ink-400:#586070; --ink-300:#8A93A3; --ink-200:#C3CAD5;
      --ink-100:#E2E7EE; --ink-050:#F1F3F6;
      --slate:#586070; --blue-grey:#E2E7EE; --mist:#F1F3F6;
      --copper-700:#8A551F; --copper-600:#A1632A; --copper-500:#B87333;
      --copper-400:#C98C52; --copper-300:#DBA877; --copper-200:#ECCBA8; --copper-100:#F6E7D6;
      --success:#2E7D5B; --warning:#E0A23A; --error:#D64545; --info:#3A6EA5;
      --success-bg:#E6F1EC; --warning-bg:#FBF1DE; --error-bg:#FBE6E6; --info-bg:#E4ECF5;
      --warning-ink:#9A6C14; --success-ink:#1F5A40; --error-ink:#A82F2F;
      --divider:#E8EBF0; --surface:#FFFFFF;
      --n-0:#FFFFFF; --n-25:#FCFBF8; --n-50:#F7F4EE; --n-100:#F1F3F6; --n-150:#E8EBF0;
      --n-200:#E2E7EE; --n-300:#C3CAD5; --n-400:#8A93A3; --n-500:#586070;
      --n-700:#16293D; --n-800:#0F1D2D; --n-900:#0A1420;
      --ink-soft:#1B2A3A; --ink-mute:var(--slate); --ink-faint:var(--ink-300);

      /* ---- Legacy aliases — keep existing CSS working ---- */
      --blue:     var(--ink-blue);
      --blue-lt:  var(--copper-100);
      --blue-dk:  var(--ink-700);
      --green:    var(--success);
      --amber:    var(--warning);
      --red:      var(--error);
      --gray-50:  var(--n-25);
      --gray-100: var(--mist);
      --gray-200: var(--ink-100);
      --gray-300: var(--ink-200);
      --gray-400: var(--ink-300);
      --gray-500: var(--slate);
      --gray-600: var(--ink-400);
      --gray-700: var(--ink-500);
      --gray-900: var(--ink-blue);
      --white:    #ffffff;
      --purple:   var(--ink-500);
      --radius:   14px;
      --shadow:   0 4px 14px rgba(15,29,45,.08), 0 2px 4px rgba(15,29,45,.04);

      /* fg aliases used by luca-ds.css components */
      --fg-default: var(--ink-soft);
      --fg-strong:  var(--ink-blue);
      --fg-muted:   var(--slate);
      --border-strong: var(--ink-200);

      /* ---- luca-ds.css component tokens (mirrored here so inline :root wins) ---- */
      --bg: var(--parchment);
      --surface-2: var(--mist);
      --line: var(--divider);
      --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
      --sh-1:  0 1px 2px rgba(15,29,45,.06), 0 1px 1px rgba(15,29,45,.04);
      --sh-2:  0 4px 14px rgba(15,29,45,.08), 0 2px 4px rgba(15,29,45,.04);
      --sh-3:  0 12px 32px rgba(15,29,45,.12), 0 4px 10px rgba(15,29,45,.06);
      --sh-pop:0 12px 32px rgba(15,29,45,.16);
      --sh-ink:0 10px 30px rgba(10,20,32,.35);
      --sh-brand: 0 10px 30px rgba(10,20,32,.35);
      --t-2xs:0.6875rem; --t-xs:0.75rem; --t-sm:0.8125rem; --t-base:0.9375rem;
      --t-md:1.0625rem;  --t-lg:1.25rem;  --t-xl:1.5rem;   --t-2xl:2rem; --t-3xl:2.75rem;
      --ease: cubic-bezier(0.33, 0, 0.2, 1);
      --grad-ink: linear-gradient(160deg, #22405C 0%, #102234 55%, #070F18 100%);
      --grad-ink-radial: radial-gradient(120% 120% at 50% 0%, #1a2b3d 0%, #0a1420 60%);
    }

    html { -webkit-text-size-adjust: 100%; }

    body {
      font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      background: var(--parchment);
      color: var(--ink-soft);
      min-height: 100vh;
      font-size: 15px;
      line-height: 1.5;
    }

    /* ---- Login ---- */
    #login-view {
      display: flex; flex-direction: column;
      min-height: 100dvh; background: var(--parchment);
    }
    @media (min-width: 769px) {
      #login-view { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; height: 100vh; overflow: hidden; }
    }

    /* Desktop: left brand panel */
    .login-brand-panel { display: none; }
    @media (min-width: 769px) {
      .login-brand-panel {
        display: flex; flex-direction: column;
        position: relative; background: var(--grad-ink);
        color: var(--parchment); overflow: hidden; padding: 3rem 3.5rem;
      }
      .login-brand-mid { margin-top: auto; margin-bottom: auto; position: relative; max-width: 30ch; }
      .login-brand-mid h1 { font-size: 2.625rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #fff; }
      .login-brand-mid .copper-sign { display: block; color: var(--copper-300); margin-top: 0.4rem; }
      .login-brand-mid p { font-size: 1rem; color: rgba(247,244,238,0.72); margin-top: 1.1rem; line-height: 1.55; max-width: 34ch; }
      .login-pillars { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 2.4rem; }
      .login-pillar { display: flex; align-items: flex-start; gap: 0.85rem; }
      .login-pillar-icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(247,244,238,0.08); display: flex; align-items: center; justify-content: center; color: var(--copper-300); font-size: 1.15rem; flex-shrink: 0; }
      .login-pillar-title { font-size: 0.875rem; font-weight: 700; color: #fff; }
      .login-pillar-desc { font-size: 0.75rem; color: rgba(247,244,238,0.6); margin-top: 1px; }
      .login-brand-foot { position: relative; font-size: 0.6875rem; color: rgba(247,244,238,0.4); letter-spacing: 0.04em; }
    }
    .login-brand-logo { display: flex; align-items: center; gap: 0.7rem; position: relative; }
    .login-brand-logo img { width: 42px; height: 42px; border-radius: 11px; display: block; }
    .login-brand-logo .brand-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }

    /* Mobile: dark header (hidden on desktop) */
    .login-top {
      background: var(--grad-ink); color: var(--parchment);
      padding: 2.2rem 1.5rem 2.5rem; position: relative; overflow: hidden; flex-shrink: 0;
    }
    .login-top::before {
      content: ''; position: absolute; top: -60px; right: -60px;
      width: 220px; height: 220px; border-radius: 30%;
      background: radial-gradient(circle at 30% 30%, rgba(184,115,51,0.26), transparent 62%);
    }
    @media (min-width: 769px) { .login-top { display: none; } }

    .login-brand-row { display: flex; align-items: center; gap: 0.65rem; position: relative; }
    .login-brand-row img { width: 38px; height: 38px; border-radius: 10px; display: block; }
    .login-brand-row .brand-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
    .login-headline { position: relative; margin-top: 1.75rem; }
    .login-headline h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
    .login-headline .copper-sign { color: var(--copper-300); }
    .login-headline p { font-size: 0.875rem; color: rgba(247,244,238,0.65); margin-top: 0.6rem; line-height: 1.5; }

    /* Form side */
    .login-form-side { display: flex; flex-direction: column; background: var(--parchment); }
    @media (min-width: 769px) { .login-form-side { overflow-y: auto; } }

    .login-form-wrap { flex: 1; display: flex; flex-direction: column; }
    @media (min-width: 769px) { .login-form-wrap { align-items: center; justify-content: center; padding: 2.75rem 3rem; } }

    /* Desktop form header */
    .login-eyebrow { display: none; }
    .login-form-title { display: none; }
    .login-form-subtitle { display: none; }
    @media (min-width: 769px) {
      .login-eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); }
      .login-form-title { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-blue); margin-top: 0.4rem; }
      .login-form-subtitle { display: block; font-size: 0.875rem; color: var(--slate); margin-top: 0.35rem; line-height: 1.5; }
    }

    .login-form-area {
      padding: 1.5rem 1.5rem 2rem; display: flex; flex-direction: column;
    }
    @media (min-width: 769px) { .login-form-area { padding: 0; width: 100%; max-width: 396px; } }

    /* Login form fields */
    .lf { display: block; margin-top: 1.1rem; }
    .lf-label { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.35rem; }
    .lf-wrap { position: relative; }
    .lf-wrap .lead-icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--ink-300); font-size: 1rem; pointer-events: none; display: flex; }
    .lf-wrap input {
      width: 100%; font-family: inherit; font-size: 0.9375rem; color: var(--ink-blue);
      background: var(--surface); border: 1.5px solid var(--blue-grey);
      border-radius: 14px; padding: 0.7rem 2.5rem 0.7rem 2.4rem;
      outline: none; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none;
    }
    .lf-wrap input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
    .lf-wrap .peek-btn { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ink-300); cursor: pointer; padding: 0.2rem; display: flex; }
    .lf-wrap .peek-btn:hover { color: var(--ink-blue); }

    .lf-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.85rem; }
    .lf-remember { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); cursor: pointer; user-select: none; }
    .lf-remember-box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--ink-200); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--parchment); flex-shrink: 0; }
    .lf-remember-box.checked { background: var(--ink-blue); border-color: var(--ink-blue); }
    .lf-remember-box .ic { font-size: 0.8rem; opacity: 0; }
    .lf-remember-box.checked .ic { opacity: 1; }
    .lf-forgot { font-size: 0.875rem; font-weight: 700; color: var(--copper); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
    .lf-forgot:hover { text-decoration: underline; }
    .lf-signin-btn { margin-top: 1.3rem; }

    .login-new-here { text-align: center; font-size: 0.875rem; color: var(--slate); margin-top: 1.5rem; }
    .login-new-here a { color: var(--copper); font-weight: 700; text-decoration: none; }
    .login-new-here a:hover { color: var(--copper-700); }
    .login-secure-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.6875rem; color: var(--ink-faint); margin-top: 1.3rem; }

    .login-back { font-size: 0.8rem; color: var(--slate); cursor: pointer; background: none; border: none; padding: 0; margin-top: 0.75rem; display: block; text-align: center; width: 100%; font-family: inherit; }
    .login-back:hover { color: var(--ink-blue); }

    /* CR2 sign-up: two-column name row, consent, captcha, verify state */
    .lf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
    .lf-consent { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8rem; color: var(--slate); margin-top: 1.1rem; line-height: 1.4; cursor: pointer; }
    .lf-consent .lf-remember-box { margin-top: 1px; flex: 0 0 auto; }
    .lf-consent a { color: var(--copper); font-weight: 700; text-decoration: none; }
    .lf-consent a:hover { color: var(--copper-700); }
    .su-turnstile { margin-top: 1.1rem; display: flex; justify-content: center; }
    .verify-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--copper-100); color: var(--copper-700); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; }
    .verify-ico .ic { width: 30px; height: 30px; }
    .verify-title { font-size: 1.35rem; font-weight: 800; text-align: center; margin: 0 0 0.5rem; color: var(--ink-blue); }
    .verify-text { font-size: 0.9rem; color: var(--slate); text-align: center; line-height: 1.55; margin: 0 0 1.4rem; }
    .verify-text strong { color: var(--ink-blue); }

    /* Month picker — override generic input styles */
    input[type=month] {
      width: auto; padding: 0.25rem 0.5rem;
      border: 1.5px solid var(--blue-grey); border-radius: 6px;
      font-size: 0.775rem; color: var(--slate); background: var(--white);
      cursor: pointer; -webkit-appearance: none; transition: border-color 0.15s; font-family: inherit;
    }
    input[type=month]:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 2px var(--copper-100); }

    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 0.375rem; padding: 0.65rem 1.25rem; border-radius: 14px;
      font-size: 0.875rem; font-weight: 700; cursor: pointer; border: none;
      transition: background 0.15s, opacity 0.15s; text-decoration: none; font-family: inherit;
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-primary { background: var(--ink-blue); color: var(--parchment); width: 100%; }
    .btn-primary:hover:not(:disabled) { background: var(--ink-700); }
    /* Small buttons are inline toolbar actions — never full-width (overrides .btn-primary's 100%) */
    .btn-sm { width: auto; }
    .btn-ghost { background: none; color: var(--slate); padding: 0.4rem 0.75rem; font-size: 0.8rem; }
    .btn-ghost:hover { background: var(--mist); color: var(--ink-blue); }

    /* Auth feedback uses the DS .banner (surface card + coloured icon, no saturated
       fill). authMsg() injects the icon + text and the banner-* variant class. */
    .auth-message { display: none; margin-top: 0.875rem; text-align: left; }
    .auth-message.banner { align-items: center; }
    .auth-message .banner-detail { font-size: 0.825rem; color: var(--ink-soft); line-height: 1.45; }

    /* ---- App Shell ---- */
    #app-view { display: none; min-height: 100dvh; }

    /* ---- Header ---- */
    .app-header {
      background: var(--ink-blue); color: var(--parchment);
      padding: 0.875rem 1rem;
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 20;
      box-shadow: 0 2px 8px rgba(15,29,45,0.25);
    }
    .app-header h1 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
    .header-right  { display: flex; align-items: center; gap: 0.5rem; }
    @media (max-width: 380px) { .header-title { display: none; } }
    .sign-out-btn {
      background: rgba(247,244,238,0.12); color: var(--parchment); border: none;
      border-radius: 9px; padding: 0.35rem 0.65rem;
      font-size: 0.775rem; font-weight: 500; cursor: pointer; transition: background 0.15s; font-family: inherit;
    }
    .sign-out-btn:hover { background: rgba(247,244,238,0.22); }

    .header-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; flex-shrink: 0; }

    /* ---- Help button ---- */
    .help-btn {
      background: rgba(247,244,238,0.12); color: var(--parchment); border: none;
      border-radius: 9px; width: 32px; height: 32px;
      font-size: 0.8rem; font-weight: 700; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s; flex-shrink: 0;
    }
    .help-btn:hover { background: rgba(247,244,238,0.22); }

    /* ---- Help modal ---- */
    .help-overlay {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(15,23,42,0.55); backdrop-filter: blur(3px);
    }
    .help-overlay.open { display: flex; align-items: flex-end; justify-content: center; }
    .help-sheet {
      background: var(--white); border-radius: 20px 20px 0 0;
      width: 100%; max-width: 480px; max-height: 90vh;
      display: flex; flex-direction: column;
      animation: slideUp 0.25s ease;
    }
    @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    .help-sheet-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--gray-100);
      flex-shrink: 0;
    }
    .help-sheet-header h2 { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
    .help-close-btn {
      background: var(--gray-100); border: none; border-radius: 50%;
      width: 30px; height: 30px; font-size: 1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center; color: var(--gray-500);
    }
    .help-body {
      overflow-y: auto; padding: 1rem 1.25rem 2rem; flex: 1;
      scrollbar-width: thin;
    }
    .help-section {
      margin-bottom: 1.5rem;
    }
    .help-section h3 {
      font-size: 0.8rem; font-weight: 700; color: var(--blue);
      text-transform: uppercase; letter-spacing: 0.06em;
      margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem;
    }
    .help-section p {
      font-size: 0.83rem; color: var(--gray-600); line-height: 1.55; margin-bottom: 0.4rem;
    }
    .help-section ul {
      margin: 0.35rem 0 0.35rem 1.1rem; padding: 0;
    }
    .help-section ul li {
      font-size: 0.83rem; color: var(--gray-600); line-height: 1.55; margin-bottom: 0.2rem;
    }
    /* Mini diagram panels */
    .help-diagram {
      background: var(--gray-50); border: 1px solid var(--gray-100);
      border-radius: 10px; padding: 0.75rem; margin: 0.6rem 0;
      font-size: 0.78rem; color: var(--gray-700);
    }
    .help-diagram .diag-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.3rem 0; border-bottom: 1px solid var(--gray-100);
    }
    .help-diagram .diag-row:last-child { border-bottom: none; }
    .help-diagram .diag-left { display: flex; align-items: center; gap: 0.4rem; }
    .help-diagram .diag-badge {
      font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem;
      border-radius: 4px; flex-shrink: 0;
    }
    .badge-b { background: #dbeafe; color: #1e40af; }
    .badge-f { background: #dcfce7; color: #166534; }
    .badge-cat { background: var(--gray-100); color: var(--gray-700); }
    .help-inbox-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      background: #fef9c3; border: 1px solid #fde68a; border-radius: 6px;
      padding: 0.2rem 0.5rem; font-size: 0.75rem; color: #92400e; margin: 0.35rem 0;
    }
    .help-divider { border: none; border-top: 1px solid var(--gray-100); margin: 1.25rem 0; }

    /* ---- Nav tabs (5 tabs, scrollable) ---- */
    .nav-tabs {
      display: flex; background: var(--surface);
      border-bottom: 1px solid var(--gray-200);
      position: sticky; top: 49px; z-index: 15;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }

    .nav-tab {
      flex: 1; min-width: 72px;
      padding: 0.7rem 0.375rem; text-align: center;
      font-size: 0.8rem; font-weight: 500; color: var(--gray-500);
      border: none; border-bottom: 2px solid transparent; background: none;
      cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
    }
    .nav-tab.active { color: var(--copper); border-bottom-color: var(--copper); }

    /* The global filter bar (B/F chips + category dropdown) was removed in CR4
       Slice 2b — it was dead UI on every tab. */
    /* Receipt-needed toggle row (transactions tab only) */
    .receipt-toggle-row {
      display: flex; align-items: center; gap: 0.4rem;
      font-size: 0.75rem; color: var(--gray-600);
      cursor: pointer; user-select: none; padding: 0.1rem 0;
    }
    .receipt-toggle-row input[type="checkbox"] {
      accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer;
      flex-shrink: 0;
    }

    /* ---- Scrollable content ---- */
    .tab-content { padding: 1rem; }

    /* ---- Month nav ---- */
    .month-nav {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1.125rem; gap: 0.5rem;
    }
    .month-nav-center {
      display: flex; flex-direction: column; align-items: center;
      gap: 0.25rem; flex: 1;
    }
    .month-nav-btn {
      background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 8px;
      width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--gray-500); font-size: 1rem;
      transition: border-color 0.15s, color 0.15s; flex-shrink: 0;
    }
    .month-nav-btn:hover { border-color: var(--blue); color: var(--blue); }
    .month-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .month-label { font-size: 0.9375rem; font-weight: 600; color: var(--gray-900); }
    /* Period dropdown — shared style for all nav controls */
    .period-select {
      font-size: 0.775rem; padding: 0.25rem 0.5rem;
      border: 1.5px solid var(--gray-200); border-radius: 6px;
      color: var(--gray-600); background: var(--white); cursor: pointer;
      width: auto; max-width: 120px;
      -webkit-appearance: none; appearance: none;
      text-align: center;
    }
    .period-select:focus { outline: none; border-color: var(--blue); }

    /* ---- Cards ---- */
    .card {
      background: var(--white); border-radius: var(--radius);
      padding: 1rem; box-shadow: var(--shadow); margin-bottom: 1rem;
    }
    .section-title {
      font-size: 0.8125rem; font-weight: 600; color: var(--gray-500);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.875rem;
    }

    /* ---- Balance grid (dashboard) ---- */
    .balance-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;
    }
    .balance-card {
      background: var(--white); border-radius: var(--radius);
      padding: 0.875rem 1rem; box-shadow: var(--shadow);
      cursor: pointer; transition: box-shadow 0.15s, transform 0.1s;
      min-width: 0; /* let grid columns hold 1fr so long acct names ellipsis instead of overflowing (mobile sideways-scroll bug) */
    }
    .balance-card:hover  { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
    .balance-card:active { transform: scale(0.97); }
    .balance-card .acct-name {
      font-size: 0.7rem; font-weight: 600; color: var(--gray-400);
      text-transform: uppercase; letter-spacing: 0.05em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .balance-card .bal-amount {
      font-size: 1.25rem; font-weight: 700; color: var(--gray-900);
      margin-top: 0.25rem; letter-spacing: -0.02em;
    }
    .balance-card .bal-amount.negative { color: var(--red); }
    .balance-card .bal-date { font-size: 0.7rem; color: var(--gray-400); margin-top: 0.2rem; }
    /* Owner group header spanning the full balance grid (joint mode only). */
    .bal-grp-lbl {
      grid-column: 1 / -1; align-self: end;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; color: var(--gray-400);
      margin: 0.1rem 0 -0.35rem;
    }
    .bal-grp-lbl:first-child { margin-top: 0; }

    /* ---- Chart wraps ---- */
    .chart-wrap { position: relative; height: 220px; margin: 0.5rem 0; }
    .chart-center {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%); text-align: center; pointer-events: none;
    }
    .chart-center .center-label { font-size: 0.7rem; color: var(--gray-400); font-weight: 500; }
    .chart-center .center-total {
      font-size: 1.125rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.02em;
    }
    .monthly-chart-wrap { position: relative; height: 200px; margin-top: 0.5rem; }

    /* ---- Donut HTML legend ---- */
    .donut-legend {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 0.75rem; margin-top: 0.75rem;
    }
    .legend-item { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
    .legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .legend-item-text {
      font-size: 0.76rem; color: var(--gray-700);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ---- Category table (spending tab) ---- */
    .cat-table { width: 100%; border-collapse: collapse; margin-top: 0.875rem; font-size: 0.825rem; }
    .cat-table th {
      font-size: 0.72rem; font-weight: 600; color: var(--gray-400);
      text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0 0.5rem;
      border-bottom: 1px solid var(--gray-200);
    }
    .cat-table th:not(:first-child) { text-align: right; }
    .cat-table td {
      padding: 0.5rem 0; border-bottom: 1px solid var(--gray-100);
      color: var(--gray-700); vertical-align: middle;
    }
    .cat-table td:not(:first-child) { text-align: right; }
    .cat-table tfoot td {
      border-bottom: none; border-top: 1.5px solid var(--gray-200);
      font-weight: 600; color: var(--gray-900); padding-top: 0.625rem;
    }
    .cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.45rem; flex-shrink: 0; }
    .cat-name { display: flex; align-items: center; }
    #spending-table tbody tr:hover { background: var(--gray-50); }
    #spending-table tbody tr:active { background: var(--gray-100); }
    .spend-cat-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .spend-cat-header .section-title { margin-bottom: 0; }
    .spend-filter-chip {
      display: inline-flex; align-items: center; gap: 5px;
      background: #dbeafe; color: #1e40af;
      border-radius: 20px; padding: 3px 8px 3px 10px;
      font-size: 0.72rem; font-weight: 600;
      border: none; cursor: pointer;
      max-width: 180px; /* truncate very long category names */
    }
    .spend-filter-chip:active { background: #bfdbfe; }
    .spend-filter-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .spend-filter-chip-x {
      display: inline-flex; align-items: center; justify-content: center;
      width: 15px; height: 15px; border-radius: 50%;
      background: #bfdbfe; font-size: 11px; font-weight: 700;
      flex-shrink: 0; line-height: 1;
    }

    /* ---- Budget stats ---- */
    .budget-stats-row {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem;
    }
    .budget-stat-chip { border-radius: 10px; padding: 0.6rem 0.25rem; text-align: center; }
    .budget-stat-chip .stat-count { font-size: 1.625rem; font-weight: 700; line-height: 1.1; }
    .budget-stat-chip .stat-label {
      font-size: 0.62rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; margin-top: 0.1rem;
    }
    .budget-stat-chip.chip-green { background: #d1fae5; color: #065f46; }
    .budget-stat-chip.chip-amber { background: #fef3c7; color: #92400e; }
    .budget-stat-chip.chip-red   { background: #fee2e2; color: #991b1b; }

    .budget-period-line {
      font-size: 0.8rem; color: var(--gray-500); text-align: center;
      margin-bottom: 1rem; padding: 0.625rem 1rem;
      background: var(--white); border-radius: 10px; box-shadow: var(--shadow);
    }
    .budget-period-line strong { color: var(--gray-900); }

    /* ---- Budget bars ---- */
    .budget-item { margin-bottom: 1rem; }
    .budget-item:last-child { margin-bottom: 0; }
    .budget-row {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 0.3rem; gap: 0.5rem;
    }
    .budget-cat {
      font-size: 0.85rem; font-weight: 500; color: var(--gray-700);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .budget-amounts { font-size: 0.775rem; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; }
    .budget-amounts.over { color: var(--red); font-weight: 600; }

    .budget-bar-track {
      height: 8px; background: var(--gray-100); border-radius: 4px;
      overflow: visible; position: relative;
    }
    .budget-bar-fill {
      height: 100%; border-radius: 4px; transition: width 0.4s ease;
      position: relative; overflow: visible;
    }
    .budget-bar-fill.ok      { background: var(--green); }
    .budget-bar-fill.warning { background: var(--amber); }
    .budget-bar-fill.over    { background: var(--red); }

    /* Overflow extension bar (for over-budget) */
    .budget-overflow-bar {
      height: 100%; border-radius: 0 3px 3px 0;
      background: rgba(220,38,38,0.25);
      position: absolute; top: 0; left: 100%;
    }
    .budget-overflow-text {
      font-size: 0.7rem; color: var(--red); font-weight: 600;
      margin-top: 0.2rem; text-align: right;
    }

    /* Budget items are tappable */
    .budget-item {
      cursor: pointer; border-radius: 8px; padding: 0.5rem 0.5rem 0.35rem;
      margin: 0 -0.5rem 0.6rem; transition: background 0.12s;
    }
    .budget-item:last-child { margin-bottom: 0; }
    .budget-item:active { background: var(--gray-100); }
    .budget-edit-hint {
      font-size: 0.68rem; color: var(--gray-400); margin-top: 0.35rem; text-align: right;
    }

    /* Budget FAB */
    .budget-fab {
      display: flex; align-items: center; gap: 0.4rem;
      width: 100%; margin-top: 1rem; padding: 0.7rem;
      background: none; border: 2px dashed var(--gray-200); border-radius: var(--radius);
      color: var(--blue); font-size: 0.875rem; font-weight: 500; cursor: pointer;
      justify-content: center; transition: border-color 0.15s, background 0.15s;
    }
    .budget-fab:hover { border-color: var(--blue); background: var(--blue-lt); }

    /* ---- Budget editor (bottom sheet) ---- */
    .budget-editor-overlay {
      position: fixed; inset: 0; background: rgba(10,20,32,0.45);
      z-index: 100; display: flex; align-items: flex-end;
      animation: fadeIn 0.15s ease;
    }
    .budget-editor-sheet {
      background: var(--surface); border-radius: 20px 20px 0 0;
      width: 100%; padding-bottom: env(safe-area-inset-bottom, 0);
      animation: slideUp 0.2s ease;
    }
    /* Desktop: a centred, width-constrained dialog (matches .fc-form-sheet) instead
       of a full-width bottom bar. Shared by the budget / income / fun-money modals. */
    @media (min-width: 769px) {
      .budget-editor-overlay { align-items: center; justify-content: center; padding: 1rem; }
      .budget-editor-sheet {
        width: 380px; max-width: calc(100% - 2rem);
        border-radius: var(--r-lg); box-shadow: var(--sh-pop);
        max-height: 90vh; overflow-y: auto;
        animation: fadeIn 0.18s ease;
      }
      .budget-editor-sheet .picker-handle { display: none; }  /* drag handle is a mobile-sheet affordance */
    }
    .budget-editor-body { padding: 1rem 1.25rem 1.5rem; }
    .budget-editor-cat-select {
      width: 100%; padding: 0.6rem 0.75rem; border: 1.5px solid var(--blue-grey);
      border-radius: 10px; font-size: 0.9rem; color: var(--ink-blue); background: var(--surface);
      margin-bottom: 0.875rem; appearance: none; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem;
    }
    .budget-editor-cat-select:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 2px var(--copper-100); }
    .budget-editor-amount-row {
      display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
    }
    .budget-editor-currency {
      font-size: 1.25rem; font-weight: 600; color: var(--slate);
    }
    .budget-editor-amount-input {
      flex: 1; padding: 0.65rem 0.75rem; border: 1.5px solid var(--blue-grey);
      border-radius: 10px; font-size: 1.1rem; font-weight: 600; color: var(--ink-blue);
      text-align: right; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .budget-editor-amount-input:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 2px var(--copper-100); }
    .budget-editor-note {
      font-size: 0.75rem; color: var(--ink-faint); margin-bottom: 1.25rem;
    }
    .budget-editor-actions { display: flex; gap: 0.75rem; }
    .budget-editor-save-btn {
      flex: 1; padding: 0.7rem; background: var(--ink-blue); color: var(--parchment);
      border: none; border-radius: 14px; font-size: 0.875rem; font-weight: 700; cursor: pointer;
      font-family: inherit; transition: background 0.15s, opacity 0.15s;
    }
    .budget-editor-save-btn:hover { background: var(--ink-700); }
    .budget-editor-save-btn:active { opacity: 0.9; }
    .budget-editor-delete-btn {
      padding: 0.7rem 1rem; background: var(--mist); color: var(--error);
      border: none; border-radius: 14px; font-size: 0.875rem; font-weight: 700; cursor: pointer;
      font-family: inherit; transition: background 0.15s;
    }
    .budget-editor-delete-btn:hover { background: var(--error-bg); }

    /* ---- Rules manager + rule editor (DS re-skin) ---- */
    /* Layout/card chrome comes from the shared .cm-overlay / .cm-card rules
       defined in the Category-modals block below. Only z-index + the
       rules-list / dirty-note specifics live here. */
    .rules-overlay      { z-index: 1320; }
    .rule-editor-overlay{ z-index: 1330; }
    .rules-dirty-note {
      font-size: var(--t-2xs); color: var(--warning-ink); font-weight: 600;
      padding: 0 1.25rem 0.45rem; flex-shrink: 0;
    }
    .rule-row {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.6rem 0.65rem; border-radius: 9px;
    }
    .rule-row:hover { background: var(--mist); }
    .rule-reorder { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
    .rule-move-btn {
      width: 22px; height: 18px; padding: 0; background: var(--mist);
      border: 0; border-radius: 5px; color: var(--slate);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .rule-move-btn .ic { width: 13px; height: 13px; }
    .rule-move-btn:hover:not(:disabled) { background: var(--blue-grey); color: var(--ink-blue); }
    .rule-move-btn:disabled { opacity: 0.3; cursor: default; }
    .rule-content { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; cursor: pointer; }
    .rule-keyword { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); white-space: nowrap; flex-shrink: 0; }
    .rule-arr { color: var(--slate); width: 15px; height: 15px; flex-shrink: 0; }
    .rule-cat-name {
      display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0;
      font-size: var(--t-sm); color: var(--ink-soft);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rule-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .rule-row .empty-state, .rules-list .empty-state { padding: 1.5rem 1rem; text-align: center; color: var(--ink-faint); font-size: var(--t-sm); }

    /* ---- Transactions ---- */
    .filters { display: flex; gap: 0.5rem; margin-bottom: 0.875rem; flex-wrap: wrap; }
    .filters select {
      flex: 1; min-width: 130px; font-size: 0.8rem; padding: 0.45rem 0.6rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 0.5rem center; padding-right: 1.75rem;
    }

    .tx-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100);
    }
    .tx-row:last-child { border-bottom: none; }
    .tx-left { flex: 1; min-width: 0; }
    .tx-meta { font-size: 0.7rem; color: var(--gray-400); margin-bottom: 0.15rem; }
    /* ---- Memo ---- */
    .tx-memo { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.2rem;
      display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tx-memo:hover .tx-memo-text { text-decoration: underline; text-decoration-style: dotted; }
    .tx-memo-add { font-size: 0.72rem; color: var(--gray-400); background: none; border: none;
      padding: 0; cursor: pointer; margin-top: 0.2rem; display: inline-block; }
    .tx-memo-add:hover { color: var(--blue); }
    .memo-edit-wrap { margin-top: 0.3rem; display: flex; gap: 0.35rem; align-items: center; }
    .memo-input { flex: 1; font-size: 0.8rem; border: 1.5px solid var(--blue);
      border-radius: 6px; padding: 0.25rem 0.5rem; font-family: inherit;
      background: var(--white); color: var(--gray-900); outline: none; min-width: 0; }
    .memo-cancel-btn { font-size: 0.75rem; background: none; border: none;
      color: var(--gray-400); cursor: pointer; padding: 0 0.25rem; flex-shrink: 0; }
    .tx-desc {
      font-size: 0.875rem; font-weight: 500; color: var(--gray-900);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tx-cat {
      display: inline-block; margin-top: 0.2rem; font-size: 0.7rem;
      color: var(--white); background: var(--gray-400); border-radius: 4px;
      padding: 0.1rem 0.4rem; font-weight: 500;
    }
    .tx-cat.uncategorised { background: #f59e0b; }
    .tx-right { text-align: right; flex-shrink: 0; }
    .tx-amount { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; }
    .tx-amount.positive { color: var(--green); }
    .tx-amount.negative { color: var(--gray-700); }
    .tx-amount.internal { color: var(--gray-400); }
    .tx-balance { font-size: 0.7rem; color: var(--gray-400); margin-top: 0.1rem; }

    .load-more-btn {
      width: 100%; margin-top: 1rem; background: var(--gray-100);
      color: var(--gray-500); border: none; border-radius: 8px;
      padding: 0.65rem; font-size: 0.85rem; font-weight: 500;
      cursor: pointer; transition: background 0.15s;
    }
    .load-more-btn:hover { background: var(--gray-200); }

    /* ---- Balances tab ---- */
    .bal-tab-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100);
    }
    .bal-tab-row:last-child { border-bottom: none; }
    .bal-tab-name { font-size: 0.875rem; font-weight: 500; color: var(--gray-900); }
    .bal-tab-date { font-size: 0.7rem; color: var(--gray-400); margin-top: 0.1rem; }
    .bal-tab-amount {
      font-size: 1.0625rem; font-weight: 700; color: var(--gray-900);
      letter-spacing: -0.02em; text-align: right;
    }
    .bal-tab-amount.negative { color: var(--red); }

    /* ---- States ---- */
    .loading-state {
      display: flex; flex-direction: column; align-items: center;
      gap: 0.75rem; padding: 3rem 1rem; color: var(--gray-400); font-size: 0.875rem;
    }
    .spinner {
      width: 24px; height: 24px; border: 2.5px solid var(--gray-200);
      border-top-color: var(--copper); border-radius: 50%; animation: spin 0.65s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .empty-state { text-align: center; color: var(--gray-400); font-size: 0.875rem; padding: 2rem 0; }

    /* ---- Tags tab ---- */
    .tag-overview-card {
      background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
      padding: 0.875rem 1rem; margin-bottom: 0.625rem; cursor: pointer;
      border-left: 4px solid transparent; transition: box-shadow 0.15s;
    }
    .tag-overview-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
    .tag-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
    .tag-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; color: var(--white);
    }
    .tag-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); }
    .tag-card-amount { font-size: 1.15rem; font-weight: 700; }
    .tag-card-meta { font-size: 0.7rem; color: var(--gray-400); margin-top: 2px; }
    .tag-spend-bar { display: flex; gap: 3px; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 0.6rem; }
    .tag-spend-seg { border-radius: 2px; min-width: 3px; }
    .tag-person-line { font-size: 0.7rem; color: var(--gray-400); margin-top: 5px; }

    /* tag chip on transactions */
    .tx-tag-chip {
      display: inline-block; margin-top: 0.2rem; margin-left: 0.25rem;
      font-size: 0.68rem; color: var(--white); border-radius: 4px;
      padding: 0.1rem 0.4rem; font-weight: 500; cursor: pointer;
    }
    .tx-tag-add {
      display: inline-block; margin-top: 0.2rem; margin-left: 0.25rem;
      font-size: 0.68rem; color: var(--gray-400); border-radius: 4px;
      padding: 0.1rem 0.4rem; font-weight: 500; cursor: pointer;
      border: 1px dashed var(--gray-300);
    }
    .tx-tag-add:hover { border-color: var(--purple); color: var(--purple); }

    /* tag filter chip in tx tab */
    .tag-filter-chip {
      font-size: 0.78rem; padding: 0.4rem 0.75rem; border-radius: 20px;
      border: 1.5px solid var(--gray-200); background: var(--white);
      cursor: pointer; font-weight: 500; color: var(--gray-600); white-space: nowrap;
      transition: all 0.15s;
    }
    .tag-filter-chip.active { color: var(--white); border-color: transparent; }
    .tag-filter-chip.all-chip.active { background: var(--purple); border-color: var(--purple); }

    /* tag detail overlay */
    .tag-detail-overlay {
      position: fixed; inset: 0; background: var(--gray-50); z-index: 90;
      display: none; overflow-y: auto;
    }
    .tag-detail-overlay.open { display: block; }
    .tag-detail-topbar {
      position: sticky; top: 0; background: var(--purple); color: var(--white);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.875rem 1rem; z-index: 1;
    }
    .tag-detail-back {
      background: none; border: none; color: var(--white); cursor: pointer;
      font-size: 0.9rem; display: flex; align-items: center; gap: 4px; padding: 0;
    }
    .tag-detail-body { padding: 1rem; max-width: 480px; margin: 0 auto; padding-bottom: 3rem; }
    .tag-stat-row { display: flex; gap: 0.625rem; margin-bottom: 1rem; }
    .tag-stat-card {
      flex: 1; background: var(--white); border-radius: 10px; box-shadow: var(--shadow);
      padding: 0.75rem 0.875rem;
    }
    .tag-stat-label { font-size: 0.7rem; color: var(--gray-400); margin-bottom: 2px; }
    .tag-stat-value { font-size: 1.05rem; font-weight: 700; }
    .tag-stat-value.neg { color: var(--red); }
    .tag-donut-card {
      background: var(--white); border-radius: 10px; box-shadow: var(--shadow);
      padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;
    }
    .tag-donut-legend { flex: 1; }
    .tag-donut-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 5px; font-size: 0.8rem; }
    .tag-donut-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .tag-donut-name { flex: 1; }
    .tag-donut-val { font-weight: 600; color: var(--gray-600); }
    .tag-person-card {
      background: var(--white); border-radius: 10px; box-shadow: var(--shadow);
      padding: 0.875rem 1rem; margin-bottom: 1rem;
    }
    .tag-person-row { display: flex; align-items: center; margin-bottom: 8px; gap: 0.75rem; }
    .tag-person-row:last-child { margin-bottom: 0; }
    .tag-person-name { font-size: 0.85rem; font-weight: 500; width: 54px; }
    .tag-person-bar-bg { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
    .tag-person-fill { height: 100%; border-radius: 3px; }
    .tag-person-amt { font-size: 0.85rem; font-weight: 600; width: 70px; text-align: right; }

    /* bulk-tag modal (Luca DS) */
    .bulk-tag-overlay {
      position: fixed; inset: 0; background: rgba(15,29,45,0.45);
      z-index: 95; display: none; align-items: flex-end; justify-content: center;
    }
    .bulk-tag-overlay.open { display: flex; }
    .bulk-tag-sheet {
      background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
      padding: 0 1.25rem 2rem; width: 100%; max-width: 480px;
      max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-pop);
    }
    .bulk-tag-handle { width: 36px; height: 4px; background: var(--border-strong); border-radius: 2px; margin: 14px auto 16px; }
    .bulk-tag-title { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); margin-bottom: 1rem; }
    .bulk-tag-title .ic { color: var(--copper); font-size: 1.1rem; }
    .btag-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-bottom: 5px; display: block; }
    .btag-input {
      width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong);
      border-radius: var(--r-sm); font-size: var(--t-sm); outline: none; transition: border-color 0.15s;
      background: var(--surface); color: var(--ink-blue); font-family: var(--font);
    }
    .btag-input:focus { border-color: var(--copper); }
    .btag-date-row { display: flex; gap: 0.5rem; }
    .btag-acct-head { display: flex; align-items: center; justify-content: space-between; }
    .btag-acct-allbtns { display: flex; gap: 0.5rem; margin-bottom: 5px; }
    .btag-allbtn {
      border: none; background: none; padding: 0; cursor: pointer;
      font-size: var(--t-2xs); font-weight: 600; color: var(--copper);
      font-family: var(--font);
    }
    .btag-allbtn:hover { text-decoration: underline; }
    .btag-acct-chips { display: flex; gap: 0.375rem; flex-wrap: wrap; }
    .btag-acct-chip {
      padding: 5px 11px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
      background: var(--surface); cursor: pointer; font-size: var(--t-xs); font-weight: 600;
      color: var(--ink-soft); transition: all 0.15s;
    }
    .btag-acct-chip.sel { border-color: var(--ink-blue); background: var(--ink-blue); color: var(--parchment); }
    .btag-preview {
      background: var(--mist); border: 1px solid var(--border-strong);
      border-radius: var(--r-md); padding: 0.75rem 0.875rem; margin: 0.875rem 0;
    }
    .btag-preview.ready { border-color: var(--copper); }
    .btag-preview-head { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
    .btag-preview-sub { font-size: var(--t-2xs); color: var(--slate); margin-top: 2px; }
    .btag-preview-list { margin-top: 0.75rem; border-top: 1px solid var(--divider); padding-top: 0.625rem; }
    .btag-preview-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 5px; }
    .btag-preview-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ink-blue); flex-shrink: 0; }
    .btag-preview-label { flex: 1; font-size: var(--t-xs); color: var(--ink-soft); }
    .btag-preview-label.excl { color: var(--ink-faint); text-decoration: line-through; }
    .btag-preview-amt { font-size: var(--t-xs); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
    .btag-apply-btn {
      width: 100%; padding: 0.8rem; background: var(--ink-blue); color: var(--parchment);
      border: none; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 700;
      cursor: pointer; transition: background 0.15s; font-family: var(--font);
    }
    .btag-apply-btn:hover { background: var(--ink-700); }
    .btag-apply-btn:disabled { background: var(--mist); color: var(--ink-faint); cursor: default; }

    /* new-tag form (inline in bulk modal) */
    .new-tag-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
    .color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); cursor: pointer; flex-shrink: 0; }
    .color-picker-wrap { position: relative; display: inline-block; }

    /* Legacy bottom-sheet chrome — still used by the budget-editor and
       planned-income override sheets (out of scope for the category-modals
       re-skin). Kept verbatim so those modals are unchanged. */
    .picker-handle {
      width: 36px; height: 4px; background: var(--gray-200); border-radius: 2px;
      margin: 0.75rem auto 0;
    }
    .picker-header {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.75rem 1rem 0.5rem;
    }
    .picker-header-left { flex: 1; min-width: 0; }
    .picker-title { font-size: 0.68rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.06em; }
    .picker-tx-desc { font-size: 0.875rem; font-weight: 500; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }
    .picker-close {
      background: var(--gray-100); border: none; border-radius: 50%;
      width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--gray-500); font-size: 0.875rem; flex-shrink: 0;
    }

    /* =====================================================================
       CATEGORY-ADJACENT MODALS — Luca DS re-skin
       Centered card on desktop · bottom sheet on mobile (mirrors the
       Forecast/Savings .fc-form-overlay pattern). Shared chrome = .cm-*.
       Used by: Change category (cat-picker), Pay-from-a-fund (fund-picker),
       Manage rules (rules), Rule editor, Manage categories (cat-mgr).
       ===================================================================== */
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    .cm-overlay {
      position: fixed; inset: 0; background: rgba(15,29,45,0.42);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem; animation: fadeIn 0.15s ease;
    }
    .cm-card {
      background: var(--surface); border-radius: 16px;
      width: 440px; max-width: 100%; max-height: 600px;
      box-shadow: var(--sh-3); display: flex; flex-direction: column; overflow: hidden;
    }
    .cm-handle { display: none; }

    .cm-hd { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.1rem 1.25rem 0.85rem; flex-shrink: 0; }
    .cm-hd-l { flex: 1; min-width: 0; }
    .cm-title {
      font-size: var(--t-lg); font-weight: 700; color: var(--ink-blue); letter-spacing: -0.01em;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .cm-title .ic { color: var(--ink-soft); width: 18px; height: 18px; }
    .cm-sub { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cm-x {
      flex-shrink: 0; width: 32px; height: 32px; border: 0; background: none; color: var(--slate);
      border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .cm-x .ic { width: 18px; height: 18px; }
    .cm-x:hover { background: var(--mist); color: var(--ink-blue); }

    /* search */
    .cm-search { margin: 0 1.25rem 0.6rem; position: relative; flex-shrink: 0; }
    .cm-search > .ic { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--slate); width: 16px; height: 16px; }
    .cm-search input {
      width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem 0.6rem 2.2rem;
      border: 1px solid var(--border-strong); border-radius: 9px; font: inherit; font-size: var(--t-sm);
      color: var(--ink-blue); background: var(--surface); -webkit-appearance: none;
    }
    .cm-search input:focus { outline: none; border-color: var(--ink-blue); }

    /* scrolling list */
    .cm-list { flex: 1; overflow-y: auto; padding: 0.15rem 0.6rem; min-height: 120px; }

    /* DS buttons (modal-scoped) */
    .cm-btn {
      border-radius: 9px; font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
      padding: 0.55rem 0.95rem; display: inline-flex; align-items: center; gap: 0.4rem;
      border: 1px solid transparent; white-space: nowrap;
    }
    .cm-btn .ic { width: 15px; height: 15px; }
    .cm-btn:disabled { opacity: 0.55; cursor: default; }
    .cm-btn-ink { background: var(--ink-blue); color: var(--parchment); }
    .cm-btn-ink:hover:not(:disabled) { background: #1a2c40; }
    .cm-btn-ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--border-strong); }
    .cm-btn-ghost:hover { background: var(--mist); }
    .cm-btn-danger { background: var(--surface); color: var(--error); border-color: var(--border-strong); }
    .cm-btn-danger:hover { background: var(--error-bg); }
    .cm-btn-sm { padding: 0.5rem 0.8rem; }
    /* compact header "+ Add" (auto-width on desktop — no full-width buttons) */
    .cm-add { flex-shrink: 0; padding: 0.4rem 0.7rem; font-size: var(--t-xs); }
    .cm-foot-actions { display: flex; align-items: center; gap: 0.6rem; padding: 0 1.25rem 1.1rem; flex-shrink: 0; }
    /* small icon-only button (per-row edit) */
    .cm-icon-btn {
      width: 30px; height: 30px; border: 0; background: none; border-radius: 7px; cursor: pointer;
      color: var(--slate); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cm-icon-btn .ic { width: 16px; height: 16px; }
    .cm-icon-btn:hover { background: var(--surface); color: var(--ink-blue); }

    /* band under the list (keyword / rule) */
    .cm-band { padding: 0.85rem 1.25rem; border-top: 1px solid var(--divider); background: var(--parchment); flex-shrink: 0; }
    .cm-band-label {
      font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--ink-faint); margin-bottom: 0.5rem;
    }

    /* footer with manage links */
    .cm-ft { display: flex; align-items: center; gap: 0.25rem; padding: 0.75rem 1rem; border-top: 1px solid var(--divider); flex-shrink: 0; }
    .cm-ft-spacer { flex: 1; }
    .cm-ftlnk {
      border: 0; background: none; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft);
      cursor: pointer; padding: 0.4rem 0.55rem; border-radius: 7px; display: inline-flex; align-items: center; gap: 0.35rem;
    }
    .cm-ftlnk:hover { background: var(--mist); color: var(--ink-blue); }
    .cm-ftlnk .ic { width: 15px; height: 15px; color: var(--slate); }

    /* form fields (rule editor + category editor) */
    .cm-stack > * + * { margin-top: 0.75rem; }
    .cm-form-label { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.45rem; }
    .cm-input, .cm-select {
      width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem;
      border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: var(--t-sm);
      color: var(--ink-blue); background: var(--surface); -webkit-appearance: none;
    }
    .cm-input:focus, .cm-select:focus { outline: none; border-color: var(--ink-blue); }
    .cm-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23586070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem;
    }
    /* colour swatches (category editor + picker create form) */
    .cm-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }

    .cat-picker-overlay { z-index: 1300; }

    /* category rows (rendered into .cm-list by JS) */
    .picker-cat-btn {
      display: flex; align-items: center; gap: 0.65rem; width: 100%;
      padding: 0.6rem 0.65rem; border: 0; background: none; border-radius: 9px; cursor: pointer;
      font: inherit; font-size: var(--t-sm); color: var(--ink-blue); font-weight: 500; text-align: left;
    }
    .picker-cat-btn:hover { background: var(--mist); }
    .picker-cat-btn.current-cat { background: var(--mist); font-weight: 600; }
    .picker-cat-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--ink-200); }
    .picker-cat-nm { flex: 1; min-width: 0; }
    .picker-cat-chk { color: var(--copper); width: 16px; height: 16px; flex-shrink: 0; }
    .picker-cat-tail { font-size: var(--t-2xs); color: var(--ink-faint); flex-shrink: 0; }

    /* ---- Picker keyword chips (DS) ---- */
    .picker-kw-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .kw-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      padding: 0.3rem 0.7rem; border-radius: 999px; font-size: var(--t-xs);
      font-weight: 600; cursor: pointer; border: 1px solid var(--border-strong);
      background: var(--surface); color: var(--ink-soft); -webkit-tap-highlight-color: transparent;
    }
    .kw-chip:hover { border-color: var(--ink-blue); color: var(--ink-blue); }
    .kw-chip.kw-selected { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--parchment); }
    .kw-chip.kw-none { color: var(--ink-faint); font-weight: 500; font-style: italic; cursor: default; border-style: dashed; }
    .kw-chip.kw-none:hover { border-color: var(--border-strong); color: var(--ink-faint); }

    /* ---- Picker inline rule band (DS) ---- */
    .picker-rule-section { display: none; }
    .picker-rule-section.visible { display: block; }
    .picker-rule-row { display: flex; align-items: center; gap: 0.5rem; }
    .picker-rule-input {
      flex: 1; min-width: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--border-strong);
      border-radius: 8px; font: inherit; font-size: var(--t-sm); color: var(--ink-blue);
      background: var(--surface); -webkit-appearance: none;
    }
    .picker-rule-input:focus { outline: none; border-color: var(--ink-blue); }
    .picker-rule-arrow { color: var(--slate); width: 15px; height: 15px; flex-shrink: 0; }
    .picker-rule-cat {
      font-size: var(--t-xs); font-weight: 700; color: var(--ink-blue);
      flex-shrink: 0; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .picker-rule-hint { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.45rem; }

    /* ---- Picker no-results + inline create-category form (DS) ---- */
    .picker-no-results {
      padding: 0.875rem 1rem 0.375rem;
      font-size: var(--t-sm); color: var(--ink-faint); text-align: center;
    }
    .picker-create-row {
      display: flex; align-items: center; gap: 0.625rem;
      padding: 0.65rem 0.75rem; width: 100%; margin-top: 0.15rem;
      border: 0; border-radius: 9px; background: var(--mist);
      font-size: var(--t-sm); color: var(--ink-blue); font-weight: 600;
      text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .picker-create-row:hover { background: var(--blue-grey); }
    .picker-create-icon {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--ink-blue); color: var(--parchment);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .picker-create-icon .ic { width: 13px; height: 13px; }
    .picker-create-label { flex: 1; }
    .picker-create-label em { font-style: normal; color: var(--ink-soft); }
    .picker-create-arrow  { color: var(--slate); width: 15px; height: 15px; flex-shrink: 0; }
    .picker-create-form-inner { padding: 0.75rem 0.65rem; }
    .picker-create-form-label {
      font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint);
      text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;
    }
    .picker-create-name {
      width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem;
      border: 1px solid var(--border-strong); border-radius: 8px;
      font: inherit; font-size: var(--t-sm); color: var(--ink-blue); background: var(--surface);
      margin-bottom: 0.6rem; -webkit-appearance: none;
    }
    .picker-create-name:focus { outline: none; border-color: var(--ink-blue); }
    .picker-color-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.7rem; }
    .picker-color-label { font-size: var(--t-2xs); color: var(--ink-faint); font-weight: 600; }
    .picker-color-swatch, .cat-mgr-swatch {
      width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
      border: 2px solid transparent; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
    }
    .picker-color-swatch.pc-selected, .cat-mgr-swatch.cm-selected {
      border-color: var(--ink-blue); box-shadow: 0 0 0 2px var(--surface) inset;
    }
    .picker-create-actions { display: flex; gap: 0.5rem; align-items: center; }
    .picker-create-save {
      flex: 1; padding: 0.55rem 0.75rem;
      background: var(--ink-blue); color: var(--parchment); border: 0; border-radius: 9px;
      font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .picker-create-save:hover { background: #1a2c40; }
    .picker-create-cancel {
      padding: 0.55rem 0.6rem; background: none; border: 0;
      font: inherit; font-size: var(--t-sm); color: var(--ink-soft); cursor: pointer;
    }
    .picker-success-flash {
      margin: 0.5rem 0.65rem; padding: 0.5rem 0.75rem;
      background: var(--success-bg); border-radius: 8px;
      font-size: var(--t-sm); color: var(--success-ink); font-weight: 600;
      display: flex; align-items: center; gap: 0.35rem;
    }

    /* ---- Category Manager (DS — chrome via .cm-*) ---- */
    .cat-mgr-overlay { z-index: 1310; }
    .cat-mgr-row {
      display: flex; align-items: center; gap: 0.65rem;
      padding: 0.6rem 0.65rem; border-radius: 9px;
    }
    .cat-mgr-row:hover { background: var(--mist); }
    .cat-mgr-dot  { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
    .cat-mgr-name { flex: 1; min-width: 0; font-size: var(--t-sm); font-weight: 500; color: var(--ink-blue); }
    .cat-mgr-count { font-size: var(--t-2xs); color: var(--ink-faint); flex-shrink: 0; }
    .cat-mgr-row.is-system .cat-mgr-name { color: var(--ink-faint); }
    /* shared add/edit form area */
    .cat-mgr-form-area { flex-shrink: 0; border-top: 1px solid var(--divider); }
    .cat-mgr-form-footer { display: flex; align-items: center; gap: 0.6rem; }

    /* ===== responsive: bottom sheet on mobile ===== */
    @media (max-width: 768px) {
      .cm-overlay { align-items: flex-end; padding: 0; }
      .cm-card {
        width: 100%; max-width: 100%; border-radius: 18px 18px 0 0;
        max-height: 88vh; animation: slideUp 0.2s ease;
        padding-bottom: env(safe-area-inset-bottom, 0);
      }
      .cm-handle {
        display: block; width: 36px; height: 4px; border-radius: 2px;
        background: var(--ink-200); margin: 0.6rem auto 0.1rem;
      }
      .cm-hd { padding-top: 0.6rem; }
      /* header "+ Add" buttons may go full-width on the sheet */
      .cm-add { font-size: var(--t-xs); }
    }

    /* ---- Quick-assign chips (Inbox rows) ---- */
    .qa-strip {
      display: flex; gap: 0.3rem; margin-top: 0.375rem; flex-wrap: wrap; align-items: center;
    }
    .qa-chip {
      display: inline-flex; align-items: center;
      padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.68rem;
      font-weight: 600; cursor: pointer; border: 1.5px solid transparent;
      white-space: nowrap; transition: opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .qa-chip:active { opacity: 0.7; }
    .qa-chip-rule { background: #ecfdf5; border-color: #10b981; color: #065f46; }
    .qa-chip-recent { background: var(--blue-lt); border-color: #93c5fd; color: #1e40af; }
    .qa-chip-more {
      background: var(--white); border-color: var(--gray-300); color: var(--gray-500);
      font-weight: 500; font-style: italic;
    }

    /* ---- Inbox banner card (Dashboard) ---- */
    .inbox-banner-card {
      display: none; background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
      border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
      cursor: pointer; transition: opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .inbox-banner-card:active { opacity: 0.85; }
    .inbox-banner-card.visible { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
    .inbox-banner-left { flex: 1; min-width: 0; }
    .inbox-banner-title {
      font-size: 0.9rem; font-weight: 700; color: var(--white); margin-bottom: 0.15rem;
    }
    .inbox-banner-sub { font-size: 0.78rem; color: rgba(255,255,255,0.75); }
    .inbox-banner-arrow {
      font-size: 1.25rem; color: rgba(255,255,255,0.85); flex-shrink: 0;
    }

    /* ---- Inbox nav badge ---- */
    .inbox-nav-badge {
      display: inline-block; background: var(--red); color: var(--white);
      border-radius: 10px; padding: 0 0.35rem; font-size: 0.62rem;
      font-weight: 700; line-height: 1.55; margin-left: 0.2rem; vertical-align: middle;
    }

    /* ---- Inbox transaction rows ---- */
    .inbox-tx-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 0.75rem; padding: 0.875rem 0.5rem;
      border-bottom: 1px solid var(--gray-100);
      cursor: pointer; border-radius: 8px; transition: background 0.1s;
      margin: 0 -0.5rem;
    }
    .inbox-tx-row:active { background: var(--gray-100); }
    .inbox-tx-row:last-child { border-bottom: none; }
    .inbox-tap-hint { font-size: 0.68rem; color: var(--blue); margin-top: 0.2rem; font-weight: 500; }
    .inbox-memo-row { margin-top: 0.45rem; display: flex; align-items: center; gap: 0.4rem; }
    .inbox-memo-input { flex: 1; font-size: 0.78rem; border: 1.5px solid var(--gray-200);
      border-radius: 6px; padding: 0.25rem 0.5rem; font-family: inherit;
      background: var(--gray-50); color: var(--gray-900); outline: none;
      min-width: 0; }
    .inbox-memo-input:focus { border-color: var(--blue); background: var(--white); }
    .inbox-memo-label { font-size: 0.68rem; color: var(--gray-400); white-space: nowrap; }

    /* ---- Tappable category badge (transactions tab) ---- */
    .tx-cat-btn {
      display: inline-flex; align-items: center;
      margin-top: 0.2rem; font-size: 0.7rem; color: var(--white);
      background: var(--gray-400); border-radius: 4px;
      padding: 0.1rem 0.4rem 0.1rem 0.3rem; font-weight: 500;
      border: none; cursor: pointer; gap: 0.2rem; transition: opacity 0.15s;
    }
    .tx-cat-btn:active { opacity: 0.7; }
    .tx-cat-btn.uncategorised { background: #f59e0b; }

    /* ---- Toast ---- */
    .toast {
      position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
      background: var(--gray-900); color: var(--white);
      padding: 0.6rem 1.25rem; border-radius: 20px;
      font-size: 0.825rem; font-weight: 500; z-index: 200; white-space: nowrap;
      animation: toastIn 0.2s ease; pointer-events: none;
    }
    @keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(8px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }

    /* ---- Search bar ---- */
    .search-bar {
      width: 100%; padding: 0.55rem 0.875rem;
      border: 1.5px solid var(--gray-200); border-radius: 8px;
      font-size: 0.875rem; color: var(--gray-900); background: var(--white);
      margin-bottom: 0.875rem; -webkit-appearance: none;
    }
    .search-bar:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,78,216,0.1); }

    /* ---- Inbox mode toggle ---- */
    .inbox-toggle { display:flex; gap:0; border:1.5px solid var(--gray-200);
      border-radius:8px; overflow:hidden; margin-bottom:0.75rem; }
    .inbox-toggle-btn { flex:1; padding:0.4rem 0.5rem; font-size:0.78rem;
      background:var(--white); border:none; cursor:pointer; color:var(--gray-500);
      font-family:inherit; transition:background .1s,color .1s; }
    .inbox-toggle-btn.active { background:var(--blue); color:var(--white); font-weight:600; }
    .inbox-toggle-btn:first-child { border-right:1px solid var(--gray-200); }

    /* ---- Bulk apply prompt ---- */
    .bulk-prompt { position:fixed; bottom:calc(env(safe-area-inset-bottom) + 64px); left:50%;
      transform:translateX(-50%); width:calc(100% - 2rem); max-width:480px;
      background:var(--gray-900); color:var(--white); border-radius:12px;
      padding:0.75rem 1rem; display:flex; align-items:center; gap:0.75rem;
      box-shadow:0 4px 20px rgba(0,0,0,0.25); z-index:200;
      animation:slideUp 0.2s ease; }
    .bulk-prompt-text { flex:1; font-size:0.8rem; line-height:1.4; }
    .bulk-prompt-text strong { display:block; }
    .bulk-prompt-actions { display:flex; gap:0.4rem; flex-shrink:0; }
    .bulk-yes { background:var(--blue); color:var(--white); border:none;
      border-radius:7px; padding:0.4rem 0.75rem; font-size:0.8rem;
      cursor:pointer; font-family:inherit; font-weight:600; }
    .bulk-no  { background:rgba(255,255,255,0.15); color:var(--white); border:none;
      border-radius:7px; padding:0.4rem 0.75rem; font-size:0.8rem;
      cursor:pointer; font-family:inherit; }

    /* ---- Empty inbox ---- */
    .inbox-empty { text-align: center; padding: 3rem 1rem; }
    .inbox-empty .empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
    .inbox-empty strong { display: block; font-size: 1rem; color: var(--gray-700); font-weight: 600; margin-bottom: 0.25rem; }
    .inbox-empty p { color: var(--gray-400); font-size: 0.875rem; }

    /* ---- Flag toggle buttons (B / F on tx rows) ---- */
    .flag-btns { display: flex; gap: 0.3rem; margin-top: 0.35rem; justify-content: flex-end; }
    .flag-btn {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
      padding: 0.15rem 0.45rem; border-radius: 5px;
      border: 1.5px solid var(--gray-200);
      background: var(--white); color: var(--gray-400);
      cursor: pointer; line-height: 1.5;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
      -webkit-tap-highlight-color: transparent;
    }
    .flag-btn:active { opacity: 0.7; }
    .flag-btn.active-b { border-color: #d97706; background: #fef3c7; color: #92400e; }
    .flag-btn.active-f { border-color: #7c3aed; background: #ede9fe; color: #5b21b6; }

    /* ---- Read-only viewer (W14 Slice F2): hide write affordances ----
       Set on <body> when the logged-in member's access = 'read'. Belt-and-braces
       on top of the F1 RLS (which already rejects their writes server-side):
       don't show controls that would only error. Covers the prominent create/
       edit/select controls in the read-visible modules + everything tagged
       data-write (sync, B/F flags, batch actions, select checkbox). */
    body.is-readonly-viewer [data-write],
    body.is-readonly-viewer #tx-dt-actionbar,
    body.is-readonly-viewer .tx-mob-action-bar,
    body.is-readonly-viewer #wrt-fab,
    body.is-readonly-viewer .invs-add-btn,
    /* CR5 — a lapsed subscription locks the household to read-only too (same infra).
       Note: Plan & billing controls live inside Settings and aren't [data-write],
       so the resubscribe path stays reachable. */
    body.is-subscription-locked [data-write],
    body.is-subscription-locked #tx-dt-actionbar,
    body.is-subscription-locked .tx-mob-action-bar,
    body.is-subscription-locked #wrt-fab,
    body.is-subscription-locked .invs-add-btn { display: none !important; }

    /* Read-only chip in the nav footer (shown beside the member's name) */
    .ro-chip { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem; font-size: 0.6rem; font-weight: 700;
               letter-spacing: 0.04em; text-transform: uppercase; color: var(--copper-200); }
    .ro-chip .ic { font-size: 0.8rem; }

    /* Member modal — "Areas this member can see" toggle list (Slice F2-B) */
    .mod-list { display: flex; flex-direction: column; border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; }
    .mod-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--mist); }
    .mod-row:last-child { border-bottom: 0; }
    .mod-row > .ic { color: var(--slate); font-size: 1.05rem; }
    .mod-row .lbl { font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); }
    .mod-row .switch, .mod-row .mod-lock { margin-left: auto; }
    .mod-lock { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--t-2xs); color: var(--ink-faint); }
    .mod-lock .ic { font-size: 0.9rem; }
    .mod-cap { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.4rem; line-height: 1.5; }

    /* Missing-receipt chip on flagged tx rows */
    .receipt-needed {
      font-size: 0.65rem; font-weight: 600;
      color: #991b1b; background: #fee2e2;
      padding: 0.1rem 0.35rem; border-radius: 4px;
      margin-top: 0.25rem; display: inline-block;
    }

    /* ---- Outstanding-receipts counter in header ---- */
    .receipts-counter {
      font-size: 0.72rem; font-weight: 700;
      background: #fee2e2; color: #991b1b;
      padding: 0.2rem 0.55rem; border-radius: 20px;
      display: none; align-items: center; gap: 0.2rem;
      white-space: nowrap;
    }
    .receipts-counter.visible { display: inline-flex; }

    /* ---- Reports tab ---- */
    .reports-grid { display: flex; flex-direction: column; gap: 1.25rem; }
    .report-card {
      background: var(--white); border-radius: var(--radius);
      border: 1px solid var(--gray-200); padding: 1.25rem 1rem;
    }
    .report-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.2rem; }
    .report-card .report-subtitle { font-size: 0.78rem; color: var(--gray-400); margin: 0 0 1rem; }
    .report-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
    .report-controls select {
      flex: 1; min-width: 160px; padding: 0.45rem 0.6rem;
      border: 1px solid var(--gray-300); border-radius: 8px;
      font-size: 0.85rem; background: var(--white); color: var(--gray-600);
    }
    .report-btn-group { display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .report-generate-btn {
      padding: 0.45rem 1rem; border-radius: 8px; border: none;
      background: var(--blue); color: #fff; font-size: 0.85rem;
      font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .report-generate-btn--attach {
      background: var(--white); color: var(--blue);
      border: 1.5px solid var(--blue) !important;
    }
    .report-generate-btn--attach:hover { background: var(--blue-lt); }
    .report-generate-btn:disabled { opacity: 0.5; cursor: default; }
    .report-note {
      font-size: 0.75rem; color: var(--gray-400); margin: 0.75rem 0 0; line-height: 1.5;
    }
    .report-note code {
      font-family: monospace; background: var(--gray-100);
      padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.72rem;
    }
    .report-tx-badge {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-size: 0.75rem; font-weight: 600;
      border-radius: 20px; padding: 0.2rem 0.65rem;
      margin: 0.75rem 0 0.5rem;
    }
    .report-tx-badge.ready  { background: #d1fae5; color: #065f46; }
    .report-tx-badge.partial { background: #fef3c7; color: #92400e; }
    .report-tx-badge.empty  { background: var(--gray-100); color: var(--gray-500); }
    .report-prepare-btn {
      width: 100%; padding: 0.5rem; border-radius: 8px;
      border: 1.5px solid var(--gray-300); background: var(--gray-50);
      color: var(--gray-700); font-size: 0.83rem; font-weight: 600;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    }
    .report-prepare-btn:hover { background: var(--gray-100); }

    /* ---- Report — Prepare descriptions overlay ---- */
    .rprep-overlay {
      display: none; position: fixed; inset: 0;
      background: var(--white); z-index: 150; flex-direction: column;
    }
    .rprep-overlay.open { display: flex; }
    .rprep-topbar {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-200);
      background: var(--white); flex-shrink: 0;
    }
    .rprep-back {
      font-size: 0.85rem; color: var(--blue); background: none;
      border: none; cursor: pointer; padding: 0.25rem 0; font-weight: 600;
    }
    .rprep-title { font-size: 0.95rem; font-weight: 700; flex: 1; }
    .rprep-gen-btn {
      padding: 0.45rem 0.875rem; background: var(--blue); color: white;
      border: none; border-radius: 8px; font-size: 0.82rem;
      font-weight: 700; cursor: pointer; white-space: nowrap;
    }
    .rprep-gen-btn--attach {
      background: var(--white); color: var(--blue);
      border: 1.5px solid var(--blue) !important;
    }
    .rprep-gen-btn--attach:hover { background: var(--blue-lt); }
    .rprep-gen-btn:disabled { opacity: 0.5; cursor: default; }
    .rprep-body { flex: 1; overflow-y: auto; padding: 0.875rem 1rem; }
    .rprep-hint {
      font-size: 0.78rem; color: var(--gray-500); line-height: 1.5;
      background: #f0f9ff; border: 1px solid #bae6fd;
      border-radius: 8px; padding: 0.6rem 0.75rem; margin-bottom: 0.875rem;
    }
    .rprep-total-bar {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 0.75rem; background: var(--gray-100);
      border-radius: 8px; margin-bottom: 0.75rem;
      font-size: 0.82rem; color: var(--gray-500);
    }
    .rprep-total-bar strong { color: var(--gray-900); font-size: 0.9rem; }
    .rprep-tx-row {
      border: 1px solid var(--gray-200); border-radius: 10px;
      padding: 0.75rem; margin-bottom: 0.625rem; background: var(--white);
    }
    .rprep-tx-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,78,216,0.08); }
    .rprep-meta { font-size: 0.73rem; color: var(--gray-400); margin-bottom: 0.2rem; }
    .rprep-bank { font-size: 0.8rem; color: var(--gray-400); margin-bottom: 0.5rem; font-style: italic; }
    .rprep-bank em { font-style: normal; font-size: 0.7rem; color: var(--gray-400); margin-right: 0.25rem; }
    .rprep-amount { float: right; font-size: 0.85rem; font-weight: 700; color: var(--red); margin-top: -1.3rem; }
    .rprep-desc-label {
      font-size: 0.7rem; font-weight: 600; color: var(--gray-500);
      text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;
    }
    .rprep-desc-input {
      width: 100%; padding: 0.45rem 0.6rem;
      border: 1.5px solid var(--gray-200); border-radius: 7px;
      font-size: 0.875rem; font-family: inherit; color: var(--gray-900);
      background: var(--gray-50); resize: none; line-height: 1.4;
      transition: border-color 0.15s;
    }
    .rprep-desc-input:focus { outline: none; border-color: var(--blue); background: var(--white); }
    .rprep-desc-input.has-custom { border-color: var(--purple); background: #faf5ff; }

    /* (The bulk Flag action sheet was removed in CR4 Slice 2b — dead UI.) */

    /* ---- Receipt chip + attach button (neutral outlined, no coloured fill) ---- */
    .receipt-wrap { display: inline-block; position: relative; }
    .receipt-chip-btn {
      font-size: 0.72rem; font-weight: 600;
      padding: 0.2rem 0.55rem; border-radius: 6px;
      border: 1px solid var(--border-strong);
      background: transparent; color: var(--ink-soft);
      cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
      white-space: nowrap; line-height: 1.35;
      -webkit-tap-highlight-color: transparent;
    }
    .receipt-chip-btn:hover { border-color: var(--copper); color: var(--copper-700); }
    .receipt-attach-btn {
      font-size: 0.72rem; font-weight: 600;
      padding: 0.2rem 0.55rem; border-radius: 6px;
      border: 1px solid var(--border-strong);
      background: transparent; color: var(--ink-mute);
      cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
      white-space: nowrap; line-height: 1.35;
      -webkit-tap-highlight-color: transparent;
    }
    .receipt-attach-btn:hover { border-color: var(--copper); color: var(--copper-700); }
    .receipt-attach-btn.uploading { opacity: 0.6; cursor: not-allowed; }
    .receipt-view-link {
      font-size: 0.72rem; font-weight: 600;
      padding: 0.2rem 0.55rem; border-radius: 6px;
      border: 1px solid var(--border-strong);
      background: transparent; color: var(--ink-soft);
      display: inline-flex; align-items: center; gap: 0.25rem;
      white-space: nowrap; line-height: 1.35; text-decoration: none;
    }
    /* ---- Receipt floating action menu ---- */
    .receipt-menu {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      z-index: 200;
      min-width: 220px;
      border-radius: 10px;
      border: 1px solid var(--divider);
      overflow: hidden;
      background: var(--surface);
      box-shadow: 0 8px 28px rgba(15,29,45,0.14), 0 2px 8px rgba(15,29,45,0.08);
    }
    .receipt-menu-item {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 0.6rem 0.75rem;
      background: var(--white); border: none;
      border-bottom: 0.5px solid var(--gray-100);
      cursor: pointer; text-align: left;
      -webkit-tap-highlight-color: transparent;
    }
    .receipt-menu-item:last-child { border-bottom: none; }
    .receipt-menu-item:active { background: var(--gray-50); }
    .receipt-menu-item--danger .rmi-title { color: var(--red); }
    .rmi-icon {
      width: 26px; height: 26px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
    }
    .rmi-icon--view    { background: #dbeafe; color: #1d4ed8; }
    .rmi-icon--replace { background: var(--gray-100); color: var(--gray-700); }
    .rmi-icon--remove  { background: #fee2e2; color: var(--red); }
    .rmi-body { display: flex; flex-direction: column; gap: 1px; }
    .rmi-title { font-size: 0.8rem; font-weight: 600; color: var(--gray-900); }
    .rmi-sub   { font-size: 0.7rem; color: var(--gray-500); }
    .receipt-confirm {
      padding: 0.65rem 0.75rem;
      background: var(--white);
    }
    .receipt-confirm-msg {
      font-size: 0.8rem; font-weight: 600; color: var(--gray-900);
      margin-bottom: 0.5rem;
    }
    .receipt-confirm-btns { display: flex; gap: 0.4rem; }
    .receipt-confirm-btns button {
      flex: 1; padding: 0.35rem 0; border-radius: 7px;
      font-size: 0.78rem; font-weight: 600; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .rcb-cancel { background: var(--gray-100); color: var(--gray-700); border: none; }
    .rcb-remove { background: #fee2e2; color: var(--red); border: none; }

    /* ---- Responsive ---- */
    @media (min-width: 600px) {
      .tab-content { max-width: 640px; margin: 0 auto; }
      .app-header  { padding-left: 1.5rem; padding-right: 1.5rem; }
      .balance-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
    }

    /* ---- Pull-to-refresh indicator ---- */
    .ptr-indicator {
      position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-60px);
      z-index: 30; background: var(--white);
      border-radius: 50%; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.18);
      transition: transform 0.2s ease;
      pointer-events: none;
    }
    .ptr-indicator.ptr-pulling { transform: translateX(-50%) translateY(8px); }
    .ptr-indicator.ptr-loading { transform: translateX(-50%) translateY(8px); }
    .ptr-indicator .ptr-spinner {
      width: 20px; height: 20px;
      border: 2.5px solid var(--gray-200); border-top-color: var(--blue);
      border-radius: 50%;
    }
    .ptr-indicator.ptr-loading .ptr-spinner { animation: spin 0.65s linear infinite; }
    .ptr-indicator .ptr-arrow {
      font-size: 1.1rem; color: var(--blue);
      transition: transform 0.2s ease;
    }
    .ptr-indicator.ptr-ready .ptr-arrow { transform: rotate(180deg); }

    /* ---- Demo banner ---- */
    .demo-banner {
      background: #f59e0b; color: #451a03;
      font-size: 0.78rem; font-weight: 700;
      text-align: center; padding: 0.4rem 1rem;
      letter-spacing: 0.03em; position: sticky;
      top: 0; z-index: 25;
    }
    .demo-banner a {
      color: #451a03; text-decoration: underline; margin-left: 0.75rem;
    }

    /* ---- Hamburger button (mobile only) ---- */
    .hamburger-btn {
      display: none;
      background: rgba(255,255,255,0.15); color: var(--white);
      border: none; border-radius: 6px; width: 34px; height: 34px;
      font-size: 1.15rem; cursor: pointer; flex-shrink: 0;
      align-items: center; justify-content: center;
      -webkit-tap-highlight-color: transparent; transition: background 0.15s;
    }
    .hamburger-btn:hover { background: rgba(255,255,255,0.28); }

    /* ---- Slide-in drawer ---- */
    .drawer-overlay {
      display: none; position: fixed; inset: 0; z-index: 50;
      background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
    }
    .drawer-overlay.open { display: block; }
    /* Mobile nav drawer — dark Ink-Blue DS nav, mirrors the desktop sidebar (M37) */
    .drawer {
      position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
      background: var(--ink-blue); color: var(--parchment); z-index: 51;
      transform: translateX(-100%); transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
      display: flex; flex-direction: column;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      box-shadow: 4px 0 24px rgba(0,0,0,0.28);
    }
    .drawer.open { transform: translateX(0); }
    .drawer-head {
      height: 60px; padding: 0 0.9rem; flex-shrink: 0;
      border-bottom: 1px solid rgba(247,244,238,0.08);
      display: flex; align-items: center; gap: 0.65rem;
    }
    .drawer-logo {
      width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .drawer-logo img { width: 100%; height: 100%; display: block; }
    .drawer-app-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; flex: 1; color: #fff; }
    .drawer-close-btn {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      background: rgba(247,244,238,0.08); border: none; color: rgba(247,244,238,0.6);
      display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem;
    }
    .drawer-close-btn:active { background: rgba(247,244,238,0.16); color: #fff; }
    .drawer-nav { flex: 1; overflow-y: auto; padding: 0.4rem 0.55rem; scrollbar-width: none; }
    .drawer-nav::-webkit-scrollbar { width: 0; }
    .drawer-group {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(247,244,238,0.34); padding: 0.85rem 0.6rem 0.35rem;
    }
    .drawer-nav-item {
      display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.65rem;
      border-radius: 11px; color: rgba(247,244,238,0.66); cursor: pointer;
      font-size: 0.9rem; font-weight: 500; position: relative; min-height: 44px;
      border: none; background: none; width: 100%; text-align: left; font-family: inherit;
      -webkit-tap-highlight-color: transparent; transition: background 0.12s, color 0.12s;
    }
    .drawer-nav-item:active { background: rgba(247,244,238,0.08); color: #fff; }
    .drawer-nav-item.active { background: rgba(247,244,238,0.10); color: #fff; font-weight: 700; }
    .drawer-nav-item.active .drawer-nav-icon { color: var(--copper-300); }
    .drawer-nav-item.active::before {
      content: ''; position: absolute; left: -0.55rem; top: 50%; transform: translateY(-50%);
      width: 3px; height: 24px; background: var(--copper); border-radius: 0 3px 3px 0;
    }
    .drawer-nav-icon { font-size: 1.15rem; width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .drawer-nav-label { flex: 1; white-space: nowrap; overflow: hidden; }
    .drawer-badge {
      min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; flex-shrink: 0;
      font-size: 0.6875rem; font-weight: 700; background: var(--copper); color: #fff;
      display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    }
    .drawer-footer {
      padding: 0.65rem 0.8rem; flex-shrink: 0;
      border-top: 1px solid rgba(247,244,238,0.08);
      display: flex; align-items: center; gap: 0.6rem;
    }
    .drawer-avatar {
      width: 32px; height: 32px; border-radius: 50%; background: rgba(247,244,238,0.16);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; color: #fff;
    }
    .drawer-username { flex: 1; font-size: 0.8rem; color: rgba(247,244,238,0.6); white-space: nowrap; overflow: hidden; }
    .drawer-util-btn {
      width: 32px; height: 32px; border-radius: 8px; background: none; border: none;
      color: rgba(247,244,238,0.6); cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .drawer-util-btn:active { background: rgba(247,244,238,0.12); color: #fff; }

    /* ---- Mobile layout (≤768px) ---- */
    @media (max-width: 768px) {
      /* Header becomes 2-row column */
      .app-header {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        /* Safe area for Dynamic Island / notch */
        padding-top: env(safe-area-inset-top, 0px);
      }
      .header-row1 {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.625rem 1rem;
      }
      .header-title { flex: 1; }

      /* Hide desktop-only header elements */
      .header-right { display: none !important; }

      /* Show hamburger */
      .hamburger-btn { display: flex; }

      /* Hide horizontal nav tabs — replaced by drawer */
      .nav-tabs { display: none; }

    }

    /* ---- Desktop — keep everything as-is above 768px ---- */
    @media (min-width: 769px) {
      .hamburger-btn { display: none; }
      .header-row1 { display: contents; } /* let children flow into flex row */
    }

/* =====================================================
   DESKTOP SIDEBAR — W6 implementation
   ===================================================== */

/* ---- Desktop sidebar (≥769px) ---- */
#dt-sidebar {
  display: none;
  width: 232px; flex-shrink: 0;
  background: var(--ink-blue);
  flex-direction: column; color: var(--parchment);
  transition: width 0.22s cubic-bezier(0.33,0,0.2,1);
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 30; overflow: hidden;
}

.dt-sb-brand {
  position: relative;
  display: flex; align-items: center; gap: 0.65rem;
  height: 60px; padding: 0 0.9rem;
  border-bottom: 1px solid rgba(247,244,238,0.08);
  flex-shrink: 0; position: relative;
}
.dt-sb-logo {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.dt-sb-logo img { width: 100%; height: 100%; display: block; }
.dt-sb-name {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; flex: 1; color: #fff;
}
.dt-sb-collapse-btn {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(247,244,238,0.08); border: none;
  color: rgba(247,244,238,0.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem;
}
.dt-sb-collapse-btn:hover { background: rgba(247,244,238,0.16); color: #fff; }

/* Expand hint tooltip (shown when hovering collapsed brand area) */
.dt-sb-expand-hint {
  position: absolute; left: 62px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.6875rem; font-weight: 600;
  color: var(--parchment); background: var(--ink-700);
  border: 1px solid rgba(247,244,238,0.14); border-radius: 7px;
  padding: 0.28rem 0.6rem; opacity: 0; pointer-events: none;
  transition: opacity 0.15s; box-shadow: 0 4px 14px rgba(10,20,32,.35);
  z-index: 10;
}
/* Hover state on collapsed brand: swap logo for expand button + show hint */
body.nav-collapsed #dt-sidebar.sb-brand-hovered .dt-sb-logo { display: none; }
body.nav-collapsed #dt-sidebar.sb-brand-hovered .dt-sb-collapse-btn { display: flex !important; }
body.nav-collapsed #dt-sidebar.sb-brand-hovered .dt-sb-expand-hint { opacity: 1; }

.dt-sb-nav {
  flex: 1; overflow-y: auto; padding: 0.65rem 0.55rem; scrollbar-width: none;
}
.dt-sb-nav::-webkit-scrollbar { width: 0; }

.dt-sb-group {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(247,244,238,0.34); padding: 0.9rem 0.6rem 0.35rem;
}

/* Group divider — kept for JS compatibility but hidden */
.dt-sb-group-divider { display: none; }

.dt-sb-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem;
  border-radius: 11px; color: rgba(247,244,238,0.66); cursor: pointer;
  font-size: 0.8125rem; font-weight: 500; position: relative;
  transition: background 0.12s, color 0.12s; min-height: 40px;
  border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.dt-sb-icon { font-size: 1.15rem; flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
.dt-sb-label { flex: 1; white-space: nowrap; overflow: hidden; }
.dt-sb-item:hover { background: rgba(247,244,238,0.08); color: #fff; }
.dt-sb-item.active { background: rgba(247,244,238,0.10); color: #fff; font-weight: 700; }
.dt-sb-item.active .dt-sb-icon { color: var(--copper-300); }
.dt-sb-item.active::before {
  content: ''; position: absolute; left: -0.55rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; background: var(--copper); border-radius: 0 3px 3px 0;
}

/* Inbox badge on sidebar item — matches the DS .count-badge (ink-blue, blends
   into the dark sidebar so it reads as a count, not a red alert pill). */
.dt-sb-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; background: var(--ink-blue); color: var(--parchment);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* Sidebar footer */
.dt-sb-footer {
  padding: 0.65rem; border-top: 1px solid rgba(247,244,238,0.08);
  display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
}
.dt-sb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(247,244,238,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; color: #fff;
}
.dt-sb-username { flex: 1; font-size: 0.75rem; color: rgba(247,244,238,0.6); white-space: nowrap; overflow: hidden; }
.dt-sb-util-btn {
  width: 30px; height: 30px; border-radius: 8px; background: none; border: none;
  color: rgba(247,244,238,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-family: inherit;
}
.dt-sb-util-btn:hover { background: rgba(247,244,238,0.12); color: #fff; }

/* CR5 — clickable identity + account menu in the sidebar footer */
.dt-sb-footer { position: relative; }
.dt-sb-id {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem;
  background: none; border: none; cursor: pointer; padding: 0.35rem 0.4rem;
  border-radius: 10px; font-family: inherit; text-align: left;
}
.dt-sb-id:hover, .dt-sb-id.open { background: rgba(247,244,238,0.10); }
.dt-sb-id .dt-sb-username { flex: 1; }
.dt-sb-id-caret { color: rgba(247,244,238,0.4); font-size: 0.7rem; flex-shrink: 0; }
body.nav-collapsed #dt-sidebar .dt-sb-id-caret { display: none; }
.dt-sb-acct-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0.5rem; right: 0.5rem; z-index: 80;
  background: var(--surface, #fff); border: 1px solid var(--divider);
  border-radius: var(--r-lg); box-shadow: var(--sh-3, 0 24px 60px rgba(0,0,0,.3));
  overflow: hidden; padding: 0.25rem;
}
.acct-mi {
  width: 100%; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.65rem; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-blue);
  text-align: left; border-radius: var(--r-md);
}
.acct-mi:hover { background: var(--parchment); }
.acct-mi .ic { color: var(--slate); font-size: 1.05rem; flex-shrink: 0; }
.acct-mi-l { display: flex; flex-direction: column; line-height: 1.25; }
.acct-mi-l small { font-size: 0.7rem; font-weight: 500; color: var(--slate); margin-top: 0.05rem; }
.acct-mi.sep { border-top: 1px solid var(--divider); margin-top: 0.15rem; padding-top: 0.7rem; }

/* CR5 — Plan & billing section */
.bill-wrap { display: flex; flex-direction: column; gap: 1.1rem; max-width: 760px; }
.bill-card { background: var(--surface, #fff); border: 1px solid var(--divider); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 1.25rem 1.35rem; }
.bill-mini-h { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.7rem; }
.bill-divider { border-top: 1px solid var(--divider); margin: 1.1rem 0; }

.bill-banner { display: flex; align-items: flex-start; gap: 0.8rem; background: var(--surface, #fff); border: 1px solid var(--divider); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 1rem 1.2rem; }
.bill-banner > .ic { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; color: var(--slate); }
.bill-banner-b { flex: 1; }
.bill-banner-t { font-size: 0.92rem; font-weight: 800; margin-bottom: 0.15rem; }
.bill-banner-s { font-size: 0.81rem; color: var(--slate); line-height: 1.5; }
.bill-banner-a { align-self: center; flex-shrink: 0; }
.bill-banner.trial > .ic, .bill-banner.trial .bill-banner-t { color: var(--copper); }
.bill-banner.due   > .ic, .bill-banner.due   .bill-banner-t { color: var(--error); }

.bill-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bill-plan-name { font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.bill-plan-sub { font-size: 0.84rem; color: var(--slate); margin-top: 0.3rem; }
.bill-plan-meta { font-size: 0.8rem; color: var(--slate); margin-top: 0.55rem; line-height: 1.7; }
.bill-plan-meta .ic { font-size: 0.9rem; vertical-align: -0.12em; color: var(--ink-faint); margin-right: 0.3rem; }
.bill-plan-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }

.bill-cyc { display: inline-flex; border: 1px solid var(--divider); border-radius: 999px; overflow: hidden; font-size: 0.74rem; font-weight: 700; margin-bottom: 0.9rem; }
.bill-cyc button { padding: 0.35rem 0.85rem; color: var(--slate); background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; }
.bill-cyc button.on { background: var(--ink-blue); color: var(--parchment); }

.bill-plan-grid { display: flex; gap: 1rem; flex-wrap: wrap; }
.bill-plan-card { flex: 1 1 230px; border: 1px solid var(--divider); border-radius: var(--r-md); padding: 1rem; }
.bill-plan-card.feat { border-color: var(--copper); }
.bill-plan-h { font-weight: 800; display: flex; align-items: center; gap: 0.4rem; }
.bill-plan-price { font-size: 0.8rem; color: var(--slate); margin: 0.25rem 0 0.15rem; }
.bill-plan-price b { color: var(--ink-blue); font-size: 1.05rem; }
.bill-plan-note { font-size: 0.78rem; color: var(--slate); margin-bottom: 0.85rem; }

.bill-incl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1.2rem; }
.bill-incl li { font-size: 0.82rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.5rem; }
.bill-incl li .ic { color: var(--success, #2E7D5B); font-size: 0.95rem; flex-shrink: 0; }
.bill-incl li.locked { color: var(--ink-faint); }
.bill-incl li.locked .ic { color: var(--ink-faint); }

.bill-upsell { background: var(--surface, #fff); border: 1px solid var(--copper); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 1.2rem 1.35rem; }
.bill-upsell h3 { font-size: 1rem; font-weight: 800; margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.45rem; }
.bill-upsell h3 .ic { color: var(--copper); }
.bill-upsell p { font-size: 0.82rem; color: var(--slate); margin: 0 0 0.85rem; line-height: 1.5; max-width: 54ch; }

.bill-rows { padding: 0.35rem 1.35rem; }
.bill-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; background: none; border: none; border-top: 1px solid var(--divider); cursor: pointer; font: inherit; text-align: left; }
.bill-rows .bill-row:first-child { border-top: none; }
.bill-row-l { display: flex; align-items: center; gap: 0.75rem; }
.bill-row-l > .ic { color: var(--slate); font-size: 1.1rem; flex-shrink: 0; }
.bill-row-t { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink-blue); }
.bill-row-s { display: block; font-size: 0.78rem; color: var(--slate); margin-top: 0.1rem; }
.bill-row-chev { color: var(--ink-faint); flex-shrink: 0; }
@media (max-width: 768px) { .bill-incl { grid-template-columns: 1fr; } }

/* CR5 — lapsed-subscription banner (fixed bottom bar) */
.billing-lock-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  /* Hidden by default; only shown when the household is genuinely locked
     (applyBillingGate toggles body.is-subscription-locked). A bare display:flex
     here would override the [hidden] attr and leak the banner into the logged-out
     / comp / unloaded states. */
  display: none; align-items: center; gap: 0.75rem;
  padding: 0.7rem 1.1rem; background: var(--ink-blue); color: var(--parchment);
  box-shadow: 0 -6px 24px rgba(0,0,0,.22); font-size: 0.85rem;
}
body.is-subscription-locked .billing-lock-banner { display: flex; }
.billing-lock-banner .ic { color: var(--copper); font-size: 1.1rem; flex-shrink: 0; }
.billing-lock-banner .bl-text { flex: 1; line-height: 1.4; }
.billing-lock-banner .btn { flex-shrink: 0; }
/* Keep the banner inside the content area so it never covers the desktop
   sidebar footer (avatar · help · sign-out). Left edge follows the nav width. */
@media (min-width: 769px) {
  .billing-lock-banner { left: 232px; transition: left 0.22s cubic-bezier(0.33,0,0.2,1); }
  body.nav-collapsed .billing-lock-banner { left: 60px; }
}

/* CR5 — Plus paywall modal (reuses .confirm-overlay backdrop) */
.paywall-box {
  background: var(--surface, #fff); border-radius: var(--r-lg);
  box-shadow: var(--sh-3, 0 24px 60px rgba(0,0,0,.3)); width: 100%; max-width: 430px; overflow: hidden;
}
.paywall-hd { background: var(--ink-blue); color: var(--parchment); padding: 1.3rem 1.4rem; }
.paywall-hd .ic { font-size: 1.5rem; color: var(--copper); }
.paywall-hd h3 { margin: 0.5rem 0 0.25rem; font-size: 1.15rem; font-weight: 800; }
.paywall-hd p { margin: 0; font-size: 0.82rem; color: rgba(247,244,238,0.75); line-height: 1.5; }
.paywall-bd { padding: 1.3rem 1.4rem; }
.paywall-bd .bill-incl { grid-template-columns: 1fr; gap: 0.6rem; }
.paywall-ft { padding: 0 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; }

/* People filter — Option A (W14): a quiet control above the avatar, opens upward.
   Only populated by renderPeopleFilter() in joint mode; empty (zero-height) otherwise. */
.dt-sb-people { position: relative; padding: 0 0.55rem; }
.dt-sb-people:empty { padding: 0; }
.sb-filter {
  margin-top: 0.4rem; width: 100%; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.65rem; border-radius: 11px; border: none; text-align: left;
  background: rgba(247,244,238,0.08); color: var(--parchment);
  cursor: pointer; font-family: inherit; font-size: var(--t-sm); font-weight: 600;
}
.sb-filter:hover { background: rgba(247,244,238,0.14); }
.sb-filter > .ic:first-child { color: var(--copper-300); font-size: 1.05rem; flex-shrink: 0; }
.sb-filter .l { flex: 1; min-width: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-filter .sub { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247,244,238,0.4); }
.sb-filter > .ic:last-child { color: rgba(247,244,238,0.5); flex-shrink: 0; }
.sb-pop2 { position: absolute; left: 0.55rem; right: 0.55rem; bottom: calc(100% + 0.3rem); z-index: 60; display: none; }
.dt-sb-people.open .sb-pop2 { display: block; }
.dt-sb-people .menu-item .od { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Owner monogram (D18): colour-coded initial token reused on balances, tx rows,
   forecast and the people filter. Shared/joint = neutral `users` glyph. */
.mono { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.6rem; flex-shrink: 0; }
.mono.sm { width: 17px; height: 17px; font-size: 0.55rem; }
.mono .ic { font-size: 0.6rem; }
.mono.sm .ic { font-size: 0.55rem; }
.mono-shared { background: var(--slate); }
/* Inline monograms prepended to an account label — align to the text + small gap. */
.dash-bal-row-main .nm .mono,
.tx-r-amt .acct .mono,
.tx-mob-acct-lbl .mono,
.balance-card .acct-name .mono,
.sp-acct .nm .mono,
.fcm-nm .mono,
.fc-item-name .mono,
.tx-acct-name .mono { vertical-align: middle; margin-right: 0.3rem; }
.tx-mob-acct-lbl { display: inline-flex; align-items: center; }
.tx-acct-name { display: inline-flex; align-items: center; }
.fcm-nm .mono, .fc-item-name .mono { margin-right: 0.32rem; }

/* Owner segmented control on add/edit modals (W14 Slice C). Joint mode only —
   the host is emptied in single mode, so :empty collapses it to nothing. */
/* :not(:empty) / :empty (specificity 0,0,2,0) beat .fc-add-row's flex display. */
.owner-field:not(:empty) { display: block; }
.owner-field:empty { display: none; }
.owner-field-lbl { display: block; font-size: 0.625rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.owner-pick { display: flex; gap: 0.4rem; }
.owner-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1.5px solid var(--blue-grey); border-radius: var(--r-md); padding: 0.5rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); cursor: pointer; background: var(--surface); transition: border-color 0.12s, background 0.12s, color 0.12s; }
.owner-opt:hover { border-color: var(--slate); }
.owner-opt.on { border-color: var(--ink-blue); background: var(--ink-blue); color: var(--parchment); }
.owner-opt .od { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.owner-opt .ic { font-size: 0.95rem; }
.owner-opt.on .ic { color: var(--parchment); }

/* ── Settings page (W14, Slice D) ─────────────────────────────
   Own nav slot (System group) with an inner sub-nav = Tools-hub geometry.
   New-tab-checklist rules + parchment background, white cards (DS-correct). */
@media (min-width: 769px) {
  body.tab-is-settings #tab-settings { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
}
.set-layout { display: block; }

/* inner sub-nav (desktop) */
.set-nav { display: none; }
.set-grp { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); padding: 0.9rem 0.7rem 0.35rem; }
.set-item { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.7rem; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.set-item .ic { font-size: 1.05rem; color: var(--slate); flex-shrink: 0; }
.set-item:hover { background: var(--mist); }
.set-item.active { background: var(--mist); color: var(--ink-blue); }
.set-item.active .ic { color: var(--copper); }
.set-item.active::before { content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--copper); }
.set-item.soon { opacity: 0.5; cursor: default; }
.set-item.soon:hover { background: none; }
.set-item .set-soon { margin-left: auto; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--blue-grey); border-radius: 999px; padding: 0.05rem 0.4rem; }

/* main pane */
.set-main { padding: 1.2rem 1.1rem 2.5rem; }
.set-main-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.4rem; }
.set-page-head h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-blue); }
.set-page-head .sub { font-size: var(--t-sm); color: var(--slate); margin-top: 0.15rem; }
.set-sec { display: flex; flex-direction: column; gap: 0.7rem; }

/* ── CR3 Slice A — Data & privacy ─────────────────────────────── */
/* Danger zone: a plain neutral card (same chrome as every Settings card).
   Destructive intent comes from a RED HEADING + alert icon and the red
   btn-danger — never a coloured fill, border, or edge-rule. */
.set-danger-card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 1.2rem 1.3rem; }
.set-danger-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.set-danger-row > div { min-width: 0; }
.set-danger-row h3 { font-size: 0.98rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--error); display: flex; align-items: center; gap: 0.4rem; }
.set-danger-row h3 .ic { color: var(--error); font-size: 1.02rem; flex-shrink: 0; }
.set-danger-row p { font-size: var(--t-sm); color: var(--slate); margin: 0; line-height: 1.5; }
.set-danger-row .btn { flex: 0 0 auto; }
.set-danger-hint { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.85rem 0 0; font-size: var(--t-xs); color: var(--slate); line-height: 1.5; }
.set-danger-hint .ic { color: var(--ink-faint); flex-shrink: 0; margin-top: 0.1rem; }
.set-danger-hint-ct { margin-top: 0.9rem; }
/* Delete-account modal */
.del-acct-warn { font-size: var(--t-sm); color: var(--slate); line-height: 1.55; margin: 0; }
.del-acct-warn strong { color: var(--ink-blue); }
.del-acct-msg { font-size: var(--t-xs); color: var(--error); min-height: 1em; }
#delete-account-sheet .sheet-title { color: var(--error); }
#delete-account-sheet .sheet-title .ic { color: var(--error); }
/* Mobile drill-in settings menu (replaces the old 2-button segment) */
.set-menu-grp { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); padding: 0.9rem 0.25rem 0.3rem; }
.set-menu-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; padding: 0.85rem; background: var(--surface); border: none; border-radius: var(--r-md); font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink-blue); box-shadow: var(--sh-1); cursor: pointer; margin-bottom: 0.35rem; }
.set-menu-row .ic { color: var(--slate); font-size: 1.05rem; flex-shrink: 0; }
.set-menu-row .lbl { flex: 1; }
.set-menu-row .chev { margin-left: auto; color: var(--ink-faint); }
.set-menu-row.soon { opacity: 0.5; box-shadow: none; background: transparent; cursor: default; }
.set-menu-row.soon .set-soon { margin-left: auto; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--blue-grey); border-radius: 999px; padding: 0.05rem 0.4rem; }
.set-back { display: flex; align-items: center; gap: 0.3rem; background: none; border: none; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--copper); cursor: pointer; padding: 0.2rem 0; margin-bottom: 0.4rem; }
.set-back .ic { font-size: 1.1rem; }
@media (max-width: 768px) {
  .set-data .toggle-row { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .set-data .toggle-row .btn { width: 100%; justify-content: center; }
  .set-danger-row { flex-direction: column; align-items: stretch; }
  .set-danger-row .btn { width: 100%; justify-content: center; margin-top: 0.2rem; }
}

/* ── CR3 Slice C — Preferences ────────────────────────────────── */
/* Right-hand control on a preference toggle-row: a select + a live preview line. */
.pref-ctrl { flex: 0 0 auto; min-width: 260px; }
.pref-ctrl select.input { width: 100%; }
.pref-preview { margin: 0.55rem 0 0; font-size: var(--t-sm); color: var(--slate); display: flex; align-items: center; gap: 0.45rem; }
.pref-preview .ic { color: var(--ink-faint); flex-shrink: 0; }
.pref-preview b { color: var(--ink-blue); font-weight: 700; }
@media (max-width: 768px) {
  .pref-ctrl { min-width: 0; }
  .toggle-row:has(.pref-ctrl) { flex-direction: column; align-items: stretch; gap: 0.6rem; }
}

/* Profile & business (CR4) */
.biz-opt { color: var(--ink-faint); font-weight: 500; }
.biz-logo-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.biz-mono { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--ink-blue); color: var(--parchment); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }

/* member rows */
.set-mem { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.9rem; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 0.85rem 1rem; box-shadow: var(--sh-1); }
.set-av-wrap { position: relative; flex-shrink: 0; }
.set-mem-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: var(--t-sm); flex-shrink: 0; position: relative; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.set-av-pen { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 1px solid var(--divider); display: flex; align-items: center; justify-content: center; color: var(--slate); opacity: 0; transition: opacity 0.12s; }
.set-av-pen .ic { font-size: 0.6rem; }
.set-av-wrap:hover .set-av-pen { opacity: 1; }
.set-mem-name { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.set-mem-meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.1rem; }
/* inline colour picker popover on the member badge */
.col-pop { position: absolute; top: calc(100% + 8px); left: -6px; z-index: 60; background: var(--surface); border: 1px solid var(--divider); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,29,45,0.16); padding: 12px 14px; width: 226px; }
.col-pop-hd { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--slate); margin-bottom: 9px; }
.col-pop-row { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.col-sw { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--surface); }
.col-sw.on { border-color: var(--ink-blue); }
.col-pop-note { font-size: 0.68rem; color: var(--ink-faint); margin-top: 10px; line-height: 1.35; }

/* accounts ownership table */
.set-own-card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
/* Owner group header row inside the desktop accounts table (joint mode only). */
.set-acct-grp td { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 0.7rem 0.75rem 0.2rem; background: var(--surface); border: none; }
.set-acct-grp:first-child td { padding-top: 0.45rem; }
/* Owner group label above each mobile accounts card cluster. */
.set-acct-grp-m { padding: 0.85rem 2px 0.3rem; }
.set-acct-grp-m:first-child { padding-top: 0.2rem; }
.set-acct-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
.set-owner-sel { font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.3rem 0.5rem; cursor: pointer; }
.set-owner-sel:focus { outline: none; border-color: var(--ink-blue); }

/* W16 — Accounts: statement-id sub-line + status/action column */
.set-acct-dot + .stmt, .set-acct-card-stmt .stmt { display: block; }
.stmt { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 2px; padding-left: 18px; }
.stmt a { color: var(--copper-600); text-decoration: none; font-weight: 600; }
.stmt.warn { color: var(--warning-ink); }
.stmt .ic { font-size: 0.8rem; vertical-align: -1px; }
.set-acct-action { text-align: right; white-space: nowrap; }
.muted-action { font-size: var(--t-xs); color: var(--ink-faint); display: inline-flex; align-items: center; gap: 0.3rem; }
.muted-action .ic { font-size: 0.9rem; }
/* mobile account cards */
.set-acct-cards { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.set-acct-card { padding: 0.85rem 0.9rem; }
.set-acct-card + .set-acct-card { border-top: 1px solid var(--divider); }
.set-acct-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.set-acct-card-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: var(--t-sm); }
.set-acct-card-stmt { margin-top: 0.45rem; }
.set-acct-card-stmt .stmt { padding-left: 0; }
.set-acct-card-status { margin-top: 0.45rem; }
.set-acct-card .btn-block { margin-top: 0.6rem; }
.set-acct-card-priv { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; }
.set-acct-card-priv .lbl { display: flex; align-items: center; gap: 0.4rem; font-size: var(--t-sm); font-weight: 600; color: var(--n-600); }
.set-acct-card-priv .lbl .ic { width: 15px; height: 15px; }

/* CR3 Slice B — accounts manager: row menu, archived list, form danger line */
.set-acct-kebab-cell { width: 38px; text-align: right; }
.acct-card-actions { display: flex; align-items: center; gap: 0.4rem; }
.acct-menu-wrap { position: relative; display: inline-block; }
.acct-kebab { background: none; border: none; cursor: pointer; color: var(--slate); padding: 0.3rem 0.4rem; border-radius: var(--r-sm); line-height: 1; }
.acct-kebab:hover { background: var(--mist); }
.acct-kebab .ic { font-size: 1.1rem; }
.acct-row-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 0.2rem; width: 210px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); box-shadow: var(--sh-3, 0 18px 44px rgba(0,0,0,.18)); padding: 0.35rem; z-index: 30; }
.acct-row-menu.open { display: block; }
.acct-row-menu button { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-blue); padding: 0.55rem 0.6rem; border-radius: var(--r-sm); cursor: pointer; }
.acct-row-menu button:hover { background: var(--mist); }
.acct-row-menu button .ic { color: var(--slate); font-size: 1rem; }
.acct-row-menu button.danger { color: var(--error); }
.acct-row-menu button.danger .ic { color: var(--error); }
.acct-row-menu .rm-sep { height: 1px; background: var(--divider); margin: 0.3rem 0.2rem; }
.arch-list { display: flex; flex-direction: column; gap: 0.6rem; }
.arch-row { display: flex; align-items: center; gap: 0.8rem; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 0.7rem 0.9rem; box-shadow: var(--sh-1); }
.arch-row .arch-nm { flex: 1; font-weight: 600; color: var(--ink-soft); min-width: 0; }
.arch-row .arch-mut { font-size: var(--t-xs); color: var(--ink-faint); }
.arch-row .arch-acts { display: flex; align-items: center; gap: 0.5rem; }
.del-link { background: none; border: none; font: inherit; font-size: var(--t-sm); font-weight: 700; color: var(--error); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.mk-danger-line { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border-top: 1px solid var(--divider); margin-top: 0.2rem; padding-top: 0.9rem; }
.mk-danger-line .t { font-size: var(--t-xs); color: var(--slate); }
.seg-sync button.dis { opacity: 0.45; cursor: default; }
#account-form-sheet .mk-hint { font-size: var(--t-xs); color: var(--slate); line-height: 1.45; }

/* W16 — CSV import overlay (reuses .fc-form-sheet chrome) */
.csv-imp { padding: 1.1rem 1.25rem 1.25rem; }
.csv-imp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.csv-imp-head .h { font-size: var(--t-lg); font-weight: 700; }
.csv-imp-head .s { font-size: var(--t-xs); color: var(--slate); margin-top: 2px; }
.csv-imp-x { background: none; border: none; color: var(--slate); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.2rem; }
.csv-steps { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.9rem; }
.csv-steps .on { color: var(--copper-700); }
.csv-steps .sep { color: var(--blue-grey); }
.csv-target { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); color: var(--ink-soft); background: var(--mist); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; }
.csv-target .ic { color: var(--slate); }
.csv-drop { border: 1.5px dashed var(--blue-grey); border-radius: var(--r-md); padding: 2rem 1rem; text-align: center; background: var(--n-25); cursor: pointer; transition: background .12s, border-color .12s; }
.csv-drop:hover, .csv-drop.hot { border-color: var(--copper); background: var(--copper-100); }
.csv-drop .ic { font-size: 1.7rem; color: var(--copper); }
.csv-drop .big { font-size: var(--t-base); font-weight: 700; margin-top: 0.5rem; }
.csv-drop .sm { font-size: var(--t-xs); color: var(--slate); margin-top: 0.25rem; }
.csv-drop .sm a { color: var(--copper-600); font-weight: 600; }
.csv-meta { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: 0.9rem; }
.csv-meta .ic { color: var(--success); flex-shrink: 0; margin-top: 0.1rem; }
.csv-meta.bad .ic { color: var(--error); }
.csv-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
.csv-stat { background: var(--mist); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 0.6rem 0.7rem; }
.csv-stat .n { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.csv-stat .l { font-size: var(--t-3xs, 0.62rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); margin-top: 1px; }
.csv-stat.new .n { color: var(--success-ink); }
.csv-stat.unc .n { color: var(--warning-ink); }
.csv-list { border: 1px solid var(--divider); border-radius: var(--r-sm); overflow: hidden; max-height: 260px; overflow-y: auto; }
.csv-prow { display: grid; grid-template-columns: 64px 1fr 84px; gap: 0.5rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--divider); align-items: center; }
.csv-prow:last-child { border-bottom: none; }
.csv-prow .d { font-size: var(--t-xs); color: var(--slate); font-variant-numeric: tabular-nums; }
.csv-prow .desc { font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-prow .cat { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 1px; }
.csv-prow .cat.unc { color: var(--warning-ink); }
.csv-prow .amt { text-align: right; font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.csv-prow .amt.pos { color: var(--success-ink); }
.csv-more { padding: 0.5rem 0.7rem; font-size: var(--t-xs); color: var(--ink-faint); text-align: center; background: var(--n-25); }
.csv-foot { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
.csv-done-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0.4rem auto 0; }
.csv-done-h { text-align: center; font-size: var(--t-lg); font-weight: 800; margin-top: 0.6rem; }
.csv-done-s { text-align: center; font-size: var(--t-sm); color: var(--slate); margin-top: 0.3rem; line-height: 1.45; }
/* statement-id editor (single field) */
.stmt-form { padding: 1.2rem 1.3rem; }
.stmt-form h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: 0.2rem; }
.stmt-form .eyebrow { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.9rem; }
.stmt-form label { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); margin-bottom: 0.35rem; }
.stmt-form input { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.55rem 0.65rem; }
.stmt-form input:focus { outline: none; border-color: var(--ink-blue); }
.stmt-form .hint { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.5rem; line-height: 1.4; }
.stmt-form .csv-foot { margin-top: 1.1rem; }

/* CR13 — invoice share sheet */
.inv-share-form { padding: 1.2rem 1.3rem; }
.inv-share-form h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: 0.2rem; }
.inv-share-form .eyebrow { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 1rem; line-height: 1.5; }
.inv-share-form label { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.35rem; }
.inv-share-linkrow { display: flex; gap: 0.5rem; align-items: center; }
.inv-share-linkrow input { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: var(--t-xs); color: var(--ink-soft); background: var(--mist); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.55rem 0.65rem; }
.inv-share-linkrow input:focus { outline: none; border-color: var(--copper); }
.inv-share-linkrow .btn-sm { flex-shrink: 0; }
.inv-share-form .btn-block { width: 100%; margin-top: 0.85rem; }
.inv-share-hint { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.5rem; line-height: 1.4; }
.inv-share-status { display: flex; align-items: center; gap: 0.4rem; font-size: var(--t-xs); color: var(--slate); margin-top: 0.9rem; }
.inv-share-status .ic { color: var(--copper); }
.inv-share-status strong { color: var(--ink-blue); font-weight: 700; }

/* add-member modal swatches */
.set-swatch-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.set-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--surface); }
.set-swatch.on { border-color: var(--ink-blue); }
.set-field-label { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.35rem; }

/* Sign-in access block on the Edit-member sheet (CR3 member offboarding) */
.set-signin-sec { border-top: 1px solid var(--gray-200); padding-top: 0.9rem; }
.set-signin-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.set-signin-body .t-title { font-weight: 650; }
.set-signin-body .t-detail { font-size: var(--t-xs); color: var(--slate); margin-top: 0.15rem; }
.btn-danger-ghost { background: transparent; color: var(--error-ink); border: 1px solid var(--error); }
.btn-danger-ghost:hover { background: var(--error-bg); }

/* mobile */
.set-m { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.85rem 0.85rem 2.5rem; }
.set-m .segment { width: 100%; }
.set-m .segment button { flex: 1; }

@media (min-width: 769px) {
  .set-layout { flex: 1; display: flex; flex-direction: row; min-height: 0; }
  .set-nav { display: flex; flex-direction: column; gap: 0.1rem; width: 234px; flex-shrink: 0; border-right: 1px solid var(--divider); background: var(--n-25); padding: 1rem 0.7rem; overflow-y: auto; }
  .set-main { flex: 1; min-width: 0; overflow-y: auto; padding: 1.6rem 1.9rem 3rem; }
}

/* Collapsed state — hide the people filter alongside labels (joint-mode only) */
body.nav-collapsed #dt-sidebar .dt-sb-people { display: none; }

/* Collapsed state — hide labels + groups */
body.nav-collapsed #dt-sidebar .dt-sb-label,
body.nav-collapsed #dt-sidebar .dt-sb-group,
body.nav-collapsed #dt-sidebar .dt-sb-badge,
body.nav-collapsed #dt-sidebar .dt-sb-name { display: none; }
body.nav-collapsed #dt-sidebar .dt-sb-item { justify-content: center; padding: 0.55rem; }
body.nav-collapsed #dt-sidebar .dt-sb-brand { justify-content: center; padding: 0; cursor: pointer; }
body.nav-collapsed #dt-sidebar .dt-sb-collapse-btn { display: none; }
body.nav-collapsed #dt-sidebar .dt-sb-username { display: none; }
body.nav-collapsed #dt-sidebar .dt-sb-footer { flex-direction: column; }

/* Placeholder tab style for unbuilt features */
.tab-content-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 50vh; gap: 0.75rem;
  color: var(--gray-400); padding: 2rem;
}
.tab-content-placeholder .ph-icon { font-size: 2.5rem; }
.tab-content-placeholder .ph-title { font-size: 1rem; font-weight: 600; color: var(--gray-500); }
.tab-content-placeholder .ph-sub {
  font-size: 0.82rem; color: var(--gray-400); text-align: center;
  max-width: 280px; line-height: 1.55;
}

/* ── Desktop layout at ≥769px ── */
@media (min-width: 769px) {
  /* Show sidebar */
  #dt-sidebar { display: flex; }

  /* Push content right of the fixed sidebar */
  #app-view { padding-left: 232px; transition: padding-left 0.22s cubic-bezier(0.33,0,0.2,1); }

  /* Hide mobile header and tab bar */
  .app-header { display: none; }
  .nav-tabs   { display: none !important; }

  /* Tab content fills full available width */
  .tab-content { max-width: none; }
}

/* ── Collapsed rail (60px) — desktop only ── */
@media (min-width: 769px) {
  body.nav-collapsed #dt-sidebar { width: 60px; }
  body.nav-collapsed #app-view   { padding-left: 60px; }
}

/* ══════════════════════════════════════════════════
   M30 — Mobile transactions redesign (W8b)
   ══════════════════════════════════════════════════ */

/* Tab content: remove padding on mobile so rows go edge-to-edge */
@media (max-width: 768px) {
  body.tab-is-transactions #tab-transactions { padding: 0; }
  #tx-mobile-view .month-nav {
    padding: 0.5rem 0.875rem;
    margin-bottom: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--divider);
  }
}

/* ── Control bar ── */
.tx-mob-ctrl-bar {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.4rem 0.875rem;
  border-bottom: 1px solid var(--divider);
  background: var(--mist);
}
/* mobile account multi-select button (interactive copper cue) */
.tx-mob-acct-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 700; font-family: inherit;
  padding: 0.25rem 0.55rem;
  border-radius: 20px; border: 1.5px solid var(--copper-200);
  background: var(--copper-100); color: var(--copper-700);
  cursor: pointer; flex-shrink: 0; max-width: 132px; white-space: nowrap;
}
.tx-mob-acct-btn .tx-mob-acct-txt { overflow: hidden; text-overflow: ellipsis; }
.tx-mob-acct-btn .tx-mob-acct-dots { display: inline-flex; gap: 2px; flex-shrink: 0; }
.tx-mob-acct-btn .tx-mob-acct-dots i { width: 7px; height: 7px; border-radius: 50%; }
.tx-mob-acct-btn .chev { font-size: 0.58rem; flex-shrink: 0; }
.tx-mob-search-inp {
  flex: 1; min-width: 0; font-size: 0.7rem;
  padding: 0.25rem 0.6rem; border-radius: 20px;
  border: 1.5px solid var(--blue-grey);
  background: var(--surface); color: var(--ink-blue);
  font-family: inherit;
}
.tx-mob-search-inp:focus { outline: none; border-color: var(--ink-blue); }
.tx-mob-ctrl-btn {
  font-size: 0.7rem; font-weight: 600;
  padding: 0.25rem 0.6rem; border-radius: 20px;
  border: 1.5px solid var(--blue-grey);
  background: var(--surface); color: var(--slate);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
}
.tx-mob-ctrl-btn.active-filter {
  background: var(--info-bg); border-color: var(--info); color: var(--info);
}
.tx-mob-ctrl-btn.active-select {
  background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue);
}
.tx-mob-filter-badge {
  display: inline-block; background: var(--info); color: var(--surface);
  font-size: 0.58rem; font-weight: 700; border-radius: 8px;
  padding: 0.05rem 0.28rem; margin-left: 0.18rem; vertical-align: middle;
}

/* ── Select mode bar ── */
.tx-mob-sel-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--ink-blue); color: var(--parchment);
}
.tx-mob-sel-count { flex: 1; font-size: 0.82rem; font-weight: 700; }
.tx-mob-sel-all-btn, .tx-mob-sel-done-btn {
  font-size: 0.72rem; font-weight: 600; border-radius: 7px;
  padding: 0.26rem 0.6rem; cursor: pointer; font-family: inherit;
}
.tx-mob-sel-all-btn {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: var(--parchment);
}
.tx-mob-sel-done-btn { background: none; border: none; color: rgba(255,255,255,0.65); }

/* ── Transaction rows (M30) ── */
.tx-mob-date-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.35rem 0.875rem 0.25rem;
  font-size: 0.68rem; font-weight: 700; color: var(--slate);
  background: var(--mist);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.tx-mob-date-net { font-size: 0.67rem; color: var(--ink-300); font-variant-numeric: tabular-nums; }
.tx-mob-row {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.7rem 0.875rem;
  border-bottom: 1px solid var(--divider);
  background: var(--surface); cursor: pointer;
  transition: background 0.1s;
}
.tx-mob-row:active { background: var(--mist); }
.tx-mob-row.mob-selected { background: var(--ink-050); }
.tx-mob-cb {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--ink-200); flex-shrink: 0;
  margin-top: 0.14rem; background: var(--surface);
  display: none; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: var(--parchment);
}
.tx-mob-cb.on { background: var(--ink-blue); border-color: var(--ink-blue); }
.tx-mob-select-mode .tx-mob-cb { display: flex; }
.tx-mob-body { flex: 1; min-width: 0; }
.tx-mob-primary {
  font-size: 0.8rem; font-weight: 600; color: var(--ink-blue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-mob-memo {
  font-size: 0.7rem; color: var(--slate); margin-top: 0.05rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-mob-memo.add-memo { color: var(--ink-200); display: inline-block; max-width: 100%; }
.tx-mob-chips { display: flex; gap: 0.25rem; margin-top: 0.3rem; flex-wrap: wrap; align-items: center; }
.tx-mob-cat {
  font-size: 0.63rem; font-weight: 600; padding: 0.12rem 0.38rem;
  border-radius: 5px; background: var(--mist); color: var(--slate); border: 1px solid var(--divider);
}
.tx-mob-cat.uncat { background: transparent; color: var(--warning-ink); border-color: var(--warning-ink); }
.tx-mob-tag {
  font-size: 0.61rem; font-weight: 600; padding: 0.1rem 0.35rem;
  border-radius: 4px; background: transparent; color: var(--slate); border: 1px solid var(--divider);
}
/* B/F chips — pending §2l compliance */
.tx-mob-flag-b { font-size: 0.61rem; font-weight: 800; padding: 0.1rem 0.32rem; border-radius: 4px; background: var(--info-bg); color: var(--info); }
.tx-mob-receipt {
  font-size: 0.61rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 4px;
  background: transparent; color: var(--ink-400); border: 1px solid var(--ink-200);
  display: inline-flex; align-items: center; gap: 0.18rem;
}
/* sinking-fund payout chip (M33) — neutral, like the receipt chip */
.tx-mob-fund {
  font-size: 0.61rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 4px;
  background: transparent; color: var(--copper); border: 1px solid var(--ink-200);
  display: inline-flex; align-items: center; gap: 0.18rem; white-space: nowrap;
}
.tx-mob-funmoney {
  font-size: 0.61rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 4px;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--ink-200);
  display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
}
.tx-mob-funmoney .od { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* Client attribution chip (CR4 Slice 2b) — neutral, mirrors the fund chip */
.tx-mob-client {
  font-size: 0.61rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 4px;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--ink-200);
  display: inline-flex; align-items: center; gap: 0.22rem; white-space: nowrap; cursor: pointer;
}
.tx-mob-client .ic { font-size: 0.95em; color: var(--copper); }
.tx-mob-right { text-align: right; flex-shrink: 0; padding-top: 0.04rem; }
.tx-mob-amount { font-size: 0.88rem; font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.tx-mob-amount.pos { color: var(--success); }
.tx-mob-acct-lbl { font-size: 0.62rem; color: var(--ink-300); margin-top: 0.06rem; gap: 0.28rem; justify-content: flex-end; }

/* ── Bottom action bar (select mode) ── */
.tx-mob-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--ink-blue); color: var(--parchment);
  padding: 0.6rem 0.875rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  box-shadow: 0 -3px 16px rgba(0,0,0,0.2);
}
.tx-mob-ab-btn {
  font-size: 0.72rem; font-weight: 600;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  color: var(--parchment); border-radius: 7px;
  padding: 0.3rem 0.6rem; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tx-mob-ab-btn.copper { background: var(--copper); border-color: var(--copper); }

/* ── Bottom sheets ── */
.tx-mob-overlay {
  position: fixed; inset: 0; background: rgba(15,29,45,0.45);
  z-index: 60; display: flex; flex-direction: column; justify-content: flex-end;
}
.tx-mob-sheet {
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 0.875rem 0.875rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  max-height: 75%; overflow-y: auto;
}
.tx-mob-sh-handle { width: 36px; height: 4px; background: var(--divider); border-radius: 2px; margin: 0 auto 1rem; }
.tx-mob-sh-title { font-size: 0.875rem; font-weight: 700; color: var(--ink-blue); margin-bottom: 1rem; }
.tx-mob-sh-sub { font-size: 0.75rem; color: var(--slate); margin-top: -0.6rem; margin-bottom: 0.875rem; }
.tx-mob-sh-sec { margin-bottom: 0.875rem; }
.tx-mob-sh-lbl { font-size: 0.65rem; font-weight: 700; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem; display: block; }
.tx-mob-sh-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tx-mob-sh-chip {
  font-size: 0.72rem; font-weight: 600; padding: 0.26rem 0.6rem; border-radius: 20px;
  border: 1.5px solid var(--blue-grey); background: var(--surface); color: var(--slate);
  cursor: pointer; font-family: inherit;
}
.tx-mob-sh-chip.active { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.tx-mob-sh-select {
  width: 100%; font-size: 0.78rem; border: 1px solid var(--divider); border-radius: 9px;
  padding: 0.42rem 0.55rem; background: var(--mist); color: var(--ink-blue); outline: none; font-family: inherit;
}
.tx-mob-sh-apply {
  width: 100%; margin-top: 0.875rem; font-size: 0.82rem; font-weight: 700;
  background: var(--ink-blue); color: var(--parchment); border: none;
  border-radius: 12px; padding: 0.7rem; cursor: pointer; font-family: inherit;
}
/* Contextual sheet rows */
.tx-mob-ctx-row {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--divider); cursor: pointer;
}
.tx-mob-ctx-row:last-of-type { border-bottom: none; }
.tx-mob-ctx-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--mist); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; flex-shrink: 0; }
.tx-mob-ctx-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-blue); flex: 1; }
.tx-mob-ctx-val { font-size: 0.72rem; color: var(--ink-300); margin-right: 0.25rem; }
.tx-mob-ctx-chev { font-size: 0.65rem; color: var(--ink-200); }
.tx-mob-ctx-flags { display: flex; gap: 0.5rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--divider); }
.tx-mob-ctx-flag {
  flex: 1; padding: 0.4rem; font-size: 0.75rem; font-weight: 700; border-radius: 8px;
  border: 1.5px solid var(--blue-grey); background: var(--surface); color: var(--slate);
  text-align: center; cursor: pointer; font-family: inherit;
}
.tx-mob-ctx-flag.on-b { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.tx-mob-ctx-flag.on-f { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-ink); }
.tx-mob-cancel-btn {
  width: 100%; margin-top: 0.75rem; font-size: 0.8rem; font-weight: 600;
  background: var(--mist); color: var(--slate); border: 1.5px solid var(--blue-grey);
  border-radius: 12px; padding: 0.6rem; cursor: pointer; font-family: inherit;
}
/* Receipt sheet buttons */
.tx-mob-rx-primary {
  width: 100%; padding: 0.65rem; font-size: 0.82rem; font-weight: 700;
  background: var(--ink-blue); color: var(--parchment); border: none;
  border-radius: 12px; cursor: pointer; font-family: inherit; margin-bottom: 0.5rem;
  display: block; text-align: center;
}
.tx-mob-rx-secondary {
  width: 100%; padding: 0.65rem; font-size: 0.82rem; font-weight: 600;
  background: var(--mist); color: var(--ink-blue); border: 1.5px solid var(--blue-grey);
  border-radius: 12px; cursor: pointer; font-family: inherit; margin-bottom: 0.5rem;
}
.tx-mob-rx-danger {
  width: 100%; padding: 0.65rem; font-size: 0.82rem; font-weight: 600;
  background: var(--error-bg); color: var(--error); border: 1.5px solid #F5B8B8;
  border-radius: 12px; cursor: pointer; font-family: inherit;
}
/* Sync icon button in month nav */
.tx-mob-sync-btn {
  width: 30px; height: 30px; background: none; border: 1.5px solid var(--blue-grey);
  border-radius: 8px; color: var(--slate); display: flex; align-items: center;
  justify-content: center; font-size: 0.9rem; cursor: pointer; flex-shrink: 0;
  font-family: inherit; transition: color 0.15s, border-color 0.15s;
}
.tx-mob-sync-btn:active { color: var(--ink-blue); border-color: var(--ink-blue); }
.tx-mob-sync-btn.syncing { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Spinning sync-button icon (set by triggerEbSync on every sync button's icon) */
.ic-syncing { display: inline-block; transform-origin: 50% 50%; animation: spin 0.7s linear infinite; }

/* ══════════════════════════════════════════════════
   M23 — Desktop transactions view
   ══════════════════════════════════════════════════ */

/* Mobile default: show mobile, hide desktop */
#tx-desktop-view { display: none; }
#tx-mobile-view  { display: block; }

/* ── summary strip ─────────────────────────────── */
.tx-summary { display: flex; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.tx-sum-cell { padding: 0.7rem 1.4rem; border-right: 1px solid var(--divider); display: flex; flex-direction: column; justify-content: center; }
.tx-sum-cell:first-child { padding-left: 1.75rem; }
.tx-sum-lbl { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.tx-sum-val { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-blue); margin-top: 0.15rem; white-space: nowrap; }
.tx-sum-val.period { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.tx-sum-val.pos { color: var(--success); }
.tx-sum-sub { font-size: 0.625rem; color: var(--ink-faint); margin-top: 0.1rem; }
.tx-sum-sync { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 0.7rem 1.75rem 0.7rem 1.4rem; }
.tx-sum-ts { font-size: 0.625rem; color: var(--ink-faint); }

/* ── Account multi-select: interactive strip cell + popover ── */
.tx-sum-cell.acct-cell { cursor: pointer; position: relative; min-width: 200px; background: var(--copper-100); transition: background 0.12s; }
.tx-sum-cell.acct-cell:hover { background: var(--copper-200); }
.tx-sum-cell.acct-cell .tx-sum-lbl { color: var(--copper-700); }
.acct-cell .tx-sum-sub { color: var(--copper-600); }
.acct-cell-val { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }
.acct-cell-val .nm { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--copper-700); white-space: nowrap; }
.acct-cell-val .chev { color: var(--copper-600); font-size: 0.7rem; }
.acct-dots { display: inline-flex; gap: 3px; }
.acct-dots i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.acct-pop { position: absolute; top: calc(100% + 6px); left: 0; width: 296px; background: var(--surface); border: 1px solid var(--divider); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,29,45,0.16); z-index: 80; padding: 6px; display: none; max-height: 60vh; overflow-y: auto; }
.tx-sum-cell.acct-cell.open .acct-pop { display: block; }
.acct-pop-hd { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); padding: 8px 10px 6px; }
.acct-grp-lbl { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px 2px; }
/* option rows — shared by the desktop popover and the mobile sheet */
.acct-opt { display: flex; align-items: center; gap: 0.6rem; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.acct-opt:hover { background: var(--n-25); }
.acct-opt.master { border-bottom: 1px solid var(--divider); border-radius: 0; margin-bottom: 2px; }
.acct-opt-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-strong); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; color: transparent; }
.acct-opt.on .acct-opt-box { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }
.acct-opt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.acct-opt-nm { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-opt-ct { font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* mobile sheet sizing for the shared option rows */
.acct-sheet-list { padding: 0 0.5rem; }
.acct-sheet-list .acct-opt { padding: 12px 12px; }
.acct-sheet-list .acct-opt.master { margin-bottom: 4px; }
.acct-sheet-list .acct-opt-box { width: 20px; height: 20px; border-radius: 6px; }
.acct-sheet-list .acct-opt-nm { font-size: 0.92rem; }
.acct-sheet-list .acct-opt-dot { width: 11px; height: 11px; }

/* ── body split ────────────────────────────────── */
.tx-body { flex: 1; display: flex; min-height: 0; }

/* filter pane */
.tx-filter { width: 244px; flex-shrink: 0; background: var(--n-25); border-right: 1px solid var(--divider); overflow-y: auto; scrollbar-width: thin; }
.tx-fp-sec { padding: 1rem 1.05rem; border-bottom: 1px solid var(--divider); }
.tx-fp-title { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.6rem; display: flex; align-items: center; justify-content: space-between; }

.tx-date-nav { display: flex; align-items: center; gap: 0.3rem; background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 8px; padding: 0.25rem 0.3rem; margin-bottom: 0.55rem; }
.tx-date-nav .ic-btn { width: 26px; height: 26px; border-radius: 6px; border: none; background: none; color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.tx-date-nav .ic-btn:hover { background: var(--mist); color: var(--ink-blue); }
.tx-date-lbl { flex: 1; text-align: center; font-size: 0.8125rem; font-weight: 700; color: var(--ink-blue); }

.tx-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tx-preset { font-size: 0.71875rem; font-weight: 600; padding: 0.26rem 0.55rem; border-radius: 6px; cursor: pointer; border: 1px solid var(--blue-grey); background: var(--surface); color: var(--slate); white-space: nowrap; transition: all 0.12s; }
.tx-preset:hover { border-color: var(--ink-200); color: var(--ink-blue); }
.tx-preset.active { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }

.tx-fp-search { position: relative; margin-bottom: 0.75rem; }
.tx-fp-search input { width: 100%; font-family: inherit; font-size: 0.8125rem; color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 8px; padding: 0.42rem 0.6rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.tx-fp-search input::placeholder { color: var(--ink-faint); }
.tx-fp-search input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }

.tx-fp-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--slate); margin: 0.55rem 0 0.3rem; display: block; }
.tx-flags { display: flex; gap: 0.35rem; margin-bottom: 0.4rem; }
.tx-flag-btn { flex: 1; font-size: 0.71875rem; font-weight: 700; padding: 0.32rem 0; border-radius: 6px; cursor: pointer; border: 1.5px solid var(--blue-grey); color: var(--slate); background: var(--surface); text-align: center; transition: all 0.12s; }
.tx-flag-btn:hover { border-color: var(--ink-200); color: var(--ink-blue); }
.tx-flag-btn.on-all { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }
.tx-flag-btn.on-b { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.tx-flag-btn.on-f { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning); }

.tx-fp-select { width: 100%; font-family: inherit; font-size: 0.8125rem; color: var(--ink-soft); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 8px; padding: 0.4rem 0.55rem; outline: none; cursor: pointer; margin-bottom: 0.4rem; }
.tx-fp-select:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }

.tx-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; font-size: 0.8125rem; color: var(--ink-soft); cursor: pointer; }
.tx-check .box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ink-200); background: var(--surface); flex-shrink: 0; transition: background 0.12s, border-color 0.12s; }

.tx-fp-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.tx-tagf { font-size: 0.71875rem; font-weight: 600; padding: 0.22rem 0.5rem; border-radius: 4px; cursor: pointer; border: 1px solid var(--blue-grey); color: var(--slate); background: var(--surface); transition: all 0.12s; }
.tx-tagf:hover { border-color: var(--ink-200); color: var(--ink-blue); }
.tx-tagf.active { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }

.tx-clear { width: 100%; margin-top: 0.5rem; font-family: inherit; font-size: 0.71875rem; font-weight: 700; color: var(--error); background: var(--surface); border: 1.5px solid #eebcbc; border-radius: 6px; padding: 0.42rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.tx-clear:hover { background: var(--error-bg); }

/* table area */
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }

/* action bar (contextual) */
.tx-actionbar { display: none; align-items: center; gap: 0.6rem; background: var(--ink-blue); color: var(--parchment); height: 52px; padding: 0 1.25rem; flex-shrink: 0; }
.tx-actionbar.show { display: flex; }
.tx-ab-cb { width: 18px; height: 18px; border-radius: 5px; background: var(--parchment); display: flex; align-items: center; justify-content: center; color: var(--ink-blue); font-weight: 900; font-size: 0.7rem; flex-shrink: 0; }
.tx-ab-count { font-size: 0.8125rem; font-weight: 700; flex: 1; }
.tx-ab-btn { font-family: inherit; font-size: 0.71875rem; font-weight: 700; background: rgba(247,244,238,0.12); border: 1px solid rgba(247,244,238,0.2); color: var(--parchment); border-radius: 6px; padding: 0.4rem 0.7rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.12s; }
.tx-ab-btn:hover { background: rgba(247,244,238,0.22); }
.tx-ab-btn.copper { background: var(--copper); border-color: var(--copper); }
.tx-ab-btn.copper:hover { background: var(--copper-600); }
.tx-ab-clear { font-family: inherit; font-size: 0.71875rem; font-weight: 600; color: rgba(247,244,238,0.66); background: none; border: none; cursor: pointer; padding: 0.3rem 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.tx-ab-clear:hover { color: #fff; }

/* table header */
.tx-thead { display: grid; grid-template-columns: 40px 96px 1fr 168px 128px 132px 44px; align-items: center; padding: 0 1.25rem; height: 40px; background: var(--mist); border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.tx-th { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); display: inline-flex; align-items: center; gap: 0.25rem; }
.tx-th.right { justify-content: flex-end; }
.cb { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--ink-200); background: var(--surface); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s; }
.cb.on { background: var(--ink-blue); border-color: var(--ink-blue); }
.cb.dash { background: var(--ink-blue); border-color: var(--ink-blue); }

/* rows */
.tx-rows { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.tx-group { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; padding: 0.4rem 1.25rem; background: var(--n-25); border-bottom: 1px solid var(--divider); }
.tx-group-lbl { font-size: 0.71875rem; font-weight: 700; color: var(--slate); }
.tx-group-total { font-size: 0.71875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.tx-row { display: grid; grid-template-columns: 40px 96px 1fr 168px 128px 132px 44px; align-items: center; padding: 0 1.25rem; min-height: 58px; border-bottom: 1px solid var(--divider); cursor: pointer; transition: background 0.1s; }
.tx-row:hover { background: var(--n-25); }
.tx-row.selected { background: var(--ink-050); }

.tx-r-date { font-size: 0.71875rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tx-r-date span { display: block; font-size: 0.625rem; color: var(--ink-faint); font-weight: 500; }
.tx-r-desc { min-width: 0; padding-right: 1rem; }
.tx-r-primary { font-size: 0.8125rem; font-weight: 700; color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-r-memo { font-size: 0.71875rem; color: var(--ink-faint); margin-top: 0.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-r-memo.add { color: var(--ink-300); cursor: pointer; display: inline-block; max-width: 100%; }
.tx-r-memo.add:hover { color: var(--copper); }

.cat-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.71875rem; font-weight: 600; padding: 0.22rem 0.55rem; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft); white-space: nowrap; cursor: pointer; transition: all 0.12s; }
.cat-chip:hover { border-color: var(--copper); color: var(--copper-700); background: var(--copper-100); }
.cat-chip.uncat { background: var(--surface); border-color: var(--border-strong); color: var(--ink-mute); }
.cat-chip.uncat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 2px var(--warning-bg); flex-shrink: 0; }
.cat-chip.uncat:hover { border-color: var(--copper); color: var(--copper-700); }

.tx-r-tf { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.meta-tag { font-size: 0.625rem; font-weight: 600; padding: 0.16rem 0.45rem; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--ink-soft); background: transparent; white-space: nowrap; }
/* sinking-fund chip (M37) — neutral border, copper text, direction chevron */
.meta-tag.meta-fund { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--copper); }
.meta-tag.meta-fund .ic { font-size: 0.95em; }
.meta-tag.meta-funmoney { display: inline-flex; align-items: center; gap: 0.28rem; color: var(--ink-soft); }
.meta-tag.meta-funmoney .od { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* Client attribution chip (CR4 Slice 2b) — neutral, mirrors the fund chip */
.meta-tag.meta-client { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--ink-soft); }
.meta-tag.meta-client .ic { font-size: 0.95em; color: var(--copper); }
.flag-b { font-size: 0.625rem; font-weight: 700; padding: 0.16rem 0.4rem; border-radius: 4px; background: var(--info-bg); color: var(--info); }

.tx-r-amt { text-align: right; }
.tx-r-amt .amt { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tx-r-amt .amt.credit { color: var(--success); }
.tx-r-amt .amt.debit { color: var(--ink-blue); }
.tx-r-amt .acct { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; font-size: 0.625rem; color: var(--ink-faint); margin-top: 0.1rem; }
/* trailing owner-colour dot in dense rows — sits after the name so all dots align right */
.own-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-left: 0.3rem; }
.tx-r-rx { display: flex; align-items: center; justify-content: center; }
.tx-r-rx .receipt-menu { left: auto; right: 0; }
.tx-rx-btn { background: none; border: none; cursor: pointer; font-size: 1.05rem; padding: 0.25rem; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--ink-300); transition: color 0.12s; }
.tx-rx-btn:hover { color: var(--ink-soft); background: var(--n-25); }
.tx-ab-sep { width: 1px; height: 18px; background: rgba(247,244,238,0.2); flex-shrink: 0; margin: 0 0.25rem; }
#fc-tx-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,32,0.5); z-index: 300; align-items: center; justify-content: center; }
#fc-tx-modal-overlay.open { display: flex; }
.fc-tx-modal { background: var(--surface); border-radius: 14px; padding: 1.25rem; width: 380px; max-width: calc(100vw - 2rem); box-shadow: 0 16px 48px rgba(10,20,32,0.22); }
.fc-tx-modal-title { font-size: 0.9375rem; font-weight: 700; color: var(--ink-blue); margin-bottom: 0.125rem; }
.fc-tx-modal-sub { font-size: 0.75rem; color: var(--ink-mute); margin-bottom: 1rem; }
.fc-tx-row { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.fc-tx-field { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.fc-tx-field label { font-size: 0.625rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-tx-field input, .fc-tx-field select { font-family: inherit; font-size: 0.8125rem; color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 7px; padding: 0.35rem 0.5rem; width: 100%; outline: none; }
.fc-tx-field input:focus, .fc-tx-field select:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.fc-tx-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.fc-tx-save { flex: 1; padding: 0.45rem; border-radius: 8px; border: none; background: var(--ink-blue); color: var(--parchment); font-size: 0.8125rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.fc-tx-save:hover { background: var(--ink-700); }
.fc-tx-cancel { padding: 0.45rem 0.875rem; border-radius: 8px; border: none; background: var(--mist); color: var(--slate); font-size: 0.8125rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.fc-tx-cancel:hover { background: var(--ink-100); }

/* Desktop overrides for tab-transactions */
@media (min-width: 769px) {
  body.tab-is-transactions #tab-transactions { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
  #tx-desktop-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #tx-mobile-view  { display: none; }
  .tx-desktop-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
}

/* ── Forecast tab (M25) ──────────────────────────────────── */
#fc-desktop-view { display: none; }
#fc-mobile-view  { display: block; }

.fc-wrap { display: flex; flex: 1; min-height: 0; }

/* Left panel */
.fc-left { width: 316px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--divider); display: flex; flex-direction: column; overflow: hidden; }
.fc-panel-head { padding: 1rem 1.125rem 0.75rem; border-bottom: 1px solid var(--divider); flex-shrink: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fc-panel-body { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.fc-panel-body::-webkit-scrollbar { width: 4px; }
.fc-panel-body::-webkit-scrollbar-thumb { background: var(--ink-100); border-radius: 2px; }

.fc-sec { padding: 0.75rem 1.125rem 0; }
.fc-sec-head { font-size: 0.625rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.35rem; }
.fc-sec-head .fc-add-btn { margin-left: auto; font-size: 0.625rem; font-weight: 700; color: var(--copper); background: var(--copper-100); border: none; border-radius: 5px; padding: 0.15rem 0.45rem; cursor: pointer; transition: background 0.15s; }
.fc-sec-head .fc-add-btn:hover { background: var(--copper-200); }

.fc-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--divider); }
.fc-item:last-child { border-bottom: none; }
.fc-item-tile { width: 30px; height: 30px; border-radius: 9px; background: var(--mist); color: var(--ink-blue); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; }
.fc-item-tile.income { background: var(--success-bg); color: var(--success); }
.fc-item-tile.pending-t { background: var(--warning-bg); color: var(--warning-ink); }
.fc-item-tile.planned { background: var(--info-bg); color: var(--info); }
.fc-item-info { flex: 1; min-width: 0; }
.fc-item-name { font-size: 0.8125rem; font-weight: 700; color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.35rem; }
.fc-item-meta { font-size: 0.6875rem; color: var(--ink-faint); margin-top: 1px; }
.fc-item-right { text-align: right; flex-shrink: 0; }
.fc-item-amt { font-size: 0.875rem; font-weight: 700; white-space: nowrap; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.fc-item-amt.pos { color: var(--success); }
.fc-item-next { font-size: 0.6875rem; color: var(--ink-faint); margin-top: 1px; white-space: nowrap; }
.fc-item-next.soon { color: var(--warning-ink); font-weight: 600; }
.fc-planned-tag { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; background: var(--info-bg); color: var(--info); padding: 0.1rem 0.35rem; border-radius: 4px; text-transform: uppercase; flex-shrink: 0; }
.fc-del-btn { background: none; border: none; color: var(--ink-200); cursor: pointer; padding: 0 3px; font-size: 1.1rem; line-height: 1; flex-shrink: 0; transition: color 0.15s; }
.fc-del-btn:hover { color: var(--error); }
.fc-conv-btn { background: none; border: none; color: var(--ink-200); cursor: pointer; padding: 0 4px; line-height: 0; flex-shrink: 0; transition: color 0.15s; display: inline-flex; align-items: center; }
.fc-conv-btn .ic { font-size: 0.95rem; }
.fc-conv-btn:hover { color: var(--copper); }

/* Toggle switch (compact) */
.fc-switch { position: relative; width: 34px; height: 20px; flex-shrink: 0; display: inline-block; cursor: pointer; }
.fc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-switch .fc-sw-track { position: absolute; inset: 0; background: var(--ink-200); border-radius: 10px; transition: background 0.2s; }
.fc-switch .fc-sw-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,29,45,.22); transition: transform 0.2s; }
.fc-switch input:checked + .fc-sw-track { background: var(--ink-blue); }
.fc-switch input:checked ~ .fc-sw-thumb { transform: translateX(14px); }
.fc-switch input:disabled + .fc-sw-track { background: var(--ink-100); }

/* Review items */
.fc-review-item { background: var(--n-25); border: 1px solid var(--divider); border-radius: 10px; padding: 0.625rem 0.75rem; margin-bottom: 0.5rem; }
.fc-review-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.fc-confidence-label { font-size: 0.625rem; color: var(--slate); margin-bottom: 0.3rem; }
.fc-confidence-bar { height: 3px; border-radius: 2px; background: var(--divider); margin-bottom: 0.5rem; overflow: hidden; }
.fc-confidence-fill { height: 100%; border-radius: 2px; background: var(--warning); }
.fc-confidence-fill.high { background: var(--success); }
.fc-review-actions { display: flex; gap: 0.35rem; }
.fc-btn-confirm { flex: 1; padding: 0.3rem; border-radius: 6px; border: none; background: var(--success-bg); color: var(--success-ink); font-size: 0.6875rem; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
.fc-btn-confirm:hover { background: #d0e8db; }
.fc-btn-dismiss { flex: 1; padding: 0.3rem; border-radius: 6px; border: none; background: var(--mist); color: var(--slate); font-size: 0.6875rem; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
.fc-btn-dismiss:hover { background: var(--ink-100); }

/* Add planned payment inline form */
.fc-add-form { background: var(--n-25); border: 1px solid var(--divider); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.5rem; display: none; }
.fc-add-form.open { display: block; }
.fc-add-row { display: flex; gap: 0.5rem; margin-bottom: 0.45rem; }
.fc-add-row:last-child { margin-bottom: 0; }
.fc-add-field { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.fc-add-field label { font-size: 0.625rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-add-field input, .fc-add-field select { font-family: inherit; font-size: 0.8125rem; color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 7px; padding: 0.35rem 0.5rem; width: 100%; outline: none; }
.fc-add-field input:focus, .fc-add-field select:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.fc-add-actions { display: flex; gap: 0.35rem; }
.fc-add-save { flex: 1; padding: 0.4rem; border-radius: 7px; border: none; background: var(--ink-blue); color: var(--parchment); font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.fc-add-save:hover { background: var(--ink-700); }
.fc-add-cancel { padding: 0.4rem 0.75rem; border-radius: 7px; border: none; background: var(--mist); color: var(--slate); font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.fc-add-cancel:hover { background: var(--ink-100); }
/* sinking-fund toggle on the forecast form (W9) */
.fc-add-sink { margin: 0.55rem 0 0.2rem; }
.fc-sink-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink-blue); cursor: pointer; }
.fc-sink-toggle input { width: 16px; height: 16px; accent-color: var(--copper); cursor: pointer; }

/* Panel footer */
.fc-panel-foot { padding: 0.75rem 1.125rem; border-top: 1px solid var(--divider); flex-shrink: 0; }
.fc-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.fc-sum-cell { background: var(--n-25); border-radius: 9px; padding: 0.5rem 0.65rem; }
.fc-sum-lbl { font-size: 0.625rem; color: var(--slate); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.fc-sum-val { font-size: 0.9375rem; font-weight: 700; margin-top: 1px; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.fc-sum-val.pos { color: var(--success); }

/* Right panel */
.fc-right { flex: 1; overflow-y: auto; background: var(--n-25); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; }

/* Chart header */
.fc-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-shrink: 0; }
.fc-chart-title { font-size: 1rem; font-weight: 700; color: var(--ink-blue); letter-spacing: -0.01em; }
.fc-chart-sub { font-size: 0.75rem; color: var(--slate); margin-top: 0.15rem; }
.fc-acct-sel { font-family: inherit; font-size: 0.8125rem; color: var(--ink-soft); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 8px; padding: 0.38rem 0.6rem; outline: none; cursor: pointer; }
.fc-acct-sel:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.fc-mob-acct-sel { width: 100%; }

/* Stat cards */
.fc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; flex-shrink: 0; }
.fc-stat { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 0.875rem 1rem; }
.fc-stat-lbl { font-size: 0.625rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; }
.fc-stat-val { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; margin-top: 0.2rem; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.fc-stat-val.pos { color: var(--success); }
.fc-stat-val.warn { color: var(--warning-ink); }
.fc-stat-sub { font-size: 0.6875rem; color: var(--slate); margin-top: 0.15rem; }

/* Chart card */
.fc-chart-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.125rem 1.25rem 0.875rem; flex-shrink: 0; }
.fc-chart-inner-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; gap: 1rem; }
.fc-chart-inner-title { font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); }
.fc-chart-legend { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.fc-legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; color: var(--slate); white-space: nowrap; }
.fc-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fc-legend-dash { width: 18px; height: 0; border-top: 2px dashed var(--ink-300); flex-shrink: 0; }
.fc-chart-wrap { position: relative; height: 240px; }

/* Upcoming events */
.fc-upcoming { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1rem 1.25rem; flex-shrink: 0; }
.fc-upcoming-title { font-size: 0.625rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.fc-up-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.45rem 0; border-bottom: 1px solid var(--divider); }
.fc-up-row:last-child { border-bottom: none; }
.fc-up-date { width: 40px; flex-shrink: 0; }
.fc-up-date-day { font-size: 0.8125rem; font-weight: 700; color: var(--ink-blue); }
.fc-up-date-mon { font-size: 0.625rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-up-div { width: 1px; height: 28px; background: var(--divider); flex-shrink: 0; }
.fc-up-name { flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--ink-blue); }
.fc-up-acct { font-size: 0.6875rem; color: var(--slate); }
.fc-up-amt { font-size: 0.875rem; font-weight: 700; white-space: nowrap; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.fc-up-amt.pos { color: var(--success); }

/* Empty state */
.fc-empty { text-align: center; padding: 2rem 1rem; color: var(--slate); font-size: 0.875rem; }
.fc-empty .fc-empty-icon { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--ink-200); display: flex; align-items: center; justify-content: center; }

/* ── W11/M31: Forecast sub-tabs + Schedule matrix ── */
.fc-tabbar2 { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--divider); padding: 0 1.5rem; background: var(--surface); flex-shrink: 0; }
.fc-tab2 { border: none; background: none; cursor: pointer; font-family: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--slate); padding: 0.8rem 1rem; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 0.4rem; }
.fc-tab2:hover { color: var(--ink-blue); }
.fc-tab2.active { color: var(--copper); border-bottom-color: var(--copper); font-weight: 700; }
.fc-tab2 .ic { font-size: 1rem; }
.fc-yr-note { font-size: var(--t-xs); color: var(--ink-faint); }
.fc-sub-pane { flex: 1; min-height: 0; }
#fc-pane-schedule { flex-direction: column; overflow: auto; padding: 1.2rem 1.5rem; background: var(--bg); }
.fc-matrix-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.fc-matrix-scroll { overflow-x: auto; }
table.fcm { border-collapse: separate; border-spacing: 0; width: 100%; white-space: nowrap; font-size: var(--t-sm); }
.fcm th, .fcm td { padding: 0.5rem 0.7rem; text-align: right; border-bottom: 1px solid var(--divider); }
.fcm thead th { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); background: var(--mist); position: sticky; top: 0; z-index: 1; }
.fcm th.item, .fcm td.item { text-align: left; position: sticky; left: 0; background: var(--surface); min-width: 188px; z-index: 2; }
.fcm thead th.item { z-index: 3; background: var(--mist); }
.fcm th.cur, .fcm td.cur { background: var(--copper-100); }
.fcm td.amt { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.fcm td.zero { color: var(--ink-200); }
.fcm tr.grp td { background: var(--surface-2); font-weight: 700; color: var(--ink-blue); text-transform: uppercase; font-size: var(--t-2xs); letter-spacing: 0.05em; text-align: left; }
.fcm tr.grp td.item { background: var(--surface-2); }
.fcm .freq { font-size: var(--t-2xs); color: var(--ink-faint); font-weight: 400; margin-left: 0.4rem; }
.fcm th.yhead { text-align: center; background: var(--mist); color: var(--ink-blue); border-left: 2px solid var(--border-strong); letter-spacing: 0.06em; }
.fcm th.yr, .fcm td.yr { background: #FBFAF7; font-weight: 700; color: var(--ink-blue); border-left: 1px solid var(--divider); }
.fcm .ystart { border-left: 2px solid var(--border-strong); }
.fcm tr.sum td { font-weight: 700; color: var(--ink-blue); border-top: 2px solid var(--border-strong); background: var(--surface); }
.fcm tr.sum td.item { background: var(--surface); }
.fcm .pos { color: var(--success); } .fcm .neg { color: var(--error); }
.fc-matrix-note { padding: 0.7rem 1rem; font-size: var(--t-xs); color: var(--ink-faint); background: var(--surface); border-top: 1px solid var(--divider); }
.fc-matrix-note strong { color: var(--ink-soft); }
.fc-add-months { margin-bottom: 0.6rem; }
.fc-add-months > label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--slate); margin-bottom: 0.3rem; }
.fc-mp { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fc-mp button { font-family: inherit; font-size: 0.7rem; font-weight: 600; padding: 0.32rem 0; flex: 1 0 calc(25% - 0.3rem); border: 1px solid var(--border-strong); background: transparent; color: var(--ink-soft); border-radius: 8px; cursor: pointer; }
.fc-mp button.on { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }

/* M31 phase 3: sidebar shell + matrix row controls */
.fc-shell { flex: 1; display: flex; min-height: 0; }
.fc-side2 { width: 290px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--divider); overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.fc-side-add { width: 100%; }
.fc-side2 .fc-add-form { margin-top: 0.6rem; }
.fc-side2 .fc-add-row { flex-direction: column; }
.fc-side-sec { border-top: 1px solid var(--divider); padding-top: 0.85rem; }
.fc-side-sec > .eyebrow { display: block; margin-bottom: 0.5rem; }
.fc-filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fc-fchip { font-size: var(--t-xs); font-weight: 600; padding: 0.3rem 0.6rem; border-radius: var(--r-full); border: 1px solid var(--border-strong); background: transparent; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.fc-fchip.active { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }
.fc-main2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-cf-pad { padding: 1rem 1.25rem 2rem; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.fcm-ic { display: flex; align-items: center; gap: 0.5rem; }
.fcm-nm { flex: 1; min-width: 0; }
.fcm-tog input { cursor: pointer; }
.fcm-del { border: none; background: none; color: var(--ink-300); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 0.15rem; }
.fcm-del:hover { color: var(--error); }
.fcm tr.off td.amt, .fcm tr.off td.yr { opacity: 0.4; }
.fc-low-readout { font-size: var(--t-sm); padding: 0 0.15rem; }
.fc-cf-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fc-buffer-ctl { display: flex; align-items: center; gap: 0.4rem; font-size: var(--t-xs); color: var(--slate); }
.fc-buffer-ctl label { font-weight: 600; white-space: nowrap; }
#fc-buffer-input { width: 84px; font-family: inherit; font-size: var(--t-sm); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.3rem 0.45rem; color: var(--ink-blue); outline: none; }
#fc-buffer-input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.fc-buffer-hint { color: var(--ink-faint); white-space: nowrap; }
.fcm-edit { border: none; background: none; color: var(--ink-300); cursor: pointer; padding: 0 0.1rem; display: inline-flex; align-items: center; }
.fcm-edit .ic { font-size: 0.85rem; }
.fcm-edit:hover { color: var(--ink-blue); }
.fcm-conv { border: none; background: none; color: var(--ink-300); cursor: pointer; padding: 0 0.1rem; display: inline-flex; align-items: center; }
.fcm-conv .ic { font-size: 0.85rem; }
.fcm-conv:hover { color: var(--copper); }
.fcm-mv-grp { display: none; flex-direction: column; justify-content: center; flex-shrink: 0; }
.fcm-mv { border: none; background: none; color: var(--ink-300); cursor: pointer; padding: 0; display: inline-flex; align-items: center; line-height: 0.6; }
.fcm-mv .ic { font-size: 0.82rem; }
.fcm-mv:hover { color: var(--ink-blue); }
/* Re-order mode (sidebar toggle): reveal the arrows, hide edit/delete to keep the cell tidy */
.fcm.reorder .fcm-mv-grp { display: inline-flex; }
.fcm.reorder .fcm-edit, .fcm.reorder .fcm-del, .fcm.reorder .fcm-conv { display: none; }
.fc-reorder-row { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.7rem; cursor: pointer; }
.fc-reorder-lbl { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.fc-add-title { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); margin-bottom: 0.6rem; }
.fc-add-changes { margin-bottom: 0.6rem; }
.fc-add-changes > label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--slate); margin-bottom: 0.2rem; }
.fc-add-changes-hint { font-size: var(--t-2xs); color: var(--ink-faint); margin-bottom: 0.4rem; }
.fc-change-row { display: flex; gap: 0.35rem; align-items: center; margin-bottom: 0.35rem; }
.fc-change-row input { flex: 1; min-width: 0; font-family: inherit; font-size: var(--t-xs); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.35rem 0.45rem; color: var(--ink-blue); }
.fc-ch-del { border: none; background: none; color: var(--ink-300); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 0.2rem; flex-shrink: 0; }
.fc-ch-del:hover { color: var(--error); }
.fc-change-add { border: none; background: none; color: var(--copper); font-family: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer; padding: 0.2rem 0; }
.fc-change-add:hover { color: var(--copper-600); }

/* M31 phase 7: shared add/edit overlay (modal on desktop, bottom sheet on mobile) */
.fc-form-overlay { position: fixed; inset: 0; background: rgba(10,20,32,0.45); z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; }
.fc-form-overlay.open { display: flex; }
.fc-form-sheet { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-pop); width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.fc-form-sheet .fc-add-form { display: block; background: var(--surface); border: none; margin: 0; padding: 1.2rem 1.3rem; }
.fc-form-sheet .fc-add-row { flex-direction: row; }
@media (max-width: 768px) {
  .fc-form-overlay { align-items: flex-end; padding: 0; }
  .fc-form-sheet { width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
  .fc-form-sheet .fc-add-row { flex-direction: column; }
}

/* Shared confirm dialog */
.confirm-overlay { position: fixed; inset: 0; background: rgba(10,20,32,0.45); z-index: 300; display: none; align-items: center; justify-content: center; padding: 1rem; }
.confirm-overlay.open { display: flex; }
.confirm-box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-pop); width: 380px; max-width: 100%; padding: 1.25rem 1.35rem 1.1rem; }
.confirm-title { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); }
.confirm-body { font-size: var(--t-sm); color: var(--slate); margin-top: 0.5rem; line-height: 1.5; white-space: pre-line; }
.confirm-body:empty { display: none; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: var(--error-ink); }

/* Desktop override for forecast tab */
@media (min-width: 769px) {
  body.tab-is-forecast #tab-forecast { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
  #fc-desktop-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #fc-mobile-view  { display: none; }
}

/* Mobile: 2x2 stats */
@media (max-width: 768px) {
  .fc-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Warranties tab (M26) ─────────────────────────────────── */

/* Tab-level layout */
body.tab-is-warranties #tab-documents { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
#wrt-desktop-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Stat strip — a card inside the main column (matches the design handoff) */
.wrt-stat-strip { display: flex; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; flex-shrink: 0; }
.wrt-stat { flex: 1; padding: 0.75rem 1.1rem; }
.wrt-stat + .wrt-stat { border-left: 1px solid var(--divider); }
.wrt-stat-lbl { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.wrt-stat-val { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-blue); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.wrt-stat-val.warn { color: var(--warning-ink); }
.wrt-stat-sub { font-size: 0.6875rem; color: var(--ink-faint); margin-top: 0.1rem; }

/* Body split */
.wrt-body { flex: 1; display: flex; min-height: 0; }

/* Filter pane */
.wrt-filter { width: 248px; flex-shrink: 0; background: var(--n-25); border-right: 1px solid var(--divider); overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; }
.wrt-fp-sec { padding: 0.9rem 1rem; border-bottom: 1px solid var(--divider); }
.wrt-fp-sec.cta { padding: 1rem; }
.wrt-fp-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; }
.wrt-fp-search { position: relative; }
.wrt-fp-search input { width: 100%; font-family: inherit; font-size: 0.8125rem; color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 10px; padding: 0.45rem 0.6rem 0.45rem 2rem; outline: none; transition: border-color 0.15s; }
.wrt-fp-search input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.wrt-fp-search .srch-ic { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.95rem; pointer-events: none; }
.wrt-fp-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.45rem; border-radius: 9px; cursor: pointer; transition: background 0.12s; }
.wrt-fp-row:hover { background: var(--mist); }
.wrt-fp-row.active { background: var(--mist); }
.wrt-fp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wrt-fp-lbl { font-size: 0.8125rem; color: var(--ink-soft); flex: 1; }
.wrt-fp-row.active .wrt-fp-lbl { color: var(--ink-blue); font-weight: 700; }
.wrt-fp-ct { font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Main table area */
.wrt-main { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; padding: 1.35rem 1.65rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.wrt-tbl-card { background: var(--surface); border-radius: 16px; box-shadow: 0 4px 14px rgba(15,29,45,.08), 0 2px 4px rgba(15,29,45,.04); overflow-x: auto; }
.wrt-tbl-card .wrt-table { min-width: 760px; width: 100%; border-collapse: collapse; }
.wrt-table th { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); padding: 0.6rem 0.9rem; background: var(--mist); border-bottom: 1px solid var(--divider); text-align: left; }
.wrt-table th.r { text-align: right; }
.wrt-table td { padding: 0.75rem 0.9rem; font-size: 0.8125rem; color: var(--ink-soft); border-bottom: 1px solid var(--divider); vertical-align: middle; }
.wrt-table td.r { text-align: right; }
.wrt-table tr:last-child td { border-bottom: none; }
.wrt-row-expired td { opacity: 0.6; }
.wrt-item-cell { display: flex; align-items: center; gap: 0.55rem; }
.wrt-item-name { font-size: 0.8125rem; font-weight: 700; color: var(--ink-blue); white-space: nowrap; }
.wrt-days-badge { font-size: 0.75rem; font-weight: 700; padding: 0.14rem 0.48rem; border-radius: 6px; border: 1px solid; font-variant-numeric: tabular-nums; white-space: nowrap; background: transparent; }
.wrt-days-badge.red   { color: var(--error); border-color: #f5bebe; }
.wrt-days-badge.amber { color: var(--warning-ink); border-color: #f0d490; }
.wrt-days-badge.ok    { color: var(--ink-faint); border-color: var(--divider); }
.wrt-days-badge.exp   { color: var(--ink-faint); border-color: var(--divider); }

/* Desktop show/hide */
@media (min-width: 769px) {
  #wrt-mobile-view { display: none; }
  #wrt-desktop-view { display: flex; }
  #wrt-fab { display: none; }
}
@media (max-width: 768px) {
  #wrt-desktop-view { display: none; }
  #wrt-mobile-view { display: block; }
  #wrt-fab { display: flex; }
}

/* Mobile list */
#wrt-mobile-view { padding: 0.85rem; overflow-y: auto; }
.wrt-filter-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.wrt-chip { font-size: 0.75rem; font-weight: 600; padding: 0.28rem 0.65rem; border-radius: 20px; white-space: nowrap; cursor: pointer; border: 1px solid var(--divider); background: var(--surface); color: var(--slate); }
.wrt-chip.active { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }
/* "Expiring soon" filter chip: neutral outline like its siblings (no coloured-fill
   status pill — forbidden aesthetic). Active state uses the standard ink-blue .active. */

/* Mobile warranty card */
.wrt-card { background: var(--surface); border-radius: 14px; padding: 0.9rem; box-shadow: 0 2px 8px rgba(15,29,45,.07); margin-bottom: 0.65rem; }
.wrt-card-top { display: flex; align-items: flex-start; gap: 0.6rem; }
.wrt-card-info { flex: 1; min-width: 0; }
.wrt-card-name { font-size: 0.875rem; font-weight: 700; color: var(--ink-blue); line-height: 1.3; }
.wrt-card-expiry-badge { font-size: 0.6875rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 6px; border: 1px solid; background: transparent; flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wrt-card-expiry-badge.red   { color: var(--error); border-color: #f5bebe; }
.wrt-card-expiry-badge.amber { color: var(--warning-ink); border-color: #f0d490; }
.wrt-card-expiry-badge.ok    { color: var(--ink-faint); border-color: var(--divider); }
.wrt-card-expiry-badge.exp   { color: var(--ink-faint); border-color: var(--divider); }
.wrt-card-dates { display: flex; gap: 1.25rem; margin-top: 0.45rem; }
.wrt-card-date-lbl { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.wrt-card-date-val { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); margin-top: 1px; }
.wrt-card-foot { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; align-items: center; }
.wrt-foot-chip { font-size: 0.6875rem; font-weight: 600; padding: 0.14rem 0.45rem; border-radius: 6px; border: 1px solid var(--divider); background: transparent; color: var(--slate); white-space: nowrap; }
.wrt-foot-chip.blue { border-color: var(--copper-200); color: var(--copper-700); }
.wrt-foot-chip.green { border-color: #bfe0cf; color: var(--success-ink); }
.wrt-edit-btn { margin-left: auto; font-size: 0.6875rem; font-weight: 600; padding: 0.14rem 0.55rem; border-radius: 6px; border: 1px solid var(--divider); background: var(--surface); color: var(--slate); cursor: pointer; }
.wrt-card.expired { opacity: 0.65; }

/* Expiry alert banner (mobile) */
.wrt-alert-banner { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--error-bg); border: 1px solid #f5bebe; border-radius: 12px; padding: 0.75rem; margin-bottom: 0.75rem; }
.wrt-alert-text { flex: 1; }
.wrt-alert-title { font-size: 0.8rem; font-weight: 700; color: var(--error-ink); }
.wrt-alert-items { margin-top: 0.25rem; font-size: 0.7125rem; color: var(--error-ink); display: flex; flex-direction: column; gap: 0.12rem; }
.wrt-alert-item::before { content: "•  "; }

/* FAB */
#wrt-fab { position: fixed; bottom: 5.5rem; right: 1.1rem; width: 54px; height: 54px; border-radius: 18px; background: var(--ink-blue); border: none; color: var(--parchment); cursor: pointer; box-shadow: 0 4px 14px rgba(15,29,45,.25); align-items: center; justify-content: center; font-size: 1.5rem; z-index: 20; transition: transform 0.1s; }
#wrt-fab:active { transform: scale(0.94); }

/* Warranty add/edit sheet */
#wrt-sheet-overlay { position: fixed; inset: 0; background: rgba(10,20,32,0.45); backdrop-filter: blur(2px); z-index: 200; display: none; align-items: flex-end; }
#wrt-sheet-overlay.open { display: flex; }
.wrt-sheet { background: var(--surface); border-radius: 28px 28px 0 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 1.1rem 1.2rem 2rem; max-height: 92vh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(10,20,32,.2); }
.wrt-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-200); margin: 0 auto 0.75rem; }
.wrt-sheet-title { font-size: 1.0625rem; font-weight: 700; text-align: center; letter-spacing: -0.01em; color: var(--ink-blue); }
.wrt-sheet-sub { font-size: 0.75rem; color: var(--ink-faint); text-align: center; margin-top: 0.2rem; margin-bottom: 0.25rem; }
.wrt-form-row { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.75rem; }
.wrt-form-lbl { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
.wrt-form-input { font-family: inherit; font-size: 0.9375rem; color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: 12px; padding: 0.55rem 0.75rem; width: 100%; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.wrt-form-input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.wrt-form-input.prefilled { border-color: #bfe0cf; background: var(--success-bg); }
.wrt-form-input.calculated { background: var(--mist); border-color: var(--divider); color: var(--slate); font-style: italic; }
.wrt-duration-btns { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.wrt-dur-btn { font-size: 0.8125rem; font-weight: 700; padding: 0.35rem 0.7rem; border-radius: 9px; border: 1.5px solid var(--blue-grey); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: all 0.12s; }
.wrt-dur-btn.active { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--parchment); }
.wrt-calc-hint { font-size: 0.6875rem; color: var(--ink-faint); margin-top: 0.15rem; }
.wrt-linked-tx { background: var(--mist); border: 1.5px solid var(--divider); border-radius: 12px; padding: 0.55rem 0.75rem; }
.wrt-linked-tx.prefilled { border-color: #bfe0cf; background: var(--success-bg); }
.wrt-linked-tx-desc { font-size: 0.875rem; font-weight: 700; color: var(--ink-blue); }
.wrt-linked-tx-meta { font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.12rem; }
.wrt-attach-area { background: var(--success-bg); border: 1.5px solid #bfe0cf; border-radius: 12px; padding: 0.65rem 0.75rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.wrt-attach-area.empty { background: var(--surface); border: 1.5px dashed var(--divider); color: var(--slate); }
.wrt-sheet-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.wrt-sheet-actions .btn-secondary { flex: 1; padding: 0.7rem; }
.wrt-sheet-actions .btn-primary { flex: 2; padding: 0.7rem; }
.wrt-tx-search-wrap { position: relative; }
.wrt-tx-search-results { background: var(--surface); border: 1.5px solid var(--blue-grey); border-top: none; border-radius: 0 0 12px 12px; max-height: 160px; overflow-y: auto; z-index: 5; }
.wrt-tx-result-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--divider); }
.wrt-tx-result-item:last-child { border-bottom: none; }
.wrt-tx-result-item:hover { background: var(--mist); }
.wrt-tx-result-desc { font-size: 0.8125rem; font-weight: 600; color: var(--ink-blue); }
.wrt-tx-result-meta { font-size: 0.6875rem; color: var(--ink-faint); }
.wrt-clear-tx { background: none; border: none; color: var(--error); cursor: pointer; font-size: 0.75rem; font-weight: 600; padding: 0; }

/* ══ M24 — Desktop dashboard view ══════════════════════════ */

/* Default: show mobile, hide desktop */
#dash-desktop-view { display: none; }
#dash-mobile-view  { display: block; }

/* Desktop: show desktop, hide mobile. */
@media (min-width: 769px) {
  #dash-desktop-view { display: block; }
  #dash-mobile-view  { display: none; }
}

/* Shell: left balances pane ‖ main column (W13). Page-scroll model; the pane is
   sticky so balances stay visible while the main column scrolls. */
.dash-shell { display: flex; gap: 1.4rem; max-width: 1320px; width: 100%; margin: 0 auto; padding: 1.5rem 2rem 3rem; align-items: flex-start; box-sizing: border-box; }
.dash-side { width: 244px; flex-shrink: 0; position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
.dash-side .dash-bal-head { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-start; }
.dash-side .dash-sync-status-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.dash-side .dash-sync-status-row .btn { justify-content: center; }
/* Balances as ONE flat block (filter-pane language), not stacked tiles */
.dash-side .dash-bal-grid { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--blue-grey); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
/* Owner group header inside the dashboard balances list (joint mode only). */
.dash-bal-grp { padding: 0.5rem 0.85rem 0.25rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); background: var(--mist); border-bottom: 1px solid var(--mist); }
.dash-bal-grp:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.dash-bal-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.62rem 0.85rem; border: 0; border-bottom: 1px solid var(--mist); background: none; text-align: left; cursor: pointer; font: inherit; transition: background 0.1s; }
.dash-bal-row:last-child { border-bottom: 0; }
.dash-bal-row:hover { background: var(--mist); }
.dash-bal-row-ic { color: var(--ink-faint); font-size: 1rem; flex-shrink: 0; display: flex; }
.dash-bal-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-bal-row-main .nm { font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bal-row-main .dt { font-size: var(--t-2xs); color: var(--ink-faint); }
.dash-bal-row-amt { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-bal-row-amt.neg { color: var(--error); }

/* Main column — fills the rest of the shell */
.dash-dt-scroll { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }

/* Topbar inner wrapper — aligns DASHBOARD label with the right edge of the shell */
.dash-topbar-inner { max-width: 1320px; margin: 0 auto; width: 100%; padding: 0 2rem; box-sizing: border-box; display: flex; justify-content: flex-end; }

/* Narrow desktop: drop the pane on top, balances revert to a wrapping grid */
@media (min-width: 769px) and (max-width: 960px) {
  .dash-shell { flex-direction: column; align-items: stretch; }
  .dash-side { width: auto; position: static; }
  .dash-side .dash-sync-status-row { flex-direction: row; align-items: center; }
  .dash-side .dash-sync-status-row .btn { margin-left: auto; }
  /* balances block: two columns of rows so it isn't a tall full-width strip */
  .dash-side .dash-bal-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .dash-bal-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* Month arrow nav (spending card) */
.dash-month-nav { display: flex; align-items: center; gap: 0.35rem; }
.dash-month-btn { width: 26px; height: 26px; border-radius: var(--r-sm); border: 1.5px solid var(--blue-grey); background: var(--surface); color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; line-height: 1; transition: border-color 0.1s, color 0.1s; padding: 0; }
.dash-month-btn:hover:not(:disabled) { border-color: var(--ink-200); color: var(--ink-blue); }
.dash-month-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.dash-month-lbl { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); min-width: 96px; text-align: center; }

/* Balance section header */
.dash-bal-head { display: flex; align-items: center; justify-content: space-between; }
.dash-sync-ok { display: flex; align-items: center; gap: 0.35rem; font-size: var(--t-xs); color: var(--success); font-weight: 600; }

/* Balance grid */
.dash-bal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.9rem; }
.dash-bal-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.1rem 1.2rem; cursor: pointer; transition: box-shadow 0.15s; }
.dash-bal-card:hover { box-shadow: var(--sh-3); }
.dash-bal-acct { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 0.4rem; }
.dash-bal-amount { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-blue); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.dash-bal-amount.neg { color: var(--error); }
.dash-bal-date { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.3rem; }

/* Mid section: two equal columns */
.dash-mid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

/* Net Worth card */
.dash-nw-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; display: flex; flex-direction: column; }
.dash-nw-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.1rem 1.2rem 0.75rem; }
.dash-nw-total { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; color: var(--ink-blue); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.dash-nw-rows { padding: 0 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.dash-nw-row { display: flex; align-items: center; gap: 0.75rem; }
.dash-nw-row-lbl { font-size: var(--t-sm); flex: 0 0 130px; color: var(--ink-soft); }
.dash-nw-bar-wrap { flex: 1; height: 6px; background: var(--mist); border-radius: 3px; overflow: hidden; }
.dash-nw-bar { height: 100%; border-radius: 3px; }
.dash-nw-bar.cash { background: var(--ink-blue); }
.dash-nw-bar.inv  { background: var(--copper); }
.dash-nw-row-pct { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint); width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.dash-nw-row-amt { font-size: var(--t-sm); font-weight: 700; width: 100px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-blue); }
.dash-nw-foot { border-top: 1px solid var(--divider); background: var(--mist); font-size: var(--t-xs); padding: 0.6rem 1.2rem; display: flex; gap: 0.4rem; align-items: center; color: var(--ink-faint); }
.dash-nw-delta { font-weight: 700; }
.dash-nw-delta.pos { color: var(--success); }
.dash-nw-delta.neg { color: var(--error); }

/* Spending card */
.dash-spend-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.dash-spend-head { display: flex; align-items: flex-start; justify-content: space-between; }
.dash-spend-period { font-size: var(--t-xs); background: var(--mist); border: 1px solid var(--divider); border-radius: var(--r-xs); padding: 0.25rem 0.5rem; font-family: inherit; color: var(--ink-blue); outline: none; cursor: pointer; }
.dash-donut-wrap { position: relative; height: 190px; }
.dash-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dash-donut-lbl { font-size: var(--t-2xs); text-transform: uppercase; color: var(--slate); letter-spacing: 0.06em; font-weight: 700; }
.dash-donut-val { font-size: var(--t-lg); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.dash-legend { display: flex; flex-direction: column; gap: 0; }
.dash-legend-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0; }
.dash-legend-row + .dash-legend-row { border-top: 1px solid var(--divider); }
.dash-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-legend-name { flex: 1; font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-legend-bar-wrap { width: 52px; height: 4px; background: var(--mist); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.dash-legend-bar { height: 100%; border-radius: 2px; }
.dash-legend-amt { font-size: var(--t-xs); font-weight: 700; width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-blue); flex-shrink: 0; }
.dash-legend-avg { font-size: var(--t-2xs); color: var(--ink-faint); width: 52px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dash-legend-delta { font-size: var(--t-2xs); font-weight: 700; width: 38px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dash-legend-delta.above { color: var(--warning-ink); }
.dash-legend-delta.below { color: var(--success); }

/* ════════════════════════════════════════════════════════════
   Spending (W10 / M35) — desktop analysis surface
   Layout: filter pane ‖ main (stat strip → donut+legend → trend)
   ‖ inline drill-down panel. Mobile = stacked column + drill sheet.
   Donut + legend reuse the dashboard encoding (PALETTE, cutout 64%,
   white borders; dot · name · bar · amount · 6-mo avg · ±% delta).
   ════════════════════════════════════════════════════════════ */
.sp-layout { display: flex; flex-direction: column; min-height: 0; }

/* ── filter pane ─────────────────────────────────────────── */
.sp-filter { background: var(--surface); }
.sp-fp-sec { padding: 0.85rem 0.95rem; border-bottom: 1px solid var(--divider); }
.sp-fp-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.55rem; }
.sp-datenav { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0.25rem 0.4rem; margin-bottom: 0.5rem; }
.sp-datenav .lbl { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.sp-datenav button { width: 26px; height: 26px; border: none; background: none; cursor: pointer; color: var(--slate); display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); }
.sp-datenav button:hover:not(:disabled) { background: var(--mist); color: var(--ink-blue); }
.sp-datenav button:disabled { opacity: 0.35; cursor: default; }
.sp-presets { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sp-preset { font-size: var(--t-2xs); font-weight: 600; padding: 0.26rem 0.55rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.sp-preset:hover { border-color: var(--ink-300); }
.sp-preset.active { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--parchment); }
.sp-acct { display: flex; align-items: center; gap: 0.5rem; padding: 0.33rem 0; cursor: pointer; }
.sp-acct .nm { flex: 1; font-size: var(--t-sm); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-acct .ct { font-size: var(--t-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sp-acct.active .nm { color: var(--ink-blue); font-weight: 700; }
.sp-flags { display: flex; gap: 0.35rem; }
.sp-flag { font-size: var(--t-xs); font-weight: 700; padding: 0.24rem 0.7rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--slate); cursor: pointer; }
.sp-flag.active { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--parchment); }
.sp-select { width: 100%; font-size: var(--t-sm); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0.34rem 0.45rem; background: var(--surface); color: var(--ink-soft); font-family: inherit; }
.sp-fp-clear { width: 100%; font-size: var(--t-xs); font-weight: 600; color: var(--slate); background: none; border: none; cursor: pointer; padding: 0.5rem; text-align: left; display: inline-flex; align-items: center; gap: 0.35rem; }
.sp-fp-clear:hover { color: var(--ink-blue); }

/* ── main scroll column ──────────────────────────────────── */
.sp-main { background: var(--bg); padding: 1.1rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.sp-main > * { flex-shrink: 0; } /* DS .stat-strip has overflow:hidden → would collapse in a flex scroll column (IA §2r build note) */
.sp-strip { display: flex; }

/* hero + cards */
.sp-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.05rem 1.15rem; }
.sp-card-head { margin-bottom: 0.6rem; }
.sp-card-title { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); }
.sp-card-sub { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.1rem; }
.sp-hero-body { display: grid; grid-template-columns: 230px 1fr; gap: 1.2rem; align-items: center; min-width: 0; }
.sp-donut-wrap { position: relative; height: 210px; }
.sp-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.sp-donut-lbl { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--slate); }
.sp-donut-val { font-size: var(--t-xl); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }

/* legend (mirrors dashboard columns + drill affordance) */
.sp-leg { display: flex; flex-direction: column; min-width: 0; }
.sp-leg-head, .sp-leg-row { display: grid; grid-template-columns: 14px 1fr 64px 78px 70px 56px 16px; align-items: center; gap: 0.55rem; }
.sp-leg-head { padding: 0 0 0.4rem; border-bottom: 1px solid var(--divider); }
.sp-leg-head span { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); }
.sp-leg-head .r { text-align: right; }
.sp-leg-row { padding: 0.4rem 0.3rem; border-radius: var(--r-sm); cursor: pointer; border-bottom: 1px solid var(--divider); }
.sp-leg-row:last-child { border-bottom: none; }
.sp-leg-row:hover { background: var(--mist); }
.sp-leg-row.active { background: var(--copper-100); }
.sp-leg-dot { width: 10px; height: 10px; border-radius: 50%; }
.sp-leg-name { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-leg-bar-wrap { height: 5px; background: var(--mist); border-radius: 3px; overflow: hidden; }
.sp-leg-bar { height: 100%; border-radius: 3px; }
.sp-leg-amt { font-size: var(--t-sm); font-weight: 700; text-align: right; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.sp-leg-avg { font-size: var(--t-xs); text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sp-leg-delta { font-size: var(--t-xs); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.sp-leg-delta.above { color: var(--warning-ink); }
.sp-leg-delta.below { color: var(--success); }
.sp-leg-chev { color: var(--ink-300); display: flex; justify-content: flex-end; }
.sp-leg-empty { font-size: var(--t-xs); color: var(--ink-faint); padding: 0.6rem 0; }

/* drill-open reflow: donut over compact legend so the 3rd column fits */
.sp-hero-body.stacked { grid-template-columns: 1fr; gap: 0.85rem; }
.sp-hero-body.stacked .sp-donut-wrap { height: 172px; max-width: 240px; margin: 0 auto; }
.sp-leg.compact .sp-leg-head, .sp-leg.compact .sp-leg-row { grid-template-columns: 12px 1fr auto 50px 16px; }

.sp-trend-wrap { height: 230px; }

/* ── drill-down panel ────────────────────────────────────── */
.sp-drill { background: var(--surface); display: flex; flex-direction: column; }
.sp-drill-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--divider); }
.sp-drill-swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.sp-drill-title { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-drill-x { width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-drill-x:hover { color: var(--ink-blue); border-color: var(--ink-300); }
.sp-drill-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.sp-drill-hero .amt { font-size: var(--t-2xl); font-weight: 700; color: var(--ink-blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.sp-drill-hero .cmp { font-size: var(--t-sm); margin-top: 0.4rem; color: var(--ink-faint); }
.sp-drill-hero .cmp strong.above { color: var(--warning-ink); }
.sp-drill-hero .cmp strong.below { color: var(--success); }
.sp-drill-substats { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; }
.sp-ss { padding: 0.6rem 0.7rem; }
.sp-ss + .sp-ss { border-left: 1px solid var(--divider); }
.sp-ss .l { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); font-weight: 700; }
.sp-ss .v { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.sp-drill-mini-lbl, .sp-drill-txlbl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.4rem; }
.sp-drill-mini { height: 120px; }
.sp-tx { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--divider); }
.sp-tx:last-child { border-bottom: none; }
.sp-tx .d { font-size: var(--t-2xs); color: var(--ink-faint); width: 48px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sp-tx .n { flex: 1; font-size: var(--t-sm); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tx .a { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.sp-drill-foot { padding: 0.85rem 1rem; border-top: 1px solid var(--divider); }
.sp-drill-open { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-sm); font-weight: 700; color: var(--copper); text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }

/* ── desktop layout (≥769px): pane ‖ main ‖ drill ─────────── */
@media (min-width: 769px) {
  body.tab-is-spending #tab-spending { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
  .sp-layout { flex: 1; flex-direction: row; }
  .sp-filter { width: 218px; flex-shrink: 0; border-right: 1px solid var(--divider); overflow-y: auto; }
  .sp-main { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem 3rem; }
  .sp-drill { width: 358px; flex-shrink: 0; border-left: 1px solid var(--divider); overflow-y: auto; }
}
@media (min-width: 769px) and (max-width: 1080px) { .sp-filter { width: 190px; } .sp-drill { width: 310px; } }

/* ── mobile (≤768px): stacked + drill bottom-sheet ───────── */
@media (max-width: 768px) {
  .sp-mob-monthbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; background: var(--surface); border-bottom: 1px solid var(--divider); }
  .sp-mob-monthbar .lbl { flex: 1; text-align: center; font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
  .sp-mob-monthbar button { width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--slate); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .sp-mob-monthbar button:disabled { opacity: 0.35; }
  .sp-mob-monthbar select { font-size: var(--t-xs); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0.2rem 0.35rem; background: var(--surface); color: var(--ink-soft); font-family: inherit; }
  .sp-mob-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.85rem; }
  .sp-mob-strip { display: flex; gap: 0.5rem; }
  .sp-mob-mini { flex: 1; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 0.55rem 0.65rem; }
  .sp-mob-mini .l { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); font-weight: 700; }
  .sp-mob-mini .v { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); margin-top: 0.1rem; font-variant-numeric: tabular-nums; }
  .sp-mob-mini .v.above { color: var(--warning-ink); }
  .sp-mob-mini .v.below { color: var(--success); }
  .sp-mob-donut-wrap { position: relative; height: 180px; }
  .sp-mleg-row { display: grid; grid-template-columns: 10px 1fr auto 46px; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
  .sp-mleg-row:last-child { border-bottom: none; }
  .sp-mleg-dot { width: 9px; height: 9px; border-radius: 50%; }
  .sp-mleg-name { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-mleg-amt { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
  .sp-mleg-delta { font-size: var(--t-2xs); font-weight: 700; text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .sp-mleg-delta.above { color: var(--warning-ink); }
  .sp-mleg-delta.below { color: var(--success); }
  /* drill bottom-sheet (reuses §2k conventions) */
  .sp-sheet-dim { position: fixed; inset: 0; background: rgba(10,20,32,0.45); z-index: 60; }
  .sp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 34px rgba(0,0,0,0.32); padding: 0.7rem 1rem 1.4rem; max-height: 86%; overflow-y: auto; }
  .sp-sheet-handle { width: 38px; height: 4px; background: var(--ink-200); border-radius: 2px; margin: 0 auto 0.7rem; }
  .sp-sheet-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.8rem; }
  .sp-sheet-head .sw { width: 11px; height: 11px; border-radius: 50%; }
  .sp-sheet-head .ti { flex: 1; font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); }
}

/* Visa Gold trend card */
.dash-trend-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.1rem 1.2rem; }
.dash-trend-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.85rem; }
.dash-trend-lbl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.dash-trend-sub { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.2rem; }
.dash-trend-chart-wrap { height: 180px; }
.dash-trend-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--divider); padding-top: 0.75rem; margin-top: 0.75rem; }
.dash-trend-stat { padding: 0 0.75rem; }
.dash-trend-stat:first-child { padding-left: 0; }
.dash-trend-stat + .dash-trend-stat { border-left: 1px solid var(--divider); }
.dash-trend-stat-lbl { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.dash-trend-stat-val { font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-blue); margin-top: 0.2rem; }
.dash-trend-stat-val.neg { color: var(--error); }
.dash-trend-stat-val.pos { color: var(--success); }

/* ═══════════════════════════════════════════════════════════
   M27 — INVOICES MODULE
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body.tab-is-invoices #tab-invoices { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
}
.inv-layout { flex: 1; display: flex; min-height: 0; }
.inv-filter-pane { width: 248px; flex-shrink: 0; background: var(--n-25); border-right: 1px solid var(--divider); overflow-y: auto; display: none; flex-direction: column; }
.inv-fp-cta { padding: 1rem 1.05rem; border-bottom: 1px solid var(--divider); }
.inv-fp-sec { padding: 0.875rem 1.05rem; border-bottom: 1px solid var(--divider); }
.inv-fp-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.6rem; display: flex; align-items: center; justify-content: space-between; }
.inv-fp-search { position: relative; margin-bottom: 0.5rem; }
.inv-fp-search .ic { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.95rem; }
.inv-fp-search input { width: 100%; font-family: inherit; font-size: var(--t-sm); color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: var(--r-md); padding: 0.5rem 0.6rem 0.5rem 1.95rem; outline: none; }
.inv-fp-search input::placeholder { color: var(--ink-faint); }
.inv-fp-search input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.inv-fp-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.46rem 0.5rem; cursor: pointer; border-radius: var(--r-sm); transition: background 0.12s; }
.inv-fp-row:hover { background: var(--mist); }
.inv-fp-row.active { background: var(--mist); }
.inv-fp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.inv-fp-lbl { font-size: var(--t-sm); color: var(--ink-soft); flex: 1; }
.inv-fp-row.active .inv-fp-lbl { color: var(--ink-blue); font-weight: 700; }
.inv-fp-ct { font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.inv-main { flex: 1; overflow-y: auto; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.875rem; }
.inv-topbar { display: none; align-items: center; justify-content: space-between; flex-shrink: 0; }
.inv-topbar-title { font-size: var(--t-xl); font-weight: 700; color: var(--ink-blue); letter-spacing: -0.02em; }
.inv-topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.inv-mobile-hdr { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.inv-mobile-title { font-size: var(--t-lg); font-weight: 700; color: var(--ink-blue); }
.inv-chip-row { display: flex; gap: 0.35rem; overflow-x: auto; flex-shrink: 0; padding-bottom: 2px; }
.inv-chip-row::-webkit-scrollbar { display: none; }
.inv-chip-row .chip { cursor: pointer; flex-shrink: 0; }
.inv-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: var(--s-4); cursor: pointer; position: relative; flex-shrink: 0; transition: box-shadow 0.12s; }
.inv-card:hover { box-shadow: var(--sh-3); }
.inv-card.inv-draft { border: 1.5px dashed var(--divider); box-shadow: none; background: var(--n-25); }
.inv-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.inv-num { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.inv-client-nm { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; }
.inv-card-meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.3rem; }
.inv-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; }
.inv-card-chips { display: flex; align-items: center; gap: 0.4rem; }
.inv-amt { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.inv-amt.faint { color: var(--ink-faint); }
/* Invoice status chips — DS outline (transparent fill + coloured border + text); no fill pills */
.chip-inv-draft   { background: transparent; color: var(--slate); border-color: var(--divider); }
.chip-inv-sent    { background: transparent; color: var(--info); border-color: var(--info); }
.chip-inv-paid    { background: transparent; color: var(--success-ink); border-color: var(--success-ink); }
.chip-inv-overdue { background: transparent; color: var(--error); border-color: var(--error); }
.inv-3dot { width: 28px; height: 28px; border-radius: var(--r-xs); background: var(--mist); border: 1px solid var(--divider); display: flex; align-items: center; justify-content: center; color: var(--ink-mute); cursor: pointer; flex-shrink: 0; }
.inv-3dot:hover, .inv-3dot.open { background: var(--copper-100); border-color: var(--copper); color: var(--copper); }
.inv-card > .menu { position: absolute; right: 0.875rem; top: calc(100% + 4px); z-index: 30; }
.inv-tbl-wrap { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; flex-shrink: 0; }
.inv-tbl-wrap .table tr.inv-tbl-row { cursor: pointer; }
.inv-tbl-wrap .table tr.inv-tbl-row:hover td { background: var(--mist); }
.inv-tbl-num { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.inv-tbl-amt { font-weight: 700; color: var(--ink-blue); text-align: right; font-variant-numeric: tabular-nums; }
.inv-tbl-row.row-dim td { opacity: 0.55; }
.inv-row-actions { position: relative; display: inline-block; }
.inv-row-actions > .menu { position: absolute; right: 0; top: calc(100% - 0.2rem); z-index: 30; }
.inv-match-banner { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; background: var(--warning-bg); border: 1px solid #f0d79a; border-radius: var(--r-md); padding: 0.85rem 0.9rem; flex-shrink: 0; }
.inv-match-top { display: flex; gap: 0.6rem; align-items: flex-start; }
.inv-match-preview { background: var(--surface); border-radius: var(--r-sm); border: 1px solid #f0d79a; padding: 0.55rem 0.7rem; display: flex; justify-content: space-between; align-items: center; }
.inv-match-preview-num { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.inv-match-preview-meta { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; }
.inv-match-preview-amt { font-size: var(--t-base); font-weight: 700; color: var(--warning-ink); font-variant-numeric: tabular-nums; }
.inv-match-actions { display: flex; gap: 0.5rem; }
.tx-inv-match-chip { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; font-size: var(--t-xs); font-weight: 700; padding: 0.18rem 0.5rem; border-radius: var(--r-xs); background: transparent; color: var(--warning-ink); border: 1px solid var(--warning-ink); }
.tx-inv-link-chip { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; font-size: var(--t-xs); font-weight: 700; padding: 0.18rem 0.5rem; border-radius: var(--r-xs); background: transparent; color: var(--success-ink); border: 1px solid var(--success-ink); }
.inv-overlay { display: none; position: fixed; inset: 0; background: var(--parchment); z-index: 160; flex-direction: column; }
.inv-overlay.open { display: flex; }
.inv-ov-topbar { display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.75rem 1rem; border-bottom: 1px solid var(--divider); background: var(--surface); flex-shrink: 0; }
.inv-ov-back { display: flex; align-items: center; gap: 0.2rem; color: var(--copper); background: none; border: none; cursor: pointer; font-weight: 700; font-size: var(--t-sm); font-family: inherit; white-space: nowrap; }
.inv-ov-title { font-size: var(--t-base); font-weight: 700; flex: 1; color: var(--ink-blue); }
.inv-ov-body { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.875rem; }
.inv-ov-actions { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--divider); padding: 0.875rem 1rem; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.inv-ed-grid { display: flex; flex-direction: column; gap: 0.875rem; }
.inv-ed-left, .inv-ed-right { display: flex; flex-direction: column; gap: 0.7rem; }
.inv-li-wrap { display: flex; flex-direction: column; }
.inv-li-head { display: grid; grid-template-columns: 1fr 52px 100px 84px 28px; gap: 0.5rem; padding: 0.4rem 0.875rem; background: var(--mist); border: 1.5px solid var(--divider); border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: none; }
.inv-li-col { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.inv-li-col.r { text-align: right; } .inv-li-col.c { text-align: center; }
.inv-li-body { background: var(--surface); border: 1.5px solid var(--divider); border-top: none; }
.inv-li-row { display: grid; grid-template-columns: 1fr 52px 100px 84px 28px; gap: 0.5rem; align-items: start; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--divider); }
.inv-li-row:last-child { border-bottom: none; }
.inv-li-input { font-family: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); background: var(--n-25); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.35rem 0.5rem; width: 100%; outline: none; }
.inv-li-input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.inv-li-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-li-input.qty { text-align: center; }
.inv-li-input::placeholder { color: var(--ink-faint); font-weight: 400; }
.inv-li-total { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); text-align: right; font-variant-numeric: tabular-nums; padding-top: 0.4rem; }
.inv-li-del { background: none; border: none; color: var(--ink-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; padding-top: 0.35rem; }
.inv-li-del:hover { color: var(--error); }
.inv-li-sub { padding: 0.2rem 0.875rem 0.55rem; border-bottom: 1px solid var(--divider); }
.inv-li-url-input { font-family: inherit; font-size: var(--t-xs); color: var(--info); background: var(--info-bg); border: 1px solid #c5d6ea; border-radius: var(--r-xs); padding: 0.25rem 0.5rem; width: 100%; outline: none; margin-top: 0.35rem; }
.inv-li-url-input:focus { border-color: var(--info); }
.inv-li-url-chip { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; font-size: var(--t-xs); font-weight: 600; color: var(--info); background: var(--info-bg); border: 1px solid #c5d6ea; border-radius: var(--r-xs); padding: 0.2rem 0.45rem; }
.inv-li-add { background: var(--surface); border: 1.5px dashed var(--blue-grey); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); padding: 0.6rem; font-size: var(--t-sm); font-weight: 700; color: var(--copper); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.inv-li-add:hover { background: var(--copper-100); }
.inv-totals { background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-md); overflow: hidden; }
.inv-tot-row { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.9rem; }
.inv-tot-row + .inv-tot-row { border-top: 1px solid var(--divider); }
.inv-tot-row.grand { background: var(--mist); }
.inv-tot-lbl { font-size: var(--t-sm); color: var(--slate); }
.inv-tot-val { font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.inv-tot-row.grand .inv-tot-lbl { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.inv-tot-row.grand .inv-tot-val { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); }
.inv-vat-note { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.1rem; }
.inv-detail-section { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.inv-detail-client { padding: 0.875rem; border-bottom: 1px solid var(--divider); }
.inv-detail-client-name { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.inv-detail-client-meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.2rem; line-height: 1.55; }
.inv-detail-dates { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
.inv-detail-date-item .inv-date-lbl { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.inv-detail-date-item .inv-date-val { font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); margin-top: 0.1rem; }
.inv-detail-li-hdr { display: flex; padding: 0.4rem 0.875rem; background: var(--mist); border-bottom: 1px solid var(--divider); }
.inv-detail-li-desc-col { flex: 1; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.inv-detail-li-amt-col { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); min-width: 80px; text-align: right; }
.inv-detail-li-row { display: flex; align-items: flex-start; padding: 0.6rem 0.875rem; border-bottom: 1px solid var(--divider); gap: 0.5rem; }
.inv-detail-li-row:last-child { border-bottom: none; }
.inv-detail-li-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.inv-detail-li-qty { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.1rem; font-variant-numeric: tabular-nums; }
.inv-detail-li-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--t-xs); font-weight: 600; color: var(--info); background: var(--info-bg); border: 1px solid #c5d6ea; border-radius: var(--r-xs); padding: 0.18rem 0.45rem; margin-top: 0.35rem; text-decoration: none; }
.inv-detail-li-amount { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); min-width: 80px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.inv-detail-totals { padding: 0.5rem 0.875rem; background: var(--mist); border-top: 1px solid var(--divider); }
.inv-detail-tot-row { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.inv-detail-tot-lbl { font-size: var(--t-sm); color: var(--slate); }
.inv-detail-tot-val { font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.inv-detail-tot-row.grand { border-top: 1.5px solid var(--divider); margin-top: 0.25rem; padding-top: 0.4rem; }
.inv-detail-tot-row.grand .inv-detail-tot-lbl { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.inv-detail-tot-row.grand .inv-detail-tot-val { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); }
.inv-pay-block { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 0.875rem; }
.inv-pay-title { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); margin-bottom: 0.4rem; }
.inv-pay-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.15rem 0; gap: 1rem; }
.inv-pay-key { font-size: var(--t-xs); color: var(--slate); }
.inv-pay-val { font-size: var(--t-xs); font-weight: 700; color: var(--ink-blue); text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 769px) {
  .inv-filter-pane { display: flex; }
  .inv-main { padding: 1.5rem 1.75rem; gap: 1.1rem; }
  .inv-topbar { display: flex; }
  .inv-mobile-hdr { display: none !important; }
  .inv-chip-row { display: none !important; }
  .inv-ed-grid { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
  .inv-ed-left { width: 320px; flex-shrink: 0; }
  .inv-ed-right { flex: 1; }
  .inv-ov-body { padding: 1.5rem 1.75rem; }
}
@media (max-width: 768px) {
  .inv-li-wrap { overflow-x: auto; }
  .inv-li-head, .inv-li-body, .inv-li-add { min-width: 460px; }
}

/* ═══════════════════════════════════════════════════════════
   M28 — INSURANCE
   ═══════════════════════════════════════════════════════════ */

/* ── Tab-level body class — hides global filter bar, enables flex column layout ── */
body.tab-is-insurance #tab-insurance { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }

/* ── Layout shell ── */
.ins-layout { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* ── Filter pane ── */
.ins-filter-pane { width: 248px; flex-shrink: 0; background: var(--n-25); border-right: 1px solid var(--divider); overflow-y: auto; scrollbar-width: thin; display: none; flex-direction: column; }
.ins-fp-cta { padding: 1rem 1rem 0.9rem; border-bottom: 1px solid var(--divider); }
.ins-fp-sec { padding: 0.9rem 1rem; border-bottom: 1px solid var(--divider); }
.ins-fp-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.55rem; display: flex; align-items: center; justify-content: space-between; }
.ins-fp-title .ic { font-size: 0.95rem; color: var(--ink-faint); }
.ins-fp-search { position: relative; }
.ins-fp-search .ic { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.95rem; pointer-events: none; }
.ins-fp-search input { width: 100%; font-family: inherit; font-size: var(--t-sm); color: var(--ink-blue); background: var(--surface); border: 1.5px solid var(--blue-grey); border-radius: var(--r-md); padding: 0.5rem 0.6rem 0.5rem 2rem; outline: none; transition: border-color 0.15s; }
.ins-fp-search input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.ins-fp-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.45rem; cursor: pointer; border-radius: var(--r-sm); transition: background 0.12s; }
.ins-fp-row:hover { background: var(--mist); }
.ins-fp-row.active { background: var(--mist); }
.ins-fp-row .ic { font-size: 1rem; color: var(--slate); flex-shrink: 0; width: 18px; text-align: center; }
.ins-fp-row.active .ic { color: var(--copper); }
.ins-fp-lbl { font-size: var(--t-sm); color: var(--ink-soft); flex: 1; }
.ins-fp-row.active .ins-fp-lbl { color: var(--ink-blue); font-weight: 700; }
.ins-fp-ct { font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ins-fp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Main area ── */
.ins-main { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.875rem; }

/* ── Standard topbar — desktop only; hidden on mobile (mobile uses ins-mobile-hdr) ── */
.ins-dt-topbar { display: none; }

/* ── Mobile header ── */
.ins-mobile-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0; }
.ins-mobile-title { font-size: var(--t-lg); font-weight: 800; color: var(--ink-blue); letter-spacing: -0.02em; }

/* ── Mobile chip row ── */
.ins-chip-row { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* ── Renewal banner ── */
.ins-renewal-banner { border-radius: var(--r-md); border: 1.5px solid #fb923c; background: #fff7ed; padding: 0.65rem 0.875rem; display: flex; align-items: flex-start; gap: 0.65rem; }
.ins-renewal-banner .ic { color: #c2410c; flex-shrink: 0; font-size: 1.1rem; margin-top: 0.1rem; }
.ins-renewal-banner-body { flex: 1; }
.ins-renewal-banner-title { font-size: var(--t-sm); font-weight: 700; color: #c2410c; }
.ins-renewal-banner-detail { font-size: var(--t-xs); color: #c2410c; margin-top: 0.1rem; line-height: 1.45; }
.ins-renewal-banner-btn { font-size: var(--t-xs); font-weight: 700; color: #c2410c; background: rgba(194,65,12,0.1); border: none; border-radius: var(--r-xs); padding: 0.25rem 0.6rem; margin-top: 0.45rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; }
.ins-renewal-banner-dismiss { background: none; border: none; color: var(--ink-faint); cursor: pointer; flex-shrink: 0; padding: 0.1rem; }

/* ── Desktop table ── */
.ins-tbl-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow-x: auto; }
.ins-tbl-card table { min-width: 820px; width: 100%; }
.ins-tbl-card .table tr.row-urgent td { background: var(--error-bg); }
.ins-tbl-card .table tr.row-soon td { background: var(--warning-bg); }
.ins-pol-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); white-space: nowrap; }
.ins-pol-insurer { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 1px; white-space: nowrap; }
.ins-pol-prem { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-pol-freq { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 1px; }
.ins-exp-date { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-exp-date.red { color: var(--error); }
.ins-exp-date.amber { color: var(--warning-ink); }
.ins-exp-date.muted { color: var(--ink-faint); font-weight: 500; }
.ins-row-actions { display: flex; align-items: center; gap: 0.35rem; justify-content: flex-end; }

/* ── Mobile cards ── */
.ins-card { background: var(--surface); border-radius: var(--r-lg); border: 1.5px solid var(--divider); padding: 0.75rem; box-shadow: var(--sh-1); }
.ins-card.urgent { border-color: #f1c4c4; background: #fff8f8; }
.ins-card.soon { border-color: #eccf90; background: #fffdf6; }
.ins-card-top { display: flex; align-items: flex-start; gap: 0.6rem; }
.ins-card-info { flex: 1; min-width: 0; }
.ins-card-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-card-insurer { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 1px; }
.ins-card-right { text-align: right; flex-shrink: 0; }
.ins-card-prem { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.ins-card-freq { font-size: var(--t-2xs); color: var(--ink-faint); }
.ins-card-3dot { width: 28px; height: 28px; border-radius: var(--r-xs); background: var(--n-100); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-mute); cursor: pointer; flex-shrink: 0; }
.ins-card-3dot.open { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.ins-card-bottom { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; flex-wrap: wrap; }
.ring-urgent { outline: 2px solid var(--error); outline-offset: 2px; }
.ring-soon { outline: 2px solid var(--warning); outline-offset: 2px; }

/* ── Card dropdown menu — position: fixed set dynamically by JS so it floats over scroll container ── */
.ins-card-menu { position: fixed; min-width: 185px; z-index: 300; }

/* ── Empty state ── */
.ins-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; }
.ins-empty .ic { font-size: 2.25rem; color: var(--ink-faint); }
.ins-empty-title { font-size: var(--t-base); font-weight: 700; color: var(--ink-soft); }
.ins-empty-sub { font-size: var(--t-sm); color: var(--ink-faint); line-height: 1.55; max-width: 280px; }

/* ── Add/Edit overlay ── */
.ins-overlay { position: fixed; inset: 0; background: rgba(10,20,32,0.45); z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.ins-sheet { background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.ins-sheet-handle { width: 36px; height: 4px; background: var(--blue-grey); border-radius: 2px; margin: 0.75rem auto 0; flex-shrink: 0; }
.ins-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem 0; flex-shrink: 0; }
.ins-sheet-title { font-size: var(--t-md); font-weight: 800; color: var(--ink-blue); letter-spacing: -0.01em; }
.ins-sheet-close { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; }
.ins-sheet-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ins-sheet-actions { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--divider); }
.ins-sheet-actions .btn { flex: 1; }
.ins-delete-btn { flex: 0 !important; padding: 0.55rem 0.75rem; color: var(--error); }

/* ── Form primitives (shared by sheet + renew modal) ── */
.ins-form-row { display: flex; gap: 0.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.form-lbl { font-size: var(--t-2xs); font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
.form-opt { font-size: var(--t-2xs); color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-input { font-family: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); background: var(--n-25); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.5rem 0.65rem; outline: none; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; }
.form-input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-100); }
.form-input::placeholder { color: var(--ink-faint); font-weight: 400; }
.form-input[readonly] { cursor: default; }
.form-select { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 72px; font-weight: 400; }

/* ── Toggle row ── */
.ins-toggle-row { background: var(--n-25); border: 1.5px solid var(--blue-grey); border-radius: var(--r-sm); padding: 0.65rem 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.ins-toggle-row.disabled { opacity: 0.45; pointer-events: none; }
.ins-toggle-icon { flex-shrink: 0; color: var(--ink-mute); }
.ins-toggle-body { flex: 1; }
.ins-toggle-title { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.ins-toggle-detail { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 0.08rem; line-height: 1.45; }
.ins-toggle-switch { width: 40px; height: 24px; border-radius: 12px; background: var(--copper); border: none; cursor: pointer; flex-shrink: 0; position: relative; transition: background 0.2s; padding: 0; }
.ins-toggle-switch.ins-toggle-off { background: var(--blue-grey); }
.ins-toggle-thumb { display: block; width: 20px; height: 20px; border-radius: 50%; background: white; position: absolute; top: 2px; right: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: right 0.2s; }
.ins-toggle-switch.ins-toggle-off .ins-toggle-thumb { right: auto; left: 2px; }

/* ── Next payment info box — neutral callout, icon carries the colour ── */
.ins-next-payment { background: var(--mist); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 0.65rem 0.75rem; }

/* ── Document area ── */
.ins-doc-placeholder { display: flex; align-items: center; gap: 0.65rem; border: 1.5px dashed var(--blue-grey); border-radius: var(--r-sm); padding: 0.75rem; cursor: pointer; }
.ins-doc-placeholder:hover { border-color: var(--copper); background: var(--copper-100); }
.ins-doc-placeholder .ic { color: var(--ink-faint); font-size: 1.2rem; }
.ins-doc-placeholder-text { font-size: var(--t-sm); font-weight: 600; color: var(--copper); }
.ins-doc-placeholder-sub { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.08rem; }
.ins-doc-uploaded { display: flex; align-items: center; gap: 0.65rem; background: var(--n-25); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: 0.65rem 0.75rem; }
.ins-doc-file-icon { width: 34px; height: 34px; border-radius: var(--r-xs); background: var(--mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-mute); }
.ins-doc-info { flex: 1; min-width: 0; }
.ins-doc-name { font-size: var(--t-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-doc-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.ins-doc-actions a { font-size: var(--t-xs); font-weight: 600; color: var(--info); background: var(--info-bg); border: 1px solid #c5d6ea; border-radius: var(--r-xs); padding: 0.2rem 0.5rem; text-decoration: none; }
.ins-doc-remove { font-size: var(--t-xs); font-weight: 600; color: var(--error); background: none; border: none; cursor: pointer; }
input[type="file"].ins-file-input { display: none; }

/* ── Renewal history ── */
.ins-history-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.4rem; border-bottom: 1px solid var(--divider); }
.ins-history-list { background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-md); overflow: hidden; margin-top: 0.35rem; }
.ins-history-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--divider); }
.ins-history-row:last-child { border-bottom: none; }
.ins-history-row.current-term { background: var(--mist); }
.ins-history-term { flex: 1; }
.ins-history-dates { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.ins-history-prem { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 2px; }
.ins-history-badge { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-full); padding: 0.1rem 0.4rem; white-space: nowrap; }

/* ── Renew modal ── */
.ins-modal-overlay { position: fixed; inset: 0; background: rgba(10,20,32,0.55); z-index: 250; display: flex; align-items: flex-end; justify-content: center; }
.ins-renew-sheet { background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; max-width: 560px; padding: 0.75rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ins-renew-title { font-size: var(--t-md); font-weight: 800; color: var(--ink-blue); letter-spacing: -0.01em; }
.ins-renew-sub { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.45; margin-top: -0.35rem; }
.ins-archive-note { background: var(--mist); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 0.55rem 0.75rem; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.45; display: flex; align-items: flex-start; gap: 0.5rem; }
.ins-archive-note .ic { flex-shrink: 0; margin-top: 0.1rem; color: var(--ink-mute); }
.ins-renew-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.ins-renew-actions .btn { flex: 1; }

/* ── Desktop overrides ── */
@media (min-width: 769px) {
  .ins-dt-topbar { display: flex; }
  .ins-filter-pane { display: flex; }
  .ins-main { padding: 1.5rem 1.75rem; gap: 1.1rem; }
  .ins-mobile-hdr { display: none !important; }
  .ins-chip-row { display: none !important; }

  .ins-sheet { max-width: 680px; border-radius: var(--r-xl); max-height: 88vh; margin: auto; }
  .ins-overlay { align-items: center; }

  .ins-renew-sheet { border-radius: var(--r-xl); margin: auto; }
  .ins-modal-overlay { align-items: center; }

  .ins-form-row { gap: 0.75rem; }
}

/* ════════════════════════════════════════════════════════════
   PAYABLES (CR11) — flexible obligations
   Structural twin of Insurance: topbar + filter pane + main.
════════════════════════════════════════════════════════════ */

/* Tab-level body class — flex column layout (no global filter bar post-CR4) */
body.tab-is-payables #tab-payables { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }

.pay-layout { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* ── Filter pane ── */
.pay-filter-pane { width: 248px; flex-shrink: 0; background: var(--n-25); border-right: 1px solid var(--divider); overflow-y: auto; scrollbar-width: thin; display: none; flex-direction: column; }
.pay-fp-cta { padding: 1rem 1rem 0.9rem; border-bottom: 1px solid var(--divider); }
.pay-fp-sec { padding: 0.9rem 1rem; border-bottom: 1px solid var(--divider); }
.pay-fp-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.55rem; }
.pay-fp-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.45rem; cursor: pointer; border-radius: var(--r-sm); transition: background 0.12s; }
.pay-fp-row:hover { background: var(--mist); }
.pay-fp-row.active { background: var(--mist); }
.pay-fp-row .ic { font-size: 1rem; color: var(--slate); flex-shrink: 0; width: 18px; text-align: center; }
.pay-fp-row.active .ic { color: var(--copper); }
.pay-fp-lbl { font-size: var(--t-sm); color: var(--ink-soft); flex: 1; }
.pay-fp-row.active .pay-fp-lbl { color: var(--ink-blue); font-weight: 700; }
.pay-fp-ct { font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pay-fp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Main area ── */
.pay-main { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.875rem; }
.pay-dt-topbar { display: none; }
.pay-mobile-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0; }
.pay-mobile-title { font-size: var(--t-lg); font-weight: 800; color: var(--ink-blue); letter-spacing: -0.02em; }
.pay-chip-row { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* ── Backlog list ── */
.pay-list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.pay-list-cap { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--divider); }
.pay-list-cap h3 { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); margin: 0; }
.pay-list-cap .pay-sort-note { font-size: var(--t-xs); color: var(--ink-faint); }

.pay-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0.95rem; border-bottom: 1px solid var(--divider); }
.pay-row:last-child { border-bottom: none; }
.pay-row.is-paid { opacity: 0.7; }
.pay-row-main { flex: 1; min-width: 0; }
.pay-row-payee { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.pay-row-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.18rem; }
.pay-row-label { font-size: var(--t-xs); color: var(--slate); }
.pay-src { font-size: var(--t-2xs); color: var(--ink-300); font-style: italic; }

/* Duration outstanding — neutral mist chip (never alarmist) */
.pay-age { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-soft); background: var(--mist); border: 1px solid var(--divider); border-radius: var(--r-full); padding: 0.1rem 0.5rem; }
/* Pre-due countdown — quiet text */
.pay-cd { font-size: var(--t-2xs); font-weight: 700; color: var(--slate); }
/* Hard-deadline urgency — error as TEXT only (never a coloured fill) */
.pay-hard { font-size: var(--t-2xs); font-weight: 800; color: var(--error); display: inline-flex; align-items: center; gap: 0.22rem; }
.pay-hard .ic { font-size: 0.9em; }
/* Backed-by-pot tag */
.pay-pot { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-soft); background: var(--mist); border: 1px solid var(--divider); border-radius: var(--r-full); padding: 0.1rem 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.pay-pot .ic { font-size: 0.9em; color: var(--copper); }

.pay-row-amt { text-align: right; flex-shrink: 0; }
.pay-row-a { font-size: var(--t-md); font-weight: 800; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.pay-row-d { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.1rem; }
.pay-row-own { flex-shrink: 0; display: flex; align-items: center; gap: 0.3rem; }
.pay-row-act { flex-shrink: 0; display: flex; align-items: center; gap: 0.35rem; }

/* Empty state (reuses .ins-empty look) */
.pay-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; }
.pay-empty .ic { font-size: 2.25rem; color: var(--ink-faint); }
.pay-empty-title { font-size: var(--t-base); font-weight: 700; color: var(--ink-soft); }
.pay-empty-sub { font-size: var(--t-sm); color: var(--ink-faint); line-height: 1.55; max-width: 300px; }

/* ── Payment ledger (inside the fc-form sheet) ── */
.pay-led-head { font-size: var(--t-2xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.4rem; }
.pay-led-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.1rem; border-bottom: 1px solid var(--divider); font-size: var(--t-sm); }
.pay-led-row:last-of-type { border-bottom: none; }
.pay-led-date { color: var(--slate); width: 64px; flex-shrink: 0; font-size: var(--t-xs); }
.pay-led-mid { flex: 1; min-width: 0; color: var(--ink-soft); }
.pay-led-amt { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.pay-led-rm { color: var(--error); cursor: pointer; font-size: var(--t-xs); background: none; border: none; }
.pay-led-empty { font-size: var(--t-sm); color: var(--ink-faint); padding: 0.5rem 0.1rem; }
.pay-runbar { height: 8px; border-radius: 5px; background: var(--mist); overflow: hidden; margin: 0.7rem 0 0.3rem; }
.pay-runbar i { display: block; height: 100%; background: var(--copper); }
.pay-runrow { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-soft); }
.pay-runrow b { color: var(--ink-blue); }

/* ── Mobile: stack the dense backlog row into a card ── */
@media (max-width: 768px) {
  .pay-row { flex-wrap: wrap; align-items: flex-start; column-gap: 0.6rem; row-gap: 0.5rem; padding: 0.85rem 0.8rem; }
  .pay-row-main { flex: 1 1 100%; order: 1; }
  .pay-row-amt { order: 2; text-align: left; }
  .pay-row-own { order: 3; margin-left: auto; }
  .pay-row-act { order: 4; flex: 1 1 100%; }
  .pay-row-act .btn { flex: 1; }
}

/* ── Desktop overrides ── */
@media (min-width: 769px) {
  .pay-dt-topbar { display: flex; }
  .pay-filter-pane { display: flex; }
  .pay-main { padding: 1.5rem 1.75rem; gap: 1.1rem; }
  .pay-mobile-hdr { display: none !important; }
  .pay-chip-row { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   TAX — provisioning / "set aside for the taxman" (CR12)
   Structural twin of Payables/Insurance: topbar + pane + main.
   Pane = view switcher (Overview / Taxable income / …) + Tax set-up.
════════════════════════════════════════════════════════════ */
body.tab-is-tax #tab-tax { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }

.tax-layout { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.tax-dt-topbar { display: none; }

/* ── Left pane (view switcher) ── */
.tax-pane { width: 248px; flex-shrink: 0; background: var(--n-25); border-right: 1px solid var(--divider); overflow-y: auto; scrollbar-width: thin; display: none; flex-direction: column; }
.tax-pane-sec { padding: 0.9rem 1rem; border-bottom: 1px solid var(--divider); }
.tax-pane-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.55rem; }
.tax-nav-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.45rem; cursor: pointer; border-radius: var(--r-sm); transition: background 0.12s; }
.tax-nav-row:hover { background: var(--mist); }
.tax-nav-row.active { background: var(--mist); }
.tax-nav-row .ic { font-size: 1rem; color: var(--slate); flex-shrink: 0; width: 18px; text-align: center; }
.tax-nav-row.active .ic { color: var(--copper); }
.tax-nav-lbl { font-size: var(--t-sm); color: var(--ink-soft); flex: 1; }
.tax-nav-row.active .tax-nav-lbl { color: var(--ink-blue); font-weight: 700; }
.tax-nav-ct { font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── Main area ── */
.tax-main { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; padding: 0.875rem; display: flex; flex-direction: column; gap: 1rem; }
.tax-mobile-hdr { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tax-mobile-title { font-size: var(--t-lg); font-weight: 800; color: var(--ink-blue); letter-spacing: -0.02em; }
.tax-owner { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-xs); font-weight: 700; color: var(--ink-blue); }

/* ── Stat strip ── */
.tax-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.tax-stat { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 0.7rem 0.85rem; }
.tax-stat .k { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.tax-stat .v { font-size: var(--t-xl); font-weight: 800; color: var(--ink-blue); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.tax-stat .x { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.1rem; line-height: 1.35; }
.tax-stat .v.copper { color: var(--copper-600); }
.tax-stat .v.behind { color: var(--error); }
.tax-stat .v.ahead  { color: var(--success); }
.tax-stat.hero { background: var(--ink-blue); border-color: var(--ink-blue); }
.tax-stat.hero .k { color: rgba(247,244,238,0.6); }
.tax-stat.hero .v { color: var(--parchment); }
.tax-stat.hero .x { color: rgba(247,244,238,0.55); }

/* ── Section caption ── */
.tax-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.tax-cap h3 { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); margin: 0; }
.tax-cap .sub { font-size: var(--t-xs); color: var(--ink-faint); text-align: right; }

/* ── Tax pot card ── */
.tax-pot { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1rem 1.1rem; }
.tax-pot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tax-pot-l { min-width: 0; }
.tax-pot-name { font-size: var(--t-base); font-weight: 800; color: var(--ink-blue); }
.tax-pot-chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.35rem; }
.tax-chip { display: inline-flex; align-items: center; gap: 0.28rem; font-size: var(--t-2xs); font-weight: 700; padding: 0.12rem 0.5rem; border-radius: var(--r-full); background: var(--mist); border: 1px solid var(--divider); color: var(--ink-soft); }
.tax-chip .ic { font-size: 0.85em; color: var(--copper); }
.tax-pot-cta { text-align: right; flex-shrink: 0; }
.tax-pot-cta .ca { font-size: var(--t-2xs); color: var(--slate); }
.tax-pot-cta .ca b { color: var(--error); }
.tax-pot-cta .ca.ok b { color: var(--success); }

/* progress bar: set-aside vs prudent target */
.tax-bar { height: 9px; border-radius: 5px; background: var(--mist); overflow: hidden; margin: 0.85rem 0 0.35rem; position: relative; }
.tax-bar i { display: block; height: 100%; background: var(--copper); }
.tax-bar .target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-blue); }
.tax-barrow { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-soft); }
.tax-barrow b { color: var(--ink-blue); font-variant-numeric: tabular-nums; }

/* ── Treasury strip (where invested tax money sits — virtual mode) ── */
.tax-treasury { margin-top: 0.85rem; padding: 0.7rem 0.8rem; border: 1px dashed var(--copper-300); border-radius: var(--r-md); background: var(--n-25); display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.tax-treasury .ti { min-width: 130px; }
.tax-treasury .ti.full { flex-basis: 100%; }
.tax-treasury .tk { font-size: var(--t-2xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.tax-treasury .tv { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); margin-top: 0.15rem; }
.tax-treasury .tv.notes { font-weight: 500; color: var(--ink-soft); }
.tax-treasury .tv .ic { font-size: 0.85em; color: var(--copper); }
.tax-treasury .tv a { color: var(--copper-700); text-decoration: underline; cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
.tax-treasury .warn { color: var(--error); font-weight: 800; }

/* ── CFR deadline calendar (Payments to CFR view) ── */
.tax-cal { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.tax-cal-d { border: 1px solid var(--divider); border-radius: var(--r-md); background: var(--surface); padding: 0.75rem 0.9rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.tax-cal-d.next { border-color: var(--copper); box-shadow: 0 0 0 1px var(--copper) inset; }
.tax-cal-d.paid { opacity: 0.75; }
.tax-cal-main { flex: 1; min-width: 0; }
.tax-cal-dd { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); }
.tax-cal-dl { font-size: var(--t-xs); color: var(--slate); margin-top: 0.1rem; }
.tax-cal-amt { text-align: right; flex-shrink: 0; }
.tax-cal-amt .a { font-size: var(--t-sm); font-weight: 800; color: var(--copper-700); font-variant-numeric: tabular-nums; }
.tax-cal-amt .a.paid { color: var(--success); }
.tax-cal-amt .a.muted { color: var(--ink-faint); font-weight: 700; }
.tax-cal-amt .d { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.08rem; }
.tax-cal-act { flex-shrink: 0; display: flex; gap: 0.4rem; }
@media (max-width: 768px) { .tax-cal-act { width: 100%; } .tax-cal-act .btn { flex: 1; } }
@media (min-width: 769px) { .tax-cal { grid-template-columns: repeat(3, 1fr); } .tax-cal-d { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .tax-cal-amt { text-align: left; } .tax-cal-act { width: 100%; flex-direction: column; } .tax-cal-act .btn { width: 100%; } }

/* ── Income / list rows ── */
.tax-list { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.tax-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--divider); }
.tax-row:last-child { border-bottom: none; }
.tax-row.excluded { opacity: 0.5; }
.tax-row.excluded .tax-row-t1 { text-decoration: line-through; }
.tax-row-main { flex: 1; min-width: 0; }
.tax-row-t1 { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.tax-row-t2 { font-size: var(--t-xs); color: var(--slate); margin-top: 0.12rem; display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.tax-row-amt { text-align: right; flex-shrink: 0; }
.tax-row-a { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.tax-row-a.income { color: var(--success); }
.tax-row-d { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.08rem; }
.tax-row-set { flex: 0 0 96px; text-align: right; }
.tax-row-set .sl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
.tax-row-set .sv { font-size: var(--t-sm); font-weight: 800; color: var(--copper-700); font-variant-numeric: tabular-nums; }
.tax-row-act { flex-shrink: 0; }

/* ── Empty state ── */
.tax-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; }
.tax-empty .ic { font-size: 2.25rem; color: var(--ink-faint); }
.tax-empty-title { font-size: var(--t-base); font-weight: 800; color: var(--ink-soft); }
.tax-empty-sub { font-size: var(--t-sm); color: var(--ink-faint); line-height: 1.55; max-width: 340px; }
.tax-empty .btn { width: auto; align-self: center; margin-top: 0.3rem; }

/* Set-up form helpers inside the fc-form sheet */
.tax-seg { display: flex; gap: 0.4rem; }
.tax-seg button { flex: 1; font: inherit; font-size: var(--t-sm); font-weight: 700; padding: 0.5rem 0.5rem; border: 1px solid var(--divider); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.tax-seg button.on { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--parchment); }

/* ── Mobile: stack the dense income row ── */
@media (max-width: 768px) {
  .tax-strip { grid-template-columns: 1fr 1fr; }
  .tax-row { flex-wrap: wrap; align-items: flex-start; column-gap: 0.6rem; row-gap: 0.5rem; padding: 0.8rem; }
  .tax-row-main { flex: 1 1 100%; order: 1; }
  .tax-row-amt { order: 2; text-align: left; }
  .tax-row-set { order: 3; flex: 0 0 auto; text-align: left; }
  .tax-row-act { order: 4; margin-left: auto; }
}
/* ── Desktop ── */
@media (min-width: 769px) {
  .tax-dt-topbar { display: flex; }
  .tax-pane { display: flex; }
  .tax-main { padding: 1.5rem 1.75rem; gap: 1.2rem; }
  .tax-mobile-hdr { display: none !important; }
  .tax-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   INVESTMENTS (M29)
════════════════════════════════════════════════════════════ */

/* ── Tab layout ── */
body.tab-is-investments #tab-investments { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }

.invs-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ── Type tile icon colours ── */
.invs-c-bond   { color: var(--info); }
.invs-c-equity { color: var(--success); }
.invs-c-fund   { color: var(--copper); }
.invs-c-cash   { color: var(--success); }
.invs-c-other  { color: var(--ink-mute); }
.invs-pos      { color: var(--success); }

.invs-type-tile {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.invs-type-tile .ic { font-size: 1.1rem; }
.invs-type-bond   { background: var(--info-bg);     color: var(--info); }
.invs-type-equity { background: var(--success-bg);  color: var(--success); }
.invs-type-fund   { background: var(--copper-100);  color: var(--copper); }
.invs-type-cash   { background: var(--success-bg);  color: var(--success); }
.invs-type-other  { background: var(--mist);        color: var(--ink-mute); }

/* Person avatar circle */
.invs-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 800; background: var(--mist); color: var(--ink-soft);
}

/* ── LEFT list panel (desktop) ── */
.invs-list-panel {
  display: none; /* hidden on mobile */
  width: 320px; flex-shrink: 0; border-right: 1px solid var(--divider);
  flex-direction: column; background: var(--surface-2); overflow: hidden;
}
.invs-lp-hdr {
  padding: 0.75rem 1rem 0.5rem; background: var(--surface);
  border-bottom: 1px solid var(--divider); flex-shrink: 0;
}
.invs-lp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.invs-lp-heading { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.07em; }
.invs-add-btn { white-space: nowrap; }
.invs-lp-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.invs-lp-chips .chip { cursor: pointer; font-size: var(--t-2xs); padding: 0.18rem 0.45rem; }

.invs-lp-sum { display: flex; background: var(--surface); border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.invs-lp-sum-cell { flex: 1; padding: 0.45rem 0.75rem; }
.invs-lp-sum-cell + .invs-lp-sum-cell { border-left: 1px solid var(--divider); }
.invs-sum-lbl { font-size: var(--t-2xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.invs-sum-val { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); margin-top: 0.1rem; letter-spacing: -0.01em; }

.invs-lp-scroll { flex: 1; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }

/* ── View toggle (By Investment / By Owner) ── */
.invs-view-toggle {
  display: flex; background: var(--mist); border-radius: var(--r-sm); padding: 2px; gap: 2px;
  margin-bottom: 0.35rem;
}
.invs-vt {
  flex: 1; text-align: center; padding: 0.3rem; font-size: var(--t-xs); font-weight: 600;
  color: var(--ink-mute); border-radius: var(--r-xs); cursor: pointer;
}
.invs-vt.active {
  background: var(--surface); color: var(--ink-blue); font-weight: 700;
  box-shadow: 0 1px 3px rgba(10,20,32,0.10);
}

/* ── Investment card (list panel) ── */
.invs-card {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-sm);
  padding: 0.55rem 0.65rem; cursor: pointer; transition: border-color 0.12s;
}
.invs-card:hover { border-color: var(--border-strong); }
.invs-card.invs-card-selected { border-color: var(--copper); background: var(--copper-100); }
.invs-card-top { display: flex; align-items: center; gap: 0.45rem; }
.invs-card-tile { width: 28px; height: 28px; border-radius: var(--r-xs); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.invs-card-tile .ic { font-size: 0.9rem; }
.invs-card-name  { flex: 1; font-size: var(--t-xs); font-weight: 700; color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invs-card-val   { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); white-space: nowrap; }
.invs-card-chips { display: flex; gap: 0.2rem; margin-top: 0.3rem; flex-wrap: wrap; }
.invs-card-chips .chip { font-size: 0.6rem; padding: 0.12rem 0.35rem; cursor: default; }

/* Owner card (in By Owner view) */
.invs-owner-card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 0.55rem 0.65rem; cursor: pointer; }
.invs-owner-card:hover { border-color: var(--border-strong); }
.invs-owner-card.invs-card-selected { border-color: var(--copper); background: var(--copper-100); }
.invs-owner-card-top { display: flex; align-items: center; gap: 0.45rem; }
.invs-owner-name { flex: 1; font-size: var(--t-xs); font-weight: 700; color: var(--ink-blue); }
.invs-owner-val  { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); }
.invs-owner-sub  { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.08rem; }

/* ── RIGHT main panel ── */
.invs-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Mobile list view */
.invs-mob-list { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.invs-mobile-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem 0; flex-shrink: 0; }
.invs-mobile-title { font-size: var(--t-md); font-weight: 800; color: var(--ink-blue); letter-spacing: -0.015em; }
.invs-mob-controls { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem 1rem; flex-shrink: 0; }
.invs-view-toggle-mob { }
.invs-chip-row { display: flex; gap: 0.3rem; overflow-x: auto; padding-bottom: 2px; }
.invs-chip-row .chip { cursor: pointer; flex-shrink: 0; }
#invs-mob-content { flex: 1; overflow-y: auto; padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* Mobile investment card (larger) */
.invs-mob-card {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md);
  padding: 0.75rem; cursor: pointer;
}
.invs-mob-card-top { display: flex; align-items: flex-start; gap: 0.6rem; }
.invs-mob-card-info { flex: 1; min-width: 0; }
.invs-mob-card-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invs-mob-card-broker { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 0.05rem; }
.invs-mob-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; flex-shrink: 0; }
.invs-mob-card-face  { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); }
.invs-mob-card-facelbl { font-size: var(--t-2xs); color: var(--ink-faint); text-align: right; }
.invs-mob-card-mkt   { font-size: var(--t-xs); font-weight: 600; color: var(--success); }
.invs-mob-card-mkt-none { font-size: var(--t-2xs); color: var(--ink-faint); font-style: italic; }
.invs-mob-card-chips { display: flex; gap: 0.3rem; margin-top: 0.5rem; flex-wrap: wrap; }
.invs-mob-card-chips .chip { font-size: var(--t-2xs); padding: 0.15rem 0.45rem; cursor: default; }

/* ── Detail panel (desktop right / mobile full) ── */
.invs-detail-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.invs-detail-panel.invs-detail-active { display: flex; }
.invs-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 0.75rem; color: var(--ink-faint); font-size: var(--t-sm); }
.invs-detail-empty .ic { font-size: 2rem; color: var(--n-300); }
#invs-detail-content { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; }

/* Mobile detail back nav */
.invs-detail-back { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--divider); flex-shrink: 0; background: var(--surface); }
.invs-detail-back-btn { display: flex; align-items: center; gap: 0.3rem; font-size: var(--t-sm); font-weight: 700; color: var(--copper); background: none; border: none; cursor: pointer; padding: 0; }
.invs-detail-back-actions { display: flex; gap: 0.4rem; }

/* ── Detail content elements ── */
.invs-detail-hero {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.invs-detail-hero-top { display: flex; align-items: flex-start; gap: 0.65rem; }
.invs-detail-hero-icon { width: 44px; height: 44px; border-radius: var(--r-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.invs-detail-hero-icon .ic { font-size: 1.3rem; }
.invs-detail-hero-info { flex: 1; }
.invs-detail-name   { font-size: var(--t-lg); font-weight: 900; color: var(--ink-blue); letter-spacing: -0.02em; }
.invs-detail-broker { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 0.1rem; }
.invs-detail-chips  { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.invs-detail-chips .chip { cursor: default; }
.invs-detail-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

/* 4-stat grid */
.invs-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.invs-stat-card  { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 0.65rem 0.75rem; }
.invs-stat-lbl   { font-size: var(--t-2xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.invs-stat-val   { font-size: var(--t-base); font-weight: 800; color: var(--ink-blue); margin-top: 0.1rem; letter-spacing: -0.01em; }
.invs-stat-val.pos  { color: var(--success); }
.invs-stat-val.info { color: var(--info); }
.invs-stat-val.neg  { color: var(--error); }
.invs-stat-sub   { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.08rem; }
.invs-stats-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ════ M38 — Net Worth: collapsible tile, sections, liability detail ════ */

/* Negative amount on list/owner cards */
.invs-card-val.neg, .invs-mob-card-face.neg { color: var(--error); }

/* Collapsible net-worth tile */
.nw-tile { background: var(--surface); border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.nw-tile--card { border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; margin-bottom: 0.25rem; }
.nw-tile-hd { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 1rem; cursor: pointer; user-select: none; transition: background 0.12s; }
.nw-tile-hd:hover { background: var(--mist); }
.nw-tile-hd-l { display: flex; flex-direction: column; gap: 0.05rem; }
.nw-tile-eyebrow { font-size: var(--t-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); }
.nw-tile-val { font-size: var(--t-xl); font-weight: 900; color: var(--ink-blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nw-tile-chev { width: 26px; height: 26px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--ink-mute); flex-shrink: 0; transition: transform 0.2s ease, color 0.12s; }
.nw-tile-hd:hover .nw-tile-chev { color: var(--ink-blue); }
.nw-tile.expanded .nw-tile-chev { transform: rotate(180deg); }
.nw-tile-body { padding: 0 1rem 0.8rem; }
.nw-tile:not(.expanded) .nw-tile-body { display: none; }

/* Balance-sheet rows */
.nw-sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.16rem 0; font-size: var(--t-sm); }
.nw-sum-row .lbl { color: var(--ink-soft); }
.nw-sum-row .amt { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.nw-sum-row .amt.neg { color: var(--error); }
.nw-sum-row.comp .lbl { color: var(--ink-mute); font-size: var(--t-xs); }
.nw-sum-row.comp .amt { font-weight: 600; color: var(--ink-soft); }
.nw-sum-row.comp .amt.neg { color: var(--error); }
.nw-sum-subtotal { border-top: 1px solid var(--divider); margin-top: 0.25rem; padding-top: 0.35rem; }
.nw-sum-subtotal .lbl { font-weight: 700; text-transform: uppercase; font-size: var(--t-2xs); letter-spacing: 0.05em; color: var(--ink-mute); }

/* Section divider (Property / Liabilities) inside the list */
.liab-sec { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 0.4rem; }
.liab-sec .invs-lp-top { margin-bottom: 0; padding: 0 0.1rem; }
.invs-side-empty { font-size: var(--t-xs); color: var(--ink-faint); font-style: italic; padding: 0.3rem 0.1rem; }

/* Liability detail — balance card + payoff progress */
.liab-balance-card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 1rem 1.1rem; }
.liab-balance-row { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 0.85rem; border-bottom: 1px solid var(--divider); margin-bottom: 0.85rem; }
.liab-balance-lbl { font-size: var(--t-2xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 0.15rem; }
.liab-balance-big { font-size: var(--t-2xl); font-weight: 900; color: var(--error); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.liab-balance-meta { font-size: var(--t-2xs); color: var(--ink-faint); margin-bottom: 0.25rem; text-align: right; }
.liab-progress-lbl { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-2xs); color: var(--ink-faint); margin-bottom: 0.35rem; font-variant-numeric: tabular-nums; }
.liab-progress-lbl .lead { font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.liab-progress-wrap { height: 8px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.liab-progress-bar { height: 100%; border-radius: 4px; background: var(--ink-blue); }
.liab-progress-foot { display: flex; justify-content: space-between; font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }

/* Liability form — Forecast-link toggle */
.liab-fc-toggle { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; padding: 0.2rem 0; }
.liab-fc-toggle-lbl { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.liab-fc-toggle-sub { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.1rem; }
.liab-fc-toggle input { display: none; }
.liab-fc-switch { margin-left: auto; width: 38px; height: 22px; border-radius: 999px; background: var(--ink-200); position: relative; flex-shrink: 0; transition: background 0.15s; }
.liab-fc-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.liab-fc-toggle input:checked ~ .liab-fc-switch { background: var(--ink-blue); }
.liab-fc-toggle input:checked ~ .liab-fc-switch::after { transform: translateX(16px); }

/* Dashboard net-worth card — liabilities */
.dash-nw-row-amt.neg { color: var(--error); }
.dash-nw-bar.prop { background: var(--info); }
.dash-nw-subdiv { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0; }
.dash-nw-subdiv .ln { flex: 1; height: 1px; background: var(--divider); }
.dash-nw-subdiv .tx { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }

/* Market data section */
.invs-mkt-section { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 0.75rem; }
.invs-mkt-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.invs-mkt-title { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.invs-mkt-row { display: flex; gap: 0.5rem; }
.invs-mkt-cell { flex: 1; background: var(--mist); border-radius: var(--r-sm); padding: 0.5rem 0.65rem; }
.invs-mkt-lbl   { font-size: var(--t-2xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.invs-mkt-val   { font-size: var(--t-base); font-weight: 800; color: var(--ink-blue); margin-top: 0.08rem; letter-spacing: -0.02em; }
.invs-mkt-sub   { font-size: var(--t-xs); font-weight: 600; color: var(--success); margin-top: 0.04rem; }
.invs-mkt-none  { font-size: var(--t-sm); color: var(--ink-faint); font-style: italic; text-align: center; padding: 0.5rem 0; }
.invs-mkt-updated { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.4rem; }

/* Beneficial ownership / stake table */
.invs-stake-section { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; }
.invs-stake-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-stake-hdr-title { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.invs-stake-table { width: 100%; border-collapse: collapse; }
.invs-stake-table th {
  font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.35rem 0.75rem; text-align: left;
  border-bottom: 1px solid var(--divider); background: var(--mist);
}
.invs-stake-table th.r { text-align: right; }
.invs-stake-table td { font-size: var(--t-sm); padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--divider); color: var(--ink-soft); vertical-align: middle; }
.invs-stake-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.invs-stake-table td.bold { font-weight: 700; color: var(--ink-blue); }
.invs-stake-table td.pos  { font-weight: 700; color: var(--success); }
.invs-stake-table tr.total-row td { font-weight: 700; background: var(--mist); color: var(--ink-blue); border-bottom: none; }
.invs-stake-table tr:last-child td { border-bottom: none; }
.invs-stake-footer { padding: 0.4rem 0.75rem; font-size: var(--t-2xs); color: var(--ink-faint); border-top: 1px solid var(--divider); }
.invs-pct-pill { display: inline-block; background: var(--mist); border-radius: var(--r-full); padding: 0.06rem 0.4rem; font-size: var(--t-2xs); font-weight: 700; color: var(--ink-mute); }
.invs-pct-pill.full { background: var(--success-bg); color: var(--success-ink); }

/* Income history */
.invs-income-section { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; }
.invs-income-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-income-hdr-title { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.invs-income-hdr-total { font-size: var(--t-xs); font-weight: 700; color: var(--success); }
.invs-income-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-income-row:last-child { border-bottom: none; }
.invs-income-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--success-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--success); }
.invs-income-icon .ic { font-size: 1rem; }
.invs-income-body { flex: 1; }
.invs-income-type { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.invs-income-date { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.04rem; }
.invs-income-amt { text-align: right; }
.invs-income-net   { font-size: var(--t-base); font-weight: 700; color: var(--success); }
.invs-income-gross { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.04rem; }
.invs-income-empty { padding: 0.75rem; text-align: center; font-size: var(--t-sm); color: var(--ink-faint); font-style: italic; }

/* ── Holding documents (investments + liabilities) ── */
.doc-sec { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 0.75rem 0.85rem 0.85rem; }
.doc-sec-hd { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; }
.doc-sec-hd .ic { color: var(--ink-mute); font-size: 1rem; }
.doc-sec-t { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.doc-sec-ct { font-size: var(--t-xs); color: var(--ink-faint); font-weight: 600; }
.doc-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border: 1px solid var(--divider); border-radius: var(--r-sm); margin-bottom: 0.45rem; }
.doc-fi { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--ink-mute); }
.doc-fi .ic { font-size: 1rem; }
.doc-meta-wrap { flex: 1; min-width: 0; }
.doc-name { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.04rem; }
.doc-acts { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.doc-acts a { font-size: var(--t-xs); font-weight: 700; color: var(--copper); text-decoration: none; padding: 0.3rem 0.5rem; border-radius: var(--r-sm); }
.doc-acts a:hover { background: var(--mist); }
.doc-rm { background: none; border: none; cursor: pointer; color: var(--ink-faint); padding: 0.3rem; border-radius: var(--r-sm); display: flex; }
.doc-rm:hover { background: var(--mist); color: var(--error); }
.doc-rm .ic { font-size: 1rem; }
.doc-drop { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.7rem; border: 1.5px dashed var(--copper); border-radius: var(--r-sm); color: var(--copper); cursor: pointer; background: var(--copper-100); }
.doc-drop:hover { background: var(--copper-100); filter: brightness(0.98); }
.doc-drop .ic { font-size: 1.2rem; }
.doc-drop-txt { display: flex; flex-direction: column; }
.doc-drop-t { font-size: var(--t-sm); font-weight: 700; }
.doc-drop-s { font-size: var(--t-xs); color: var(--ink-soft); font-weight: 500; }
.doc-file-input { display: none; }
.doc-empty { font-size: var(--t-sm); color: var(--ink-faint); padding: 0.2rem 0.1rem 0.6rem; line-height: 1.4; }

/* ── Beneficial-owner statement (expanded per-holding cards) ── */
.own-stmt-sec-lbl { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; margin: 0.2rem 0 -0.1rem; }
.own-stmt-card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 0.85rem 0.9rem; }
.own-stmt-hd { display: flex; align-items: flex-start; gap: 0.6rem; }
.own-stmt-hd-info { flex: 1; min-width: 0; }
.own-stmt-name { font-size: var(--t-base); font-weight: 800; color: var(--ink-blue); }
.own-stmt-meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.08rem; }
.own-stmt-hd .invs-pct-pill { flex-shrink: 0; }
.own-stmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.7rem; }
.own-stmt-mini { background: var(--n-25, var(--mist)); border-radius: var(--r-sm); padding: 0.5rem 0.55rem; min-width: 0; }
.own-stmt-mini .l { font-size: var(--t-2xs, 0.62rem); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-mute); }
.own-stmt-mini .v { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); margin-top: 0.12rem; }
.own-stmt-mini .v.pos { color: var(--success); }
.own-stmt-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.own-stmt-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--divider); }
.own-stmt-inc { font-size: var(--t-xs); color: var(--ink-soft); }
.own-stmt-foot a { font-size: var(--t-sm); font-weight: 700; color: var(--copper); text-decoration: none; white-space: nowrap; }
.own-stmt-foot a:hover { text-decoration: underline; }
@media (max-width: 560px) { .own-stmt-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Trade ledger (W15) — Transactions section in fund/equity detail ── */
.invs-tx-section { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; }
.invs-tx-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-tx-hdr-title { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.invs-tx-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-tx-row:last-of-type { border-bottom: none; }
.invs-tx-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.invs-tx-icon.buy  { background: var(--copper-100); color: var(--copper); }
.invs-tx-icon.sell { background: var(--success-bg); color: var(--success); }
.invs-tx-body { flex: 1; min-width: 0; }
.invs-tx-type { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.invs-tx-meta { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 0.05rem; font-variant-numeric: tabular-nums; }
.invs-tx-funders { display: flex; gap: 0.25rem; margin-top: 0.3rem; flex-wrap: wrap; }
.invs-tx-funders .chip { font-size: 0.62rem; padding: 0.1rem 0.4rem 0.1rem 0.14rem; cursor: default; display: inline-flex; align-items: center; gap: 0.28rem; }
.invs-tx-right { text-align: right; flex-shrink: 0; }
.invs-tx-amt { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.invs-tx-amt.in { color: var(--success); }
.invs-tx-date { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.05rem; }
.invs-tx-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
.invs-tx-actions button { background: none; border: none; cursor: pointer; color: var(--ink-faint); width: 26px; height: 26px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; }
.invs-tx-actions button:hover { background: var(--mist); color: var(--ink-blue); }
.invs-tx-foot { padding: 0.4rem 0.75rem; font-size: var(--t-2xs); color: var(--ink-faint); border-top: 1px solid var(--divider); background: var(--mist); display: flex; justify-content: space-between; gap: 0.5rem; font-variant-numeric: tabular-nums; }

/* Transaction modal — buy/sell (reuses fc-form-sheet chrome) */
.invs-tx-seg { display: flex; background: var(--mist); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.invs-tx-seg-btn { flex: 1; text-align: center; padding: 0.42rem; font-size: var(--t-xs); font-weight: 600; color: var(--ink-mute); border-radius: var(--r-xs); cursor: pointer; border: none; background: none; font-family: var(--font); }
.invs-tx-seg-btn.active { background: var(--surface); color: var(--ink-blue); font-weight: 700; box-shadow: 0 1px 3px rgba(10,20,32,0.10); }
.invs-tx-derived { display: flex; align-items: center; justify-content: space-between; background: var(--mist); border-radius: var(--r-sm); padding: 0.45rem 0.65rem; }
.invs-tx-derived .l { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.invs-tx-derived .v { font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.invs-tx-prorata { background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-sm); overflow: hidden; }
.invs-tx-prorata-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--divider); font-size: var(--t-sm); }
.invs-tx-prorata-row:last-child { border-bottom: none; }
.invs-tx-prorata-row .nm { flex: 1; font-weight: 600; color: var(--ink-blue); display: flex; align-items: center; gap: 0.4rem; }
.invs-tx-prorata-row .units { color: var(--ink-mute); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.invs-tx-prorata-row .eur { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; width: 90px; text-align: right; }
/* Funding-split rows inside the buy/sell modal (one row: name · amount · % · ×) */
.invs-owner-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-owner-line:last-of-type { border-bottom: none; }
.invs-owner-line .nm { flex: 1; min-width: 0; }

/* ── Add/Edit form overlay ── */
.invs-overlay {
  position: fixed; inset: 0; background: rgba(10,20,32,0.55); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
}
.invs-sheet {
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-width: 720px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.invs-sheet-hdr {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--divider); flex-shrink: 0;
}
.invs-sheet-title { flex: 1; font-size: var(--t-sm); font-weight: 800; color: var(--ink-blue); text-align: center; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invs-form-scroll { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.form-section-hdr { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0; }
.form-section-divider { height: 1px; background: var(--divider); margin: 0.25rem 0; }
.form-row-2 { display: flex; gap: 0.5rem; }
.form-row-2 .field-wrap { flex: 1; }

/* Type selector */
.invs-type-sel { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.invs-tsel {
  font-size: var(--t-xs); font-weight: 600; padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm); border: 1.5px solid var(--divider); color: var(--ink-mute);
  background: var(--mist); cursor: pointer;
}
.invs-tsel.active { background: var(--info-bg); color: var(--info); border-color: var(--info); }

/* Bond fields block */
.invs-bond-fields { background: var(--n-25); border: 1.5px solid var(--blue-grey); border-radius: var(--r-md); padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; }
.invs-bond-fields .field { background: var(--surface); margin: 0; }
.invs-bond-fields .field-row { gap: 0.45rem; }

/* Section eyebrow label */
.invs-form-eyebrow { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 0.35rem; }
.invs-form-eyebrow .ic { color: var(--copper); }

/* Owners editor */
.invs-owners-editor { background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-sm); overflow: hidden; }
.invs-owners-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--divider); background: var(--mist); }
.invs-owners-hdr-title { font-size: var(--t-xs); font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.invs-owners-hdr-hint  { font-size: var(--t-xs); color: var(--ink-faint); }
.invs-owner-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-owner-row-name { flex: 2; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.invs-owner-row-amt  { flex: 1.2; font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); text-align: right; font-variant-numeric: tabular-nums; }
.invs-owner-row-pct  { width: 36px; font-size: var(--t-xs); color: var(--ink-faint); text-align: right; }
.invs-owner-row-del  { background: none; border: none; color: var(--error); cursor: pointer; padding: 0 0.15rem; font-size: 1.1rem; flex-shrink: 0; }
.invs-owners-progress { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--divider); }
.invs-prog-bg { height: 5px; background: var(--mist); border-radius: var(--r-full); overflow: hidden; }
.invs-prog-bar { height: 5px; border-radius: var(--r-full); }
.invs-prog-bar.ok   { background: var(--success); }
.invs-prog-bar.part { background: var(--info); }
.invs-prog-bar.over { background: var(--error); }
.invs-prog-text { display: flex; justify-content: space-between; font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.25rem; }
.invs-prog-text .ok   { color: var(--success); font-weight: 600; }
.invs-prog-text .warn { color: var(--warning); font-weight: 600; }
.invs-owners-add-row { padding: 0.45rem 0.75rem; border-top: 1px solid var(--divider); background: var(--copper-100); }
.invs-owners-add-row-lbl { font-size: var(--t-2xs); font-weight: 700; color: var(--copper-700); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.invs-owners-add-fields { display: flex; gap: 0.35rem; align-items: flex-end; }
.invs-owners-add-name-wrap { flex: 2; }
.invs-owners-add-amt-wrap  { flex: 1.2; }
.invs-owners-add-pct-wrap  { width: 36px; font-size: var(--t-2xs); color: var(--copper-700); text-align: center; background: var(--surface); border-radius: var(--r-xs); padding: 0.4rem 0; align-self: flex-end; }
.invs-add-owner-btn { flex-shrink: 0; width: auto; }
.invs-owner-mini-input { background: var(--surface) !important; border: 1.5px solid var(--blue-grey) !important; border-radius: var(--r-sm) !important; padding: 0.4rem 0.55rem !important; font-size: var(--t-sm) !important; }

/* ── Investment modal (centered dialog, replaces sheet-style for add/income) ── */
.invs-modal {
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.invs-modal-hd {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.3rem 0.9rem;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.invs-modal-hd-info { flex: 1; min-width: 0; }
.invs-modal-title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-blue); }
.invs-modal-sub { font-size: var(--t-sm); color: var(--ink-faint); margin-top: 0.15rem; }
.invs-modal-close {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  border: none; background: var(--mist); color: var(--slate);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.invs-modal-close:hover { background: var(--ink-100); color: var(--ink-blue); }
.invs-modal-body {
  flex: 1; overflow-y: auto;
  padding: 1.1rem 1.3rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.invs-modal-cols { display: flex; flex-direction: column; gap: 0.7rem; }
.invs-modal-col  { display: flex; flex-direction: column; gap: 0.65rem; }
.invs-modal-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.6rem; padding: 0.9rem 1.3rem;
  border-top: 1px solid var(--line); background: var(--n-25); flex-shrink: 0;
}

/* ── Income modal (kept for price modal compatibility) ── */
.invs-income-sheet {
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-width: 520px; padding: 0.75rem 1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.invs-income-title { font-size: var(--t-base); font-weight: 800; color: var(--ink-blue); letter-spacing: -0.01em; }
.invs-income-sub   { font-size: var(--t-xs); color: var(--ink-mute); margin-top: -0.35rem; line-height: 1.45; }
.invs-income-dist-note { display: flex; gap: 0.45rem; align-items: flex-start; }
.invs-income-actions { display: flex; gap: 0.5rem; margin-top: 0.1rem; }
.invs-income-actions .btn { flex: 1; }

/* callout-mist helper */
.callout.callout-mist { background: var(--mist); border: 1px solid var(--divider); color: var(--ink-soft); display: flex; align-items: flex-start; gap: 0.45rem; }
.callout.callout-mist .ic { color: var(--ink-faint); flex-shrink: 0; margin-top: 0.1rem; }

/* ── Topbar (desktop only) ── */
.invs-dt-topbar { display: none; }

/* ── Desktop overrides ── */
@media (min-width: 769px) {
  .invs-dt-topbar { display: flex; }
  .invs-list-panel { display: flex; }
  .invs-mob-list { display: none !important; }
  .invs-detail-panel { display: flex; }
  .invs-detail-empty { display: flex; }
  .invs-sheet { max-width: 720px; border-radius: var(--r-xl); max-height: 90vh; margin: auto; }
  .invs-overlay { align-items: center; }
  .invs-income-sheet { border-radius: var(--r-xl); margin: auto; }
  #invs-detail-content { padding: 1.25rem 1.5rem; }
  .invs-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .invs-detail-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Modal dialog on desktop */
  .invs-modal { border-radius: var(--r-xl); max-height: 90vh; margin: auto; box-shadow: 0 30px 80px rgba(10,20,32,0.35); }
  .invs-modal-lg { max-width: 760px; }
  .invs-modal-sm { max-width: 480px; }
  .invs-modal-cols { flex-direction: row; gap: 1.4rem; align-items: flex-start; }
  .invs-modal-col { flex: 1; }
}

/* ════════════════════════════════════════════════════════════════
   Budgets tab (W9 — budgets-as-plan + savings) · ported from
   .mockups/budgets-desktop-mockup.html
   ════════════════════════════════════════════════════════════════ */
.bud-layout { display: flex; flex-direction: column; min-height: 0; }
.bud-side { background: var(--surface); padding: 1.1rem 1rem 2rem; display: flex; flex-direction: column; gap: 1.05rem; }
.bud-main { background: var(--bg); padding: 1.2rem 1rem 3rem; }
.bud-main-inner { max-width: 1040px; display: flex; flex-direction: column; gap: 1.1rem; }

@media (min-width: 769px) {
  body.tab-is-budgets #tab-budgets { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
  .bud-layout { flex: 1; flex-direction: row; }
  .bud-side { width: 290px; flex-shrink: 0; border-right: 1px solid var(--divider); overflow-y: auto; }
  .bud-main { flex: 1; overflow-y: auto; padding: 1.4rem 1.6rem 3rem; }
}
@media (min-width: 769px) and (max-width: 980px) { .bud-side { width: 250px; } }

/* sidebar — month + view switch */
.side-month { display: flex; align-items: center; justify-content: space-between; }
.side-month .lbl { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
#tab-budgets .month-stepper { display: inline-flex; align-items: center; gap: 0.4rem; }
#tab-budgets .month-stepper button { width: 30px; height: 30px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#tab-budgets .month-stepper button:hover:not(:disabled) { color: var(--ink-blue); }
#tab-budgets .month-stepper button:disabled { opacity: 0.4; cursor: default; }
.side-seg { width: 100%; }
.side-seg button { flex: 1; }
.side-sec + .side-sec { border-top: 1px solid var(--divider); padding-top: 1rem; }
.side-eyebrow { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.5rem; }

/* safe-to-spend / total-saved hero */
.sts { background: var(--grad-ink); border-radius: var(--r-md); padding: 0.9rem 1rem; color: #fff; }
.sts-lbl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--copper-300); }
.sts-val { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 0.25rem; }
.sts-sub { font-size: var(--t-xs); color: rgba(247,244,238,0.72); margin-top: 0.4rem; line-height: 1.4; }
.sts-sub strong { color: #fff; }

/* allocation flow */
.alloc { display: flex; flex-direction: column; gap: 0.4rem; }
.alloc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--t-sm); }
.alloc-row .n { color: var(--ink-soft); display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.alloc-row .n .ic { color: var(--slate); font-size: 0.95rem; flex-shrink: 0; }
.alloc-row .v { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.alloc-row.sub .v { color: var(--slate); }
.alloc-row.total { border-top: 1px solid var(--divider); padding-top: 0.45rem; margin-top: 0.1rem; }
.alloc-row.total .v.pos { color: var(--success); }
.alloc-row.total .v.neg { color: var(--error); }
.alloc-bar2 { display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden; background: var(--mist); margin: 0.6rem 0 0.2rem; }
.alloc-bar2 .seg { height: 100%; }
.alloc-bar2 .seg.committed { background: var(--ink-300); }
.alloc-bar2 .seg.everyday  { background: var(--copper); }
.alloc-bar2 .seg.savings   { background: var(--success); }
.alloc-bar2 .seg.funm      { background: var(--accent-purple); }
.alloc-bar2 .seg.free      { background: var(--ink-100); }
.alloc-key2 { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; margin-top: 0.4rem; }
.ak2 { display: flex; align-items: center; gap: 0.35rem; font-size: var(--t-2xs); color: var(--ink-faint); }
.ak2 .d { width: 8px; height: 8px; border-radius: 2px; }
.alloc-edit { font-size: var(--t-xs); font-weight: 700; color: var(--copper); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
/* inline pencil next to the Planned income figure (discoverable override) */
.alloc-row-edit { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--copper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.alloc-row-edit:hover { border-color: var(--copper); background: var(--copper-100); }
.alloc-row-edit .ic { font-size: 0.85rem; }

/* sidebar category filter chips */
.side-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.side-chip { font-size: var(--t-xs); font-weight: 600; padding: 0.3rem 0.6rem; border-radius: var(--r-full); border: 1px solid var(--border-strong); background: transparent; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.side-chip.active { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }

/* savings sidebar summary */
.sv-sum { display: flex; flex-direction: column; gap: 0.55rem; }
.sv-sum-row { display: flex; align-items: baseline; justify-content: space-between; }
.sv-sum-row .l { font-size: var(--t-xs); color: var(--slate); }
.sv-sum-row .v { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.sv-sum-row .v.copper { color: var(--copper); }

.side-add { width: 100%; border: 1.5px dashed var(--border-strong); background: transparent; color: var(--slate); border-radius: var(--r-md); padding: 0.6rem; font-family: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.side-add:hover { color: var(--ink-blue); border-color: var(--ink-blue); }

/* two-column main grid */
#tab-budgets .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 1180px) { #tab-budgets .two-col { grid-template-columns: 1fr; } }

/* everyday budgets list */
.bud-list-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.1rem 1.25rem 0.85rem; }
.blc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.blc-head .eyebrow { color: var(--slate); }
.bud-item { display: grid; grid-template-columns: 30px 1fr 72px; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-top: 1px solid var(--divider); width: 100%; background: none; border-left: none; border-right: none; border-bottom: none; text-align: left; font-family: inherit; cursor: pointer; }
.bud-item:first-of-type { border-top: none; }
.bud-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--ink-blue); }
.bud-icon .ic { font-size: 1rem; }
.bud-mid { min-width: 0; }
.bud-mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.bud-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.bud-fig { font-size: var(--t-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bud-track { height: 7px; background: var(--mist); border-radius: var(--r-full); overflow: hidden; }
.bud-fill { height: 100%; border-radius: var(--r-full); }
.bud-fill.ok   { background: var(--success); }
.bud-fill.warn { background: var(--warning); }
.bud-fill.over { background: var(--error); }
.bud-right { text-align: right; }
.bud-remain { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.bud-remain.over { color: var(--error); }
.bud-remain-lbl { font-size: var(--t-2xs); color: var(--ink-faint); }
.bud-add { width: 100%; border: 1.5px dashed var(--border-strong); background: transparent; color: var(--slate); border-radius: var(--r-md); padding: 0.65rem; font-family: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; margin-top: 0.65rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.bud-add:hover { color: var(--ink-blue); border-color: var(--ink-blue); }

/* committed bills (read-only from Forecast) */
.committed-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.1rem 1.25rem; }
.cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.cc-head .eyebrow { color: var(--slate); }
.cc-link { font-size: var(--t-2xs); font-weight: 700; color: var(--copper); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }
.cc-note { font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: 0.5rem; }
.cc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; border-top: 1px solid var(--divider); font-size: var(--t-sm); }
.cc-row:first-of-type { border-top: none; }
.cc-row .ic { color: var(--slate); font-size: 1rem; }
.cc-name { flex: 1; color: var(--ink-soft); min-width: 0; }
.cc-date { font-size: var(--t-2xs); color: var(--ink-faint); }
.cc-amt { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.nb-callout a { color: var(--copper); font-weight: 700; text-decoration: none; }

/* savings goal cards (Savings view — full build next session) */
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 1180px) { .goal-grid { grid-template-columns: 1fr; } }
.goal-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; }
.goal-add { border: 1.5px dashed var(--border-strong); background: transparent; color: var(--slate); border-radius: var(--r-lg); min-height: 150px; cursor: pointer; font-family: inherit; font-size: var(--t-sm); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; }
.goal-add:hover { color: var(--ink-blue); border-color: var(--ink-blue); }
.goal-add .ic { font-size: 1.5rem; }
.bud-empty { color: var(--slate); font-size: var(--t-sm); text-align: center; padding: 2.5rem 1rem; }

/* Mobile: stat strip wraps to a 2×2 grid instead of clipping (full bespoke
   mobile layout from the mockup is a later pass). */
@media (max-width: 768px) {
  #tab-budgets .stat-strip { flex-wrap: wrap; }
  #tab-budgets .stat-strip .stat { flex: 1 1 44%; }
  #tab-budgets .stat-strip .stat + .stat:nth-child(odd) { border-left: none; }
}

/* ── Savings view (Option C — pot chart + per-goal cards) ── */
.goal-top { display: flex; align-items: flex-start; gap: 0.8rem; }
.goal-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--ink-blue); flex-shrink: 0; }
.goal-icon .ic { font-size: 1.1rem; }
.goal-icon.copper { background: var(--copper-100); color: var(--copper-700); }
.goal-hd { flex: 1; min-width: 0; }
.goal-name { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); }
.goal-meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 1px; }
.goal-saved { font-weight: 700; color: var(--ink-blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.goal-target { font-size: var(--t-sm); color: var(--slate); font-variant-numeric: tabular-nums; }
.goal-track { height: 9px; background: var(--mist); border-radius: var(--r-full); overflow: hidden; }
.goal-fill { height: 100%; border-radius: var(--r-full); background: var(--success); }
.goal-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.goal-foot .status { font-size: var(--t-xs); }
.goal-contrib { font-size: var(--t-xs); color: var(--slate); display: flex; align-items: center; gap: 0.4rem; }
.goal-contrib strong { color: var(--ink-blue); }
.goal-edit-btn { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--copper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.goal-edit-btn:hover { border-color: var(--copper); background: var(--copper-100); }
.goal-edit-btn .ic { font-size: 0.8rem; }

.pot-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.1rem 1.25rem; }
.pot-wrap { height: 230px; margin-top: 0.5rem; }
.pot-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.7rem; }
.pl { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-xs); color: var(--ink-soft); }
.pl-sw { width: 22px; height: 0; border-top: 3px solid; border-radius: 2px; }
.pl-sw.dash { border-top-style: dashed; }
.goal-mini-wrap { height: 90px; }
.goal-mini-legend { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.gml { display: flex; align-items: center; gap: 0.3rem; font-size: var(--t-2xs); color: var(--ink-faint); }
.gml-sw { width: 14px; height: 0; border-top: 2px solid; border-radius: 2px; }
.gml-sw.dash { border-top-style: dashed; }

/* desktop uses the mini charts; mobile uses the simple progress bar */
@media (min-width: 769px) { .goal-bar { display: none; } }
@media (max-width: 768px) { .goal-mini-wrap, .goal-mini-legend, .pot-card { display: none; } }

/* ════ Bespoke mobile Budgets / Savings (M34) ════ */
@media (max-width: 768px) {
  .bud-side { padding: 0.9rem 1rem 0.55rem; gap: 0.7rem; }
  .bud-main { padding: 0 1rem 2.5rem; }
}
/* mobile plan hero */
.m-plan { background: var(--grad-ink); border-radius: var(--r-lg); box-shadow: var(--sh-ink); color: #fff; padding: 1rem 1.1rem; margin-bottom: 0.8rem; }
.m-plan-lbl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-300); }
.m-plan-val { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 0.25rem; }
.m-plan-sub { font-size: var(--t-xs); color: rgba(247,244,238,0.7); margin-top: 0.4rem; }
.m-plan-sub strong { color: #fff; }
.m-plan-flow { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.32rem; }
.m-pf { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); }
.m-pf .l { display: flex; align-items: center; gap: 0.4rem; color: rgba(247,244,238,0.82); }
.m-pf .v { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; display: inline-flex; align-items: center; gap: 0.3rem; }
.m-pf.total { border-top: 1px solid rgba(247,244,238,0.14); padding-top: 0.4rem; margin-top: 0.18rem; }
.m-pf.total .l { color: #fff; font-weight: 700; }
.m-pf .v.pos { color: #7fd1a8; } .m-pf .v.neg { color: #f3a3a3; }
.ak-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.ak-dot.committed { background: var(--ink-300); } .ak-dot.everyday { background: var(--copper); } .ak-dot.savings { background: var(--success); } .ak-dot.funm { background: var(--accent-purple); }

/* ── Fun money — per-member allowance cards (Budgets) + picker avatar ── */
.fun-pick-av { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.72rem; flex-shrink: 0; }
.fun-card .blc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.fun-hd-note { font-size: var(--t-2xs); color: var(--ink-faint); font-weight: 500; }
.fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.4rem; }
.fm-grid-m { grid-template-columns: 1fr; gap: 0.7rem; }
.fm { background: var(--n-25); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 1rem 1.1rem; }
.fm-top { display: flex; align-items: center; gap: 0.6rem; }
.fm-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: var(--t-sm); flex-shrink: 0; }
.fm-who { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.fm-sub { font-size: var(--t-2xs); color: var(--ink-faint); }
.fm-edit { margin-left: auto; background: none; border: 0; color: var(--slate); cursor: pointer; padding: 0.2rem; }
.fm-edit:hover { color: var(--ink-blue); }
.fm-amt { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; color: var(--ink-blue); margin: 0.65rem 0 0.1rem; font-variant-numeric: tabular-nums; }
.fm-amt .of { font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); }
.fm-prog { height: 8px; background: var(--mist); border-radius: 999px; overflow: hidden; margin: 0.55rem 0 0.45rem; }
.fm-prog > span { display: block; height: 100%; border-radius: 999px; }
.fm-foot { display: flex; justify-content: space-between; font-size: var(--t-xs); }
.fm-pct { color: var(--ink-faint); }
.fm-left { font-weight: 700; color: var(--success-ink); }
.fm-left.warn { color: var(--warning-ink); }
.fm-left.over { color: var(--error); }
.fm-noenv { font-size: var(--t-xs); color: var(--ink-faint); margin: 0.7rem 0 0.6rem; }
.fm-set { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--t-xs); font-weight: 600; color: var(--ink-blue); background: none; border: 1px dashed var(--blue-grey); border-radius: var(--r-sm); padding: 0.35rem 0.6rem; cursor: pointer; }
.fm-set:hover { background: var(--surface); }
.m-plan-edit { background: rgba(247,244,238,0.14); border: none; color: rgba(247,244,238,0.8); width: 20px; height: 20px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.m-plan-edit .ic { font-size: 0.72rem; }

.m-card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 0.85rem 0.9rem; margin-bottom: 0.7rem; }
.m-cc-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-sm); padding: 0.32rem 0; color: var(--ink-soft); }
.m-cc-row + .m-cc-row { border-top: 1px solid var(--divider); }
.m-cc-row .v { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }

.m-bud { display: grid; grid-template-columns: 26px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; width: 100%; background: none; border: none; border-top: 1px solid var(--divider); text-align: left; font-family: inherit; cursor: pointer; }
.m-bud:first-of-type { border-top: none; }
.m-bud-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--ink-blue); }
.m-bud-icon .ic { font-size: 0.9rem; }
.m-bud-name { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.m-bud-track { height: 6px; background: var(--mist); border-radius: var(--r-full); overflow: hidden; margin-top: 0.3rem; }
.m-bud-fill { height: 100%; border-radius: var(--r-full); }
.m-bud-fill.ok { background: var(--success); } .m-bud-fill.warn { background: var(--warning); } .m-bud-fill.over { background: var(--error); }
.m-bud-right { text-align: right; font-size: var(--t-xs); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.m-bud-right.over { color: var(--error); }
.m-bud-right small { display: block; font-weight: 400; color: var(--ink-faint); font-size: var(--t-2xs); }

.m-goal { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 0.85rem 0.9rem; cursor: pointer; }
.m-goal + .m-goal { margin-top: 0.6rem; }
.m-goal-top { display: flex; align-items: center; gap: 0.6rem; }
.m-goal-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--ink-blue); flex-shrink: 0; }
.m-goal-icon.copper { background: var(--copper-100); color: var(--copper-700); }
.m-goal-name { flex: 1; font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); min-width: 0; }
.m-goal-amt { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.m-goal-amt small { color: var(--ink-faint); font-weight: 400; }
.m-goal-track { height: 7px; background: var(--mist); border-radius: var(--r-full); overflow: hidden; margin-top: 0.55rem; }
.m-goal-fill { height: 100%; border-radius: var(--r-full); background: var(--success); }
.m-goal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.45rem; font-size: var(--t-2xs); color: var(--slate); }


/* ════════════════════════════════════════════════════════════
   TOOLS tab (W12) — Tags + Reports hub
   Desktop = sub-nav ‖ main; mobile = segmented switch + stacked.
   ════════════════════════════════════════════════════════════ */
.util-layout { display: block; }

/* sub-nav (desktop only) */
.util-nav { display: none; }
.un-sec { padding: 0.85rem 0.8rem; }
.un-title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); padding: 0 0.35rem; margin-bottom: 0.5rem; }
.un-item { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--r-sm); cursor: pointer; color: var(--ink-soft); }
.un-item .ic { font-size: 1.05rem; color: var(--slate); flex-shrink: 0; }
.un-item .lbl { flex: 1; font-size: var(--t-sm); font-weight: 600; }
.un-item .ct { font-size: var(--t-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.un-item:hover { background: var(--mist); }
.un-item.active { background: var(--mist); }
.un-item.active .lbl, .un-item.active .ct { color: var(--ink-blue); font-weight: 700; }
.un-item.active .ic { color: var(--copper); }
.un-item.active::before { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--copper); }
.un-item.soon { cursor: default; opacity: 0.55; }
.un-item.soon:hover { background: none; }
.un-soon-tag { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--border-strong); border-radius: var(--r-xs); padding: 0.05rem 0.3rem; }
.un-foot { margin-top: auto; padding: 0.8rem; border-top: 1px solid var(--divider); }
.un-foot p { font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.5; margin: 0; }

/* main area */
.util-main { padding: 1rem; }
.util-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.util-head h2 { font-size: var(--t-lg); font-weight: 700; color: var(--ink-blue); letter-spacing: -0.01em; margin: 0; }
.util-head .sub { font-size: var(--t-sm); color: var(--slate); margin-top: 0.15rem; }
.util-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* mobile segmented switch */
.tools-seg { display: flex; gap: 0.3rem; background: var(--mist); border-radius: var(--r-md); padding: 0.25rem; margin: 0.9rem 1rem 0; }
.tools-seg button { flex: 1; border: none; background: none; font-family: var(--font); font-size: var(--t-sm); font-weight: 700; color: var(--slate); padding: 0.5rem; border-radius: var(--r-sm); cursor: pointer; }
.tools-seg button.on { background: var(--surface); color: var(--ink-blue); box-shadow: var(--sh-1); }
.tools-m-launch { display: flex; gap: 0.5rem; margin: 0.7rem 1rem 0; }
.tools-m-launch .btn { flex: 1; justify-content: center; gap: 0.4rem; }
.tools-m-body { padding: 1rem; }

/* Tags table (desktop) */
.tag-tbl { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.tag-tbl thead th { text-align: left; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); padding: 0.7rem 1rem; border-bottom: 1px solid var(--divider); }
.tag-tbl thead th.r { text-align: right; }
.tag-tbl tbody td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--divider); font-size: var(--t-sm); color: var(--ink-soft); vertical-align: middle; }
.tag-tbl tbody tr:last-child td { border-bottom: none; }
.tag-tbl tbody tr { cursor: pointer; }
.tag-tbl tbody tr:hover td { background: var(--mist); }
.tag-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tag-tbl .spend { font-weight: 700; color: var(--ink-blue); }
.tag-tbl .meta { color: var(--ink-faint); white-space: nowrap; }
.tag-name { display: flex; align-items: center; gap: 0.6rem; }
.tag-name .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tag-name .nm { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.tag-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; min-width: 120px; max-width: 220px; background: var(--mist); }
.tag-bar span { display: block; }
.tag-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-faint); }

/* Tags cards (mobile) */
.tagm-card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 0.85rem 0.9rem; margin-bottom: 0.7rem; cursor: pointer; }
.tagm-card .top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tagm-card .nm { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); }
.tagm-card .nm .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tagm-card .amt { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; text-align: right; }
.tagm-card .meta { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.1rem; text-align: right; }
.tagm-card .tag-bar { margin-top: 0.55rem; max-width: none; }

/* Reports cards */
.rpt-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.rpt-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.2rem 1.25rem; display: flex; flex-direction: column; }
.rpt-top { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.rpt-ico { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rpt-ico .ic { font-size: 1.2rem; color: var(--copper); }
.rpt-card h3 { font-size: var(--t-base); font-weight: 700; color: var(--ink-blue); margin: 0; }
.rpt-card .rpt-sub { font-size: var(--t-2xs); color: var(--slate); margin-top: 0.15rem; }
.rpt-field { margin-bottom: 0.8rem; }
.rpt-field label { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.35rem; }
.rpt-select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23586070' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 0.7rem center; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0.55rem 1.8rem 0.55rem 0.7rem; font-size: var(--t-sm); color: var(--ink-blue); font-family: var(--font); font-weight: 600; cursor: pointer; }
.rpt-actions { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.rpt-actions .btn { flex: 1; min-width: 130px; white-space: nowrap; }
/* Share link is the headline action — full-width, sits on its own row */
.rpt-actions .btn-block { flex: 1 1 100%; }
/* The three downloads share their own row with min-widths that wrap (never
   truncate) on a narrow laptop card instead of squishing into one row */
.rpt-actions-dl .btn { flex: 1 1 140px; min-width: 140px; }
.rpt-dl-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin: 0 0 0.4rem; }
.rpt-note { font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.55; margin: 0.3rem 0 0; }
/* dynamic description badge (updateReportBadge) — DS, no coloured fill */
.report-tx-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-2xs); font-weight: 600; color: var(--ink-soft); }
.report-tx-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.report-tx-badge.ready::before { background: var(--success); }
.report-tx-badge.partial::before { background: var(--warning); }

/* Tag composition detail */
.td-back { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-sm); font-weight: 600; color: var(--slate); cursor: pointer; margin-bottom: 0.9rem; background: none; border: none; padding: 0; font-family: var(--font); }
.td-back:hover { color: var(--ink-blue); }
.td-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.td-head .nm { display: flex; align-items: center; gap: 0.65rem; }
.td-head .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.td-head h2 { font-size: var(--t-xl); font-weight: 700; color: var(--ink-blue); margin: 0; letter-spacing: -0.02em; }
.td-head .meta { font-size: var(--t-sm); color: var(--slate); margin-top: 0.2rem; }
.td-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.td-strip { margin: 1.1rem 0 0; display: flex; }
.td-body { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
.td-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 1.1rem 1.2rem; }
.td-card h3 { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); margin: 0 0 0.1rem; }
.td-card .csub { font-size: var(--t-2xs); color: var(--slate); margin-bottom: 0.6rem; }
.td-donut-wrap { position: relative; width: 168px; height: 168px; margin: 0.5rem auto 1rem; }
.td-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.td-donut-center .l { font-size: var(--t-2xs); color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.td-donut-center .v { font-size: var(--t-lg); font-weight: 700; color: var(--ink-blue); }
.td-leg-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--divider); }
.td-leg-row:first-child { border-top: none; }
.td-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.td-leg-name { flex: 1; font-size: var(--t-sm); color: var(--ink-soft); }
.td-leg-amt { font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.td-leg-pct { font-size: var(--t-2xs); color: var(--ink-faint); width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.td-txhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.td-tx { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--divider); }
.td-tx:first-of-type { border-top: none; }
.td-tx .desc { font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); }
.td-tx .sub { font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 0.15rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.catchip { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); border: 1px solid var(--border-strong); border-radius: var(--r-xs); padding: 0.06rem 0.4rem; white-space: nowrap; }
.td-tx .amt { font-weight: 700; color: var(--ink-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-tx .amt.pos { color: var(--success); }

@media (min-width: 769px) {
  body.tab-is-tools #tab-tools { display: flex !important; flex-direction: column; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
  .util-layout { flex: 1; display: flex; flex-direction: row; min-height: 0; }
  .util-nav { display: flex; flex-direction: column; width: 224px; flex-shrink: 0; border-right: 1px solid var(--divider); background: var(--surface); overflow-y: auto; }
  .util-main { flex: 1; min-width: 0; overflow-y: auto; padding: 1.2rem 1.4rem 2rem; }
  .rpt-grid { grid-template-columns: 1fr 1fr; }
  .rpt-actions .btn { min-width: 0; }
  .td-body { grid-template-columns: 340px 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   W13 — Dashboard command centre (Needs attention · Coming up ·
   To-review slide-over). Colour lives only in leading icons/dots
   and amount text — no coloured-fill chips/badges (IA §2l).
   ════════════════════════════════════════════════════════════════ */

/* Compact, clickable "To review" stat tile */
.stat.stat-action { cursor: pointer; transition: background 0.12s; position: relative; }
.stat.stat-action:hover { background: var(--mist); }
.stat.stat-action .stat-val { color: var(--copper); }
.stat-go { position: absolute; top: 0.85rem; right: 1rem; font-size: var(--t-2xs); font-weight: 700; color: var(--copper); display: inline-flex; align-items: center; gap: 0.2rem; }
.stat-go .ic { font-size: 0.85em; }

/* Insight row: Needs attention ‖ Coming up */
.dash-insight-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.9rem; align-items: start; }
@media (max-width: 1100px) { .dash-insight-grid { grid-template-columns: 1fr; } }
.dash-ins-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.dash-ins-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--blue-grey); }
.dash-ins-head .ic { font-size: 1rem; }
.dash-ins-h { font-size: var(--t-md); font-weight: 700; color: var(--ink-blue); letter-spacing: -0.01em; }
.dash-ins-n { margin-left: auto; font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint); background: var(--mist); border-radius: 999px; padding: 0.15rem 0.5rem; }

/* Attention rows */
.att-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; padding: 0.8rem 1.15rem; border-bottom: 1px solid var(--mist); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; font: inherit; cursor: pointer; }
.att-row:last-child { border-bottom: 0; }
.att-row:hover { background: var(--mist); }
.att-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.att-ic .ic { font-size: 1rem; color: var(--slate); }
.att-ic.sev-urgent .ic { color: var(--error); }
.att-ic.sev-soon   .ic { color: var(--warning); }
.att-ic.sev-info   .ic { color: var(--info); }
.att-ic.sev-pos    .ic { color: var(--success); }
.att-main { min-width: 0; }
.att-main .t { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); line-height: 1.3; }
.att-main .t b { font-weight: 800; }
.att-main .s { display: block; font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-cta { font-size: var(--t-xs); font-weight: 700; color: var(--copper); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.2rem; }
.att-cta .ic { font-size: 0.85em; }
.att-empty { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.15rem; }
.att-empty .att-ic.sev-pos { background: var(--mist); }
.att-empty .t { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--ink-blue); }
.att-empty .s { display: block; font-size: var(--t-xs); color: var(--ink-faint); margin-top: 0.05rem; }
.att-more { display: block; width: 100%; text-align: center; padding: 0.6rem; background: var(--mist); border: 0; font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--copper); cursor: pointer; }
.att-more:hover { color: var(--copper-600); }

/* Coming-up timeline */
.cu-row { display: grid; grid-template-columns: 44px auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.7rem 1.15rem; border-bottom: 1px solid var(--mist); }
.cu-row:last-child { border-bottom: 0; }
.cu-date { text-align: center; }
.cu-date .d { font-size: var(--t-md); font-weight: 800; color: var(--ink-blue); line-height: 1; }
.cu-date .m { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; color: var(--ink-faint); letter-spacing: 0.04em; }
.cu-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--slate); flex-shrink: 0; }
.cu-ic .ic { font-size: 0.85rem; }
.cu-txt { font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); min-width: 0; }
.cu-txt .s { display: block; font-size: var(--t-2xs); color: var(--ink-faint); font-weight: 500; margin-top: 0.05rem; }
.cu-amt { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-amt.in { color: var(--success); }
.cu-amt.out { color: var(--ink-blue); }
.cu-amt.muted { color: var(--ink-faint); }
.dash-cu-foot { padding: 0.6rem 1.15rem; background: var(--mist); font-size: var(--t-xs); color: var(--ink-faint); display: flex; justify-content: space-between; gap: 0.5rem; }
.dash-cu-foot b.in { color: var(--success); } .dash-cu-foot b.out { color: var(--ink-blue); }
.cu-empty { padding: 1.1rem 1.15rem; font-size: var(--t-sm); color: var(--ink-faint); }

/* ── Mobile dashboard entries ── */
.dash-m-review { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: var(--surface); border: 1px solid var(--blue-grey); border-radius: 12px; box-shadow: var(--sh-1); padding: 0.8rem 0.9rem; margin-bottom: 0.85rem; cursor: pointer; font: inherit; text-align: left; }
.dash-m-review-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--copper); flex-shrink: 0; }
.dash-m-review-txt { font-size: var(--t-sm); color: var(--ink-blue); }
.dash-m-review-txt strong { font-weight: 800; }

/* ════ To-review overlay (slide-over desktop / bottom sheet mobile) ════ */
.review-overlay { position: fixed; inset: 0; z-index: 1200; }
.review-scrim { position: absolute; inset: 0; background: rgba(15,29,45,0.38); animation: rvFade 0.18s ease; }
@keyframes rvFade { from { opacity: 0; } to { opacity: 1; } }
.review-panel { position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 92vw; background: var(--surface); box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: rvSlide 0.22s ease; }
@keyframes rvSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.review-head { display: flex; align-items: center; gap: 0.6rem; padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--blue-grey); flex-shrink: 0; }
.review-head .ic { font-size: 1.05rem; }
.review-title { font-size: var(--t-lg); font-weight: 700; color: var(--ink-blue); }
.review-count { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint); background: var(--mist); border-radius: 999px; padding: 0.15rem 0.5rem; }
.review-x { margin-left: auto; cursor: pointer; color: var(--slate); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: none; border: 0; }
.review-x:hover { background: var(--mist); color: var(--ink-blue); }
.review-toggle { display: flex; margin: 0.9rem 1.2rem 0; border: 1px solid var(--border-strong, var(--ink-200)); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.review-toggle-btn { flex: 1; background: var(--surface); color: var(--slate); border: 0; padding: 0.42rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.review-toggle-btn + .review-toggle-btn { border-left: 1px solid var(--blue-grey); }
.review-toggle-btn.active { background: var(--ink-blue); color: var(--parchment); }
.review-list { flex: 1; overflow-y: auto; padding: 0.4rem 0 1.5rem; }
@media (max-width: 768px) {
  .review-panel { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%; height: 88vh; border-radius: 18px 18px 0 0; animation: rvSlideUp 0.22s ease; }
  @keyframes rvSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* Review rows (DS rebuild of the old inbox rows — colour only in dots/flags) */
.rv-row { padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--mist); }
.rv-row:last-child { border-bottom: 0; }
.rv-row .meta { font-size: var(--t-2xs); color: var(--ink-faint); }
.rv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-top: 0.1rem; }
.rv-desc { font-size: var(--t-sm); font-weight: 600; color: var(--ink-blue); }
.rv-amt { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-blue); }
.rv-amt.pos { color: var(--success); }
.rv-qa { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.qa { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: 1px solid var(--border-strong, var(--ink-200)); color: var(--ink-soft); border-radius: 999px; padding: 0.28rem 0.62rem; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.qa:hover { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }
.qa .qa-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.qa-suggest .qa-dot { background: var(--copper); }
.qa-recent .qa-dot { background: var(--slate); }
.qa-more { color: var(--copper); border-style: dashed; }
.qa-more:hover { background: var(--copper); color: #fff; border-color: var(--copper); border-style: solid; }
.rv-foot2 { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; }
.rv-memo { flex: 1; display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.rv-memo-lbl { font-size: 0.64rem; color: var(--ink-faint); white-space: nowrap; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.rv-memo input { flex: 1; min-width: 0; font: inherit; font-size: 0.8rem; border: 1px solid var(--blue-grey); border-radius: 7px; padding: 0.32rem 0.55rem; background: var(--mist); color: var(--ink-blue); }
.rv-memo input:focus { outline: none; border-color: var(--ink-blue); background: var(--surface); }
.rv-flags { display: flex; gap: 0.4rem; flex-shrink: 0; }
.rv-flag { width: 30px; height: 28px; border: 1px solid var(--border-strong, var(--ink-200)); border-radius: 7px; background: var(--surface); color: var(--slate); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.rv-flag:hover { border-color: var(--ink-blue); color: var(--ink-blue); }
.rv-flag.on { background: var(--ink-blue); color: var(--parchment); border-color: var(--ink-blue); }
/* Inbox client-attribution button (CR4 Slice 2b) — auto width to fit the label */
.rv-flag-client { width: auto; padding: 0 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; max-width: 140px; overflow: hidden; white-space: nowrap; }
.rv-flag-client .ic { font-size: 0.95em; }
.rv-empty { text-align: center; padding: 2.5rem 1.2rem; }
.rv-empty .rv-ok { width: 44px; height: 44px; border-radius: 12px; background: var(--mist); color: var(--success); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; }
.rv-empty .rv-ok .ic { font-size: 1.4rem; }
.rv-empty strong { display: block; font-size: var(--t-md); color: var(--ink-blue); font-weight: 700; margin-bottom: 0.25rem; }
.rv-empty p { color: var(--ink-faint); font-size: var(--t-sm); }