/* ============ Kotari — warm & friendly design system ============
   --accent is the only color a user picks (in Settings). Every other
   accent-derived shade below is computed from it with color-mix(), so
   changing one variable re-themes the whole app.
*/
:root{
  --bg:#fdf6ef;
  --surface:#fffdfa;
  --surface-2:#faefe2;
  --border:#f0dfc9;
  --text:#3d2b1f;
  --text-2:#8a7362;
  --text-3:#b8a693;

  --accent:#296194;
  --accent-hover:color-mix(in srgb, var(--accent) 82%, black);
  --accent-soft:color-mix(in srgb, var(--accent) 13%, white);
  --accent-soft-border:color-mix(in srgb, var(--accent) 35%, white);
  --accent-glow:color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-glow-strong:color-mix(in srgb, var(--accent) 55%, transparent);
  --accent-dark:color-mix(in srgb, var(--accent) 55%, black);

  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --success:#16a34a;
  --success-soft:#eefdf3;
  --negative:#b5502e;
  --negative-soft:#fbeee7;
  --warning:#d97706;
  --warning-soft:#fffbeb;
  --shadow-sm:0 1px 3px rgba(120,72,32,.08);
  --shadow-md:0 6px 20px rgba(120,72,32,.09);
  --shadow-lg:0 18px 50px rgba(120,72,32,.18);
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;

  /* Font choice vars — a small JS init overwrites these based on the
     user's saved font_text / font_numbers preferences. Defaults here mean
     a fresh install (or a user who never touches font settings) sees Inter
     everywhere with tabular numerals — the invisible-and-trustworthy default
     the research recommends. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-headings: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-numbers: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Custom dropdown chevron for <select> (see the shared `select{}` rule
     below) — a literal-color SVG data URI rather than currentColor, since
     background-image can't read CSS custom properties for its own fill.
     Swapped per theme so it stays legible in both. Matches --text-2. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a7362' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
[data-theme="dark"]{
  --bg:#211812;
  --surface:#2b2019;
  --surface-2:#352721;
  --border:#453529;
  --text:#f7ece1;
  --text-2:#c4ad98;
  --text-3:#8a7362;

  --accent-hover:color-mix(in srgb, var(--accent) 82%, white);
  --accent-soft:color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-soft-border:color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-glow:color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-glow-strong:color-mix(in srgb, var(--accent) 65%, transparent);
  --accent-dark:color-mix(in srgb, var(--accent) 55%, black);

  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.14);
  --success:#4ade80;
  --success-soft:rgba(74,222,128,.14);
  --negative:#e0805a;
  --negative-soft:rgba(224,128,90,.14);
  --warning:#fbbf24;
  --warning-soft:rgba(251,191,36,.14);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 18px 50px rgba(0,0,0,.55);

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c4ad98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;
  line-height:1.55;
  transition:background .25s ease,color .25s ease;
  position:relative;
  overflow-x:hidden;
}
/* While any modal is open, the page behind it is locked in place -- without
   this, iOS (especially standalone/home-screen mode, with no browser chrome
   to absorb overscroll) lets the background rubber-band-scroll behind a
   fixed-position overlay, which read as "buggy" jitter under the modal. */
body.modal-lock-scroll{position:fixed;left:0;right:0;overflow:hidden}

/* Soft, blobby ambient shapes drifting slowly behind the content — warmer & rounder, not sterile circles */
body::before,body::after{
  content:"";position:fixed;z-index:-1;
  filter:blur(70px);pointer-events:none;
  opacity:.4;transition:opacity .4s ease;
}
body::before{
  width:520px;height:480px;top:-160px;left:-120px;
  border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 72%);
  animation:driftA 24s ease-in-out infinite;
}
body::after{
  width:580px;height:540px;bottom:-200px;right:-160px;
  border-radius:60% 40% 35% 65% / 55% 60% 40% 45%;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 72%);
  animation:driftB 28s ease-in-out infinite;
}
[data-theme="dark"] body::before,[data-theme="dark"] body::after{opacity:.3}
@keyframes driftA{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(50px,35px) rotate(8deg) scale(1.12)}}
@keyframes driftB{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(-45px,-30px) rotate(-6deg) scale(1.08)}}
@media(prefers-reduced-motion: reduce){body::before,body::after{animation:none}}

h1,h2,h3{font-family:var(--font-headings);letter-spacing:-0.01em;font-weight:700}
a{color:inherit}
button{font-family:inherit}
::selection{background:color-mix(in srgb, var(--accent) 45%, var(--surface))}

.gradient-text{
  background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #ffb347) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============ Nav ============ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:300;
  width:72px;
  display:flex;flex-direction:column;
  padding:1rem .5rem;
  background:var(--surface);border-right:1px solid var(--border);
  overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
}
.sidebar:hover{width:236px;box-shadow:var(--shadow-lg);overflow:visible}

.sidebar-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;padding:.5rem;margin-bottom:1.25rem;border-radius:var(--r-sm);flex-shrink:0}
.sidebar-logo-mark{
  width:32px;height:32px;color:var(--text-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sidebar-logo-text{font-family:'Baloo 2',var(--font-headings);font-weight:800;font-size:1.1rem;letter-spacing:-0.01em;white-space:nowrap;opacity:0;transition:opacity .15s}
.sidebar:hover .sidebar-logo-text{opacity:1;transition-delay:.06s}

.sidebar-links{list-style:none;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.sidebar-link{
  display:flex;align-items:center;gap:.9rem;width:100%;
  padding:.65rem;border-radius:var(--r-sm);border:none;background:none;text-align:left;
  color:var(--text-2);text-decoration:none;font-size:.86rem;font-weight:600;
  white-space:nowrap;cursor:pointer;flex-shrink:0;
  transition:background .15s, color .15s;
}
.sidebar-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sidebar-icon svg{opacity:.85;transition:opacity .2s}
.sidebar-label{opacity:0;transition:opacity .15s;font-size:inherit}
.sidebar:hover .sidebar-label{opacity:1;transition-delay:.06s}

.sidebar-link:hover{background:var(--surface-2);color:var(--text)}
.sidebar-link.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #6d5aff));
  box-shadow:0 2px 12px var(--accent-glow);
}
.sidebar-link.active .sidebar-icon svg{opacity:1}

.changelog-badge{
  position:absolute;top:-5px;right:-7px;min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:.62rem;font-weight:700;
  line-height:15px;text-align:center;
}
.changelog-list{display:flex;flex-direction:column;gap:.7rem;max-height:60vh;overflow-y:auto}
.changelog-item{border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem .9rem;background:var(--surface-2)}
.changelog-item.unseen{border-color:var(--accent)}
.changelog-item-title{font-weight:700;font-size:.92rem;margin-bottom:.15rem}
.changelog-item-date{font-size:.72rem;color:var(--text-3);margin-bottom:.4rem}
.changelog-item-body{font-size:.85rem;color:var(--text-2);line-height:1.5;white-space:pre-wrap}
.changelog-empty{color:var(--text-3);font-size:.85rem;padding:1rem;text-align:center}

.sidebar-bottom{display:flex;flex-direction:column;gap:2px;flex-shrink:0;border-top:1px solid var(--border);padding-top:.75rem;margin-top:.75rem}
.sidebar-user{display:flex;align-items:center;gap:.9rem;padding:.65rem;color:var(--text-2);font-size:.82rem;font-weight:600;white-space:nowrap}
.app-content{margin-left:72px}

@media(max-width:720px){
  .sidebar{
    position:sticky;top:0;left:auto;bottom:auto;z-index:200;
    width:auto;height:auto;flex-direction:row;align-items:center;
    padding:calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
    border-right:none;border-bottom:1px solid var(--border);
    background:color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter:blur(14px);
    overflow:visible;
  }
  .sidebar:hover{width:auto;box-shadow:none}
  .sidebar-logo{margin-bottom:0;margin-right:auto;padding:0}
  .sidebar-logo-text{opacity:1}
  .sidebar-links{display:none}
  .sidebar-bottom{flex-direction:row;border-top:none;margin-top:0;padding-top:0;gap:2px}
  .sidebar-label{display:none}
  .sidebar-link{width:auto;padding:.5rem}
  .sidebar-user{display:none}
  .app-content{margin-left:0}
}

.icon-btn{
  background:none;border:none;cursor:pointer;color:var(--text-2);
  width:36px;height:36px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text);transform:scale(1.05)}

.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--border);
}
@media(max-width:720px){.bottom-nav{display:block}}
.bottom-nav-scroll{
  position:relative;display:flex;
  padding:.5rem .3rem calc(.5rem + env(safe-area-inset-bottom));
  justify-content:space-around;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.bottom-nav .nav-link{
  display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;
  text-decoration:none;color:var(--text-3);font-size:.6rem;font-weight:600;
  padding:.35rem .5rem;border-radius:14px;min-width:46px;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
@media(max-width:400px){.bottom-nav .nav-link{padding:.35rem .35rem;min-width:42px}.bottom-nav .nav-link .bn-icon svg{width:18px;height:18px}}
.bottom-nav .nav-link .bn-icon{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.bottom-nav .nav-link.active{color:var(--accent);background:var(--accent-soft)}
.bottom-nav .nav-link.active .bn-icon{transform:translateY(-2px) scale(1.12)}
.bottom-nav .nav-link:active .bn-icon{transform:scale(.9)}

/* Accessible focus rings — visible on keyboard nav, not on mouse click */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
}

.site-footer{text-align:center;padding:2rem 1rem;font-size:.76rem;color:var(--text-3);margin-bottom:64px}
@media(min-width:721px){.site-footer{margin-bottom:0}}

/* ============ Buttons / fields ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:.65rem 1.3rem;border-radius:var(--r-sm);font-size:.87rem;font-weight:600;
  cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:all .15s;white-space:nowrap;
}
.btn:disabled{opacity:.45;cursor:default;pointer-events:none;transform:none !important;box-shadow:none !important}
.btn:active{transform:scale(.97)}

@keyframes pageFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.page-section:not([hidden]){animation:pageFadeIn .22s ease}
@media(prefers-reduced-motion:reduce){.page-section:not([hidden]){animation:none}}
.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 75%, #6d5aff) 100%);
  color:#fff;
  box-shadow:0 2px 12px var(--accent-glow);
}
.btn-primary:hover{box-shadow:0 4px 20px var(--accent-glow-strong);transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-full{width:100%}
.btn-sm{padding:.42rem .85rem;font-size:.8rem}

.field{margin-bottom:1rem}
.field label{display:block;font-size:.74rem;font-weight:600;color:var(--text-2);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}
.field-optional{font-weight:400;text-transform:none;letter-spacing:normal;color:var(--text-3)}
textarea{resize:none}
.field input,.field select,.field textarea{
  width:100%;padding:.62rem .85rem;background:var(--surface-2);
  border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);
  font-family:inherit;font-size:.9rem;outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field-hint{font-size:.72rem;color:var(--text-3);margin-top:.4rem;line-height:1.4}

/* Every <select> in the app, styled to match Kotari instead of the OS's
   own dropdown chrome: flat appearance, our own chevron (swaps per theme,
   see --select-chevron), rounded to match inputs/cards. This is a single
   shared rule so every current and future <select> picks it up automatically
   -- no per-page overrides needed. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--surface-2);
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:11px 7px;
  padding-right:2.35rem !important;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
select::-ms-expand{display:none}
select:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--border))}
select:focus{background-color:var(--surface)}
/* Native dropdown panel itself is OS-rendered and can't be fully restyled
   cross-browser, but this keeps its text readable against a dark theme in
   the browsers that do respect it (Chromium, Firefox). */
select option{background:var(--surface);color:var(--text)}

/* Number inputs (budget limits, transaction amounts, goal targets, debt
   payoff figures, etc.) -- suppress the browser's own tiny up/down spinner
   buttons. They're a generic OS widget that clashes with the rest of the
   app's design, and every one of these fields is typed into directly
   (amounts, dates, percentages) rather than actually used via the spinner,
   so removing them loses nothing functional. */
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

.password-toggle-wrap{position:relative}
.password-toggle-wrap input{padding-right:2.4rem}
.password-toggle-btn{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  background:none;border:none;padding:.3rem;cursor:pointer;
  color:var(--text-3);display:flex;align-items:center;justify-content:center;
}
.password-toggle-btn:hover{color:var(--text-2)}
.password-toggle-btn svg{width:18px;height:18px}

/* ============ Modal ============ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;padding:1rem;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.5rem;width:min(420px,100%);box-shadow:var(--shadow-lg);
  transform:scale(.97);transition:transform .2s;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal-overlay.open .modal{transform:scale(1)}
.modal-accent{border-color:var(--accent-soft-border)}

/* ===== Onboarding: a much bigger sheet, different layouts for desktop vs mobile ===== */
.modal-onboarding{
  width:min(880px,96vw);height:min(560px,90vh);padding:0;display:flex;overflow:hidden;
}
.onboarding-step{display:flex;width:100%;height:100%}
.onboarding-step[hidden]{display:none} /* author .onboarding-step{display:flex} above would otherwise beat the UA [hidden] rule at equal specificity */
@media(max-width:820px){
  /* Full-bleed on mobile: the shared .modal-overlay padding (1rem) would
     otherwise fight with a 100vw/100vh child and clip or misalign it, so
     the onboarding sheet drops that padding and owns the whole viewport
     itself. dvh (falls back to vh where unsupported) tracks the *actual*
     visible area -- in standalone/home-screen mode there's no address bar
     to collapse, but dvh still correctly excludes any on-screen keyboard,
     where a fixed 100vh would leave the Continue button hidden behind it. */
  #onboarding-modal{padding:0}
  .modal-onboarding{
    width:100vw;width:100dvw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
    border-radius:0;flex-direction:column;
  }
  /* Full-bleed means whichever panel is first in flow (ob-left when a
     step shows its mobile visual, otherwise ob-right) sits directly under
     the status bar / notch in standalone (home-screen) mode -- so the
     inset belongs on the step wrapper itself, not on whichever child
     happens to be first, or the back button/dots end up under the notch. */
  .onboarding-step{flex-direction:column;padding-top:env(safe-area-inset-top)}
}

.ob-left{
  width:34%;flex-shrink:0;background:linear-gradient(160deg, var(--accent-soft), var(--surface-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;
}
@media(max-width:820px){
  .ob-left{display:none;width:auto;padding:0 0 .5rem;background:none}
  .onboarding-step.show-mobile-visual .ob-left{display:flex}
}

.ob-right{flex:1;min-width:0;min-height:0;padding:1.75rem 2.25rem;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
@media(max-width:820px){
  .ob-right{padding:1.1rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom))}
}

.ob-top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:.5rem}
@media(max-width:820px){.ob-top-bar{margin-bottom:.75rem}}
.ob-back-btn{
  width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);
  color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s;
}
.ob-back-btn:hover{background:var(--surface-2)}
.ob-back-btn[hidden]{visibility:hidden}
.ob-dots{display:flex;gap:5px;flex:1;justify-content:center}
.ob-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all .3s}
.ob-dot.active{background:var(--accent);width:16px;border-radius:3px}
.ob-dot.done{background:var(--accent-soft-border)}
.ob-skip-all-btn{
  font-size:.76rem;color:var(--text-3);text-decoration:underline;background:none;border:none;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.ob-top-bar[hidden]{display:none}

.ob-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;max-width:420px}
@media(max-width:820px){.ob-body{text-align:center;margin:0 auto;max-width:300px}}
.ob-body .modal-title,.ob-body .welcome-title{font-size:1.6rem;margin-bottom:.6rem}
@media(max-width:820px){.ob-body .modal-title,.ob-body .welcome-title{font-size:1.3rem}}
.ob-body .modal-lead,.ob-body .welcome-text{font-size:.92rem;line-height:1.55;margin-bottom:1.4rem}

