:root{ --topbar-h:64px; --entry-h:110px; }
  :root[data-theme="dark"]{
    --bg:#14181B; --surface:#1B2024; --surface-2:#232A2E; --surface-3:#2A3237;
    --border:#2E363B; --border-soft:#252C30;
    --text:#EDEEE9; --text-muted:#8E9A96; --text-faint:#5E6A66;
    --accent:#5CAE7E; --accent-text:#DFF3E7; --accent-soft:rgba(92,174,126,.14); --accent-border:rgba(92,174,126,.4);
    --negative:#D07D6E; --negative-soft:rgba(208,125,110,.14); --negative-border:rgba(208,125,110,.4);
    --shadow: 0 12px 32px rgba(0,0,0,.4);
    --scrollbar:#3A4348;
  }
  :root[data-theme="light"]{
    --bg:#EEF0E9; --surface:#FFFFFF; --surface-2:#F6F6F0; --surface-3:#ECEDE4;
    --border:#DBDDD1; --border-soft:#E5E6DC;
    --text:#1C2420; --text-muted:#6C7469; --text-faint:#9CA398;
    --accent:#2E7A52; --accent-text:#1D5738; --accent-soft:rgba(46,122,82,.1); --accent-border:rgba(46,122,82,.35);
    --negative:#AE4A38; --negative-soft:rgba(174,74,56,.09); --negative-border:rgba(174,74,56,.32);
    --shadow: 0 12px 28px rgba(30,35,25,.1);
    --scrollbar:#D2D4C7;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--text);
    font-family:'IBM Plex Sans',-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
    min-height:100vh;
  }
  ::selection{ background:var(--accent-soft); }
  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--scrollbar); border-radius:8px; }
  .mono{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
  #app{ max-width:980px; margin:0 auto; padding:28px 20px 80px; }

  /* ---------- topbar ---------- */
  .topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;
    position:sticky; top:0; z-index:25; background:var(--bg); }
  .brand{ display:flex; align-items:center; gap:9px; }
  .brand-mark{ font-family:'Fraunces',serif; font-weight:600; font-size:23px; letter-spacing:.2px; cursor:pointer; transition:color .15s ease; user-select:none;
    display:inline-flex; align-items:center; gap:8px; }
  .brand-mark img{ width:22px; height:22px; border-radius:6px; vertical-align:middle; }
  .brand-mark:hover{ color:var(--accent); }
  .brand-sub{ font-size:11px; color:var(--text-faint); letter-spacing:1.5px; text-transform:uppercase; }
  .brand-sub.mono{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; letter-spacing:.2px; font-size:12px; font-weight:600; text-transform:none; transition:color .15s ease; }
  .brand-sub.pos{ color:var(--accent); }
  .brand-sub.neg{ color:var(--negative); }
  .brand-sum-stack{ display:flex; flex-direction:column; justify-content:center; gap:2px; line-height:1.3; }
  .theme-toggle{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s ease;
  }
  .theme-toggle:hover{ border-color:var(--accent-border); color:var(--accent); }
  .theme-toggle.active{ color:var(--accent); border-color:var(--accent-border); background:var(--accent-soft); }
  /* Minimal addition: Notepad icon styled as a solid filled button in the
     same WhatsApp green (#25D366) with a white glyph — same visual weight
     as the WhatsApp brand icon. Attribute selector keeps this at
     class-level specificity so :hover / .active still win as before. */
  [id="notepadToggle"]{ background:#25D366; border-color:#25D366; color:#fff; }
  [id="notepadToggle"]:hover{ background:#20BD5A; border-color:#20BD5A; color:#fff; }
  [id="notepadToggle"] svg{ stroke-width:2.6; }
  .notify-wrap{ position:relative; }
  .topbar-divider{ width:1px; height:24px; background:var(--border-soft); flex:0 0 auto; }
  /* DB connection status dot — green when the backend answered the last
     ping, red when it didn't. Purely visual/informational; tapping it
     re-checks immediately instead of waiting for the next interval. */
  /* DB connection status — the word "Connect" in the brand mark changes
     color: green when the backend answered the last ping, red when it
     didn't. Purely visual/informational; clicking it re-checks immediately
     instead of waiting for the next interval. */
  .db-status-text{
    color:#22c55e; cursor:pointer; transition:color .2s ease;
  }
  .db-status-text.offline{ color:#ef4444; }
  .db-status-text.checking{ color:#eab308; animation:dbPulse .7s ease-in-out infinite; }
  @keyframes dbPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
  .shortcut-btns{ display:flex; align-items:center; gap:6px; }
  .shortcut-btn{
    width:34px; height:34px; border-radius:10px; border:1px solid hsl(var(--sc-hue,210) 55% 50% / .35);
    background:hsl(var(--sc-hue,210) 60% 50% / .12); color:hsl(var(--sc-hue,210) 75% 58%); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; letter-spacing:.2px;
    transition:all .15s ease; padding:0;
    box-shadow:0 0 8px hsl(var(--sc-hue,210) 80% 55% / .3);
  }
  .shortcut-btn:hover{
    border-color:hsl(var(--sc-hue,210) 70% 55% / .7); color:hsl(var(--sc-hue,210) 80% 64%);
    background:hsl(var(--sc-hue,210) 70% 50% / .2); transform:translateY(-1px);
    box-shadow:0 0 16px hsl(var(--sc-hue,210) 85% 55% / .6), 0 0 3px hsl(var(--sc-hue,210) 85% 62% / .6);
  }
  .notify-badge{
    position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
    background:var(--negative); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center;
    font-family:'IBM Plex Sans',sans-serif; box-shadow:0 0 0 2px var(--bg);
    animation:badgePulse 1.8s ease-in-out infinite;
  }
  @keyframes badgePulse{
    0%, 100%{ box-shadow:0 0 0 2px var(--bg), 0 0 0 0 rgba(244,63,94,.55); }
    50%{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px rgba(244,63,94,0); }
  }
  .notify-panel{
    position:absolute; top:calc(100% + 8px); right:0; width:320px; max-height:420px; overflow-y:auto;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.16), var(--shadow);
    z-index:30; padding:10px;
    animation:notifyPanelIn .16s cubic-bezier(.16,1,.3,1);
  }
  @keyframes notifyPanelIn{
    from{ opacity:0; transform:translateY(-4px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .notify-panel-head{ padding:10px 10px 8px; border-bottom:1px solid var(--border-soft); margin-bottom:4px;
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .notify-viewall-btn{ flex:0 0 auto; display:flex; align-items:center; gap:3px; background:none; border:none;
    padding:2px 0; cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--accent); }
  .notify-viewall-btn:hover{ text-decoration:underline; }
  .notify-viewall-btn svg{ width:13px; height:13px; }
  .notify-panel-title{ font-size:13px; font-weight:600; }
  .notify-panel-sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
  .notify-row{ padding:11px; border-radius:10px; transition:background .15s ease; }
  .notify-row.notify-row-collapsing{
    transition:max-height .22s ease, opacity .22s ease, margin .22s ease, padding .22s ease;
  }
  .notify-row:hover{ background:var(--surface-2); }
  .notify-row + .notify-row{ margin-top:2px; }
  .notify-row-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .notify-row-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notify-row-name[data-open-acc]{ cursor:pointer; }
  .notify-row-name[data-open-acc]:hover{ text-decoration:underline; }
  .notify-row-days{ flex:0 0 auto; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:20px;
    background:var(--negative-soft); color:var(--negative); white-space:nowrap; }
  .notify-row-sub{ font-size:12px; color:var(--text-faint); margin-top:3px; }
  .notify-row-balance{ font-weight:600; }
  .notify-row-balance.pos{ color:var(--accent); }
  .notify-row-balance.neg{ color:var(--negative); }
  .notify-row-actions{ display:flex; gap:6px; margin-top:9px; }
  .notify-icon-btn{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-family:inherit;
    width:30px; height:30px; border-radius:8px; cursor:pointer; text-decoration:none;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  }
  .notify-icon-btn:hover{ background:var(--surface-3); color:var(--text); transform:translateY(-1px); }
  .notify-icon-btn:active{ transform:translateY(0); }
  .notify-icon-btn.wa{ color:#25D366; border-color:rgba(37,211,102,.35); }
  .notify-icon-btn.wa:hover{ background:#25D366; border-color:#25D366; color:#fff; }
  .notify-icon-btn svg{ flex:0 0 auto; }
  .notify-empty{ padding:32px 16px; text-align:center; color:var(--text-faint); font-size:12.5px;
    display:flex; flex-direction:column; align-items:center; gap:8px; }
  .notify-empty svg{ width:22px; height:22px; color:var(--accent); }
  .notify-panel-subhead{ padding:12px 10px 6px; font-size:10.5px; font-weight:700; letter-spacing:.5px;
    text-transform:uppercase; color:var(--text-faint); }
  .notify-panel-subhead-sm{ padding:8px 10px 4px; font-size:9.5px; opacity:.85; }
  .notify-panel-subhead-sm.cat-overdue{ color:var(--negative); }
  .notify-panel-subhead-sm.cat-today{ color:#F59E0B; }
  .notify-panel-subhead-sm.cat-upcoming{ color:var(--accent); }
  .notify-row-handled{ opacity:.75; }
  .notify-search-box{ width:100%; max-width:none; margin:2px 0 0; --sb-glow:var(--accent); }
  .notify-panel-sticky{
    position:sticky; top:-10px; z-index:5; background:var(--surface);
    margin:-10px -10px 6px; padding:10px 10px 8px; border-bottom:1px solid var(--border-soft);
  }
  .notify-panel .reminder-stat-grid{ margin-top:2px; margin-bottom:8px; }
  .notify-outstanding-line{ font-size:11px; font-weight:500; color:var(--text-faint); margin:-2px 0 8px; text-align:center; }
  .notify-panel .reminder-stat-cell{ transition:transform .12s ease, border-color .12s ease; cursor:pointer; }
  .notify-panel .reminder-stat-cell:hover{ transform:translateY(-1px); border-color:var(--accent-border); }
  .notify-row-flash{ animation:notifyRowFlash .9s ease; }
  @keyframes notifyRowFlash{
    0%{ background:var(--accent-soft); }
    100%{ background:transparent; }
  }
  .notify-skip-wrap{ position:relative; display:inline-flex; }
  .notify-skip-menu{
    position:absolute; top:calc(100% + 6px); right:0; min-width:150px;
    background:var(--surface); border:1px solid var(--border); border-radius:9px;
    box-shadow:0 10px 24px rgba(0,0,0,.18); padding:4px; z-index:40;
  }
  .notify-skip-menu[hidden]{ display:none; }
  .notify-skip-menu button{
    display:block; width:100%; text-align:left; background:none; border:none; font-family:inherit;
    font-size:12px; color:var(--text); padding:7px 9px; border-radius:6px; cursor:pointer; white-space:nowrap;
  }
  .notify-skip-menu button:hover{ background:var(--surface-2); }
  .notify-panel-title-btn{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:none; border:none; padding:0; cursor:pointer; font-family:inherit; color:var(--text);
  }
  .notify-panel-title-btn:hover{ color:var(--accent); }
  .notify-panel-title-btn:hover svg{ transform:translateX(2px); }
  .notify-panel-title-btn svg{ width:14px; height:14px; color:var(--text-faint); flex:0 0 auto; transition:transform .15s ease; }
  .notify-panel-title-btn:hover svg{ color:var(--accent); }

  /* ---------------- notepad (minimal addition) ----------------
     Reuses .notify-panel for the floating shell (same position, size
     ballpark, border-radius, shadow, animation) so it matches the bell
     panel exactly; only the bits that need to differ get their own
     rules below. */
  .notepad-panel{ width:300px; padding:10px; }
  .notepad-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:2px 2px 8px; border-bottom:1px solid var(--border-soft); margin-bottom:8px; }
  .notepad-panel-head .notify-panel-title{ flex:1; }
  .notepad-back-btn{ flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
    color:var(--text-muted); cursor:pointer; transform:rotate(180deg); transition:all .15s ease; }
  .notepad-back-btn:hover{ border-color:var(--accent-border); color:var(--accent); }
  .notepad-row{ display:flex; align-items:center; gap:2px; border-radius:10px; transition:background .15s ease; }
  .notepad-row:hover{ background:var(--surface-2); }
  .notepad-row + .notepad-row{ margin-top:2px; }
  .notepad-row-main{ flex:1; min-width:0; padding:9px; cursor:pointer; }
  .notepad-row-text{ font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notepad-row-time{ font-size:10.5px; color:var(--text-faint); margin-top:2px; }
  .notepad-textarea{
    width:100%; min-height:150px; max-height:220px; resize:vertical; border:1px solid var(--border);
    border-radius:10px; background:#F7F2E4; color:#2E2A22; font-family:inherit; font-size:13px;
    padding:9px 10px; box-sizing:border-box; outline:none; transition:border-color .15s ease;
  }
  .notepad-textarea:focus{ border-color:var(--accent-border); }
  .notepad-status{ font-size:11px; color:var(--text-faint); margin-top:7px; text-align:right; }
  .notepad-status.saved{ color:var(--accent); }
  .notepad-status.error{ color:var(--negative); }
  .notepad-retry{ background:none; border:none; padding:0; margin:0; font:inherit; font-size:11px;
    color:var(--negative); text-decoration:underline; cursor:pointer; }
  /* Minimal addition: editor-only layout — flatten the textarea's own
     boxed/card look and let it fill the panel, with a compact head row
     (back button + status) pinned above it. Scoped to .notepad-editing so
     the shared .notify-panel shell (bell panel, notepad list view) is
     untouched. */
  .notepad-panel.notepad-editing{ display:flex; flex-direction:column; height:420px; }
  .notepad-panel.notepad-editing .notepad-panel-head{ padding:2px 2px 6px; margin-bottom:6px; flex:0 0 auto; }
  .notepad-panel.notepad-editing .notepad-status{ margin-top:0; }
  .notepad-panel.notepad-editing .notepad-textarea{
    flex:1 1 auto; min-height:0; max-height:none; border:none; border-radius:0;
    background:#F7F2E4; padding:4px 2px; resize:none;
  }

  /* ---------- entry bar ---------- */
  .entry-wrap{ margin-bottom:20px; position:sticky; top:var(--topbar-h, 64px); z-index:20; background:var(--bg); padding-top:6px; margin-top:-6px; }
  .entry-quote{
    font-family:'Fraunces',serif; font-style:italic; font-weight:600;
    font-size:13.5px; letter-spacing:.2px; color:#F59E0B;
    text-align:center; opacity:1; margin:0 auto 14px;
    padding:6px 16px; max-width:fit-content;
    background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); border-radius:20px;
    box-shadow:0 0 16px rgba(245,158,11,.18);
    user-select:none; transition:opacity .2s ease, color .2s ease;
  }
  .entry-quote:hover{ opacity:.85; }
  .entry-bar{
    display:flex; align-items:stretch;
    background:var(--surface); border:1px solid rgba(var(--eb-glow,239,68,68),.35); border-radius:12px;
    transition:border-color .2s ease, box-shadow .2s ease;
    box-shadow:0 0 22px rgba(var(--eb-glow,239,68,68),.22), 0 0 2px rgba(var(--eb-glow,239,68,68),.15);
  }
  .entry-bar:hover{ border-color:rgba(var(--eb-glow,239,68,68),.5); box-shadow:0 0 30px rgba(var(--eb-glow,239,68,68),.32), 0 0 3px rgba(var(--eb-glow,239,68,68),.2); }
  .entry-bar:focus-within{ border-color:rgba(var(--eb-glow,239,68,68),.65);
    box-shadow:0 0 0 3px rgba(var(--eb-glow,239,68,68),.16), 0 0 40px rgba(var(--eb-glow,239,68,68),.45); }
  .entry-bar.invalid{ animation:shake .32s ease; }
  @keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
  .eb-field{ position:relative; display:flex; align-items:center; }
  .eb-field input{
    border:none; outline:none; background:transparent; color:var(--text);
    font-family:inherit; font-size:14px; padding:14px 14px; width:100%;
  }
  .eb-field input::placeholder{ color:var(--text-faint); font-weight:400; }
  .eb-account{ flex:0 0 190px; }
  .eb-desc{ flex:1 1 auto; min-width:120px; }
  .eb-amount{ flex:0 0 150px; }
  .eb-amount input{ font-family:'IBM Plex Mono',monospace; text-align:right; font-variant-numeric:tabular-nums; }
  .eb-divider{ width:1px; background:var(--border-soft); margin:12px 0; flex:0 0 1px; align-self:stretch; }
  .eb-actions{ display:flex; align-items:center; gap:6px; padding:7px 8px; flex:0 0 auto; }
  .eb-btn{
    border:1px solid transparent; background:transparent; color:var(--text-faint);
    font-family:inherit; font-size:12.5px; font-weight:500; padding:7px 12px; border-radius:8px;
    cursor:pointer; white-space:nowrap; transition:all .12s ease; display:flex; align-items:center; gap:5px;
  }
  .eb-btn:hover{ border-color:var(--border-soft); background:var(--surface-2); color:var(--text); }
  .eb-btn.primary{ background:var(--accent); border-color:var(--accent); color:#0E1712; }
  .eb-btn.primary:hover{ filter:brightness(1.08); }
  .eb-btn:active{ transform:scale(.96); }

  /* ---------- entry bar field icons (theme D only) ---------- */
  .eb-field-icon{
    display:none; flex:0 0 auto; width:14px; height:14px; margin:0 8px 0 14px;
    background-color:var(--accent);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-position:center; mask-position:center;
  }
  .eb-icon-account{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/%3E%3Cpath d='M17 12h.01'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/%3E%3Cpath d='M17 12h.01'/%3E%3C/svg%3E"); }
  .eb-icon-desc{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l4 4v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 12h6M9 16h6M9 8h2'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l4 4v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 12h6M9 16h6M9 8h2'/%3E%3C/svg%3E"); }

  /* ---------- account lock toggle (merged into the account field) ---------- */
  .eb-account{ position:relative; transition:background .15s ease; }
  .eb-account input{ flex:1 1 auto; width:auto; }
  .eb-account-divider{
    width:1px; align-self:stretch; margin:10px 0; background:var(--border-soft);
    flex:0 0 1px; transition:background .15s ease;
  }
  .account-lock-toggle{
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:24px; height:24px; margin:0 8px 0 2px;
    border:none; background:transparent; color:var(--text-faint);
    border-radius:6px; cursor:pointer; transition:all .15s ease;
  }
  .account-lock-toggle:hover{ background:var(--surface-3); color:var(--text); }
  .account-lock-toggle[aria-pressed="true"]{ color:var(--accent); }
  .account-lock-toggle[aria-pressed="true"]:hover{ background:var(--accent-soft); }
  .eb-account.locked{ background:var(--accent-soft); border-radius:12px 0 0 12px; }
  .eb-account.locked input{ color:var(--accent-text); font-weight:500; }
  .eb-account.locked .eb-account-divider{ background:var(--accent-border); }

  /* ---------- entry bar suggestion dropdowns ---------- */
  .eb-suggest{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
    background:var(--surface); border:1px solid var(--border-soft); border-radius:12px;
    box-shadow:var(--shadow); overflow:hidden; padding:5px;
    max-height:328px; overflow-y:auto;
    animation:ebSuggestIn .14s cubic-bezier(.4,0,.2,1);
  }
  @keyframes ebSuggestIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
  .eb-suggest[hidden]{ display:none; }
  .eb-suggest-item{
    display:flex; align-items:center; gap:9px; padding:7px 9px; font-size:13px; color:var(--text);
    border-radius:8px; cursor:pointer; transition:background .1s ease;
  }
  .eb-suggest-item:hover, .eb-suggest-item.active{ background:var(--accent-soft); color:var(--accent-text); }
  .eb-suggest-item:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--accent-border); }
  .eb-suggest-item + .eb-suggest-item{ margin-top:1px; }
  .eb-suggest-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
  .eb-suggest-name mark{ background:none; color:var(--accent); font-weight:600; }
  .eb-suggest-item.active .eb-suggest-name mark{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
  .eb-suggest-empty{ padding:10px 9px; font-size:12.5px; color:var(--text-faint); text-align:center; }
  .eb-suggest-pin{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; padding:0; border-radius:6px; border:1px solid transparent;
    background:transparent; color:var(--text-faint); cursor:pointer; transition:all .12s ease;
  }
  .eb-suggest-pin:hover{ background:var(--surface-3); color:var(--text-muted); }
  .eb-suggest-pin.active{ color:#F59E0B; }
  .eb-suggest-pin.active:hover{ background:rgba(245,158,11,.12); }
  .eb-suggest-item.active .eb-suggest-pin{ color:var(--accent-text); opacity:.85; }
  .eb-suggest-item.active .eb-suggest-pin.active{ color:#F59E0B; opacity:1; }
  .eb-suggest-remove{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; padding:0; border-radius:6px; border:1px solid transparent;
    background:transparent; color:var(--text-faint); cursor:pointer; transition:all .12s ease;
  }
  .eb-suggest-remove:hover{ background:var(--negative-soft); color:var(--negative); }
  .eb-suggest-item.active .eb-suggest-remove{ color:var(--accent-text); opacity:.85; }
  .eb-suggest-item.active .eb-suggest-remove:hover{ background:var(--negative-soft); color:var(--negative); opacity:1; }

  .batch-panel{
    margin-top:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px;
    overflow:hidden; box-shadow:var(--shadow);
  }
  .batch-head{
    display:flex; align-items:center; justify-content:space-between; padding:10px 16px;
    background:var(--surface-2); border-bottom:1px solid var(--border-soft);
  }
  .batch-total-label{ font-size:11px; color:var(--text-faint); letter-spacing:1px; text-transform:uppercase; margin-right:8px; }
  .batch-total-value{ font-size:17px; font-weight:600; }
  .batch-rows{ max-height:220px; overflow-y:auto; }
  .batch-row{
    display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:13.5px;
    border-bottom:1px solid var(--border-soft);
  }
  .batch-row:last-child{ border-bottom:none; }
  .batch-row .b-account{ flex:0 0 160px; font-weight:500; }
  .batch-row .b-desc{ flex:1; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .batch-row .b-amount{ flex:0 0 90px; text-align:right; }
  .batch-row .b-remove{ flex:0 0 auto; background:none; border:none; color:var(--text-faint); cursor:pointer; padding:4px; border-radius:6px; display:flex; }
  .batch-row .b-remove:hover{ color:var(--negative); background:var(--negative-soft); }
  .batch-print-toggle{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); cursor:pointer; user-select:none; white-space:nowrap; }
  .batch-print-toggle input{ accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }

  /* ---------- nav ---------- */
  .viewnav{ display:flex; gap:6px; flex:0 0 auto; }
  .nav-item{
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--border); color:var(--text-faint);
    font-family:inherit; font-size:14px; font-weight:500; width:34px; height:34px;
    border-radius:9px; cursor:pointer; transition:all .15s ease; flex:0 0 auto;
  }
  .nav-item:hover{ border-color:color-mix(in srgb, currentColor 45%, var(--border)); background:var(--surface-2); filter:saturate(1.4); }
  .nav-item.active{ border-color:color-mix(in srgb, currentColor 50%, transparent); background:color-mix(in srgb, currentColor 16%, transparent);
    filter:saturate(1.15);
    box-shadow:0 0 0 1px color-mix(in srgb, currentColor 45%, transparent), 0 0 14px color-mix(in srgb, currentColor 55%, transparent); }
  .nav-item[data-view="transactions"]{ color:#3B82F6; }
  .nav-item[data-view="accounts"]{ color:#10B981; }
  #notifyToggle{ color:var(--text-muted); transition:color .2s ease, border-color .2s ease; }
  #notifyToggle:hover{ border-color:var(--accent-border); color:var(--accent); }
  #notifyToggle.has-alerts{ color:#F43F5E; border-color:rgba(244,63,94,.4); animation:bellRing 2.6s ease-in-out infinite; }
  #notifyToggle.has-alerts:hover{ color:#F43F5E; border-color:rgba(244,63,94,.6); filter:saturate(1.4); animation-play-state:paused; }
  @keyframes bellRing{
    0%, 88%, 100%{ transform:rotate(0); }
    90%{ transform:rotate(-11deg); }
    92%{ transform:rotate(9deg); }
    94%{ transform:rotate(-6deg); }
    96%{ transform:rotate(4deg); }
    98%{ transform:rotate(0); }
  }

  /* ---------- toolbar ---------- */
  .toolbar{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px;
    position:sticky; top:calc(var(--topbar-h, 64px) + var(--entry-h, 110px)); z-index:15;
    background:var(--bg); padding-top:8px; margin-top:-8px; padding-bottom:8px;
    border-bottom:1px solid transparent; transition:border-color .15s ease; }
  .toolbar.is-stuck{ border-bottom-color:var(--border-soft); }
  .toolbar-navrow{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding-bottom:12px; border-bottom:1px solid var(--border-soft); }
  .toolbar-filterrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .toolbar-contextrow{ display:flex; justify-content:flex-end; }
  .filter-pill{
    display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px;
  }
  .filter-pill button{
    border:none; background:none; color:var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:500;
    padding:6px 12px; border-radius:7px; cursor:pointer; transition:all .12s ease;
  }
  .filter-pill button.active{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
  .filter-pill.icon-filter-pill button{ display:flex; align-items:center; gap:5px; padding:7px 10px; }
  .pill-count{ font-size:10.5px; font-weight:600; line-height:1; padding:2px 5px; border-radius:20px;
    background:var(--surface-3); color:var(--text-muted); }
  .filter-pill.icon-filter-pill button.active .pill-count{ background:var(--accent-soft); color:var(--accent); }
  /* Single-button drafts toggle: same pill look as before, but it IS the
     button now (not a wrapper around two buttons) — click it to jump into
     Drafts, click again to go back to All, like a toggle/checkbox. */
  button.drafts-toggle-btn.filter-pill{
    border:none; background:var(--surface-2); color:var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:500;
    align-items:center; gap:6px; padding:7px 12px; border-radius:9px; cursor:pointer; transition:all .12s ease;
  }
  button.drafts-toggle-btn.filter-pill.active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-border); }
  button.drafts-toggle-btn.filter-pill .pill-count{ background:var(--surface-3); color:var(--text-muted); }
  button.drafts-toggle-btn.filter-pill.active .pill-count{ background:var(--surface); color:var(--accent); }
  .date-filter-wrap{ position:relative; }
  .date-filter-btn{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:9px; color:var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:500;
    padding:0 11px; height:34px; cursor:pointer; transition:border-color .12s ease; }
  .date-filter-btn:hover{ border-color:var(--accent-border); }
  .date-filter-btn.active{ color:var(--text); border-color:var(--accent-border); background:var(--accent-soft); }
  .date-filter-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .date-filter-menu{ position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow); padding:4px; min-width:190px; max-width:220px; z-index:20; }
  .date-filter-menu button{ display:block; width:100%; text-align:left; border:none; background:none; color:var(--text-muted);
    font-family:inherit; font-size:12.5px; padding:8px 10px; border-radius:7px; cursor:pointer; }
  .date-filter-menu button:hover{ background:var(--surface-2); color:var(--text); }
  .date-filter-menu button.active{ color:var(--accent); font-weight:500; }
  .date-filter-menu-divider{ height:1px; background:var(--border-soft); margin:4px 6px; }
  .sd-menu-section-label{ font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
    color:var(--text-faint); padding:6px 10px 2px; }
  .sd-menu-section-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%;
    text-align:left; border:none; background:none; cursor:pointer; font-family:inherit;
    padding:6px 8px; border-radius:7px; }
  .sd-menu-section-toggle:hover{ background:var(--surface-2); }
  .sd-menu-section-toggle .sd-label{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
    color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sd-menu-section-toggle .sd-label-ico{ display:flex; color:var(--text-faint); flex:0 0 auto; }
  .sd-menu-section-toggle .sd-label-ico svg{ width:12px; height:12px; }
  .sd-menu-section-toggle .sd-chevron{ display:flex; color:var(--text-faint); transition:transform .15s ease; flex:0 0 auto; }
  .sd-menu-section-toggle .sd-chevron svg{ width:11px; height:11px; }
  .sd-menu-section-toggle[aria-expanded="true"] .sd-chevron{ transform:rotate(90deg); }
  .sd-menu-section-toggle[aria-expanded="true"]{ background:var(--surface-2); }
  .sd-menu-section-toggle[aria-expanded="true"] .sd-label{ color:var(--text); }
  .sd-menu-section-body{ overflow:hidden; padding-top:2px; }
  .sd-menu-section-body[hidden]{ display:none; }
  .sd-opt{ display:flex !important; align-items:center; gap:7px; padding:6px 8px !important; font-size:12px !important; }
  .sd-opt-ico{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:15px; color:var(--text-faint); }
  .sd-opt-ico svg{ width:13px; height:13px; }
  .sd-opt-ico.sd-opt-glyph{ font-size:9px; font-weight:700; letter-spacing:.2px; color:var(--text-faint); width:auto; min-width:15px; }
  .sd-opt-glyph-ico{ font-size:9px; font-weight:700; letter-spacing:.2px; }
  .sd-opt.active .sd-opt-ico{ color:var(--accent); }
  .sd-opt.active .sd-opt-ico.sd-opt-glyph{ color:var(--accent); }
  .sd-opt-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sd-opt-check{ display:flex; flex:0 0 auto; color:var(--accent); }
  .sd-opt-check svg{ width:12px; height:12px; }
  .sd-opt-toggle .sd-opt-label{ flex:0 0 auto; }
  .sd-opt-dir{ display:flex; align-items:center; gap:4px; margin-left:auto; font-size:10.5px; color:var(--text-faint); flex:0 0 auto; }
  .sd-opt-toggle.active .sd-opt-dir{ color:var(--accent); }
  .sd-opt-dir-ico{ display:flex; align-items:center; }
  .sd-opt-dir-ico svg{ width:11px; height:11px; }
  .sd-opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
  .date-filter-custom{ padding:6px 4px 4px; }
  .date-filter-custom-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
  .date-filter-custom-row label{ flex:0 0 30px; font-size:10.5px; color:var(--text-faint); }
  .date-filter-custom-row input[type="date"]{
    flex:1; min-width:0; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
    font-family:inherit; font-size:11px; padding:5px 6px; border-radius:6px; outline:none; color-scheme:light dark;
  }
  .date-filter-custom-row input[type="date"]:focus{ border-color:var(--accent-border); }
  .date-filter-custom-actions{ display:flex; gap:6px; }
  .date-filter-custom-actions button{
    flex:1; text-align:center; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
    font-family:inherit; font-size:11.5px; font-weight:500; padding:6px 8px; border-radius:6px; cursor:pointer;
  }
  .date-filter-custom-actions button:hover{ background:var(--surface-3); color:var(--text); }
  .date-filter-custom-actions button.primary{ background:var(--accent); border-color:var(--accent); color:#0E1712; }
  .date-filter-custom-actions button.primary:hover{ filter:brightness(1.08); }
  .select-toggle-btn{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:9px; color:var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:500;
    padding:0 12px; height:34px; cursor:pointer; transition:all .15s ease; flex:0 0 auto; }
  .select-toggle-btn:hover{ border-color:color-mix(in srgb, #06B6D4 45%, var(--border)); color:#06B6D4;
    box-shadow:0 0 10px color-mix(in srgb, #06B6D4 28%, transparent); transform:translateY(-1px); }
  .select-toggle-btn.active{ color:#06B6D4; border-color:color-mix(in srgb, #06B6D4 50%, transparent);
    background:color-mix(in srgb, #06B6D4 16%, transparent);
    box-shadow:0 0 12px color-mix(in srgb, #06B6D4 35%, transparent); }
  .sort-filter-wrap{ position:relative; }
  .sort-filter-btn{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:9px; color:var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:500;
    padding:0 11px; height:34px; cursor:pointer; transition:border-color .12s ease; }
  .sort-filter-btn:hover{ border-color:var(--accent-border); }
  .sort-filter-btn.active{ color:var(--text); border-color:var(--accent-border); background:var(--accent-soft); }
  .sort-filter-menu{ position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow); padding:4px; min-width:190px; max-width:220px; z-index:20; }
  .sort-filter-menu button{ display:block; width:100%; text-align:left; border:none; background:none; color:var(--text-muted);
    font-family:inherit; font-size:12.5px; padding:8px 10px; border-radius:7px; cursor:pointer; }
  .sort-filter-menu button:hover{ background:var(--surface-2); color:var(--text); }
  .sort-filter-menu button.active{ color:var(--accent); font-weight:500; }
  .tx-summary-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px; margin-bottom:10px;
    background:var(--surface-2); border:1px solid var(--border-soft); border-radius:9px; }
  .tx-summary-bar .tsb-icon{ display:flex; align-items:center; color:var(--text-faint); flex:0 0 auto; }
  .tx-summary-bar .tsb-label{ font-size:11px; color:var(--text-faint); letter-spacing:.5px; text-transform:uppercase; }
  .tx-summary-bar .tsb-value{ font-size:14px; font-weight:600; margin-left:auto; }
  .tx-summary-bar .tsb-value.pos{ color:var(--accent); }
  .tx-summary-bar .tsb-value.neg{ color:var(--negative); }
  .toolbar-icongroup{
    display:flex; align-items:center; gap:2px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:10px; padding:3px; flex:0 0 auto;
  }
  .toolbar-icongroup .sort-filter-btn,
  .toolbar-icongroup .date-filter-btn{
    background:transparent; border:1px solid transparent; height:32px; min-width:32px; padding:0 8px;
    display:flex; align-items:center; justify-content:center; border-radius:7px;
    color:var(--btn-color, var(--text-muted)); transition:all .15s ease;
  }
  .toolbar-icongroup .sort-filter-btn svg,
  .toolbar-icongroup .date-filter-btn svg{ width:16px; height:16px; }
  .toolbar-icongroup #sortDateBtn{ --btn-color:#F43F5E; }
  .toolbar-icongroup #sortAccBtn{ --btn-color:#3B82F6; }
  .toolbar-icongroup button:hover{
    background:color-mix(in srgb, var(--btn-color, var(--accent)) 16%, transparent);
    color:var(--btn-color, var(--accent));
    transform:translateY(-1px);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--btn-color, var(--accent)) 35%, transparent);
  }
  .toolbar-icongroup button.active{
    background:color-mix(in srgb, var(--btn-color, var(--accent)) 18%, transparent);
    color:var(--btn-color, var(--accent));
    box-shadow:0 0 0 1px color-mix(in srgb, var(--btn-color, var(--accent)) 45%, transparent),
      0 0 12px color-mix(in srgb, var(--btn-color, var(--accent)) 40%, transparent);
  }
  .toolbar-icongroup .date-filter-wrap,
  .toolbar-icongroup .sort-filter-wrap{ display:flex; }
  .toolbar-divider{ width:1px; align-self:stretch; margin:2px 4px; background:var(--border-soft); flex:0 0 auto; }
  .spacer{ flex:1; }
  .search-box{
    position:relative;
    display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border);
    border-radius:9px; padding:0 10px; flex:0 1 220px; max-width:220px; min-width:150px;
    transition:border-color .18s ease, box-shadow .18s ease;
    box-shadow:0 0 0 0 transparent, 0 1px 2px rgba(0,0,0,.03);
  }
  .search-box .eb-suggest{ display:none; max-height:216px; padding:4px; }
  .search-box:focus-within .eb-suggest{ display:block; }
  .search-box .eb-suggest .eb-suggest-item{ padding:6px 8px; font-size:12.5px; cursor:pointer; }
  .search-box:hover{ box-shadow:0 0 14px color-mix(in srgb, var(--sb-glow, var(--accent)) 14%, transparent); }
  .search-box:focus-within{
    border-color:color-mix(in srgb, var(--sb-glow, var(--accent)) 55%, var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--sb-glow, var(--accent)) 16%, transparent), 0 0 22px color-mix(in srgb, var(--sb-glow, var(--accent)) 45%, transparent);
  }
  .search-box svg{ flex:0 0 auto; color:var(--text-faint); transition:color .15s ease; }
  .search-box:focus-within svg{ color:var(--sb-glow, var(--accent)); }
  .search-box input{
    border:none; outline:none; background:transparent; color:var(--text); font-family:inherit;
    font-size:13px; padding:8px 0; width:100%;
  }
  .search-box input::placeholder{ color:var(--text-faint); }
  .search-box .clear-search{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:2px; display:flex; flex:0 0 auto; }
  .search-box .clear-search:hover{ color:var(--text); }
  .search-box.account-filter-box{ flex:0 1 190px; }
  .search-box.tx-search-box{ --sb-glow:#F43F5E; }
  .search-box.acc-search-box{ --sb-glow:#3B82F6; }
  .pinned-acc-bar{ flex:0 1 auto; min-width:0; }
  .pinned-acc-bar:empty{ display:none; }
  .chart-bar{ margin-bottom:14px; }
  .chart-bar:empty{ display:none; }
  .pinned-acc-strip{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  }
  .pinned-acc-chip{
    display:flex; align-items:center; gap:5px; background:var(--surface); border:1px solid var(--border-soft);
    border-radius:999px; height:32px; padding:0 10px 0 4px; cursor:pointer; font-family:inherit;
    transition:border-color .12s ease, background .12s ease, transform .12s ease; flex:0 0 auto;
  }
  .pinned-acc-chip:hover{ border-color:var(--acc-border, var(--accent-border)); background:var(--surface-3); }
  .pinned-acc-chip:active{ transform:scale(.96); }
  .pinned-acc-chip.active{ border-color:var(--accent-border); background:var(--accent-soft); }
  .pinned-acc-chip .pac-name{
    display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:16px; height:16px;
    border-radius:50%;
    background:hsl(var(--acc-hue,210) 55% 50% / var(--chip-bg-a,.18));
    color:hsl(var(--acc-hue,210) 60% var(--chip-l,45%));
    font-size:9.5px; font-weight:700;
  }
  .pinned-acc-chip.active .pac-name{ background:var(--accent); color:#0E1712; }
  .pinned-acc-chip .pac-val{ font-size:10.5px; font-weight:600; white-space:nowrap; font-family:'IBM Plex Mono',monospace; }
  .select-filter{
    background:var(--surface-2); border:1px solid var(--border); border-radius:9px; color:var(--text);
    font-family:inherit; font-size:12.5px; font-weight:500; padding:0 10px; height:34px; cursor:pointer; outline:none;
    transition:border-color .12s ease;
  }
  .select-filter:hover{ border-color:var(--accent-border); }
  .bulk-bar{
    display:flex; align-items:center; gap:6px; background:var(--accent-soft); border:1px solid var(--accent-border);
    padding:0 8px; height:34px; border-radius:9px; font-size:12.5px; color:var(--accent-text); flex:0 0 auto;
  }
  .bulk-bar .bulk-count{ font-weight:600; font-family:'IBM Plex Mono',monospace; padding:0 1px; min-width:11px; text-align:center; }
  .bulk-bar button{
    border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:inherit;
    font-size:12px; font-weight:500; padding:5px 10px; border-radius:7px; cursor:pointer;
  }
  .bulk-bar button:hover{ background:var(--surface-3); }
  .bulk-bar button.danger:hover{ border-color:var(--negative-border); color:var(--negative); }
  .bulk-bar .icon-btn{ border:none; background:transparent; padding:6px; }
  .bulk-bar .icon-btn:hover{ background:var(--surface); color:var(--text); }
  .bulk-bar .icon-btn.del:hover{ color:var(--negative); background:var(--negative-soft); }
  .bulk-export-toggle{ display:flex; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:2px; gap:2px; }
  .bulk-export-toggle button{
    border:none !important; background:none; color:var(--text-muted); font-family:inherit;
    font-size:11.5px; font-weight:500; padding:4px 8px; border-radius:5px; cursor:pointer;
  }
  .bulk-export-toggle button:hover{ background:var(--surface-3); }
  .bulk-export-toggle button.active{ background:var(--accent); color:#0E1712; }
  .bulk-export-toggle button.active:hover{ background:var(--accent); }

  /* ---------- pagination ---------- */
  .pagination-bar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--border);
    border-radius:12px; box-shadow:var(--shadow); font-size:12.5px; color:var(--text-muted); flex-wrap:wrap;
  }
  .pagination-info{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; color:var(--text-faint); }
  .pagination-controls{ display:flex; align-items:center; gap:6px; }
  .pagination-page{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; padding:0 4px; white-space:nowrap; }
  .pg-btn{
    display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface); color:var(--text-muted); cursor:pointer; transition:all .12s ease;
  }
  .pg-btn:hover:not(:disabled){ border-color:var(--accent-border); color:var(--accent); background:var(--accent-soft); }
  .pg-btn:disabled{ opacity:.35; cursor:default; }
  .pg-btn svg{ transform:rotate(180deg); }
  .pg-btn.pg-next svg{ transform:none; }
  .pagination-size{ display:flex; align-items:center; gap:6px; margin-left:8px; padding-left:10px; border-left:1px solid var(--border-soft); }
  .pagination-size label{ color:var(--text-faint); }
  .pagination-size select{
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    font-family:inherit; font-size:12.5px; padding:5px 8px; border-radius:7px; cursor:pointer; outline:none;
  }
  .pagination-size select:hover{ border-color:var(--accent-border); }

  /* ---------- lists ---------- */
  .list{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
  .row{
    position:relative; display:flex; align-items:center; gap:14px;
    padding:13px 18px 13px 21px; border-bottom:1px solid var(--border-soft); font-size:13.5px;
    transition:background .12s ease, padding-left .12s ease;
  }
  /* Left accent bar — quiet by default, colored + fully visible on hover so
     a glance down the list still reads incoming (accent) vs outgoing
     (negative) without needing to read every amount. */
  .row::before{
    content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
    background:var(--text-faint); opacity:.3; transition:opacity .12s ease, background .12s ease;
  }
  .row.row-pos::before{ background:var(--accent); }
  .row.row-neg::before{ background:var(--negative); }
  .row:last-child{ border-bottom:none; }
  .row:hover{ background:var(--surface-2); padding-left:24px; }
  .row:hover::before{ opacity:1; }
  .row.select-mode{ cursor:pointer; }
  .row.selected{ background:var(--accent-soft); }
  .row.selected:hover{ background:var(--accent-soft); }
  .row.selected::before{ background:var(--accent); opacity:1; }
  .row:focus-within{ background:var(--accent-soft); border-radius:8px; }
  .row input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px; cursor:pointer; flex:0 0 auto; }
  .chip{
    font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:6px;
    background:hsl(var(--chip-hue,210) 55% 50% / var(--chip-bg-a,.16));
    color:hsl(var(--chip-hue,210) 60% var(--chip-l,45%));
    flex:0 0 auto; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    cursor:pointer; transition:filter .12s ease;
  }
  .chip:hover{ filter:brightness(1.15); }
  :root[data-theme="dark"] .chip{ --chip-l:72%; --chip-bg-a:.22; }
  :root[data-theme="light"] .chip{ --chip-l:34%; --chip-bg-a:.12; }
  :root[data-theme="dark"] .eb-suggest{ --chip-l:72%; }
  :root[data-theme="light"] .eb-suggest{ --chip-l:34%; }
  .row .r-desc{ flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; }
  .row .r-desc:hover{ color:var(--text); text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:3px; }
  .row .r-desc.empty{ color:var(--text-faint); font-style:italic; }
  .row .r-date{ flex:0 0 60px; color:var(--text-faint); font-size:11.5px; text-align:right; letter-spacing:.2px; }
  /* Amount reads as a small pill now instead of bare colored text — the
     soft tinted background plus a tiny direction icon make incoming vs
     outgoing legible at a glance, not just by color (helps at a skim and
     for colorblind users). */
  .row .r-amount{
    flex:0 0 108px; display:inline-flex; align-items:center; justify-content:flex-end; gap:4px;
    text-align:right; font-weight:600; padding:4px 9px; border-radius:7px; line-height:1.3;
  }
  .row .r-amount .r-amount-ico{ display:flex; flex:0 0 auto; opacity:.85; }
  .row .r-amount .r-amount-ico svg{ width:11px; height:11px; }
  .row .r-amount.pos{ color:var(--accent); background:var(--accent-soft); }
  .row .r-amount.neg{ color:var(--negative); background:var(--negative-soft); }
  .row .r-amount.incomplete{ color:var(--text-faint); font-weight:400; background:none; padding:0; }
  /* Balance column — public read-only snapshot table only (see renderPublicSnapshot) */
  .row .r-balance{ flex:0 0 100px; text-align:right; font-weight:500; color:var(--text-muted); }
  .row .r-actions{ display:flex; gap:2px; flex:0 0 auto; opacity:0; transition:opacity .12s ease; }
  .row:hover .r-actions{ opacity:1; }
  .icon-btn{
    background:none; border:none; color:var(--text-faint); cursor:pointer; padding:6px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{ background:var(--surface-3); color:var(--text); }
  .icon-btn.confirming{ width:auto; padding:6px 10px; font-size:11px; font-weight:600; color:var(--negative);
    background:var(--negative-soft); border:1px solid var(--negative-border); }
  .icon-btn.del:hover{ color:var(--negative); background:var(--negative-soft); }
  .row-edit input{
    background:var(--surface-2); border:1px solid var(--border); border-radius:6px; color:var(--text);
    font-family:inherit; font-size:13px; padding:5px 8px;
  }
  .quick-complete{ display:flex; align-items:center; gap:5px; }
  .quick-complete .qc-del{ padding:4px; border-radius:6px; flex:0 0 auto; opacity:.55; transition:opacity .12s ease, background .12s ease, color .12s ease; }
  .quick-complete .qc-del:hover{ opacity:1; }
  .quick-complete .qc-del svg{ width:12px; height:12px; }
  .quick-complete input{
    width:74px; background:var(--surface-2); border:1px solid var(--accent-border); border-radius:6px;
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:4px 6px; color:var(--text); text-align:right;
  }
  .qc-preview{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); white-space:nowrap;
    min-width:0; opacity:0; transition:opacity .12s ease;
  }
  .qc-preview.show{ opacity:1; }
  .qc-preview.pos{ color:var(--accent); }
  .qc-preview.neg{ color:var(--negative); }
  .empty-state{ padding:48px 20px; text-align:center; color:var(--text-faint); font-size:13.5px; }
  .empty-state .es-title{ color:var(--text-muted); font-size:14.5px; font-weight:500; margin-bottom:4px; }

  /* ---------- accounts : Modern Financial Rows ---------- */
  .acc-list{
    display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    overflow:hidden; box-shadow:var(--shadow);
  }
  .acc-row{
    cursor:pointer; display:flex; align-items:center; gap:14px;
    padding:10px 18px; border-bottom:1px solid var(--border-soft);
    background:var(--surface);
    border-left:2px solid transparent;
    transition:background .12s ease, border-left-color .12s ease;
  }
  .acc-list .acc-row:last-child{ border-bottom:none; }
  .acc-row:hover{
    background:var(--surface-2);
    border-left-color:var(--acc-border, var(--border));
  }
  .acc-row:active{ background:var(--surface-3); }
  .acc-row input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px; margin:0; cursor:pointer; flex:0 0 auto; }
  .acc-badge{
    flex:0 0 auto; width:28px; height:28px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:12px;
    background:hsl(var(--acc-hue,210) 55% 50% / var(--chip-bg-a,.16));
    color:hsl(var(--acc-hue,210) 60% var(--chip-l,45%));
  }
  .acc-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .acc-name{
    font-weight:600; font-size:13.5px; color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:'IBM Plex Sans',sans-serif; letter-spacing:.1px;
  }
  .acc-count{
    flex:0 0 auto; color:var(--text-faint); font-size:11px; letter-spacing:.15px;
    font-family:'IBM Plex Mono',monospace;
  }
  .acc-balance{
    flex:0 0 108px; text-align:right; font-weight:600; font-size:13.5px;
    font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;
    padding-left:12px; border-left:1px solid var(--border-soft);
  }
  .acc-actions{ flex:0 0 auto; display:flex; align-items:center; gap:2px; }
  .acc-pin{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:7px; border:1px solid transparent;
    background:transparent; color:var(--text-faint); cursor:pointer;
    opacity:0; transition:opacity .12s ease, background .12s ease, color .12s ease;
  }
  .acc-row:hover .acc-pin, .acc-pin.active{ opacity:1; }
  .acc-pin:hover{ background:var(--surface-3); color:var(--text-muted); }
  .acc-pin.active{ color:#F59E0B; }
  .acc-pin.active:hover{ background:rgba(245,158,11,.12); }
  .acc-chevron{
    flex:0 0 auto; color:var(--text-faint); opacity:0;
    transition:transform .15s ease, opacity .12s ease;
  }
  .acc-row:hover .acc-chevron{ opacity:1; transform:translateX(2px); color:var(--text-muted); }
  .acc-spark{ flex:0 0 76px; display:flex; align-items:center; justify-content:center; gap:4px; }
  .acc-spark-svg{ width:60px; height:26px; display:block; overflow:visible; }
  .acc-spark-svg.empty{ opacity:.25; }
  .acc-spark-expand{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:6px; border:1px solid transparent;
    background:transparent; color:var(--text-faint); cursor:pointer; opacity:0; transition:all .12s ease;
  }
  .acc-row:hover .acc-spark-expand{ opacity:1; }
  .acc-spark-expand:hover{ background:var(--surface-3); color:var(--text); border-color:var(--border-soft); }

  /* ---------- account chart modal ---------- */
  .chart-modal-panel{
    background:var(--surface); border:1px solid var(--border); border-radius:14px; width:100%; max-width:720px;
    box-shadow:var(--shadow); max-height:80vh; display:flex; flex-direction:column; overflow:hidden;
  }
  .chart-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-soft); }
  .chart-modal-title{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; }
  .chart-modal-sub{ font-size:12px; color:var(--text-faint); margin-top:2px; }
  .chart-modal-body{ padding:16px 18px 14px; overflow-y:auto; position:relative; }

  /* ---------- detail panel ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(10,12,10,.5); display:flex; align-items:flex-start;
    justify-content:center; padding:60px 20px; z-index:50; backdrop-filter:blur(2px);
  }
  .detail-panel{
    background:var(--surface); border:1px solid var(--border); border-radius:14px; width:100%; max-width:640px;
    box-shadow:var(--shadow); max-height:80vh; display:flex; flex-direction:column;
  }
  /* Account detail popup only (the print-range dialog and public snapshot both
     set their own inline max-width and are unaffected): the edit row's fixed
     fields (account/date/amount inputs) don't shrink below their intrinsic
     minimum widths, so 640px caused it to overflow horizontally when a
     transaction was put into edit mode. Widen just this popup enough for the
     full row to fit with no scrollbar. */
  #accountOverlay .detail-panel{ max-width:880px; }
  .detail-head{ display:flex; flex-direction:column; padding:16px 20px; border-bottom:1px solid var(--border-soft); }
  .detail-head-min{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .detail-left{ min-width:0; display:flex; flex-direction:column; gap:7px; }
  .detail-name-btn{ display:flex; align-items:center; gap:6px; background:none; border:none; padding:0; cursor:pointer;
    color:var(--text); text-align:left; min-width:0; }
  .detail-title{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .detail-name-btn .detail-edit-icon{ flex:0 0 auto; color:var(--text-faint); display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .12s ease; }
  .detail-name-btn:hover .detail-edit-icon{ opacity:1; }
  .detail-name-btn:hover .detail-title{ color:var(--accent); }
  .detail-badges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .balance-badge{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:12.5px;
    font-weight:600; padding:3px 9px; border-radius:20px; border:1px solid var(--border); background:var(--surface-2);
    color:var(--text); white-space:nowrap; }
  .balance-badge.pos{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-border); }
  .balance-badge.neg{ background:var(--negative-soft); color:var(--negative); border-color:var(--negative-border); }
  .detail-entry-count{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
  .detail-stat-grid .reminder-stat-cell{ min-width:96px; padding:8px 14px; }
  .detail-sub{ font-size:12px; color:var(--text-faint); margin-top:2px; }
  .detail-body{ overflow-y:auto; }
  .detail-right{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
  .close-btn{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:6px; border-radius:8px; }
  .close-btn:hover{ background:var(--surface-2); color:var(--text); }
  .pill-public{ flex:0 0 auto; font-size:11px; padding:4px 9px; border-radius:20px; background:var(--accent-soft);
    color:var(--accent); border:1px solid var(--accent-border); white-space:nowrap; font-weight:500; }
  .detail-reminder-status{ font-size:11.5px; color:var(--text-faint); margin-top:8px; font-style:italic; }
  .detail-search-box{ flex:1 1 auto; max-width:none; min-width:0; margin-top:12px; --sb-glow:#22C55E; }
  .detail-load-more{ padding:12px 20px; text-align:center; font-size:11.5px; color:var(--text-faint); }
  .icon-btn.wa-btn{ color:var(--text-faint); text-decoration:none; }
  .icon-btn.wa-btn:hover{ color:#22C55E; background:var(--accent-soft); }

  /* ---------- ••• more menu ---------- */
  .more-menu-wrap{ position:relative; display:inline-flex; }
  .more-menu{
    position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow); padding:4px; min-width:214px; z-index:60;
  }
  .more-menu[hidden]{ display:none; }
  .more-menu-item{
    display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none;
    color:var(--text-muted); font-family:inherit; font-size:12.5px; padding:9px 10px; border-radius:7px; cursor:pointer;
    text-decoration:none;
  }
  .more-menu-item:hover{ background:var(--surface-2); color:var(--text); }
  .more-menu-item.danger{ color:var(--negative); }
  .more-menu-item.danger:hover{ background:var(--negative-soft); color:var(--negative); }
  .more-menu-item svg{ flex:0 0 auto; }
  .more-menu-item .mi-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .more-menu-item .mi-status{ flex:0 0 auto; font-size:10.5px; color:var(--text-faint); font-weight:500; }
  .more-menu-divider{ height:1px; background:var(--border-soft); margin:4px 2px; cursor:default; }
  .more-menu-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 10px; border-radius:7px; cursor:pointer; }
  .more-menu-toggle-row:hover{ background:var(--surface-2); }
  .more-menu-toggle-row .mi-left{ display:flex; align-items:center; gap:9px; color:var(--text-muted); font-size:12.5px; }
  .skip-toggle-track{ position:relative; width:30px; height:17px; background:var(--surface-3); border-radius:999px; transition:background .15s ease; flex:0 0 auto; }
  .skip-toggle-thumb{ position:absolute; top:2px; left:2px; width:13px; height:13px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s ease; }
  .more-menu-toggle-row input{ display:none; }
  .more-menu-toggle-row input:checked + .skip-toggle-track{ background:var(--accent); }
  .more-menu-toggle-row input:checked + .skip-toggle-track .skip-toggle-thumb{ transform:translateX(13px); }
  .more-menu-sub{ padding-left:6px; border-left:2px solid var(--border-soft); margin:2px 6px 2px 16px; }
  .more-menu-sub .more-menu-item{ font-size:12px; padding:7px 10px; }
  /* Per-account reminder cycle row inside the account detail's ••• menu —
     same cycle-opt-btn pair used for the profile-wide default, just scoped
     to a single client (see getAccountReminderCycleDays()). */
  .detail-cycle-row{ padding:8px 10px 9px; }
  .detail-cycle-row .mi-left{ display:flex; align-items:center; gap:9px; color:var(--text-muted); font-size:12.5px; margin-bottom:7px; }
  .detail-cycle-row .cycle-opt-row{ padding:0; }

  /* ---------- edit details modal ---------- */
  .edit-modal-overlay{ position:fixed; inset:0; background:rgba(10,12,10,.5); display:flex; align-items:center;
    justify-content:center; padding:20px; z-index:70; backdrop-filter:blur(2px); }
  .edit-modal{ background:var(--surface); border:1px solid var(--border); border-radius:14px; width:100%; max-width:380px;
    box-shadow:var(--shadow); padding:18px 20px 20px; }
  .edit-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .edit-modal-title{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; }
  .edit-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
  .edit-field label{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--text-faint);
    font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
  .edit-field label svg{ flex:0 0 auto; opacity:.8; }
  .edit-field input{ font-family:inherit; font-size:13.5px; color:var(--text); background:var(--surface-2);
    border:1px solid var(--border-soft); border-radius:8px; padding:9px 10px; width:100%; }
  .edit-field input::placeholder{ color:var(--text-faint); }
  .edit-field input:focus{ outline:none; border-color:var(--accent-border); background:var(--surface); }
  .edit-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
  /* Minimal addition: Aggregate pin popover — reuses .edit-modal/-actions
     above for its overlay, header and buttons; only the checkbox list and
     live total need their own (small, scoped) rules. */
  .aggregate-pin-modal{ max-width:340px; }
  .aggregate-pin-list{
    max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; margin-bottom:12px;
  }
  .aggregate-pin-row{
    display:flex; align-items:center; gap:8px; padding:6px 4px; border-radius:6px; cursor:pointer; font-size:12.5px;
  }
  .aggregate-pin-row:hover{ background:var(--surface-2); }
  .aggregate-pin-row input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px; cursor:pointer; flex:0 0 auto; }
  .aggregate-pin-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .aggregate-pin-empty{ padding:10px 4px; font-size:12.5px; color:var(--text-faint); margin-bottom:12px; }
  .aggregate-pin-val{ font-size:11.5px; font-weight:600; white-space:nowrap; }
  .aggregate-pin-val.pos{ color:var(--accent); }
  .aggregate-pin-val.neg{ color:var(--negative); }
  .aggregate-pin-total-line{
    display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-faint);
    padding-top:10px; margin-bottom:12px; border-top:1px solid var(--border-soft);
  }
  .aggregate-pin-total-line .aggregate-pin-val{ font-size:13px; }
  .handled-toggle{
    display:flex; align-items:center; gap:6px; cursor:pointer; padding:10px 4px; margin-top:10px;
    color:var(--text-muted); font-size:12.5px; font-weight:600; user-select:none;
  }
  .handled-toggle:hover{ color:var(--text); }
  .handled-toggle-static{ cursor:default; }
  .handled-toggle-static:hover{ color:var(--text-muted); }
  .handled-toggle-chevron{ display:flex; transition:transform .15s ease; }
  .handled-toggle-chevron.open{ transform:rotate(90deg); }
  .link-btn{ background:none; border:none; color:var(--text-muted); font-size:11.5px; text-decoration:underline;
    cursor:pointer; padding:0; font-family:inherit; }
  .link-btn:hover{ color:var(--text); }
  .link-btn.danger:hover{ color:var(--negative); }
  .public-wrap{ max-width:640px; margin:28px auto 60px; padding:0 4px; }
  body.public-mode .entry-wrap, body.public-mode .entry-quote, body.public-mode .viewnav, body.public-mode .notify-wrap, body.public-mode #viewNavSlot, body.public-mode .topbar-divider, body.public-mode .shortcut-btns, body.public-mode #brandTodaySum{ display:none !important; }
  body.public-mode .brand-mark{ cursor:default; pointer-events:none; }

  /* ---------- offline / read-only mode ----------
     When the database is unreachable the app becomes view-only: data already
     loaded stays fully readable, but the surfaces that add or edit entries
     are dimmed and non-interactive. The JS guards (blockIfOffline) are the
     real enforcement; this is the visual cue that matches them. */
  body.offline-mode .entry-bar,
  body.offline-mode .entry-quote,
  body.offline-mode .r-actions,
  body.offline-mode .quick-complete,
  body.offline-mode #bulkDelete,
  body.offline-mode #selectToggleTx{
    opacity:.45; pointer-events:none; filter:grayscale(0.4);
  }

  /* ---------- profile switcher ---------- */
  .profile-wrap{ position:relative; }
  .profile-panel{
    position:absolute; top:calc(100% + 8px); left:0; width:230px; max-height:520px; overflow-y:auto;
    background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
    z-index:30; padding:6px;
  }
  .profile-panel-head{ padding:10px 10px 8px; border-bottom:1px solid var(--border-soft); margin-bottom:4px; }
  .profile-panel-title{ font-size:13px; font-weight:600; }
  .profile-panel-sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
  .profile-row{ display:flex; align-items:center; gap:6px; padding:8px 8px; border-radius:9px; cursor:pointer; }
  .profile-row:hover{ background:var(--surface-2); }
  .profile-row.active{ background:var(--accent-soft); }
  .profile-row-name{ flex:1; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profile-row.active .profile-row-name{ color:var(--accent); }
  .profile-row-check{ flex:0 0 auto; color:var(--accent); display:flex; }
  .profile-row-actions{ flex:0 0 auto; display:flex; gap:1px; }
  .profile-row-actions button{
    background:none; border:none; color:var(--text-faint); cursor:pointer; padding:4px; border-radius:6px; display:flex;
  }
  .profile-row-actions button:hover{ color:var(--text); background:var(--surface-3); }
  .profile-row-actions button.danger:hover{ color:var(--negative); background:var(--negative-soft); }
  .profile-panel-foot{ padding:8px 4px 4px; border-top:1px solid var(--border-soft); margin-top:4px; display:flex; gap:5px; }
  .profile-panel-foot input{
    flex:1; min-width:0; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
    font-family:inherit; font-size:12px; padding:7px 8px; border-radius:8px; outline:none;
  }
  .profile-panel-foot input:focus{ border-color:var(--accent-border); }
  .profile-panel-foot button:not(.mar-io-btn){
    flex:0 0 auto; border:1px solid var(--accent); background:var(--accent); color:#0E1712; font-family:inherit;
    font-size:12px; font-weight:500; padding:0 10px; border-radius:8px; cursor:pointer;
  }
  .menu-divider{ height:1px; background:var(--border-soft); margin:6px 4px; }
  .menu-action-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 8px;
    border-radius:9px; cursor:pointer; font-size:13px; color:var(--text);
  }
  .menu-action-row:hover{ background:var(--surface-2); }
  .menu-action-row .mar-left{ display:flex; align-items:center; gap:8px; overflow:hidden; }
  .menu-action-row .mar-left svg{ opacity:.75; flex:0 0 auto; }
  .menu-action-row .mar-left span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .menu-action-row .mar-toggle{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:26px; height:26px;
    border-radius:7px; background:var(--surface-2); color:var(--text-muted);
  }
  .menu-action-row:hover .mar-toggle{ color:var(--text); }
  .mar-io-btns{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
  .menu-icon-row{ padding:6px 4px; }
  .mar-io-btn{
    width:28px; height:28px; border-radius:7px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s ease;
  }
  .mar-io-btn:hover{ border-color:var(--accent-border); color:var(--accent); background:var(--surface-2); }
  .profile-panel-section-title{
    font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-faint);
    padding:8px 8px 4px;
  }
  .shortcuts-title-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding-right:4px; cursor:pointer; }
  .shortcuts-title-row .mar-io-btn{ width:22px; height:22px; border:none; background:none; }
  .shortcuts-title-row .mar-io-btn:hover{ background:var(--surface-3); color:var(--accent); }
  .shortcut-add-row{ display:flex; gap:5px; padding:4px 4px 2px; }
  .shortcut-add-row[hidden]{ display:none; }
  .shortcut-row{ display:flex; align-items:center; gap:6px; padding:6px 4px; border-radius:8px; }
  .shortcut-row:hover{ background:var(--surface-2); }
  .shortcut-row-name{ flex:1; min-width:0; font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .shortcut-add-row input{
    flex:1; min-width:0; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
    font-family:inherit; font-size:12px; padding:7px 8px; border-radius:8px; outline:none;
  }
  .shortcut-add-row input:focus{ border-color:var(--accent-border); }
  .profile-panel .settings-row{ padding:9px 4px; gap:8px; }
  .profile-panel .settings-row-title{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profile-panel .settings-row-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profile-panel .settings-actions .eb-btn{ font-size:11.5px; padding:5px 8px; }
  .profile-rename-input{
    flex:1; font-family:inherit; font-size:13px; font-weight:500; background:var(--surface-2);
    border:1px solid var(--accent-border); border-radius:6px; padding:3px 6px; color:var(--text); min-width:0;
  }

  /* ---------- settings ---------- */
  .settings-section-title{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; margin:2px 0 4px; }
  .settings-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
  .settings-row:last-child{ border-bottom:none; }
  .settings-row-title{ font-size:13.5px; font-weight:500; }
  .settings-row-sub{ font-size:12px; color:var(--text-faint); margin-top:2px; }
  .settings-actions{ display:flex; gap:8px; flex:0 0 auto; }

  /* ---------- security lock ---------- */
  .lock-wrap{
    position:fixed; inset:0; z-index:200; background:var(--bg);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .lock-theme-toggle{ position:fixed; top:20px; right:20px; z-index:201; }
  .lock-card{
    width:100%; max-width:320px; background:var(--surface); border:1px solid var(--border-soft);
    border-radius:18px; box-shadow:var(--shadow); padding:36px 28px 26px; text-align:center;
  }
  .lock-icon{
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
    width:240px; height:240px;
  }
  .lock-icon img{ width:100%; height:100%; object-fit:contain; }
  .lock-title{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; margin-bottom:5px; letter-spacing:.1px; }
  .lock-sub{ font-size:12.5px; color:var(--text-faint); margin-bottom:22px; line-height:1.5; }
  .lock-input{
    width:100%; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:26px; letter-spacing:10px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:12px; color:var(--text);
    padding:14px 8px 14px 18px; outline:none; transition:border-color .15s ease;
  }
  .lock-input:focus{ border-color:var(--accent-border); }
  .lock-input.invalid{ animation:shake .32s ease; border-color:var(--negative-border); }
  .lock-error{ font-size:12px; color:var(--negative); min-height:16px; margin-top:10px; }
  .lock-actions{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
  .lock-actions .eb-btn{ width:100%; justify-content:center; padding:11px 12px; border-radius:10px; font-size:13.5px; }
  .lock-q{ text-align:left; margin-bottom:14px; }
  .lock-q label{ display:block; font-size:12px; color:var(--text-muted); margin-bottom:5px; }
  .lock-q input{
    width:100%; font-family:inherit; font-size:13.5px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:8px; color:var(--text); padding:9px 10px; outline:none;
  }
  .lock-q input:focus{ border-color:var(--accent-border); }
  .lock-q select{
    width:100%; font-family:inherit; font-size:13.5px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:8px; color:var(--text); padding:9px 10px; outline:none; margin-bottom:6px;
  }
  .lock-field-row{ text-align:left; margin-bottom:14px; }
  .lock-field-row label{ display:block; font-size:12px; color:var(--text-muted); margin-bottom:5px; }
  .lock-field-row input{
    width:100%; font-family:'IBM Plex Mono',monospace; font-size:15px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:8px; color:var(--text); padding:9px 10px; outline:none; letter-spacing:2px;
  }
  .lock-field-row input:focus{ border-color:var(--accent-border); }
  .lock-note{ font-size:11px; color:var(--text-faint); margin-top:16px; line-height:1.5; }

  /* ---------- export menu ---------- */
  .export-menu-wrap{ position:relative; display:inline-flex; }
  .export-menu{
    position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow); padding:4px; min-width:168px; z-index:60;
  }
  .export-menu button{
    display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none;
    color:var(--text-muted); font-family:inherit; font-size:12.5px; padding:8px 10px; border-radius:7px; cursor:pointer;
  }
  .export-menu button:hover{ background:var(--surface-2); color:var(--text); }
  .export-menu .export-menu-divider{ height:1px; background:var(--border-soft); margin:4px 2px; cursor:default; }

  /* ---------- print range dialog ---------- */
  .print-range-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .print-range-quick button{
    border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); font-family:inherit;
    font-size:12px; font-weight:500; padding:6px 10px; border-radius:7px; cursor:pointer;
  }
  .print-range-quick button:hover{ border-color:var(--accent-border); color:var(--text); }
  .print-range-fields{ display:flex; gap:10px; margin-bottom:18px; }
  .print-range-field{ flex:1; font-size:11px; color:var(--text-faint); }
  .print-range-field input{
    display:block; width:100%; margin-top:5px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:7px; color:var(--text); font-family:inherit; font-size:12.5px; padding:7px 8px;
  }
  .print-range-actions{ display:flex; justify-content:flex-end; gap:8px; }

  /* ---------- print ---------- */
  #printArea{ display:none; }
  @media print {
    /* Hide every direct child of body except the receipt — overlays (account
       detail, dialogs) are appended to body directly, not inside #app, so
       hiding only #app would print them on top of the receipt. */
    body > :not(#printArea){ display:none !important; }
    #printArea{
      display:block !important; padding:0; color:#111; background:#fff;
      font-family:'IBM Plex Sans',sans-serif;
    }
    #printArea h2{ font-family:'Fraunces',serif; margin:0 0 4px; }
    #printArea .print-sub{ color:#555; font-size:12px; margin-bottom:16px; }
    #printArea table{ width:100%; border-collapse:collapse; font-size:12px; }
    #printArea th, #printArea td{ border:1px solid #ccc; padding:6px 8px; text-align:left; }
    #printArea td.amt{ text-align:right; font-family:'IBM Plex Mono',monospace; }

    /* 80mm thermal receipt layout — minimal, elegant, single monospace font (no serif webfont,
       which many thermal drivers substitute unpredictably), auto page height so the printer
       only feeds as much paper as the content actually needs. Content is set to 72mm and
       centered within the 80mm page (the usable print-head width on most "80mm" rolls),
       since relying on the paper's nominal width instead of the actual printable width is
       what clips the right edge on real hardware. Grays are avoided in favor of size/weight
       for hierarchy — most thermal heads render true black crisply but wash out light grays. */
    #printArea.thermal{
      width:72mm; margin:0 auto; padding:3mm 2mm; box-sizing:border-box;
      font-family:'IBM Plex Mono',monospace; font-size:10px; color:#000; line-height:1.5;
      -webkit-font-smoothing:antialiased;
    }
    #printArea.thermal .t-head{ text-align:center; margin-bottom:5px; }
    #printArea.thermal .t-title{
      font-family:inherit; font-weight:700; font-size:12.5px; letter-spacing:1px; text-transform:uppercase;
    }
    #printArea.thermal .t-subtitle{ font-size:9px; font-weight:500; margin-top:2px; }
    #printArea.thermal .t-range{ font-size:8px; letter-spacing:.3px; text-transform:uppercase; margin-top:3px; }
    #printArea.thermal .t-rule{ border-top:1px dashed #000; margin:6px 0; }
    #printArea.thermal .t-row{ margin-bottom:5px; }
    #printArea.thermal .t-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
    #printArea.thermal .t-desc{ font-weight:600; overflow-wrap:anywhere; }
    #printArea.thermal .t-amt{ white-space:nowrap; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
    #printArea.thermal .t-sub{ font-size:8px; font-weight:400; margin-top:1px; letter-spacing:.2px; }
    #printArea.thermal .t-total{
      display:flex; justify-content:space-between; align-items:baseline;
      font-weight:700; font-size:11.5px; margin-top:5px; letter-spacing:.2px;
    }
    #printArea.thermal .t-total span:last-child{ font-variant-numeric:tabular-nums; }
    #printArea.thermal .t-empty{ text-align:center; font-size:9.5px; padding:8px 0; }
    #printArea.thermal .t-foot{ text-align:center; font-size:7.5px; letter-spacing:.2px; margin-top:8px; }
  }

  /* ---------- reminders ---------- */
  .stat-label{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
  .bar-list{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px 18px; box-shadow:var(--shadow); }

  /* ---------- cash flow chart ---------- */
  .chart-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px 10px; box-shadow:var(--shadow); position:relative; }
  .chart-panel.collapsed{ padding-bottom:16px; }
  .chart-collapse-toggle{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
  .chart-collapse-chevron{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); flex:0 0 auto; transition:transform .15s ease; }
  .chart-collapse-chevron svg{ width:16px; height:16px; }
  .chart-collapse-chevron.open{ transform:rotate(90deg); }
  .chart-collapse-label{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-muted); }
  .chart-collapse-label svg{ width:16px; height:16px; color:var(--text-faint); }

  /* ---------- reminder summary (compact collapsible) ---------- */
  .tx-chart-panel, .acc-chart-panel{ padding:10px 14px; }
  .tx-chart-panel.collapsed, .acc-chart-panel.collapsed{ padding-bottom:10px; }
  .reminder-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
  .reminder-stat-cell{ background:var(--surface-2); border:1px solid var(--border-soft); border-radius:9px; padding:9px 6px; text-align:center; }
  .reminder-stat-cell.active[data-stat="overdue"]{ border-color:var(--negative); background:color-mix(in srgb, var(--negative) 12%, var(--surface-2)); }
  .reminder-stat-cell.active[data-stat="today"]{ border-color:#F59E0B; background:color-mix(in srgb, #F59E0B 12%, var(--surface-2)); }
  .reminder-stat-cell.active[data-stat="upcoming"]{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
  .reminder-stat-value{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:18px; line-height:1.15; }
  .reminder-stat-value.overdue{ color:var(--negative); }
  .reminder-stat-value.today{ color:#F59E0B; }
  .reminder-stat-value.upcoming{ color:var(--accent); }
  .reminder-stat-value.total{ color:var(--text); }
  .reminder-stat-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin-top:3px; }
  @media (max-width:640px){
    .reminder-stat-grid{ grid-template-columns:repeat(2,1fr); }
  }
  /* ---------- per-profile reminder cycle toggle ---------- */
  .cycle-opt-row{ display:flex; gap:6px; padding:0 2px 10px; }
  .cycle-opt-btn{ flex:1 1 0; font-family:inherit; font-size:12px; font-weight:600; padding:7px 6px; border-radius:8px;
    border:1px solid var(--border-soft); background:var(--surface-2); color:var(--text-faint); cursor:pointer; transition:border-color .12s ease, color .12s ease, background .12s ease; }
  .cycle-opt-btn:hover{ color:var(--text); }
  .cycle-opt-btn.active{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
  .chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
  .chart-ticker{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .chart-ticker-value{ font-size:24px; font-weight:600; font-family:'IBM Plex Mono',monospace; transition:color .15s ease; }
  .chart-ticker-sub{ display:flex; gap:12px; font-size:12px; font-family:'IBM Plex Mono',monospace; }
  .chart-ticker-sub .up{ color:var(--accent); }
  .chart-ticker-sub .down{ color:var(--negative); }
  .cashflow-svg{ width:100%; height:220px; display:block; overflow:visible; user-select:none; }
  .chart-axis-label{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; fill:var(--text-faint); }
  .chart-empty{ padding:40px 20px; text-align:center; color:var(--text-faint); font-size:13px; }
  .chart-legend{ display:flex; align-items:center; gap:16px; font-size:11px; color:var(--text-faint); margin-top:4px; padding:0 2px; }
  .chart-legend span{ display:flex; align-items:center; gap:5px; }
  .chart-legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; }

  /* ---------- dynamic chart: range toggle, tooltip, crosshair ---------- */
  .chart-range-toggle{ display:flex; gap:2px; background:var(--surface-3); border-radius:8px; padding:2px; flex:0 0 auto; }
  .chart-range-btn{ border:none; background:none; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11px;
    font-weight:600; color:var(--text-faint); padding:5px 10px; border-radius:6px; transition:background .15s ease,color .15s ease; }
  .chart-range-btn:hover{ color:var(--text); }
  .chart-range-btn.active{ background:var(--surface); color:var(--accent); box-shadow:var(--shadow); }
  .cf-hit{ cursor:crosshair; }
  .cf-crosshair{ stroke:var(--text-faint); stroke-width:1; stroke-dasharray:3,3; opacity:0; pointer-events:none; transition:opacity .1s ease; }
  .cf-point-hi{ opacity:0; pointer-events:none; transition:opacity .1s ease; }
  .chart-line-anim{ transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); }
  .chart-area-anim{ transition:opacity .5s ease .1s; }
  .chart-tooltip{
    position:absolute; z-index:5; pointer-events:none; background:var(--text); color:var(--surface);
    border-radius:8px; padding:8px 10px; font-size:11.5px; line-height:1.5; box-shadow:var(--shadow);
    opacity:0; transform:translate(-50%,-100%) translateY(-8px); transition:opacity .12s ease; white-space:nowrap;
  }
  .chart-tooltip.show{ opacity:1; }
  .chart-tooltip b{ font-family:'IBM Plex Mono',monospace; }
  .chart-tooltip .ctt-row{ display:flex; align-items:center; gap:6px; }
  .chart-tooltip .ctt-row i{ width:7px; height:7px; border-radius:50%; display:inline-block; }
  .chart-tooltip .ctt-date{ font-weight:600; margin-bottom:3px; opacity:.85; }

  /* ---------- donut / pie chart ---------- */
  .pie-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:6px 0 4px; }
  .pie-wrap-panel, .pie-wrap-inline{
    position:relative; flex-direction:row; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;
  }
  .pie-wrap-panel{
    background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow);
  }
  .pie-wrap-inline{ padding:12px 0 4px; }
  .pie-wrap-panel .pie-svg, .pie-wrap-inline .pie-svg{ flex:0 0 auto; }
  .pie-wrap-panel .pie-legend, .pie-wrap-inline .pie-legend{ flex:1 1 220px; max-width:none; }
  @media (max-width:640px){
    .pie-wrap-panel, .pie-wrap-inline{ flex-direction:column; }
    .pie-wrap-panel .pie-legend, .pie-wrap-inline .pie-legend{ width:100%; }
  }
  .pie-svg{ overflow:visible; }
  .pie-seg{ cursor:pointer; transition:opacity .15s ease; }
  .pie-seg.dim{ opacity:.35; }
  .pie-center-label{ font-size:10.5px; fill:var(--text-faint); font-family:inherit; text-transform:uppercase; letter-spacing:.6px; }
  .pie-center-value{ font-size:19px; font-weight:600; font-family:'IBM Plex Mono',monospace; }
  .pie-legend{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:2px; }
  .pie-legend-row{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-radius:8px; cursor:pointer; transition:background .12s ease; }
  .pie-legend-row:hover{ background:var(--surface-2); }
  .pie-legend-dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
  .pie-legend-label{ flex:1; font-size:13px; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pie-legend-amount{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; }
  .pie-legend-pct{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); flex:0 0 40px; text-align:right; }

  /* ---------- toast ---------- */
  #toast{
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
    background:var(--surface-3); border:1px solid var(--border); color:var(--text); padding:10px 18px;
    border-radius:9px; font-size:13px; box-shadow:var(--shadow); transition:all .22s ease; pointer-events:none; z-index:100;
  }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- weekly reminder notice popup ---------- */
  #weeklyReminderNotice{
    position:fixed; top:22px; left:50%; transform:translateX(-50%) translateY(-12px) scale(.96); opacity:0;
    display:flex; align-items:center; gap:10px;
    background:var(--negative-soft); border:1.5px solid var(--negative-border); color:var(--negative);
    padding:11px 16px 11px 14px; border-radius:11px; font-size:13px; font-weight:600;
    box-shadow:0 12px 32px rgba(208,125,110,.28);
    transition:opacity .2s ease, transform .2s ease; pointer-events:none; z-index:120;
  }
  #weeklyReminderNotice.show{
    opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; cursor:pointer;
    animation:br-pulse 1.15s ease-in-out infinite;
  }
  #weeklyReminderNotice .br-icon{ color:var(--negative); display:flex; flex:0 0 auto; animation:br-shake 1.6s ease-in-out infinite; }
  #weeklyReminderNotice .br-text{ white-space:nowrap; letter-spacing:.1px; }
  #weeklyReminderNotice .br-text b{ font-weight:700; }
  #weeklyReminderNotice .br-cta{
    white-space:nowrap; font-weight:700; text-decoration:underline; text-underline-offset:2px;
    margin-left:2px; color:var(--negative);
  }
  @keyframes br-pulse{
    0%,100%{ box-shadow:0 0 0 0 var(--negative-border), 0 12px 32px rgba(208,125,110,.28); }
    50%{ box-shadow:0 0 0 7px rgba(208,125,110,0), 0 12px 32px rgba(208,125,110,.4); }
  }
  @keyframes br-shake{
    0%,8%,100%{ transform:rotate(0deg); }
    2%{ transform:rotate(-14deg); }
    4%{ transform:rotate(12deg); }
    6%{ transform:rotate(-8deg); }
  }

  @media (max-width:640px){
    .entry-bar{ flex-wrap:wrap; }
    .eb-account,.eb-desc,.eb-amount{ flex:1 1 100%; }
    .eb-divider{ display:none; }
    .eb-actions{ flex:1 1 100%; justify-content:flex-end; border-left:none; border-top:1px solid var(--border); }
    .acc-count{ display:none; }
    .r-date{ display:none; }
    .topbar{ flex-wrap:wrap; row-gap:10px; }
  }
  /* keep the date column visible in public read-only snapshots, even on narrow screens */
  body.public-mode .r-date{ display:block; }
  body.public-mode .r-balance{ display:block; }
  /* Public Link table only, mobile widths: reflow the 4-column row into a
     compact 2-line card (description on its own line, date/amount/balance
     on the next) instead of squeezing 4 columns — same row markup, no new
     elements, no change to desktop/tablet layout above 640px. */
  @media (max-width:640px){
    body.public-mode .public-wrap .row{ flex-wrap:wrap; row-gap:4px; justify-content:space-between; }
    /* !important needed: renderPublicSnapshot's row markup sets an inline
       style="flex:1" on this element, which otherwise outranks this rule. */
    body.public-mode .public-wrap .r-desc{ flex:1 1 100% !important; }
    body.public-mode .public-wrap .r-date,
    body.public-mode .public-wrap .r-amount,
    body.public-mode .public-wrap .r-balance{ flex:0 0 auto; }
  }

  /* ---------- footer brand tag ---------- */
  .app-footer-brand{
    text-align:center; margin-top:32px; padding-top:18px;
    font-family:'IBM Plex Sans',sans-serif; font-size:11px; letter-spacing:.4px;
    color:var(--text-faint);
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .app-footer-brand img{ width:16px; height:16px; border-radius:4px; vertical-align:middle; opacity:.9; }
  .app-footer-version{
    text-align:center; margin-top:2px;
    font-family:'IBM Plex Sans',sans-serif; font-size:10px; letter-spacing:.4px;
    color:var(--text-faint); opacity:.7;
  }