.ob-buttons{display:flex;gap:.75rem;align-items:center;margin-top:.5rem}
@media(max-width:820px){.ob-buttons{flex-direction:column;align-items:stretch;gap:.5rem}}

/* The coin -- exact same three circles as the real logo, reusing the existing build keyframes */
.ob-coin-wrap{position:relative;animation:obCoinPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes obCoinPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.ob-coin{width:96px;height:96px}
@media(max-width:820px){.ob-coin{width:56px;height:56px;margin:0 auto .75rem}}
.ob-coin-fill{stroke-dasharray:100.5;stroke-dashoffset:100.5;animation:coin-build 1.1s ease-in-out .1s forwards}
.ob-coin-sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;animation:obSparkle 1.2s ease-out forwards}
@keyframes obSparkle{0%{opacity:0;transform:scale(.3) translate(0,0)}40%{opacity:1}100%{opacity:0;transform:scale(1) translate(var(--tx),var(--ty))}}
.ob-left-caption{font-size:.78rem;color:var(--text-2);text-align:center;margin-top:1rem;max-width:190px}

.ob-autopick-btn{
  display:flex;align-items:center;gap:.4rem;background:var(--accent-soft);border:1px dashed var(--accent-soft-border);
  color:var(--accent-dark);font-weight:600;font-size:.82rem;border-radius:10px;padding:.55rem .8rem;
  cursor:pointer;margin-top:.4rem;transition:background .15s;width:fit-content;
}
@media(max-width:820px){.ob-autopick-btn{margin:.4rem auto 0;width:auto}}
.ob-autopick-btn:hover{background:var(--accent-glow)}
.ob-autopick-btn:disabled{opacity:.6;cursor:default}
#onboard-auto-income-wrap{margin-top:.8rem}
.ob-auto-note{font-size:.8rem;color:var(--text-2);margin-top:.6rem;line-height:1.4}
.ob-auto-note[hidden]{display:none}

/* Live preview cards shown on budget/goal steps */
.ob-preview-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:1rem 1.2rem;display:flex;align-items:center;gap:1rem;max-width:300px;
}
@media(max-width:820px){.ob-preview-card{margin:0 auto 1.2rem;background:var(--surface-2)}}
.ob-preview-ring{width:50px;height:50px;flex-shrink:0}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.modal-title{font-weight:700;font-size:1.2rem}
.modal-lead{font-size:.85rem;color:var(--text-2);margin-bottom:1.25rem;line-height:1.5}
#guide-body{font-size:.88rem;color:var(--text-2);line-height:1.6}
#guide-body p{margin-bottom:.75rem}
#guide-body p:last-child{margin-bottom:0}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text-2);font-size:1.4rem;line-height:1;padding:2px 6px;border-radius:6px}

.milestone-feedback-checks{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1rem}
.milestone-feedback-check{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;
  border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;
  font-size:.87rem;background:var(--surface-2);transition:border-color .15s,background .15s;
}
.milestone-feedback-check:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--border))}
.milestone-feedback-check input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.milestone-feedback-text{
  width:100%;padding:.62rem .85rem;background:var(--surface-2);
  border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);
  font-family:inherit;font-size:.9rem;outline:none;resize:vertical;
  transition:border-color .15s,box-shadow .15s;
}
.milestone-feedback-text:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.modal-close:hover{background:var(--surface-2);color:var(--text)}

/* ============ Page shell ============ */
.page{padding:1.75rem 1.5rem 3rem;max-width:840px;margin:0 auto}
@media(max-width:720px){.page{padding-bottom:5.5rem}}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-title{font-family:var(--font-headings);font-size:1.85rem;font-weight:700;line-height:1.1;margin-bottom:.3rem}
.page-sub{font-size:.86rem;color:var(--text-2)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.35rem;box-shadow:var(--shadow-sm);margin-bottom:1.25rem;transition:box-shadow .25s ease,border-color .25s ease}
.card:hover{border-color:var(--accent-soft-border);box-shadow:var(--shadow-sm), 0 0 0 1px var(--accent-soft) inset}
.card-title{font-weight:700;font-size:1rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-title a{font-size:.78rem;color:var(--accent);text-decoration:none;font-weight:600}

.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--text-2);font-size:.85rem}
.empty-icon{font-size:2rem;margin-bottom:.6rem;opacity:.7}

/* ============ Toast ============ */
.toast-container{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;gap:8px;align-items:center}
@media(min-width:721px){.toast-container{bottom:24px}}
.toast{
  background:var(--text);color:var(--bg);padding:.6rem 1.1rem;border-radius:999px;
  font-size:.82rem;font-weight:500;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:8px;animation:toastIn .25s ease;
}
.toast.error{background:var(--danger)}
.toast.toast-action{padding:.5rem .6rem .5rem 1.1rem;gap:.7rem}

/* ============ Info tips ============ */
.info-tip{display:inline-flex;vertical-align:middle;margin-left:.3rem;color:var(--text-3);cursor:pointer;opacity:.7}
.info-tip:hover{opacity:1;color:var(--accent)}
.info-tip-bubble{
  position:fixed;z-index:700;max-width:min(280px,calc(100vw - 24px));
  background:var(--text);color:var(--bg);padding:.6rem .8rem;border-radius:10px;
  font-size:.78rem;line-height:1.4;font-weight:400;box-shadow:var(--shadow-lg);
  animation:toastIn .15s ease;
}
.toast-action-btn{
  background:var(--accent);color:#fff;border:none;padding:.4rem .85rem;border-radius:999px;
  font-size:.78rem;font-weight:700;cursor:pointer;flex-shrink:0;transition:filter .15s;
}
.toast-action-btn:hover{filter:brightness(1.1)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============ Hero / index ============ */
.home-greeting{text-align:center;padding:1rem 0 1.75rem}
.home-greeting-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto .9rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--accent-glow);
}
.home-greeting-title{font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.25;margin-bottom:.4rem}

@keyframes home-welcome-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes coin-build{from{stroke-dashoffset:100.5}to{stroke-dashoffset:0}}
@keyframes coin-pulse-once{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.home-greeting.welcome-animate #home-greeting-fill{stroke-dasharray:100.5;animation:coin-build 1.1s ease-in-out both}
.home-greeting.welcome-animate .home-greeting-icon svg{animation:coin-pulse-once .45s ease-out 1.1s both;transform-origin:center}
.home-greeting.welcome-animate .home-greeting-title{animation:home-welcome-in .4s ease-out .12s both}
.home-greeting.welcome-animate .home-greeting-sub{animation:home-welcome-in .4s ease-out .22s both}
@media (prefers-reduced-motion: reduce){
  .home-greeting.welcome-animate #home-greeting-fill,
  .home-greeting.welcome-animate .home-greeting-icon svg,
  .home-greeting.welcome-animate .home-greeting-title,
  .home-greeting.welcome-animate .home-greeting-sub{animation:none}
}
.home-greeting-sub{color:var(--text-2);font-size:.95rem}

.home-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.1rem}
@media(max-width:720px){.home-grid{grid-template-columns:1fr}}

.home-shortcuts{display:flex;flex-direction:column;gap:.6rem}
.home-shortcut-btn{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r);
  padding:.75rem .9rem;font-size:.87rem;font-weight:600;color:var(--text);
  cursor:pointer;text-decoration:none;transition:all .18s cubic-bezier(.34,1.56,.64,1);
}
.home-shortcut-btn:hover{border-color:var(--accent-soft-border);background:var(--accent-soft);transform:translateX(3px)}
.home-shortcut-emoji{font-size:1.1rem}

/* ============ Stat / metric cards ============ */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:1.25rem}
@media(max-width:640px){.metrics{grid-template-columns:1fr}}
.m-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.15rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.m-label{font-size:.72rem;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;min-height:2rem;line-height:1.35}
.m-val{font-family:var(--font-numbers);font-size:1.7rem;font-weight:700;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.m-card .m-val{margin-top:auto}
.m-val.plus{color:var(--accent)}
.m-val.minus{color:var(--negative)}

.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:1.25rem;max-width:960px;margin:0 auto;padding:1.75rem 1.5rem 3rem}
/* Grid items default to min-width:auto, so a track can be forced wider than
   its share of the grid by wide content inside it (a table, an unbroken
   long token) -- min-width:0 lets each column actually respect its
   grid-template-columns share and rely on overflow rules inside it instead. */
.layout>div{min-width:0}
@media(max-width:720px){.layout{grid-template-columns:1fr;padding-bottom:5.5rem}}

/* ============ Toggle / forms ============ */
.toggle-row{display:flex;background:var(--surface-2);border-radius:var(--r-sm);padding:3px;margin-bottom:1rem}
.toggle-btn{flex:1;background:none;border:none;padding:.5rem;border-radius:calc(var(--r-sm) - 2px);font-size:.84rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s}
.toggle-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}

/* ============ Transaction rows ============ */
.tx-group-header{
  font-family:var(--font-headings);font-size:.8rem;font-weight:700;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.04em;
  padding:1.1rem 0 .4rem;
}
.tx-group-header:first-child{padding-top:0}
.t-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.87rem;gap:.75rem}
.t-row:last-child{border-bottom:none}
.t-left{display:flex;align-items:center;gap:.7rem;min-width:0}
.t-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.t-dot.income{background:var(--accent)}
.t-dot.expense{background:var(--text-3)}
.t-desc{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-cat{font-size:.74rem;color:var(--text-2);margin-top:1px}
.t-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.t-amt{font-family:var(--font-numbers);font-weight:700;font-size:.95rem;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.t-editable{cursor:pointer;border-radius:4px;padding:1px 3px;margin:-1px -3px;transition:background .12s}
.t-editable:hover{background:var(--surface-2)}
.t-inline-input{
  font:inherit;font-weight:inherit;color:inherit;background:var(--surface);
  border:1.5px solid var(--accent);border-radius:4px;padding:1px 4px;width:auto;
}
input.t-inline-input{max-width:90px}
.t-amt.plus{color:var(--accent)}
.t-amt.minus{color:var(--text)}
.t-del{background:none;border:none;cursor:pointer;color:var(--text-3);padding:6px;border-radius:6px;transition:all .15s}
.t-del:hover{color:var(--danger);background:var(--danger-soft)}

/* ============ Filters ============ */
.filters-bar{display:flex;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap}
.filters-bar input,.filters-bar select{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.55rem .8rem;font-size:.85rem;color:var(--text);font-family:inherit;outline:none}
.filters-bar input{flex:1;min-width:160px}
.filters-bar input:focus,.filters-bar select:focus{border-color:var(--accent)}

/* ============ Budget meter ============ */
.bm-row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-2);margin-bottom:.35rem}
.bm-label{font-weight:600;color:var(--text);font-size:.84rem}
.bm-track{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:.5rem}
.bm-fill{height:100%;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1);background:var(--accent)}
.bm-fill.warn{background:var(--warning)}
.bm-fill.over{background:var(--negative)}

.cat-budget-row{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--border)}
.cat-budget-row:last-child{border-bottom:none}
.cat-name{font-weight:600;font-size:.86rem;flex:1}
.cat-name-clickable{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .12s}
.cat-name-clickable:hover{text-decoration-color:currentColor;color:var(--accent)}
.cat-spent{font-size:.8rem;color:var(--text-2);width:70px}
.cat-limit-input{width:100px;padding:.4rem .6rem;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.82rem;color:var(--text);font-family:inherit;outline:none}
.cat-limit-input:focus{border-color:var(--accent)}
.cat-row{margin-bottom:.65rem}
.cat-info{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:.3rem}
.cat-bar-track{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.cat-bar-fill{height:100%;border-radius:999px}

/* ============ Advice / ask ============ */
.ask-row{display:flex;gap:.6rem;margin-bottom:.9rem}
.ask-input{flex:1;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.62rem .9rem;font-size:.88rem;color:var(--text);font-family:inherit;outline:none}
.ask-input:focus{border-color:var(--accent)}
.quick-asks{display:flex;flex-wrap:wrap;gap:.5rem}
.quick-pill{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-size:.78rem;font-weight:500;padding:.4rem .75rem;border-radius:999px;cursor:pointer;transition:all .15s}
.quick-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.advice-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.85rem;animation:fadeUp .3s ease both}
.advice-q{font-weight:700;font-size:.88rem;margin-bottom:.5rem}
.advice-a{font-size:.86rem;color:var(--text);line-height:1.6;white-space:pre-wrap}
.advice-date{font-size:.72rem;color:var(--text-3);margin-top:.6rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============ Insight card ============ */
/* Plain block box for the real (possibly multi-paragraph, markdown-rendered)
   insight text -- flex-centering the whole thing (as the old single rule
   did) turns every paragraph/list/table into a flex item laid out in a row
   instead of stacked, which is what was blowing this card's width out past
   the page. Centering is opt-in via .is-placeholder, for the short "Add a
   transaction..." / loading states only. */
.insight-body{flex:1;min-width:0;color:var(--text-2);font-size:.85rem;padding:.5rem;overflow-wrap:break-word;word-break:break-word}
.insight-body.is-placeholder{display:flex;align-items:center;justify-content:center;font-style:italic;text-align:center}
.insight-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============ Verify email banner ============ */
.verify-email-banner{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;background:color-mix(in srgb, var(--accent) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));border-radius:12px;padding:.7rem 1rem;margin-bottom:1rem;font-size:.85rem}
.verify-email-banner-text{color:var(--text-2)}
.verify-email-banner-text #verify-email-banner-address{color:var(--text-1);font-weight:600}
.verify-email-banner-btn{flex-shrink:0;border:1px solid var(--border);background:var(--surface);color:var(--text-1);border-radius:8px;padding:.4rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer}
.verify-email-banner-btn:hover{border-color:var(--accent)}
.verify-email-banner-btn:disabled{opacity:.6;cursor:default}

/* ============ AI chat widget ============ */
.chat-launcher{position:fixed;bottom:20px;right:20px;z-index:350}
@media(max-width:720px){.chat-launcher{bottom:76px}}
.chat-fab{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #6d5aff));
  color:#fff;
  border:none;cursor:pointer;
  box-shadow:var(--shadow-lg), 0 0 24px var(--accent-glow);
  display:flex;align-items:center;justify-content:center;transition:transform .2s, box-shadow .2s;
}
.chat-fab:hover{transform:scale(1.06);box-shadow:var(--shadow-lg), 0 0 32px var(--accent-glow-strong)}
.chat-launcher.hidden .chat-fab{transform:scale(0);pointer-events:none}

.chat-panel{
  position:fixed;top:50%;left:50%;z-index:400;
  width:min(400px,calc(100vw - 32px));height:min(580px,calc(100vh - 80px));
  min-width:320px;min-height:200px;
  background:var(--surface);border:1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 32px -8px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 70px var(--accent-glow);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translate(-50%,-50%) scale(.95);opacity:0;pointer-events:none;
  transition:opacity .22s cubic-bezier(.34,1.56,.64,1), transform .22s cubic-bezier(.34,1.56,.64,1), width .22s ease, height .22s ease, top .22s ease, left .22s ease;
}
.chat-panel.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.chat-panel.dragging{transition:none}

.chat-panel.maximized{
  top:20px !important;left:20px !important;right:20px;bottom:20px;
  width:auto !important;height:auto !important;transform:none !important;
}
@media(max-width:720px){.chat-panel.maximized{top:0 !important;left:0 !important;right:0;bottom:0;border-radius:0}}

.chat-resize-handle{
  position:absolute;right:0;bottom:0;width:18px;height:18px;
  cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--accent) 35%, transparent) 50%);
  border-radius:0 0 var(--r-lg) 0;
}
.chat-panel.maximized .chat-resize-handle{display:none}
@media(max-width:720px){.chat-resize-handle{display:none}}

@media(max-width:720px){
  .chat-panel:not(.maximized){
    top:auto;left:0;bottom:0;right:0;transform:translateY(16px) scale(.97) !important;
    width:100%;height:min(72vh,640px);border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  .chat-panel.open:not(.maximized){transform:translateY(0) scale(1) !important}
}

.chat-header{
  display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
  flex-shrink:0;
}
@media(min-width:721px){.chat-header{cursor:move;user-select:none}}
.chat-header-info{display:flex;align-items:center;gap:.6rem}
.chat-header-actions{display:flex;align-items:center;gap:2px}
.chat-header-actions .icon-btn{width:28px;height:28px;border-radius:8px}
.chat-avatar{
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--border);
  color:var(--text-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
  position:relative;
}
.chat-title{font-weight:700;font-size:.9rem}
.chat-subtitle{font-size:.72rem;color:var(--text-2)}
.chat-header-actions{display:flex;gap:2px}

.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:1rem;display:flex;flex-direction:column}

.chat-timestamp{
  align-self:center;font-size:.68rem;font-weight:600;color:var(--text-3);
  margin:.85rem 0 .6rem;text-transform:uppercase;letter-spacing:.03em;
}
.chat-timestamp:first-child{margin-top:0}

.msg{
  position:relative;max-width:78%;padding:.6rem .85rem;border-radius:18px;
  font-size:.85rem;line-height:1.55;overflow-wrap:break-word;word-break:break-word;
  animation:fadeUp .2s ease both;margin-bottom:2px;
}
.msg.user{white-space:pre-wrap} /* still plain-escaped text, not HTML -- needs this to preserve literal newlines. Assistant messages render real HTML from marked.parse(), whose own inter-tag whitespace would double-space if this were applied there too. */
.msg strong,.nudge-text strong,.insight-body strong,.kotari-textmsg-text strong,.kotari-center-nudge-text strong{font-weight:700}
.msg em,.nudge-text em,.insight-body em,.kotari-textmsg-text em,.kotari-center-nudge-text em{font-style:italic}
.msg p,.nudge-text p,.insight-body,.legal-content p,.kotari-textmsg-text p,.kotari-center-nudge-text p{margin:0 0 .65rem}
.msg p:last-child,.nudge-text p:last-child,.insight-body,.legal-content p:last-child,.kotari-textmsg-text p:last-child,.kotari-center-nudge-text p:last-child{margin-bottom:0}
.msg h1,.msg h2,.msg h3,.msg h4,
.nudge-text h1,.nudge-text h2,.nudge-text h3,.nudge-text h4,
.insight-body,.legal-content h1,.insight-body,.legal-content h2,.insight-body,.legal-content h3,.insight-body,.legal-content h4,
.kotari-textmsg-text h1,.kotari-textmsg-text h2,.kotari-textmsg-text h3,.kotari-textmsg-text h4,
.kotari-center-nudge-text h1,.kotari-center-nudge-text h2,.kotari-center-nudge-text h3,.kotari-center-nudge-text h4{
  font-weight:700;line-height:1.3;margin:1rem 0 .4rem;
}
.msg h1:first-child,.msg h2:first-child,.msg h3:first-child,.msg h4:first-child,
.nudge-text h1:first-child,.nudge-text h2:first-child,.nudge-text h3:first-child,.nudge-text h4:first-child,
.insight-body,.legal-content h1:first-child,.insight-body,.legal-content h2:first-child,.insight-body,.legal-content h3:first-child,.insight-body,.legal-content h4:first-child,
.kotari-textmsg-text h1:first-child,.kotari-textmsg-text h2:first-child,.kotari-textmsg-text h3:first-child,.kotari-textmsg-text h4:first-child,
.kotari-center-nudge-text h1:first-child,.kotari-center-nudge-text h2:first-child,.kotari-center-nudge-text h3:first-child,.kotari-center-nudge-text h4:first-child{
  margin-top:0;
}
.msg h1,.nudge-text h1,.insight-body,.legal-content h1,.kotari-textmsg-text h1,.kotari-center-nudge-text h1{font-size:1.1rem}
.msg h2,.nudge-text h2,.insight-body,.legal-content h2,.kotari-textmsg-text h2,.kotari-center-nudge-text h2{font-size:1.02rem}
.msg h3,.nudge-text h3,.insight-body,.legal-content h3,.kotari-textmsg-text h3,.kotari-center-nudge-text h3{font-size:.94rem}
.msg h4,.nudge-text h4,.insight-body,.legal-content h4,.kotari-textmsg-text h4,.kotari-center-nudge-text h4{font-size:.88rem}
.msg ul,.msg ol,.nudge-text ul,.nudge-text ol,.insight-body,.legal-content ul,.insight-body,.legal-content ol,.kotari-textmsg-text ul,.kotari-textmsg-text ol,.kotari-center-nudge-text ul,.kotari-center-nudge-text ol{
  margin:0 0 .65rem;padding-left:1.5rem; /* wide enough that double-digit numbers ("10.", "11.") don't crowd the text */
}
.msg li,.nudge-text li,.insight-body li,.legal-content li,.kotari-textmsg-text li,.kotari-center-nudge-text li{margin-bottom:.3rem;padding-left:.15rem}
.msg li:last-child,.nudge-text li:last-child,.insight-body li:last-child,.legal-content li:last-child,.kotari-textmsg-text li:last-child,.kotari-center-nudge-text li:last-child{margin-bottom:0}
.msg li>ul,.msg li>ol,.nudge-text li>ul,.nudge-text li>ol,.insight-body li>ul,.legal-content li>ul,.insight-body li>ol,.legal-content li>ol,.kotari-textmsg-text li>ul,.kotari-textmsg-text li>ol,.kotari-center-nudge-text li>ul,.kotari-center-nudge-text li>ol{
  margin:.3rem 0 0; /* a nested list sits right under its parent item, not with the full paragraph-level gap below it */
}
.msg code,.nudge-text code,.insight-body code,.legal-content code,.kotari-textmsg-text code,.kotari-center-nudge-text code{
  font-family:'JetBrains Mono','Menlo',monospace;font-size:.82em;
  background:rgba(0,0,0,.08);padding:.1em .35em;border-radius:4px;
}
.msg.user code{background:rgba(255,255,255,.2)}
.msg pre,.nudge-text pre,.insight-body pre,.legal-content pre,.kotari-textmsg-text pre,.kotari-center-nudge-text pre{
  background:rgba(0,0,0,.08);padding:.6rem .7rem;border-radius:8px;overflow-x:auto;margin:0 0 .65rem;
}
.msg pre code,.nudge-text pre code,.insight-body pre code,.kotari-textmsg-text pre code,.kotari-center-nudge-text pre code{background:none;padding:0}
.msg a,.nudge-text a,.insight-body a,.kotari-textmsg-text a,.kotari-center-nudge-text a{color:inherit;text-decoration:underline}
.msg.assistant a,.nudge-text a,.insight-body a,.kotari-textmsg-text a,.kotari-center-nudge-text a{color:var(--accent)}
.msg blockquote,.nudge-text blockquote,.insight-body blockquote,.kotari-textmsg-text blockquote,.kotari-center-nudge-text blockquote{
  border-left:3px solid currentColor;opacity:.85;margin:0 0 .65rem;padding:.1rem 0 .1rem .75rem;font-style:italic;
}
.msg blockquote p:last-child,.nudge-text blockquote p:last-child,.insight-body blockquote p:last-child,.kotari-textmsg-text blockquote p:last-child,.kotari-center-nudge-text blockquote p:last-child{margin-bottom:0}
.msg hr,.nudge-text hr,.insight-body hr,.kotari-textmsg-text hr,.kotari-center-nudge-text hr{
  border:none;border-top:1px solid currentColor;opacity:.2;margin:.85rem 0;
}
.msg table,.nudge-text table,.insight-body table,.kotari-textmsg-text table,.kotari-center-nudge-text table{
  width:100%;border-collapse:collapse;margin:0 0 .65rem;font-size:.92em;
}
.msg th,.msg td,.nudge-text th,.nudge-text td,.insight-body th,.insight-body td,.kotari-textmsg-text th,.kotari-textmsg-text td,.kotari-center-nudge-text th,.kotari-center-nudge-text td{
  border:1px solid currentColor;border-color:rgba(128,128,128,.3);padding:.35rem .55rem;text-align:left;
}
.msg th,.nudge-text th,.insight-body th,.kotari-textmsg-text th,.kotari-center-nudge-text th{
  font-weight:700;background:rgba(128,128,128,.1);
}
.msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:18px}
.msg.assistant{align-self:flex-start;background:var(--surface-2);color:var(--text);border-bottom-left-radius:18px}
@keyframes streamFadeIn{from{opacity:.35}to{opacity:1}}
.msg.assistant.streaming-update{animation:streamFadeIn .2s ease-out}
@media(prefers-reduced-motion:reduce){.msg.assistant.streaming-update{animation:none}}
.msg.assistant.error{background:var(--danger-soft);color:var(--danger)}

/* Only the last bubble in a consecutive run gets a sharper "tail" corner + a
   bigger gap after it — this is what makes grouped messages read like a
   real text thread instead of a stack of separate cards. */
.msg.user:not(:has(+ .msg.user)){border-bottom-right-radius:5px;margin-bottom:12px}
.msg.assistant:not(:has(+ .msg.assistant)):not(:has(+ .chat-timestamp)){border-bottom-left-radius:5px;margin-bottom:12px}
.msg:not(:has(+ .msg)){margin-bottom:12px}

.msg.user:not(:has(+ .msg.user))::after{
  content:"";position:absolute;bottom:0;right:-6px;width:12px;height:14px;
  background:var(--accent);border-radius:0 0 0 12px;
}
.msg.assistant:not(:has(+ .msg.assistant))::after{
  content:"";position:absolute;bottom:0;left:-6px;width:12px;height:14px;
  background:var(--surface-2);border-radius:0 0 12px 0;
}
.msg.assistant.error:not(:has(+ .msg.assistant))::after{background:var(--danger-soft)}

.msg-loading{display:flex;gap:4px;padding:.3rem 0}
.msg-loading span{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:dotBounce 1.2s infinite}
.msg-loading span:nth-child(2){animation-delay:.15s}
.msg-loading span:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

.chat-suggestions{display:flex;gap:.5rem;padding:0 1rem .75rem;flex-wrap:wrap}
.chat-suggestions .quick-pill{font-size:.74rem}
.followup-suggestions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}

.chat-input-row{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--border);background:color-mix(in srgb, var(--accent) 2%, var(--surface));flex-shrink:0}
.chat-input-row input{flex:1;background:var(--surface-2);border:1.5px solid var(--border);border-radius:999px;padding:.55rem .95rem;font-size:.85rem;color:var(--text);font-family:inherit;outline:none}
.chat-input-row input:focus{border-color:var(--accent)}
.chat-send{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.chat-send:hover{background:var(--accent-hover)}

/* ============ Auth pages ============ */
.auth-page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth-card{width:min(380px,100%);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;box-shadow:var(--shadow-md)}
.auth-logo{display:flex;align-items:center;gap:9px;margin-bottom:1.5rem}
.auth-logo-mark{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.auth-logo-text{font-family:'Baloo 2',var(--font-headings);font-weight:800;font-size:1.15rem;letter-spacing:-0.01em}
.auth-title{font-family:var(--font-headings);font-size:1.5rem;font-weight:700;margin-bottom:.3rem}
.auth-sub{font-size:.85rem;color:var(--text-2);margin-bottom:1.5rem}
.auth-error{background:var(--danger-soft);color:var(--danger);padding:.65rem .85rem;border-radius:var(--r-sm);font-size:.82rem;margin-bottom:1.1rem}
.auth-info{background:var(--accent-soft);color:var(--accent);padding:.65rem .85rem;border-radius:var(--r-sm);font-size:.82rem;margin-bottom:1.1rem}
.auth-footer{text-align:center;margin-top:1.25rem;font-size:.84rem;color:var(--text-2)}
#auth-logo-fill{stroke-dasharray:100.5;animation:coin-build .8s ease-in-out both}
.auth-logo-mark svg{animation:coin-pulse-once .35s ease-out .8s both;transform-origin:center}
@media (prefers-reduced-motion: reduce){
  #auth-logo-fill{animation:none}
  .auth-logo-mark svg{animation:none}
}
.auth-footer a{color:var(--accent);font-weight:600;text-decoration:none}
.auth-footer a:hover{text-decoration:underline}

/* ===== Split-panel wrapper around login/register: a visual side plus the
   existing .auth-card unchanged, so nothing about the form logic moves. ===== */
.auth-split{
  display:flex;width:min(920px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  animation:authSplitIn .45s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes authSplitIn{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
.auth-split .auth-card{flex:1;min-width:0;border:none;box-shadow:none;border-radius:0;width:auto;max-width:none;padding:2.25rem 2.5rem}
.auth-split-visual{
  flex:0 0 38%;background:linear-gradient(160deg, var(--accent-soft), var(--surface-2));
  display:flex;flex-direction:column;justify-content:center;padding:2.5rem 2.25rem;position:relative;overflow:hidden;
}
.auth-split-visual-inner{position:relative;z-index:1}
.auth-split-tagline{font-family:var(--font-headings);font-weight:700;font-size:1.35rem;line-height:1.3;margin:1.1rem 0 1.4rem;color:var(--text)}
.auth-split-points{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.auth-split-points li{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--text-2)}
.auth-split-points li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;
}
@media(max-width:820px){
  .auth-split{flex-direction:column;width:min(420px,100%)}
  .auth-split-visual{display:none}
}

/* ============ Hub (pre-auth landing page) ============ */
.hub-body{overflow-x:hidden}
.hub-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem clamp(1.25rem, 5vw, 3.5rem);
}
.hub-nav .auth-logo{margin-bottom:0}
.hub-nav-actions{display:flex;align-items:center;gap:.6rem}
@media(max-width:520px){.hub-nav-actions .btn-ghost{display:none}}

.hub-hero{
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.5rem,6vw,4rem) clamp(1.25rem,5vw,3.5rem) clamp(2rem,6vw,4rem);
  max-width:1200px;margin:0 auto;
}
.hub-hero-text{flex:1;min-width:0;animation:hubFadeUp .6s cubic-bezier(.2,.9,.3,1) both}
.hub-hero-eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--accent-dark);
  background:var(--accent-soft);border-radius:20px;padding:.3rem .8rem;margin-bottom:1rem;
}
.hub-hero-title{font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.12;margin-bottom:1.1rem;letter-spacing:-0.02em}
.hub-hero-sub{font-size:1.02rem;color:var(--text-2);line-height:1.6;max-width:480px;margin-bottom:1.6rem}
.hub-hero-ctas{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:.9rem}
.btn-lg{padding:.85rem 1.6rem;font-size:.95rem;border-radius:14px}
.hub-hero-note{font-size:.8rem;color:var(--text-3)}

.hub-hero-visual{
  flex:0 0 auto;width:min(360px,40vw);position:relative;height:340px;
  display:none;
}
@media(min-width:720px){.hub-hero-visual{display:block}}
.hub-hero-card{
  position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:1rem 1.2rem;animation:hubFloat 7s ease-in-out infinite;
}
.hub-hero-card-1{
  top:10px;left:20px;width:220px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  animation-delay:0s;
}
.hub-hero-ring{width:44px;height:44px;flex-shrink:0}
.hub-hero-ring-fill{stroke-dashoffset:150.8;animation:hubRingFill 1.1s cubic-bezier(.2,.8,.2,1) .3s forwards}
@keyframes hubRingFill{to{stroke-dashoffset:52.8}}
.hub-hero-card-label{font-size:.72rem;color:var(--text-3);margin-bottom:.2rem}
.hub-hero-card-amount{font-weight:700;font-size:1.02rem}
.hub-hero-card-amount span{font-weight:400;color:var(--text-3);font-size:.78rem}
.hub-hero-card-2{
  bottom:40px;right:0;width:230px;display:flex;gap:.6rem;align-items:flex-start;
  animation-delay:2.3s;
}
.hub-hero-card-chat-title{font-weight:700;font-size:.8rem;margin-bottom:.15rem}
.hub-hero-card-chat-body{font-size:.8rem;color:var(--text-2);line-height:1.4}
.hub-hero-coin{position:absolute;top:160px;left:130px;opacity:.9;animation:hubFloat 8s ease-in-out infinite 1s}
.hub-hero-coin .ob-coin{width:52px;height:52px}
@keyframes hubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hubFadeUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion: reduce){.hub-hero-card,.hub-hero-coin,.hub-hero-text{animation:none}}

.hub-features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem) clamp(2rem,5vw,3.5rem);
}
@media(max-width:920px){.hub-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hub-features{grid-template-columns:1fr}}
.hub-feature{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.4rem 1.25rem;
}
.hub-feature-icon{font-size:1.5rem;margin-bottom:.7rem}
.hub-feature-title{font-weight:700;font-size:.95rem;margin-bottom:.4rem}
.hub-feature-text{font-size:.83rem;color:var(--text-2);line-height:1.55}

.hub-section-heading{
  text-align:center;font-weight:700;font-size:clamp(1.3rem,2.6vw,1.6rem);
  font-family:var(--font-headings);letter-spacing:-0.01em;
  max-width:640px;margin:0 auto .5rem;
}
.hub-section-sub{
  text-align:center;font-size:.88rem;color:var(--text-2);line-height:1.55;
  max-width:520px;margin:0 auto 2.25rem;
}

/* ---- How it works: three plain steps, so signing up doesn't lead into a
   black box -- removes the "ok, now what?" guesswork after the CTA. ---- */
.hub-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;
  max-width:960px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem) clamp(2.5rem,5vw,4rem);
}
@media(max-width:720px){.hub-steps{grid-template-columns:1fr;gap:1.4rem}}
.hub-step{text-align:center;padding:0 .5rem}
.hub-step-num{
  width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;
  margin:0 auto .85rem;font-family:var(--font-headings);
}
.hub-step-title{font-weight:700;font-size:.95rem;margin-bottom:.35rem}
.hub-step-text{font-size:.83rem;color:var(--text-2);line-height:1.55}

/* ---- Trust & privacy: concrete, checkable facts about what the app
   actually does, standing in for the "reviews/testimonials" trust signals
   a brand-new product doesn't have yet to show honestly. ---- */
.hub-trust{
  max-width:900px;margin:0 auto;padding:clamp(2rem,5vw,3rem) clamp(1.25rem,5vw,3.5rem) clamp(2.5rem,5vw,4rem);
  background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.hub-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;max-width:760px;margin:0 auto}
@media(max-width:640px){.hub-trust-grid{grid-template-columns:1fr}}
.hub-trust-item{display:flex;gap:.85rem;align-items:flex-start}
.hub-trust-item-icon{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.hub-trust-item-title{font-weight:700;font-size:.88rem;margin-bottom:.2rem}
.hub-trust-item-text{font-size:.82rem;color:var(--text-2);line-height:1.5}

.hub-cta-band{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.25rem;
  max-width:1100px;margin:0 auto 3rem;padding:1.8rem clamp(1.5rem,4vw,2.5rem);
  background:linear-gradient(135deg, var(--accent-soft), var(--surface-2));border-radius:var(--r-lg);
  border:1px solid var(--accent-soft-border);
}
.hub-cta-band-title{font-weight:700;font-size:1.2rem;margin-bottom:.25rem}
.hub-cta-band-sub{font-size:.85rem;color:var(--text-2)}

.hub-footer{
  display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;
  padding:1.5rem;font-size:.8rem;color:var(--text-3);
}
.hub-footer a{color:var(--text-2);text-decoration:none}
.hub-footer a:hover{text-decoration:underline}

/* ============ User menu ============ */

/* ============ Proactive nudge — slides in like a text message ============ */
.nudge-banner{
  position:fixed;bottom:88px;right:20px;z-index:550;
  display:flex;align-items:flex-start;gap:.65rem;
  max-width:min(320px,calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--accent-soft-border);
  border-radius:18px 18px 4px 18px;
  box-shadow:var(--shadow-lg), 0 0 28px var(--accent-glow);
  padding:.8rem .95rem;
  opacity:0;pointer-events:none;
  transform:translateX(40px) scale(.92);
  transform-origin:bottom right;
  transition:all .38s cubic-bezier(.34,1.56,.64,1);
}
.nudge-banner.show{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
@media(max-width:720px){.nudge-banner{bottom:140px}}
.nudge-icon{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #6d5aff));
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
}
.nudge-body{flex:1;min-width:0}
.nudge-label{font-size:.66rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}
.nudge-text{font-size:.85rem;color:var(--text);line-height:1.45}
.nudge-close{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:1.1rem;line-height:1;padding:0 2px;flex-shrink:0;border-radius:6px;align-self:flex-start}
.nudge-close:hover{color:var(--text);background:var(--surface-2)}

/* ============ Settings: appearance & personality ============ */
.modal-wide{width:min(480px,100%)}
.modal-review{width:min(640px,100%)}

.settings-layout{display:flex;gap:2rem;align-items:flex-start}
.settings-nav{display:flex;flex-direction:column;gap:2px;width:170px;flex-shrink:0;position:sticky;top:1.5rem}
.settings-content{flex:1;min-width:0}
.settings-tab{
  background:none;border:none;cursor:pointer;white-space:nowrap;text-align:left;
  padding:.6rem .85rem;border-radius:var(--r-sm);font-size:.87rem;font-weight:600;
  color:var(--text-2);transition:all .15s;
}
.settings-tab:hover{background:var(--surface-2);color:var(--text)}
.settings-tab.active{background:var(--accent-soft);color:var(--accent)}
@media(max-width:720px){
  .settings-layout{flex-direction:column;gap:1rem}
  .settings-nav{
    flex-direction:row;width:100%;overflow-x:auto;position:static;
    gap:1.25rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);
  }
  .settings-tab{
    background:none !important;padding:.2rem 0;border-radius:0;flex-shrink:0;
    color:var(--text-2);border-bottom:2px solid transparent;
  }
  .settings-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
}
.settings-section{margin-bottom:1.5rem}
.settings-section-label{display:block;font-size:.74rem;font-weight:600;color:var(--text-2);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.05em}

.color-swatch-grid{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  padding:.9rem;background:var(--surface-2);border-radius:var(--r);border:1px solid var(--border);
}
.color-swatch{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 0 0 2px var(--surface-2);
  transition:transform .15s ease, box-shadow .15s ease;
}
.color-swatch:hover{transform:scale(1.08)}
.color-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The ring picks up the swatch's own color (via `color` inline alongside
   `background`) instead of a flat black/white ring -- reads as a soft glow
   around the chosen color rather than a generic OS-widget selection state.
   The checkmark carries the actual "this one's picked" signal, so the ring
   staying soft doesn't cost legibility. */
.color-swatch.selected{box-shadow:0 0 0 2px var(--surface-2), 0 0 0 4px currentColor}
.color-swatch .check-icon{
  color:#fff;opacity:0;transition:opacity .12s ease;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));
}
.color-swatch.selected .check-icon{opacity:1}

/* Custom swatch: a dashed "+" circle at rest (matches Kotari's neutral
   palette instead of a jarring rainbow conic-gradient), which fills in
   with the actual picked color -- and swaps to a small pencil glyph -- once
   a non-preset color is chosen. The native <input type="color"> stays
   functionally in place (still what opens the OS picker and fires the
   change) but fully transparent, so the label underneath is what's seen. */
.color-swatch-custom{
  background:var(--surface);border:2px dashed var(--border);color:var(--text-3);
}
.color-swatch-custom .custom-swatch-icon-pencil{display:none}
.color-swatch-custom.has-custom-color{border-style:solid;border-color:transparent}
.color-swatch-custom.has-custom-color .custom-swatch-icon-plus{display:none}
.color-swatch-custom.has-custom-color .custom-swatch-icon-pencil{
  display:flex;color:#fff;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));
}
.color-swatch-custom input[type="color"]{
  position:absolute;inset:0;width:100%;height:100%;border:none;cursor:pointer;padding:0;opacity:0;
}
.color-swatch-current{margin-top:.65rem;font-size:.78rem;font-weight:500;color:var(--text-2)}

.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:400px){.persona-grid{grid-template-columns:1fr}}
.persona-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r);
  padding:.7rem .8rem;cursor:pointer;transition:all .15s;
}
.persona-card:hover{border-color:var(--accent-soft-border)}
.persona-card.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.persona-emoji{font-size:1.1rem}
.persona-name{font-weight:700;font-size:.84rem;color:var(--text)}
.persona-desc{font-size:.72rem;color:var(--text-2);line-height:1.3}
.persona-custom-input{
  width:100%;margin-top:.6rem;padding:.6rem .8rem;background:var(--surface-2);
  border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);
  font-family:inherit;font-size:.84rem;resize:vertical;outline:none;
}
.persona-custom-input:focus{border-color:var(--accent)}

/* ============ Chat: image upload + action chips ============ */
.chat-attach{width:36px;height:36px;flex-shrink:0}
.chat-image-preview{position:relative;display:flex;padding:0 1rem .5rem}
.chat-image-preview img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border)}
.chat-preview-remove{
  position:absolute;top:-6px;left:58px;width:20px;height:20px;border-radius:50%;
  background:var(--danger);color:#fff;border:2px solid var(--surface);cursor:pointer;
  font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
}
.msg-image{max-width:220px;max-height:220px;border-radius:var(--r-sm);display:block;margin-bottom:.4rem;object-fit:cover}

.action-chip-group{display:flex;flex-direction:column;gap:.4rem;align-self:stretch;margin:.2rem 0}

.confirm-request-card{
  background:var(--surface-2);border-radius:var(--r);padding:.85rem;
  align-self:stretch;margin:.2rem 0;
}
.confirm-request-summary{font-size:.88rem;line-height:1.5;color:var(--text);margin-bottom:.7rem}
.confirm-request-buttons{display:flex;gap:.5rem}
/* Already answered (or no longer the newest thing in the conversation) --
   the buttons are gone from the markup entirely, so this just tones down
   the card itself and drops the summary's bottom margin since there's
   nothing below it anymore. */
.confirm-request-resolved{opacity:.65}
.confirm-request-resolved .confirm-request-summary{margin-bottom:0}
.action-chip{
  align-self:flex-start;font-size:.78rem;font-weight:600;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-soft-border);
  padding:.4rem .7rem;border-radius:999px;
}
.action-chip-error{color:var(--danger);background:var(--danger-soft);border-color:transparent}
.action-chip-with-undo{display:flex;align-items:center;gap:.6rem;max-width:100%}
.action-chip-undo{
  flex-shrink:0;background:none;border:1px solid var(--accent-soft-border);color:var(--accent);
  font-size:.72rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;cursor:pointer;
}
.action-chip-undo:hover{background:var(--accent-soft)}
.action-chip-undo:disabled{opacity:.6;cursor:default}
.chat-table-card{
  align-self:flex-start;max-width:100%;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.6rem;overflow-x:auto;
}
.chat-table-card table{width:100%;border-collapse:collapse;font-size:.82rem}
.chat-table-card th,.chat-table-card td{
  border:1px solid var(--border);padding:.35rem .55rem;text-align:left;white-space:nowrap;
}
.chat-table-card th{font-weight:700;background:var(--surface)}

/* ============ Mobile refinements ============ */
@media(max-width:720px){
  .page-title{font-size:1.5rem}
  .hero{padding:3rem 1.25rem 2rem}
  .hero-title{font-size:clamp(1.9rem,8vw,2.6rem)}
  .card{padding:1.1rem}
  .modal{padding:1.25rem;width:min(420px,calc(100vw - 24px))}
  .modal-wide{width:min(420px,calc(100vw - 24px))}
}

@media(max-width:480px){
  /* Prevent iOS Safari from auto-zooming when a field is focused (needs >=16px) */
  .field input,.field select,.field textarea,
  .filters-bar input,.filters-bar select,
  .ask-input,.chat-input-row input,
  .cat-limit-input{font-size:16px}

  .m-val{font-size:1.35rem}
  .metrics{gap:.6rem}
  .m-card{padding:.9rem}
  .btn{padding:.6rem 1.1rem}
  .page{padding-left:1rem;padding-right:1rem}
  .layout{padding-left:1rem;padding-right:1rem}
}

/* Bigger, easier-to-tap touch targets throughout */
@media(max-width:720px){
  .icon-btn{width:40px;height:40px}
  .t-del{padding:9px}
  .toggle-btn{padding:.65rem}
  .quick-pill{padding:.5rem .85rem}
  .chat-fab{width:56px;height:56px}
}

/* ============ Welcome back modal ============ */
.welcome-modal{text-align:center;padding-top:1.75rem}
.welcome-avatar{display:flex;justify-content:center;margin-bottom:1rem}
.welcome-title{font-family:var(--font-headings);font-size:1.4rem;font-weight:700;margin-bottom:.4rem}
.welcome-text{font-size:.88rem;color:var(--text-2);margin-bottom:1.5rem;line-height:1.5}
.welcome-actions{display:flex;flex-direction:column;gap:.6rem}

/* ============ Quick-add FAB (accessible from any page) ============ */
.quick-add-fab{
  position:fixed;bottom:88px;right:20px;z-index:350;
  width:52px;height:52px;border-radius:50%;
  background:var(--surface);color:var(--accent);border:2px solid var(--accent-soft-border);
  cursor:pointer;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s, box-shadow .2s;
}
.quick-add-fab:hover{transform:scale(1.08) rotate(90deg);box-shadow:var(--shadow-lg), 0 0 20px var(--accent-glow)}
@media(max-width:720px){
  .quick-add-fab{display:none} /* the inline nav-bar version below takes over on mobile */
}
.bottom-nav-fab-item{background:none;border:none;font-family:inherit;cursor:pointer}
.bottom-nav-fab-item .bn-icon{
  background:var(--accent);color:#fff;border-radius:50%;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
}
.bottom-nav-fab-item .bn-icon svg{width:16px;height:16px}

/* ============ Budget progress ring ============ */
.budget-ring-layout{display:flex;gap:1.75rem;align-items:center;flex-wrap:wrap}
.budget-ring-wrap{position:relative;width:120px;height:120px;flex-shrink:0}
.budget-ring{width:100%;height:100%;transform:rotate(-90deg)}
.budget-ring-track{fill:none;stroke:var(--surface-2);stroke-width:10}
.budget-ring-fill{
  fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1), stroke .3s;
}
.budget-ring-fill.warn{stroke:var(--warning)}
.budget-ring-fill.over{stroke:var(--negative)}
.budget-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.budget-ring-pct{font-family:var(--font-numbers);font-size:1.5rem;font-weight:700}
.budget-ring-label{font-size:.68rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.budget-ring-details{flex:1;min-width:220px}
@media(max-width:480px){.budget-ring-layout{justify-content:center;text-align:center}.budget-ring-details{min-width:100%}}

/* ============ Quick Add: scan a receipt ============ */
.qa-scan-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  background:var(--accent-soft);border:1.5px dashed var(--accent-soft-border);border-radius:var(--r);
  padding:.75rem;font-size:.87rem;font-weight:600;color:var(--accent);cursor:pointer;
  transition:all .18s;margin-bottom:1rem;
}
.qa-scan-btn:hover{background:color-mix(in srgb, var(--accent) 18%, white);border-color:var(--accent)}
.qa-scan-btn:disabled{opacity:.6;cursor:default}
.qa-scan-banner{
  font-size:.8rem;padding:.6rem .8rem;border-radius:var(--r-sm);margin-bottom:1rem;
  background:var(--accent-soft);color:var(--accent);
}
.qa-scan-banner.error{background:var(--danger-soft);color:var(--danger)}
.qa-divider{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;color:var(--text-3);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.qa-divider::before,.qa-divider::after{content:"";flex:1;height:1px;background:var(--border)}

/* ============ Advisor tab — full-page docked chat (like Claude's own chat) ============ */
.advisor-chat-wrap{
  display:flex;flex-direction:column;
  height:100vh;
  height:100dvh; /* iOS Safari fix: 100vh ignores the collapsing address bar, dvh accounts for it. Ignored by browsers that don't support dvh, falling back to the vh line above. */
  max-width:860px;margin:0 auto;padding:0 1.5rem;
}
@media(max-width:720px){
  .advisor-chat-wrap{height:calc(100vh - 56px - 64px);padding:0 1rem}
  .advisor-chat-wrap{height:calc(100dvh - 56px - 64px)}
}

.advisor-chat-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0;border-bottom:1px solid var(--border);flex-shrink:0}
.chat-header-right{display:flex;align-items:center;gap:.75rem}
.chat-usage-note{font-size:.76rem;color:var(--text-3);white-space:nowrap}
.chat-usage-note-warn{color:var(--warning)}
@media(max-width:480px){.chat-usage-note{display:none}}
.advisor-chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:1.25rem 0;display:flex;flex-direction:column}
.advisor-chat-messages .msg{max-width:75%;font-size:.9rem}
@media(max-width:720px){.advisor-chat-messages .msg{max-width:88%}}
.advisor-chat-suggestions{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:.75rem;flex-shrink:0}
.advisor-chat-image-preview{position:relative;display:flex;padding-bottom:.5rem;flex-shrink:0}
.advisor-chat-image-preview img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border)}
.advisor-chat-input-row{display:flex;gap:.6rem;padding:.9rem 0;border-top:1px solid var(--border);flex-shrink:0}
.advisor-chat-input-row input[type="text"]{
  flex:1;background:var(--surface-2);border:1.5px solid var(--border);border-radius:999px;
  padding:.7rem 1.1rem;font-size:.9rem;color:var(--text);font-family:inherit;outline:none;
}
.advisor-chat-input-row input[type="text"]:focus{border-color:var(--accent)}
.advisor-disclaimer{text-align:center;font-size:.7rem;color:var(--text-3);padding-bottom:.85rem;flex-shrink:0}

.chat-fine-print{text-align:center;font-size:.66rem;color:var(--text-3);padding:0 1rem .6rem}

/* ============ Insights page ============ */
.insight-stat-strip{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);display:flex;padding:1.1rem 0;margin-bottom:1.25rem;
}
.insight-stat-col{flex:1;padding:0 1rem;text-align:center;position:relative;display:flex;flex-direction:column;min-width:0}
.insight-stat-col+.insight-stat-col::before{content:'';position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;background:var(--border)}
.insight-stat-col .m-label{min-height:2.1rem;line-height:1.3;display:flex;align-items:center;justify-content:center}
.insight-stat-col .m-val{font-size:1.35rem;display:block;margin-top:.4rem}

@media(max-width:720px){
  .insight-stat-strip{display:grid;grid-template-columns:repeat(2, 1fr);gap:.9rem;padding:1.1rem}
  .insight-stat-col{padding:0}
  .insight-stat-col+.insight-stat-col::before{display:none}
  .insight-stat-col .m-val{font-size:1.125rem}
}
@media(max-width:400px){
  .insight-stat-strip{grid-template-columns:1fr}
  .insight-stat-col .m-val{font-size:1.5rem}
}

.mover-row{display:flex;align-items:center;gap:.9rem}
.mover-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.mover-icon.up{background:var(--negative-soft);color:var(--negative)}
.mover-icon.down{background:var(--accent-soft);color:var(--accent)}
.mover-text{font-size:.87rem;line-height:1.5}
.mover-text strong{font-weight:700}
.chart-wrap{position:relative;height:260px;width:100%}
.chart-wrap canvas{touch-action:pan-y}
.chart-hover-readout{font-size:.82rem;color:var(--text-2);text-align:center;margin-top:.6rem;min-height:1.3em}
.chart-hover-readout b{color:var(--text);font-weight:700}
.chart-load-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1rem}
.chart-wrap-donut{height:220px}
.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:720px){.insight-grid{grid-template-columns:1fr}}

.top-cat-row{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.top-cat-row:last-child{border-bottom:none}
.top-cat-rank{
  width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0;
}
.top-cat-info{flex:1;min-width:0}
.top-cat-name{font-weight:600;font-size:.86rem}
.top-cat-pct{font-size:.74rem;color:var(--text-2)}
.top-cat-amt{font-weight:700;font-size:.88rem;flex-shrink:0}

.big-tx-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.87rem}
.big-tx-row:last-child{border-bottom:none}
.big-tx-desc{font-weight:600}
.big-tx-meta{font-size:.74rem;color:var(--text-2)}
.big-tx-amt{font-weight:700;color:var(--negative)}

/* ============ Insights granularity toggle ============ */
.granularity-tabs{display:flex;gap:.4rem;margin-bottom:1.1rem;overflow-x:auto;padding-bottom:2px}
.granularity-tab{
  background:var(--surface-2);border:1.5px solid var(--border);cursor:pointer;white-space:nowrap;
  padding:.5rem 1.1rem;border-radius:999px;font-size:.83rem;font-weight:600;
  color:var(--text-2);transition:all .18s;
}
.granularity-tab:hover{border-color:var(--accent-soft-border);color:var(--text)}
.granularity-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============ Savings goals ============ */
.goal-card{background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.85rem}
.goal-card:last-child{margin-bottom:0}
.goal-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.6rem;gap:.5rem}
.goal-name{font-weight:700;font-size:.92rem}
.goal-date{font-size:.72rem;color:var(--text-2);margin-top:2px}
.goal-delete{background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0}
.goal-delete:hover{color:var(--danger);background:var(--danger-soft)}
.goal-amounts{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-2);margin-bottom:.4rem}
.goal-amounts strong{color:var(--text);font-weight:700}
.goal-track{height:9px;background:var(--surface);border-radius:999px;overflow:hidden;margin-bottom:.7rem}
.goal-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ffb347));transition:width .5s cubic-bezier(.4,0,.2,1)}
.goal-fill.complete{background:linear-gradient(90deg, #7cb083, #5aa9c9)}
.goal-actions{display:flex;gap:.5rem}
.goal-actions input{flex:1;padding:.45rem .7rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.82rem;color:var(--text);font-family:inherit;outline:none}
.goal-actions input:focus{border-color:var(--accent)}
.goal-actions button{flex-shrink:0}

.m-delta{font-size:.74rem;font-weight:600;margin-top:.35rem}
.m-delta.up{color:var(--negative)}
.m-delta.down{color:var(--accent)}
.m-delta.flat{color:var(--text-3)}

.recurring-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.87rem}

.upcoming-bill-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.87rem}
.upcoming-bill-row:last-child{border-bottom:none}
.upcoming-bill-desc{font-weight:600}
.upcoming-bill-when{font-size:.74rem;color:var(--text-2)}
.upcoming-bill-when.urgent{color:var(--warning);font-weight:600}
.upcoming-bill-amt{font-weight:700}
.recurring-row:last-child{border-bottom:none}
.recurring-desc{font-weight:600}
.recurring-meta{font-size:.74rem;color:var(--text-2)}
.recurring-amt{font-weight:700}

/* ============ Bank accounts (Plaid) ============ */
/* ============ Bank accounts (Plaid) — deliberately low-key ============ */
.optional-badge{
  font-size:.68rem;font-weight:700;color:var(--accent);background:var(--accent-soft);
  padding:2px 8px;border-radius:999px;vertical-align:middle;
}
.bank-sync-promise{font-size:.83rem;color:var(--text-2);line-height:1.55;margin-bottom:1rem}
.bank-sync-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.plaid-account-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border)}
.plaid-account-row:last-child{border-bottom:none}
.plaid-account-name{font-weight:600;font-size:.88rem}
.plaid-account-meta{font-size:.74rem;color:var(--text-2);margin-top:2px}
.plaid-account-reauth-notice{font-size:.76rem;color:var(--danger);margin-top:.4rem;display:flex;align-items:center;gap:.5rem}
.plaid-account-reconnect-btn{background:none;border:1px solid var(--danger);color:var(--danger);border-radius:6px;padding:.15rem .55rem;font-size:.72rem;font-weight:600;cursor:pointer}
.plaid-account-reconnect-btn:hover{background:var(--danger-soft)}
.plaid-account-disconnect{background:none;border:none;color:var(--text-3);cursor:pointer;padding:5px;border-radius:6px;flex-shrink:0}
.plaid-account-disconnect:hover{color:var(--danger);background:var(--danger-soft)}
.tx-source-badge{display:inline-block;font-size:.62rem;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:999px;margin-left:.4rem;vertical-align:middle}

/* ============ Spending calendar heatmap ============ */
.heatmap-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.85rem}
.heatmap-nav-btn{
  width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border);
  color:var(--text-2);font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.heatmap-nav-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft-border)}
.heatmap-nav-btn:disabled{opacity:.35;cursor:default}
.heatmap-month-label{font-family:var(--font-headings);font-weight:700;font-size:.95rem;min-width:130px;text-align:center}

.heatmap-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.heatmap-weekday{text-align:center;font-size:.66rem;font-weight:700;color:var(--text-3);text-transform:uppercase}
.heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.heatmap-cell{
  aspect-ratio:1;border-radius:6px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;color:var(--text-3);position:relative;cursor:default;
  transition:transform .12s, box-shadow .12s;
}
.heatmap-cell.has-spend{color:transparent}
.heatmap-cell.has-spend::before{
  content:"";position:absolute;inset:0;border-radius:6px;background:var(--accent);
  opacity:var(--heat-opacity, .15);
}
.heatmap-cell.empty{background:none;cursor:default}
.heatmap-cell.clickable{cursor:pointer}
.heatmap-cell.clickable:hover{transform:scale(1.12);z-index:2}
.heatmap-cell.selected{box-shadow:0 0 0 2px var(--accent);z-index:3}
.heatmap-cell.clickable:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;z-index:3;
}
.heatmap-cell-num{position:relative;z-index:1;font-weight:600}
.heatmap-cell.has-spend .heatmap-cell-num{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.heatmap-legend{display:flex;align-items:center;gap:5px;margin-top:.85rem;font-size:.68rem;color:var(--text-3);justify-content:flex-end}
.heatmap-legend-swatch{width:12px;height:12px;border-radius:3px;background:var(--accent)}

.heatmap-day-detail{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);animation:fadeUp .2s ease both}
.heatmap-day-detail-title{font-weight:700;font-size:.85rem;margin-bottom:.6rem;display:flex;align-items:center;justify-content:space-between}
.heatmap-day-detail-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:1.1rem;line-height:1;padding:2px 6px;border-radius:6px}
.heatmap-day-detail-close:hover{background:var(--surface-2);color:var(--text)}

/* ============ Net worth ============ */
.nw-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}
.nw-summary-item{background:var(--surface-2);border-radius:var(--r);padding:.75rem}
.nw-summary-item .m-label{font-size:.66rem;margin-bottom:.3rem}
.nw-summary-item .m-val{font-size:1.15rem}
.nw-item-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.87rem;gap:.6rem}
.nw-item-row:last-child{border-bottom:none}
.nw-item-name{font-weight:600}
.nw-item-badge{font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:.4rem;vertical-align:middle}
.nw-item-badge.asset{background:var(--accent-soft);color:var(--accent)}
.nw-item-badge.liability{background:var(--danger-soft);color:var(--danger)}
.nw-item-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.nw-item-value-input{width:90px;padding:.3rem .5rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.8rem;color:var(--text);font-family:inherit}

/* ============ Credit utilization display ============ */
.nw-utilization{display:flex;align-items:center;gap:.5rem;margin-top:.35rem}
.nw-utilization-bar-track{width:80px;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.nw-utilization-bar-fill{height:100%;border-radius:999px;transition:width .3s}
.nw-utilization-bar-fill.low{background:#16a34a}
.nw-utilization-bar-fill.medium{background:#d97706}
.nw-utilization-bar-fill.high{background:var(--negative)}
.nw-utilization-pct{font-size:.72rem;font-weight:600}
.nw-utilization-pct.low{color:#16a34a}
.nw-utilization-pct.medium{color:#d97706}
.nw-utilization-pct.high{color:var(--negative)}
.nw-utilization-updated{font-size:.7rem;color:var(--text-3)}
.nw-aggregate-util-row{display:flex;align-items:center;justify-content:space-between;margin:.9rem 0 .4rem}
.irregular-income-avg{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border)}
.debt-payoff-order{margin-top:.4rem}
.debt-payoff-order-row{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;font-size:.85rem;border-bottom:1px solid var(--border)}
.debt-payoff-order-row:last-child{border-bottom:none}
.household-breakdown-row+.household-breakdown-row{margin-top:.9rem}
.household-breakdown-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.household-breakdown-name{font-size:.87rem;font-weight:600;color:var(--text-2)}
.nw-aggregate-util-label{font-size:.82rem;font-weight:600;color:var(--text-2)}
#nw-aggregate-utilization .nw-utilization-bar-track{width:100%;height:6px}
#nw-credit-callout-card{background:var(--surface-2)}
.nw-credit-callout-text{font-size:.85rem;line-height:1.5;color:var(--text-2)}

.ins-price-change-card{background:var(--surface-2);border-radius:var(--r);padding:.75rem .9rem;margin-bottom:.75rem}
.ins-price-change-row{display:flex;align-items:center;gap:.55rem;font-size:.85rem;line-height:1.5;color:var(--text-2)}
.ins-price-change-row + .ins-price-change-row{margin-top:.4rem}
.ins-price-change-arrow{font-size:.7rem;flex-shrink:0}
.ins-price-change-arrow.up{color:var(--negative)}
.ins-price-change-arrow.down{color:#16a34a}
.nw-credit-limit-edit{display:flex;align-items:center;gap:.3rem}
.nw-credit-limit-edit label{font-size:.7rem;color:var(--text-2);white-space:nowrap}
.nw-item-limit-input{width:80px;padding:.3rem .5rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.8rem;color:var(--text);font-family:inherit}
.nw-item-delete{background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;border-radius:6px}
.nw-item-delete:hover{color:var(--danger);background:var(--danger-soft)}
@media(max-width:480px){.nw-summary{grid-template-columns:1fr}}

/* ============ Themed scrollbars — replaces the native gray browser default ============ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============ Settings — more compact and visually "guarded" ============ */
#page-settings .page{max-width:720px;padding-top:1.4rem}
#page-settings .card{padding:1.1rem}
#page-settings .field{margin-bottom:.75rem}

.security-gate-icon{font-size:1.6rem;text-align:center;margin-bottom:.5rem}
.security-gate-text{font-size:.83rem;color:var(--text-2);text-align:center;margin-bottom:1rem;line-height:1.5}
.last-synced{font-size:.74rem;color:var(--text-3)}

.getting-started-icon{font-size:1.6rem;text-align:center;margin-bottom:.4rem}
.getting-started-title{font-weight:700;font-size:.92rem;text-align:center;margin-bottom:.4rem}
.getting-started-text{font-size:.83rem;color:var(--text-2);text-align:center;line-height:1.55}

/* ============ Loading skeletons ============ */
@keyframes skeletonShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton-row{
  height:44px;border-radius:var(--r-sm);margin-bottom:.6rem;
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-row:last-child{margin-bottom:0}
.skeleton-card{
  height:80px;border-radius:var(--r-lg);
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.skeleton-row,.skeleton-card{animation:none}}

.recurring-row-right{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.recurring-confirmed-badge{font-size:.62rem;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:999px;vertical-align:middle}
.recurring-canceled-heading{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin:1rem 0 .2rem}
.recurring-row-canceled{opacity:.6}
.recurring-row-canceled:hover{opacity:1}
.recurring-canceled-badge{font-size:.62rem;font-weight:700;color:var(--text-3);background:var(--surface-2);padding:1px 6px;border-radius:999px;vertical-align:middle}
.recurring-still-charging{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--danger);margin-top:.25rem;font-weight:600}

@keyframes cardHighlightFlash{0%,100%{box-shadow:var(--shadow-sm)}30%{box-shadow:0 0 0 3px var(--accent-soft-border)}}
.card-highlight-flash{animation:cardHighlightFlash 1.6s ease-out}

/* ============ Manage subscriptions modal ============ */
.modal-manage-subs{width:min(560px,100%);max-height:80vh;display:flex;flex-direction:column}
.modal-manage-subs #manage-subs-list{overflow-y:auto}
.manage-sub-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.87rem}
.manage-sub-row:last-child{border-bottom:none}
.manage-sub-name-wrap{min-width:0;flex:1}
.manage-sub-name{font-weight:600}
.manage-sub-amt{font-size:.74rem;color:var(--text-2);margin-top:1px}
.manage-sub-actions{display:flex;align-items:center;gap:.3rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.manage-sub-actions .btn-sm{padding:.3rem .55rem}
.manage-sub-rename-input{
  font-size:.87rem;font-weight:600;font-family:inherit;color:var(--text);
  background:var(--surface-2);border:1px solid var(--accent);border-radius:6px;
  padding:.2rem .4rem;width:100%;max-width:220px;
}

/* ============ Year in Review ============ */
.yr-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.25rem}
@media(max-width:480px){.yr-stat-grid{grid-template-columns:1fr}}
.yr-section-title{font-weight:700;font-size:.85rem;margin:1.1rem 0 .5rem}
.yr-section-title:first-of-type{margin-top:0}
.yr-highlight-row{display:flex;align-items:center;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.yr-highlight-row:last-child{border-bottom:none}
.yr-highlight-label{color:var(--text-2)}
.yr-highlight-value{font-weight:700}

/* ============ Insights period selector (this/last month/year, all time) ============ */
.period-tabs{display:flex;align-items:center;gap:.4rem;margin-bottom:1.1rem;overflow-x:auto;padding-bottom:2px}
.period-month-nav{display:flex;align-items:center;gap:.3rem;flex-shrink:0}
.period-nav-btn{
  width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border);
  color:var(--text-2);font-size:.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.period-nav-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft-border)}
.period-nav-btn:disabled{opacity:.35;cursor:default}
.period-tab{
  background:var(--surface-2);border:1.5px solid var(--border);cursor:pointer;white-space:nowrap;
  padding:.5rem 1rem;border-radius:999px;font-size:.82rem;font-weight:600;
  color:var(--text-2);transition:all .18s;
}
.period-tab:hover{border-color:var(--accent-soft-border);color:var(--text)}
.period-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============ Private mode ============ */
html[data-privacy="numbers"] .m-val,
html[data-privacy="numbers"] .t-amt,
html[data-privacy="numbers"] .big-tx-amt,
html[data-privacy="numbers"] .recurring-amt,
html[data-privacy="numbers"] .top-cat-amt,
html[data-privacy="numbers"] .upcoming-bill-amt,
html[data-privacy="numbers"] .yr-highlight-value,
html[data-privacy="numbers"] .cat-spent,
html[data-privacy="numbers"] .goal-amounts,
html[data-privacy="numbers"] .nw-item-value-input,
html[data-privacy="numbers"] .nw-utilization-pct,
html[data-privacy="numbers"] .ins-price-change-amt,
html[data-privacy="numbers"] .confirm-summary-amt,
html[data-privacy="everything"] .m-val,
html[data-privacy="everything"] .t-amt,
html[data-privacy="everything"] .big-tx-amt,
html[data-privacy="everything"] .recurring-amt,
html[data-privacy="everything"] .top-cat-amt,
html[data-privacy="everything"] .upcoming-bill-amt,
html[data-privacy="everything"] .yr-highlight-value,
html[data-privacy="everything"] .cat-spent,
html[data-privacy="everything"] .goal-amounts,
html[data-privacy="everything"] .nw-item-value-input,
html[data-privacy="everything"] .nw-utilization-pct,
html[data-privacy="everything"] .ins-price-change-amt,
html[data-privacy="everything"] .confirm-summary-amt{
  filter:blur(7px);
  user-select:none;
  transition:filter .15s;
}
/* Charts only blur in 'everything' mode — 'numbers' mode keeps them visible */
html[data-privacy="everything"] .chart-wrap canvas{
  filter:blur(5px);
  transition:filter .15s;
}
/* Hovering a blurred value gives a quick peek without leaving private mode
   entirely. :is(:hover, .privacy-peek) covers both desktop (mouse hover)
   and touch devices (press-and-hold, toggled via JS) — touch has no real
   equivalent of a lingering hover state, so without the .privacy-peek
   branch this peek feature would be completely unreachable on mobile. */
html[data-privacy="numbers"] .m-val:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .t-amt:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .big-tx-amt:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .recurring-amt:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .top-cat-amt:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .upcoming-bill-amt:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .yr-highlight-value:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .cat-spent:is(:hover, .privacy-peek),
html[data-privacy="numbers"] .goal-amounts:is(:hover, .privacy-peek),
html[data-privacy="everything"] .m-val:is(:hover, .privacy-peek),
html[data-privacy="everything"] .t-amt:is(:hover, .privacy-peek),
html[data-privacy="everything"] .big-tx-amt:is(:hover, .privacy-peek),
html[data-privacy="everything"] .recurring-amt:is(:hover, .privacy-peek),
html[data-privacy="everything"] .top-cat-amt:is(:hover, .privacy-peek),
html[data-privacy="everything"] .upcoming-bill-amt:is(:hover, .privacy-peek),
html[data-privacy="everything"] .yr-highlight-value:is(:hover, .privacy-peek),
html[data-privacy="everything"] .cat-spent:is(:hover, .privacy-peek),
html[data-privacy="everything"] .goal-amounts:is(:hover, .privacy-peek){
  filter:blur(0);
}
@media(prefers-reduced-motion:reduce){
  html[data-privacy="numbers"] .m-val,
  html[data-privacy="everything"] .m-val,
  html[data-privacy="everything"] .chart-wrap canvas{transition:none}
}

.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem}
.settings-toggle-label{font-weight:600;font-size:.87rem;margin-bottom:2px}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;inset:0;background:var(--border);border-radius:999px;cursor:pointer;transition:background .2s}
.switch-slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .switch-slider{background:var(--accent)}
.switch input:checked + .switch-slider::before{transform:translateX(18px)}

/* ============ Weekly digest ============ */
.digest-body{text-align:left}
.digest-stat-row{display:flex;align-items:baseline;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.87rem}
.digest-stat-row:last-child{border-bottom:none}
.digest-stat-label{color:var(--text-2)}
.digest-stat-value{font-weight:700}
.digest-mover-callout{background:var(--surface-2);border-radius:var(--r);padding:.75rem;margin-top:.75rem;font-size:.85rem;line-height:1.5}

.skip-link{
  position:absolute;top:-100px;left:1rem;z-index:9999;
  background:var(--accent);color:#fff;padding:.7rem 1.2rem;border-radius:var(--r-sm);
  font-weight:600;font-size:.9rem;text-decoration:none;
  transition:top .15s;
}
.skip-link:focus{top:1rem}

.category-filter-chip{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-soft);color:var(--accent);
  font-size:.82rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;margin-bottom:.9rem;
}
.category-filter-chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0}

/* ============ Printable monthly summary ============ */
.print-only{display:none}
@media print{
  body > *:not(.print-only){display:none !important}
  .print-only{display:block;width:100%;padding:1.5rem 2rem;color:#000;background:#fff}
  .print-summary-title{font-size:1.4rem;font-weight:700;margin-bottom:.2rem}
  .print-summary-sub{color:#555;font-size:.9rem;margin-bottom:1.5rem}
  .print-summary-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid #ddd;font-size:.88rem;page-break-inside:avoid}
  .print-summary-row strong{font-weight:700}
  .print-summary-section-title{font-weight:700;font-size:1rem;margin:1.25rem 0 .4rem;page-break-after:avoid}
  .print-summary-delta{font-weight:400;font-size:.78rem;color:#777;margin-left:.4rem}
  @page{margin:1.5cm}
}

/* ============ Custom date picker ============ */
.kdp-wrapper{position:relative;display:inline-block;width:100%}
.kdp-native-hidden{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.kdp-trigger{
  width:100%;text-align:left;padding:.6rem .75rem;border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:var(--surface);color:var(--text);
  font:inherit;font-size:.9rem;cursor:pointer;transition:border-color .15s;
}
.kdp-trigger:hover{border-color:var(--accent-soft-border)}
.kdp-trigger.kdp-placeholder{color:var(--text-3)}
.kdp-trigger[aria-expanded="true"]{border-color:var(--accent)}
.kdp-popup{
  position:fixed;z-index:200;width:270px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:.85rem;
}
.kdp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.kdp-month-label{font-weight:700;font-size:.88rem}
.kdp-nav{
  width:28px;height:28px;border-radius:50%;border:none;background:none;color:var(--text-2);
  cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:background .12s;
}
.kdp-nav:hover{background:var(--surface-2);color:var(--accent)}
.kdp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.68rem;color:var(--text-3);font-weight:600;margin-bottom:.3rem}
.kdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kdp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.kdp-day{
  border:none;background:none;color:var(--text);border-radius:50%;cursor:pointer;
  transition:background .12s,color .12s;
}
.kdp-day:hover{background:var(--accent-soft);color:var(--accent)}
.kdp-day.kdp-today{font-weight:700;color:var(--accent)}
.kdp-day.kdp-selected{background:var(--accent);color:#fff}
.kdp-day.kdp-selected:hover{background:var(--accent)}
.kdp-day:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kdp-today-btn{
  width:100%;margin-top:.7rem;padding:.45rem;border-radius:var(--r-sm);border:1px solid var(--border);
  background:none;color:var(--text-2);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .12s;
}
.kdp-today-btn:hover{border-color:var(--accent-soft-border);color:var(--accent)}

/* ============ Custom time picker ============ */
.ktp-wrapper{position:relative;display:inline-block;flex:1;min-width:0}
.ktp-trigger{width:100%}
.ktp-popup{
  position:fixed;z-index:200;width:150px;max-height:220px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:.4rem;
}
.ktp-option{
  display:block;width:100%;text-align:left;padding:.5rem .6rem;border-radius:var(--r-sm);
  border:none;background:none;color:var(--text);font-size:.85rem;cursor:pointer;transition:background .12s;
}
.ktp-option:hover{background:var(--surface-2)}
.ktp-option.ktp-selected{background:var(--accent);color:#fff;font-weight:600}
.ktp-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ============ Household ============ */
.household-name{font-weight:700;font-size:1.05rem;margin-bottom:.6rem}
.household-members{display:flex;flex-direction:column;gap:.4rem}
.household-member-row{
  padding:.5rem .75rem;background:var(--surface-2);border-radius:var(--r-sm);
  font-size:.87rem;display:flex;align-items:center;gap:.5rem;
}
.household-owner-badge{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--accent);background:var(--accent-soft);padding:.15rem .5rem;border-radius:999px;
}
.household-create-section input, .household-join-section input{
  width:100%;padding:.6rem .75rem;border-radius:var(--r-sm);border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit;font-size:.9rem;margin-top:.4rem;
}

/* ============ Notification style: text_message (top chat bubble) ============ */
.kotari-textmsg-container{
  position:fixed;top:calc(1rem + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:600;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;
  max-width:calc(100vw - 2rem);
}
@media(max-width:720px){
  .kotari-textmsg-container{top:calc(4.5rem + env(safe-area-inset-top))}
}
.kotari-textmsg{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #6d5aff));
  color:#fff;border-radius:1.1rem 1.1rem 1.1rem .25rem;
  box-shadow:0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  padding:.65rem 1rem;
  min-width:180px;max-width:420px;
  opacity:0;transform:translateY(-16px) scale(.92);
  transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.35,.4,1);
  pointer-events:auto;
}
.kotari-textmsg.show{opacity:1;transform:translateY(0) scale(1)}
.kotari-textmsg-body{flex:1;min-width:0}
.kotari-textmsg-text{font-size:.88rem;color:#fff;line-height:1.35}
.kotari-textmsg-error{background:linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 75%, black))}
.kotari-textmsg-close{
  background:none;border:none;color:rgba(255,255,255,.75);font-size:1.1rem;
  cursor:pointer;padding:0 .2rem;line-height:1;flex-shrink:0;
}
.kotari-textmsg-close:hover{color:#fff}

/* ============ Notification style: center overlay ============ */
.kotari-center-overlay{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);pointer-events:none;
  transition:background .2s ease;
}
.kotari-center-overlay.show{background:rgba(0,0,0,.12);pointer-events:auto}
.kotari-center-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:1rem 1.5rem;
  min-width:220px;max-width:420px;text-align:center;font-size:.95rem;color:var(--text);
  opacity:0;transform:scale(.9);transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1);
}
.kotari-center-overlay.show .kotari-center-card{opacity:1;transform:scale(1)}
.kotari-center-error .kotari-center-card{border-color:var(--danger)}
.kotari-center-nudge{padding:1.5rem 1.75rem;max-width:380px}
.kotari-center-nudge-icon{
  width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto .7rem;
}
.kotari-center-nudge-label{font-size:.72rem;color:var(--text-3);font-weight:600;margin-bottom:.3rem;letter-spacing:.02em}
.kotari-center-nudge-text{font-size:.95rem;color:var(--text);margin-bottom:1rem;line-height:1.4}
.kotari-center-nudge-dismiss{min-width:120px}

/* ============ Notification style picker in Settings ============ */
.notification-style-picker{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.4rem;
}
.notification-style-option{
  padding:.75rem .5rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  transition:border-color .15s,background .15s;text-align:center;
}
.notification-style-option:hover{border-color:var(--accent-soft-border)}
.notification-style-option.active{border-color:var(--accent);background:var(--accent-soft)}
.notification-style-preview{
  width:60px;height:40px;background:var(--surface-2);border-radius:6px;position:relative;
  overflow:hidden;
}
.notification-style-preview-toast .notification-style-preview-dot{
  position:absolute;bottom:5px;right:5px;width:22px;height:9px;
  background:var(--accent);border-radius:3px;
}
.notification-style-preview-textmsg .notification-style-preview-bubble{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);width:34px;height:9px;
  background:var(--accent);border-radius:5px;
}
.notification-style-preview-center .notification-style-preview-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:14px;
  background:var(--accent);border-radius:3px;
}
.notification-style-option-label{font-size:.82rem;font-weight:600}
.notification-style-option-hint{font-size:.7rem;color:var(--text-3);line-height:1.2}
@media (max-width:480px){
  .notification-style-picker{grid-template-columns:1fr;gap:.4rem}
  .notification-style-option{flex-direction:row;text-align:left;padding:.6rem .75rem;gap:.7rem}
}

/* ============ Font picker preview card in Settings ============ */
.font-preview-card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:1.1rem 1.25rem;
  margin-top:1rem;
  margin-bottom:.75rem;
}
.font-preview-heading{
  font-size:1.4rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
  line-height:1.15;
  margin-bottom:.5rem;
  /* fontFamily set inline by updateFontPreview() */
}
.font-preview-numbers{
  font-size:1.15rem;
  font-weight:700;
  color:var(--accent);
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
  margin-bottom:.7rem;
}
.font-preview-body{
  font-size:.87rem;
  color:var(--text-2);
  line-height:1.5;
}

/* ============ Envelope budgeting mode ============ */
.budget-mode-toggle{
  display:inline-flex;background:var(--surface-2);border-radius:999px;padding:.25rem;margin-bottom:1.25rem;
}
.budget-mode-tab{
  padding:.45rem 1.1rem;border-radius:999px;border:none;background:none;color:var(--text-2);
  font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;
}
.budget-mode-tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}

.envelope-month-nav{
  display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem;
}
.envelope-month-label{font-weight:700;font-size:.95rem;min-width:150px;text-align:center}

.envelope-unallocated-banner{
  text-align:center;padding:1.1rem;border-radius:var(--r-sm);background:var(--accent-soft);
}
.envelope-unallocated-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);margin-bottom:.3rem}
.envelope-unallocated-value{font-family:var(--font-numbers);font-size:1.8rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.envelope-unallocated-check{display:inline-flex;vertical-align:-2px;color:var(--success)}
.envelope-unallocated-check:not(:empty){margin-right:.3rem}
.envelope-unallocated-banner.envelope-unallocated-zero{background:var(--success-soft)}
.envelope-unallocated-banner.envelope-unallocated-zero .envelope-unallocated-value{color:var(--success)}
.envelope-unallocated-banner.envelope-unallocated-negative{background:var(--danger-soft)}
.envelope-unallocated-banner.envelope-unallocated-negative .envelope-unallocated-value{color:var(--negative)}

.envelope-row{padding:.9rem 0;border-bottom:1px solid var(--border)}
.envelope-row:last-child{border-bottom:none}
.envelope-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.envelope-cat-name{font-weight:700;font-size:.9rem}
.envelope-available{font-family:var(--font-numbers);font-weight:700;font-size:.9rem;color:var(--text);font-variant-numeric:tabular-nums}
.envelope-available.overspent{color:var(--negative)}
.envelope-bar-track{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:.5rem}
.envelope-bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.envelope-bar-fill.overspent{background:var(--negative)}
.envelope-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.envelope-spent-of{font-size:.78rem;color:var(--text-2)}
.envelope-rollover{font-size:.75rem;font-weight:600;padding:.15rem .5rem;border-radius:999px}
.envelope-rollover.positive{color:#16a34a;background:color-mix(in srgb, #16a34a 13%, white)}
.envelope-rollover.negative{color:var(--negative);background:var(--negative-soft)}
.envelope-allocate-wrap{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.envelope-allocate-label{font-size:.75rem;color:var(--text-2)}
.envelope-allocate-input{
  width:80px;padding:.3rem .5rem;border-radius:6px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit;font-size:.85rem;text-align:right;
  font-variant-numeric:tabular-nums;
}
.envelope-allocate-input:focus{border-color:var(--accent);outline:none}

/* ============ Sample data callout ============ */
.sample-data-callout{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid var(--accent-soft-border);
}
.sample-data-callout-icon{
  width:38px;height:38px;border-radius:50%;background:var(--surface);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sample-data-callout-text{flex:1;min-width:180px}
.sample-data-callout-title{font-weight:700;font-size:.9rem;margin-bottom:.15rem}
.sample-data-callout-sub{font-size:.8rem;color:var(--text-2);line-height:1.4}