/* ═══════════════════════════════════════════════════
   BILLFLOW — Apple Card Design System
   Clean titanium, SF Pro spacing, frosted glass
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Backgrounds — blue-tinted surfaces, not neutral gray (own identity,
     not a generic dashboard). Surface 0 stays pure white; 1-4 step up in
     blue saturation for layering (cards on page, nested panels, etc). */
  --bg:    #ffffff;
  --bg2:   #F8FBFF;
  --bg3:   #F2F8FF;
  --bg4:   #E8F3FF;
  --bg5:   #DDEEFF;
  --glass: rgba(255,255,255,0.72);
  /* Liquid glass system */
  --glass-surface: rgba(255,255,255,0.68);
  --glass-border:  rgba(0,0,0,0.10);
  --glass-border-inner: rgba(255,255,255,0.80);
  --glass-highlight: rgba(255,255,255,0.55);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  --glass-modal: rgba(255,255,255,0.78);
  --glass-blur: 20px;
  /* Button height tokens */
  --btn-h:    36px;   /* standard action button */
  --btn-h-lg: 44px;   /* modal primary/cancel */
  --btn-h-sm: 28px;   /* compact / icon-only */
  --btn-fs:   13px;   /* standard font-size */
  --btn-fs-lg:14px;   /* modal font-size */
  --glass-blur-light: 12px;
  --sel-bg:     rgba(20,123,255,0.09);
  --sel-border: rgba(20,123,255,0.28);
  --sel-glow:   0 0 0 3px rgba(20,123,255,0.12);

  /* Text */
  --text:  #1d1d1f;
  --text2: #3a3a3d;
  --text3: #636366;
  --text4: #68686c;

  /* Borders — blue-tinted, matching the surface system */
  --bd:    rgba(20,123,255,.10);
  --bd2:   rgba(20,123,255,.18);

  /* Radii — Apple scale */
  --r:   10px;
  --rl:  14px;
  --rxl: 20px;
  --r2:  22px;

  /* Accent — Apple titanium blue */
  --ac:  #0B63CE;
  --acd: #0060c0;
  --acl: #EBF2FF;
  --act: #004ea8;

  /* Semantic colors */
  --green:  #34c759; --greenl: #e8faf0; --greent: #1a7a31;
  --orange: #ff9500; --orangel:#fff4e5; --oranget:#7d4800;
  --red:    #C5221F; --redl:   #fff0ef; --redt:   #8b1a15;
  --pu:  #1A5FFF; --pul: #eeeefd; --pud: #4040c8; --put: #2d2d9a;
  --te:  #34c759; --tel: #e8faf0; --tet: #1a7a31;
  --am:  #ff9500; --aml: #fff4e5; --amt: #7d4800;
  --re:  #C5221F; --rel: #fff0ef; --ret: #8b1a15;
  --gt:  #1a7a31; --rn:  #d70015;

  /* Shadows — subtle, blue-tinted for cohesion with the surface system */
  --sh-s:  0 1px 3px rgba(20,60,120,.07), 0 1px 2px rgba(20,60,120,.05);
  --sh-m:  0 4px 16px rgba(20,60,120,.09), 0 1px 4px rgba(20,60,120,.05);
  --sh-l:  0 12px 40px rgba(20,60,120,.13), 0 4px 12px rgba(20,60,120,.07);
}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:  #1c1c1e; --bg2: #2c2c2e; --bg3: #3a3a3c; --bg4: #48484a;
  --glass: rgba(28,28,30,0.85);
  --glass-surface: rgba(44,44,46,0.82);
  --glass-border:  rgba(255,255,255,0.10);
  --glass-border-inner: rgba(255,255,255,0.06);
  --glass-highlight: rgba(255,255,255,0.06);
  --glass-shadow: 0 8px 40px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.25);
  --glass-modal: rgba(32,32,34,0.88);
  --glass-blur: 24px;
  /* Button height tokens — same values, override here only if needed */
  --glass-blur-light: 14px;
  --sel-bg:     rgba(20,123,255,0.15);
  --sel-border: rgba(20,123,255,0.40);
  --sel-glow:   0 0 0 3px rgba(20,123,255,0.18);
  /* Improved contrast — WCAG AA compliant */
  --text:  #f5f5f7;                   /* 18:1 on bg  — AAA */
  --text2: #c8c8cf;                   /* improved contrast */
  --text3: #bcbcc0;                   /* improved contrast */
  --text4: #b6b6ba;
  --bd:  rgba(255,255,255,.10); --bd2: rgba(255,255,255,.18);
  --acl: #001f3f;
  --greenl:#0a2e15; --greent:#4cd964;
  --orangel:#2d1c00; --oranget:#ffb340;
  --redl:  #2d0c0b; --redt:  #ff6b63;
  --pul:   #1a1950; --put:   #9695f0;
  --tel:   #0a2e15; --tet:   #4cd964;
  --aml:   #2d1c00; --amt:   #ffb340;
  --rel:   #2d0c0b; --ret:   #ff6b63;
  --gt:    #4cd964; --rn:    #ff6b63;
  --sh-s:  0 1px 3px rgba(0,0,0,.3);
  --sh-m:  0 4px 16px rgba(0,0,0,.4);
  --sh-l:  0 12px 40px rgba(0,0,0,.6);
}}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);overflow-x:hidden;max-width:100vw}
#app-screen::after{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 55% 55% at 98% 2%,  rgba(18,214,192,0.32) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 2%  98%,  rgba(20,123,255,0.24) 0%, transparent 65%),
    radial-gradient(ellipse 35% 35% at 60% 15%,  rgba(26,95,255,0.14)  0%, transparent 60%);
  filter:blur(48px);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  #app-screen::after{
    background:
      radial-gradient(ellipse 55% 55% at 98% 2%,  rgba(18,214,192,0.22) 0%, transparent 65%),
      radial-gradient(ellipse 45% 45% at 2%  98%,  rgba(20,123,255,0.22) 0%, transparent 65%);
    filter:blur(56px);
  }
}}
body{
  font-family:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
input,select,button{font-family:inherit;font-size:13px;color:var(--text);cursor:pointer}
input,select{
  background:var(--bg);
  border:1px solid var(--bd2);
  border-radius:var(--r);
  padding:0 12px;height:38px;width:100%;outline:none;
  transition:border-color .18s,box-shadow .18s;
  color:var(--text);
  color-scheme:light dark;
}
input[type="checkbox"]:not(.neon-checkbox__input),input[type="radio"]:not(.neon-checkbox__input){
  width:16px;height:16px;padding:0;border-radius:3px;cursor:pointer;flex-shrink:0;
  accent-color:var(--ac);
}
input:focus,select:focus{
  border-color:var(--ac);
  box-shadow:0 0 0 3.5px rgba(20,123,255,.14);
}
/* iOS-style select: flat, no native OS chrome, consistent chevron everywhere */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
/* Dropdown options must always have explicit colors */
select option{
  background:#ffffff;
  color:#1d1d1f;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  input,select{background-color:var(--bg2);border-color:var(--bd2);color-scheme:dark}
  input::placeholder{color:var(--text3);opacity:1}
  input:focus,select:focus{background-color:var(--bg);border-color:var(--ac)}
  select option{
    background:#2c2c2e;
    color:#f5f5f7;
  }
  select option:checked,
  select option:focus{
    background:#147BFF;
    color:#ffffff;
  }
  optgroup{
    background:#2c2c2e;
    color:#8e8e93;
  }
}}
button{cursor:pointer;border:none;background:none}

/* ─── LOGIN ──────────────────────────────────────── */
#login-screen{
  display:grid;place-items:center;
  min-height:100vh;
  background:#f8f9fc;
  position:relative;
  overflow:hidden;
}
#login-screen::before{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(56,193,182,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 85% 80%, rgba(20,123,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,249,145,0.28) 0%, transparent 65%);
  filter:blur(32px);
}
#login-screen > *{position:relative;z-index:1;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  #login-screen{background:#111113;}
  #login-screen::before{
    background:
      radial-gradient(ellipse 80% 60% at 15% 20%, rgba(18,214,192,0.15) 0%, transparent 60%),
      radial-gradient(ellipse 70% 70% at 85% 80%, rgba(20,123,255,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 50% 50%, rgba(26,95,255,0.12) 0%, transparent 65%);
    filter:blur(40px);
  }
  /* Logo: switch to white in dark mode */
  #hsvg_login { filter:brightness(0) invert(1); opacity:.95; }
  #isvg        { filter:brightness(0) invert(1); opacity:.92; }
  #hsvg_sb     { filter:brightness(0) invert(1); opacity:.92; }
}}
.lcard{
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--bd);
  border-radius:var(--rxl);
  padding:40px 36px;
  width:380px;max-width:94vw;
  box-shadow:var(--sh-l);
}
.llogo{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.llogo-mk{
  width:42px;height:42px;
  background:linear-gradient(145deg,#0080ff,#0040d0);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
  box-shadow:0 4px 12px rgba(20,123,255,.35);
}
.llogo-nm{font-size:22px;font-weight:700;letter-spacing:-.5px}
.llogo-tg{
  font-size:10px;background:var(--acl);color:var(--ac);
  padding:3px 8px;border-radius:20px;font-weight:600;margin-left:4px;
  letter-spacing:.02em;
}
.l-title{font-size:20px;font-weight:700;margin-bottom:5px;letter-spacing:-.3px}
.l-sub{font-size:14px;color:var(--text2);margin-bottom:24px;line-height:1.5}
.l-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.l-field label{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.02em}
.l-field input{height:44px;font-size:15px;padding:0 14px;border-radius:var(--rl)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;display:flex;align-items:center}
.pw-eye svg{width:18px;height:18px;display:block}
.pw-eye:hover{color:var(--text)}
.l-btn{
  width:100%;height:44px;
  background:linear-gradient(180deg,#12D6C0,#147BFF);
  color:#fff;border:none;border-radius:var(--rl);
  font-size:15px;font-weight:600;cursor:pointer;margin-top:6px;
  transition:opacity .15s,transform .1s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 14px rgba(20,123,255,.4);
  letter-spacing:.01em;
}
.l-btn:hover{opacity:.9}
.l-btn:active{transform:scale(.985)}
.l-err{
  font-size:12px;color:var(--redt);background:var(--redl);
  border:1px solid rgba(255,59,48,.15);
  border-radius:var(--r);padding:10px 14px;margin-bottom:14px;
  display:none;align-items:center;gap:8px;
}
.l-err.show{display:flex}
.l-div{display:flex;align-items:center;gap:10px;margin:20px 0 14px;color:var(--text3);font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.l-div::before,.l-div::after{content:'';flex:1;height:1px;background:var(--bd2)}
.l-hint{font-size:12px;color:var(--text2);background:var(--bg2);border-radius:var(--rl);padding:12px 14px;line-height:1.9;border:1px solid var(--bd)}
.l-hint b{color:var(--text);font-weight:600}

/* ─── APP SHELL ──────────────────────────────────── */
#app-screen{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;overflow:hidden}
#app-screen.visible{display:grid !important;grid-template-columns:220px 1fr;grid-template-rows:1fr;transition:grid-template-columns .22s ease}
#app-screen.visible.sb-collapsed{grid-template-columns:56px 1fr}
@media(max-width:600px){
  #app-screen.visible,#app-screen.visible.sb-collapsed{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr;
  }
}
.layout{display:flex;flex:1;min-height:0;overflow:hidden}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.sb{
  width:220px;background:var(--bg);border-right:1px solid var(--bd);
  display:flex;flex-direction:column;flex-shrink:0;
  transition:width .22s cubic-bezier(.4,0,.2,1);
  position:relative;overflow-y:auto;overflow-x:hidden;z-index:100;
  max-height:100%;
}
.sb.collapsed{ width:52px; }

/* Logo row */
.s-logo{
  height:56px;padding:0 14px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;gap:10px;flex-shrink:0;overflow:hidden;
}
.sb.collapsed .s-logo{ padding:0;justify-content:center; }
.s-mk{ width:30px;height:30px;min-width:30px;flex-shrink:0; }
.s-logo-text{ transition:opacity .18s;white-space:nowrap;overflow:hidden;flex:1; }
.sb.collapsed .s-logo-text{ opacity:0;width:0;flex:0;pointer-events:none; }
.s-tg{
  font-size:9px;background:var(--acl);color:var(--ac);
  padding:2px 6px;border-radius:20px;font-weight:700;margin-left:4px;flex-shrink:0;
}

/* Toggle tab */
.sb-toggle{
  position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:14px;height:40px;border-radius:0 6px 6px 0;
  background:var(--bd);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;z-index:300;padding:0;color:var(--text3);
}
.sb-toggle:hover{ background:var(--ac);color:#fff; }
.sb-toggle svg{
  width:8px;height:8px;flex-shrink:0;pointer-events:none;stroke-width:3;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.sb.collapsed .sb-toggle svg{ transform:rotate(180deg); }
.sb-toggle-tip{ display:none !important; }

/* Nav scroll */
.nav{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:6px;scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }

/* Section dividers */
.ns{
  font-size:9px;font-weight:700;color:var(--text3);
  letter-spacing:.1em;text-transform:uppercase;
  padding:12px 6px 4px;white-space:nowrap;overflow:hidden;
}
.ns:not(:first-child){ border-top:1px solid var(--bd);margin-top:4px; }
.sb.collapsed .ns{
  opacity:0 !important;max-height:0 !important;
  padding:0 !important;border:none !important;margin:0 !important;
}

/* Nav items */
.ni{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
  cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);
  transition:background .12s,color .12s;user-select:none;
  position:relative;margin-bottom:1px;white-space:nowrap;
  width:100%;box-sizing:border-box;text-align:left;
}
.ni:hover{ background:var(--bg2);color:var(--text); }
.ni.on{ background:var(--acl);color:var(--ac);font-weight:600; }
.ni > svg{ width:17px;height:17px;min-width:17px;flex-shrink:0;opacity:.7;transition:opacity .12s; }
.ni:hover > svg,.ni.on > svg{ opacity:1; }
.ni-label{ flex:1;overflow:hidden;text-overflow:ellipsis; }
.n-badge{
  font-size:10px;font-weight:700;min-width:18px;height:18px;
  padding:0 5px;border-radius:20px;background:var(--ret);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ni.on .n-badge{ background:rgba(20,123,255,.15);color:var(--acd); }

/* Collapsed: icon-only */
.sb.collapsed .ni{
  padding:9px 0 !important;justify-content:center !important;
  gap:0 !important;width:100% !important;border-radius:8px !important;
}
.sb.collapsed .ni > svg{
  width:18px !important;height:18px !important;
  min-width:18px !important;margin:0 !important;
}
.sb.collapsed .ni-label,.sb.collapsed .n-badge{ display:none !important; }
.sb.collapsed .ni[data-label]::after{
  content:attr(data-label);
  position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:#1c1c1e;color:#fff;font-size:11px;font-weight:500;
  padding:4px 10px;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:500;
}
.sb.collapsed .ni[data-label]:hover::after{ opacity:1; }

/* Footer */
.sf{ padding:6px;border-top:1px solid var(--bd);flex-shrink:0; }
.u-row{
  display:flex;align-items:center;gap:8px;padding:7px 8px;
  border-radius:9px;cursor:pointer;transition:background .12s;overflow:hidden;
}
.u-row:hover{ background:var(--bg2); }
.sb.collapsed .u-row{ justify-content:center;padding:8px 0; }
.sb.collapsed .u-info{ display:none; }
.av{
  width:30px;height:30px;min-width:30px;border-radius:50%;
  background:linear-gradient(135deg,#1A5FFF,#147BFF);
  position:relative;overflow:hidden;flex-shrink:0;
  font-size:11px;font-weight:700;color:#fff;
}
.av > span{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1; }
.av.has-photo > span{ opacity:0 !important; visibility:hidden !important; }
.av > img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:2; }
.av > img.visible{ opacity:1; }
.u-info{ flex:1;min-width:0;overflow:hidden; }
/* Sign-out button — a full-width row of its own below the profile row,
   not an icon nested inside it. The old layout put the button INSIDE
   the clickable .u-row (needing event.stopPropagation() to avoid also
   opening the profile modal), and hid it entirely when the sidebar was
   collapsed rather than dealing with it overlapping the avatar — a
   dedicated full-width row handles both: nothing to overlap, and in the
   collapsed state it just centers the icon like every other sidebar
   button instead of disappearing. */
.u-logout{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:2px;padding:8px;
  border-radius:9px;border:1px solid var(--re);background:transparent;
  color:var(--re);font-size:12px;font-weight:500;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.u-logout:hover{
  background:var(--rel);color:var(--re);border-color:rgba(255,59,48,.22);
}
.sb.collapsed .u-logout-label{ display:none; }
.sb.collapsed .u-logout{ padding:8px 0; }

/* Hotfix 2026-08-27: Sign out remains visually destructive on mobile too. */
.mm-card[aria-label="Log out"]{ border-color:var(--re); }

/* ── KPI cards ── */
@keyframes kpiUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(340px) rotate(540deg); opacity: 0; }
}
.dash-kpi { animation: kpiUp .3s cubic-bezier(.22,1,.36,1) both; }
.dash-kpi:nth-child(1){animation-delay:.04s}
.dash-kpi:nth-child(2){animation-delay:.10s}
.dash-kpi:nth-child(3){animation-delay:.16s}
.dash-kpi:nth-child(4){animation-delay:.22s}
.kpi-num { animation: kpiUp .4s cubic-bezier(.22,1,.36,1) .18s both; }

/* Top bar */
.mn{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;max-width:100%}
.topb{
  background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bd);
  height:56px;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.sc{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 24px;min-width:0;background:transparent}
.sc>*{width:100%;box-sizing:border-box}
.sc::-webkit-scrollbar{width:4px}
.sc::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
/* ── MODERN SCROLL INDICATORS ──────────────────── */
.scroll-fade{position:relative;}
.scroll-fade::after{
  content:'';position:sticky;bottom:0;display:block;
  height:28px;background:linear-gradient(to top,var(--bg),transparent);
  pointer-events:none;margin-top:-28px;border-radius:0 0 var(--rl) var(--rl);
}
/* ── ELEGANT SCROLLBARS ──────────────────────────────── */
:is(*){
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .3s;
}
*:hover {
  scrollbar-color: rgba(120,120,128,.35) transparent;
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:transparent;
  border-radius:10px;
  transition:background .3s;
}
*:hover::-webkit-scrollbar-thumb { background:rgba(120,120,128,.35); }
*:hover::-webkit-scrollbar-thumb:hover { background:rgba(120,120,128,.6); }
.mo .md::-webkit-scrollbar { width:4px; }
.mo .md::-webkit-scrollbar-thumb { background:transparent; border-radius:10px; }
.mo .md:hover::-webkit-scrollbar-thumb { background:rgba(120,120,128,.3); }
:is(.sc::-webkit-scrollbar){ width:5px; }
:is(.sc::-webkit-scrollbar-thumb){ background:transparent; border-radius:10px; }
.sc:hover::-webkit-scrollbar-thumb { background:rgba(120,120,128,.3); }

.tb-l{display:flex;align-items:center;gap:12px}
.tb-r{display:flex;align-items:center;gap:8px}
.pg-t{font-size:16px;font-weight:700;letter-spacing:-.3px}

/* Top bar buttons */
.ib{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 14px;height:var(--btn-h);border-radius:var(--r);
  font-size:var(--btn-fs);font-weight:500;line-height:1;
  border:1px solid var(--bd2);background:var(--bg);color:var(--text);
  transition:background .12s,border-color .12s;white-space:nowrap;
  box-shadow:var(--sh-s);cursor:pointer;font-family:inherit;
  flex-shrink:0;
}
.ib:not(.p):hover{background:var(--bg2)}
.ib.p{
  background:linear-gradient(135deg, #0060C0, #0A6E63) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 2px 8px rgba(20,123,255,.26) !important;
  font-weight:600 !important;
  padding:0 18px !important;
  letter-spacing:-.1px;
}
.ib.p:hover,
.btn-add:hover{
  opacity:.88 !important;
  box-shadow:0 4px 16px rgba(20,123,255,.38) !important;
  color:#fff !important;
}
.ib svg{width:14px;height:14px;flex-shrink:0;display:block}

.mnav{
  display:flex;align-items:center;gap:3px;
  background:var(--bg2);border:1px solid var(--bd);
  border-radius:var(--r);padding:3px 5px;height:34px;
}
.mnav button{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:7px;color:var(--text2);
  transition:background .1s;
}
.mnav /* button:hover removed — was overriding gradient buttons */
.mnav button svg{width:14px;height:14px}
.mnav-lbl{
  font-size:13px;font-weight:600;color:var(--text);
  min-width:80px;max-width:140px;text-align:center;letter-spacing:-.2px;white-space:nowrap;
}
/* Visible on every page — not just Bills — so it's always obvious you're
   not looking at the current month, without needing to reopen the picker. */
.mnav button.is-other-month{
  background:var(--aml);border-radius:7px;
}
.mnav button.is-other-month .mnav-lbl{color:var(--amt)}


/* ── CUSTOM NUMBER INPUTS ───────────────────────── */
input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.num-wrap{display:flex;align-items:center;border:1px solid var(--bd2);border-radius:var(--r);overflow:hidden;background:var(--bg);}
.num-wrap input{flex:1;border:none!important;border-radius:0!important;text-align:center;min-width:0;background:transparent;}
.num-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:400;
  background:var(--bg2);border:none;cursor:pointer;color:var(--text2);flex-shrink:0;
  transition:background .1s,color .1s;user-select:none;-webkit-tap-highlight-color:transparent;}
.num-btn:hover{background:var(--bg3);color:var(--text);}
.num-btn:active{background:var(--acl);color:var(--ac);}

/* ─── KPI CARDS ──────────────────────────────────── */
.kg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;max-width:100%}
.kp{
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--rl);
  padding:16px 18px;
  box-shadow:var(--sh-s);
  transition:transform .15s,box-shadow .15s;
}
.kp:hover{transform:translateY(-1px);box-shadow:var(--sh-m)}
.kl{font-size:11px;font-weight:600;color:var(--text2);margin-bottom:7px;display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.05em}
.kl svg{width:13px;height:13px;flex-shrink:0}
.kv{font-size:var(--fs-3xl);font-weight:var(--fw-bold);margin-bottom:4px;letter-spacing:-.6px;line-height:1.05;color:var(--text)}
.ks{font-size:11px;color:var(--text2)}
.ks.up{color:var(--greent)}
.ks.dn{color:var(--rn)}

/* ─── PANELS ─────────────────────────────────────── */
.pn{
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--rl);
  overflow:visible;
  box-shadow:var(--sh-s);
}
.st-body{
  animation:stFadeIn .15s ease;
}
@keyframes stFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ph[style*="cursor:pointer"]:hover{background:var(--bg2)!important;}
.ph{
  padding:13px 18px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg);
}
.pt{font-size:var(--fs-base);font-weight:var(--fw-semi);letter-spacing:-.1px;color:var(--text);display:flex;align-items:center;gap:7px}
.pa{
  font-size:12px;font-weight:500;color:var(--ac);
  background:none;border:none;cursor:pointer;padding:0;
  transition:opacity .12s;
}
.pa:hover{opacity:.7}
.badge{
  font-size:var(--fs-xs);font-weight:var(--fw-semi);
  padding:3px 9px;border-radius:20px;
  white-space:nowrap;display:inline-flex;align-items:center;
  letter-spacing:.03em;line-height:1;
}

/* ─── MODAL ──────────────────────────────────────── */
.mo{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  z-index:1000;animation:fi .2s;
}
@keyframes fi{from{opacity:0}to{opacity:1}}
.md{
  padding:20px 0 0;
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}
@keyframes glass-shine{
  0%{opacity:0;transform:translateX(-100%) skewX(-15deg)}
  50%{opacity:.12}
  100%{opacity:0;transform:translateX(200%) skewX(-15deg)}
}
@keyframes su{from{transform:scale(.94) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.md-ico svg{width:24px;height:24px;color:inherit;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ═══════════════════════════════════════════════════════════
   MODAL DESIGN SYSTEM — canonical, single source of truth.
   Consolidated from 7 previously scattered/conflicting blocks
   (base + glass-morphism pass + "Modal improvements" pass +
   "Rocket Money bottom-sheet" pass + typography-token pass) that
   used to redefine .md-ttl/.md-sub/.md-acts/.btn-ok/.btn-cancel
   in different places with competing !important values. Values
   below reproduce the same rendered result those passes produced
   together, verified against a computed-style snapshot before
   and after this consolidation — no visual change, one place to
   edit going forward. More specific selectors (.md-hdr .md-ttl,
   html[data-theme="dark"] .btn-cancel, @media breakpoints, etc.)
   still correctly override these base values where intended.
   ═══════════════════════════════════════════════════════════ */
.md-ttl{
  font-size:var(--bf-type-modal-title);font-weight:800;text-align:center;
  letter-spacing:-.025em;padding:22px 28px 0;line-height:1.24;
  color:var(--text);
}
.md-sub{
  font-size:var(--bf-type-body);color:var(--text3);text-align:center;
  line-height:var(--bf-leading-relaxed);padding:6px 28px 0;margin-top:3px;
}
.md-form{
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;overflow-x:hidden;
  flex:1;min-height:0;
  padding:16px 24px 16px;
  margin:0;
  scrollbar-width:thin;
  scrollbar-color:var(--bd2) transparent;
}
.md-form::-webkit-scrollbar{width:4px}
.md-form::-webkit-scrollbar-track{background:transparent}
.md-form::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:4px}
.md-form::-webkit-scrollbar-thumb:hover{background:var(--text3)}
.md-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.md-toggle-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 2px;
}
.md-toggle-row .md-toggle-label{
  font-size:13px;font-weight:500;color:var(--text);line-height:1.4;
}
.md-fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.veh-suggest-box{
  position:absolute;top:100%;left:0;right:0;z-index:50;margin-top:4px;
  background:var(--bg);border:1.5px solid var(--bd2);border-radius:var(--r);
  max-height:190px;overflow-y:auto;box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.veh-suggest-item{
  padding:9px 12px;font-size:13px;color:var(--text);cursor:pointer;
  transition:background .1s;
}
.veh-suggest-item:hover{background:var(--bg2)}
.veh-suggest-item:not(:last-child){border-bottom:.5px solid var(--bd)}
#modal-box, .md {
  border-radius:24px;
  box-shadow:var(--sh-l);
}
.md-acts{
  display:flex;gap:10px !important;
  padding:14px 20px !important;
  flex-shrink:0;
  border-top:.5px solid var(--bd);
  background:var(--glass-surface);
  backdrop-filter:blur(var(--glass-blur-light));
  -webkit-backdrop-filter:blur(var(--glass-blur-light));
  border-radius:0 0 var(--rxl) var(--rxl);
  position:relative;
  z-index:2;
  margin-top:14px;
}
/* Subtle scroll shadow above actions */
.md-acts::before{
  content:'';
  position:absolute;
  top:-16px;left:0;right:0;height:16px;
  background:linear-gradient(to top,var(--bg) 30%,transparent 100%);
  pointer-events:none;
}
.md-acts button{
  flex:1;height:42px;border-radius:10px;
  font-size:14px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;
}
.md-acts button svg{width:15px;height:15px}
.btn-ok{
  background:linear-gradient(135deg,#0060C0,#0A6E63) !important;color:#fff;
  border:0;border-color:transparent !important;border-radius:12px !important;
  height:44px !important;padding:0 22px;
  font-size:14px !important;font-weight:600 !important;
  font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s,box-shadow .15s,opacity .15s,transform .15s !important;
  box-shadow:0 4px 16px rgba(20,123,255,.28) !important;
}
.btn-ok:hover{
  opacity:.88 !important;transform:translateY(-1px) !important;
  box-shadow:0 4px 24px rgba(20,123,255,.45), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.btn-ok.red{background:linear-gradient(180deg,#ff5a52,#ff3b30);box-shadow:0 3px 10px rgba(255,59,48,.3)}
.btn-cancel{
  background:var(--bg2);color:var(--text2);
  border:1px solid var(--bd);border-radius:12px !important;
  height:44px !important;padding:0 18px;
  font-size:14px !important;font-weight:600 !important;
  font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,opacity .15s,transform .15s !important;
}
.btn-cancel:hover{background:var(--bg3) !important;border-color:var(--bd2) !important;color:var(--text) !important;}
/* Deterministic win over the later "typography audit" pass (line ~6560+):
   .btn-ok/.btn-cancel are modal-only in this codebase (only ever rendered
   into #modal-box by openModal()), so scoping here both fixes a same-
   specificity/!important source-order ambiguity and correctly documents
   that these two button styles are a modal-footer concern. */
#modal-box .btn-ok,#modal-box .btn-cancel{font-size:14px !important}

/* Shared dialog close control. Kept in the modal design system instead of
   inline markup so hit-area, focus-visible and mobile behavior stay uniform. */
.md-close{
  position:absolute;top:12px;right:12px;z-index:4;
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--bd2);color:var(--text2);
  cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
}
.md-close:hover{background:var(--bg3);border-color:var(--bd2);color:var(--text)}
.md-close:focus-visible{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(20,123,255,.18)}
@media(max-width:768px){
  .md-close{width:44px;height:44px;top:10px;right:10px;border-radius:12px}
}

/* ── MODAL DESIGN SYSTEM ──────────────────────────────────────────── */
/* md-fld label */
.md-fld label{font-size:11px;font-weight:600;color:var(--ac);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .md-fld label{ color:#fff; }
}}
/* md-fld inputs — uniform height & style */
.md-fld input,.md-fld select,.md-fld textarea{
  height:40px;padding:0 12px;
  border:1px solid var(--bd2);border-radius:var(--rl);
  background:var(--bg2);color:var(--text);
  font-size:13px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
  width:100%;box-sizing:border-box;
}
.md-fld textarea{height:auto;min-height:72px;padding:10px 12px;resize:vertical}
.md-fld input:focus,.md-fld select:focus,.md-fld textarea:focus{
  border-color:var(--ac);outline:none;
  box-shadow:0 0 0 3px rgba(20,123,255,.12);
  background:var(--bg);
}
.md-fld input::placeholder,.md-fld textarea::placeholder{color:var(--text3);opacity:1}
/* select arrow */
.md-fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
/* date input */
.md-fld input[type="date"]{padding-right:10px}
/* file input — the native "Choose File" button + filename label don't
   respect the same height/padding box as text inputs by default, which is
   what caused the button+text to spill outside the rounded input border.
   Style the button via ::file-selector-button and keep the filename text
   truncated instead of overflowing. */
.md-fld input[type="file"]{
  display:flex;align-items:center;
  height:40px;padding:0 6px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:12px;color:var(--text2);
  cursor:pointer;
}
.md-fld input[type="file"]::file-selector-button{
  flex-shrink:0;
  margin-right:10px;
  height:28px;padding:0 12px;
  border:none;border-radius:8px;
  background:var(--bg3);color:var(--text);
  font-size:12px;font-weight:600;font-family:inherit;
  cursor:pointer;
}
.md-fld input[type="file"]::file-selector-button:hover{background:var(--bd2)}
.md-fld input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.5;cursor:pointer;filter:var(--cal-filter, none);
}
/* checkbox in md-fld */
/* neon-checkbox handles all checkboxes — see .neon-checkbox CSS */
.md-fld input[type="radio"]{
  width:16px;height:16px;flex-shrink:0;
  appearance:none;border:2px solid var(--bd2);border-radius:50%;
  background:var(--bg2);cursor:pointer;
  transition:background .12s,border-color .12s;
}
.md-fld input[type="radio"]:checked{
  border-color:var(--ac);border-width:4px;background:var(--ac);
  box-shadow:inset 0 0 0 2px var(--bg2);
}
/* hover states — merged into the canonical MODAL DESIGN SYSTEM block (line ~628). */
.btn-ok:active{opacity:1;transform:translateY(0)}
/* Section dividers inside md-form */
.md-section{
  border-top:1px solid var(--bd);
  padding-top:14px;margin-top:2px;
}
.md-section-title{
  font-size:11px;font-weight:700;color:var(--ac);
  text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:12px;display:flex;align-items:center;gap:6px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .md-section-title{ color:#fff; }
}}
/* Amount mode radio group */
.md-radio-group{
  display:flex;
  background:var(--bg3);
  border-radius:var(--rl);
  padding:3px;
  gap:2px;
  border:1px solid var(--bd);
}
.md-radio-group label{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;border-radius:calc(var(--rl) - 2px);
  cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);
  transition:all .18s cubic-bezier(.4,0,.2,1);
  background:transparent;border:none;user-select:none;
}
.md-radio-group label:hover{
  color:var(--text);background:rgba(255,255,255,.06);
}
.md-radio-group label:has(input:checked){
  background:var(--ac);
  color:#fff;
  box-shadow:0 2px 8px rgba(20,123,255,.35);
}
/* Hide the actual radio input — visual selection is via label style */
.md-radio-group label input[type="radio"]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}

/* Personal/Business loan toggle keeps its own compact pill styling
   (uppercase, tighter tracking) but the solid brand-blue selected fill
   above is now the shared standard for every .md-radio-group toggle,
   not a one-off exception — a subtle text-color-only highlight elsewhere
   (like the Amount Input Mode toggle in this same modal) made the choice
   blend into the unselected option at a glance. */
#ln-owner-group label{text-transform:uppercase;letter-spacing:.03em;font-size:11.5px}


/* ════════════════════════════════════════════════════════════════════════
   LIQUID GLASS DESIGN SYSTEM
   Applies to: modals, selectable buttons, segmented controls, date pickers
   ════════════════════════════════════════════════════════════════════════ */

/* ── Glass surface utility ──────────────────────────────────────────── */
.glass{
  background:var(--glass-surface);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.glass-light{
  background:var(--glass-surface);
  backdrop-filter:blur(var(--glass-blur-light));
  -webkit-backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--glass-border);
}

/* .md-acts glass surface — merged into the canonical MODAL DESIGN SYSTEM block above. */

/* ── Modal field inputs glass treatment ──────────────────────────────── */
:is(.md-fld input,.md-fld select,.md-fld textarea){
  background:var(--bg2) !important;
  border-color:var(--bd) !important;
  transition:border-color .15s,box-shadow .15s,background .15s !important;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .md-fld input,.md-fld select,.md-fld textarea{
    background:rgba(255,255,255,0.04) !important;
    color:var(--text) !important;
  }
  .md-fld select option{background:#2c2c2e;color:#f5f5f7}
  .md-fld select optgroup{background:#2c2c2e;color:#8e8e93}
}}
:is(.md-fld input:focus,.md-fld select:focus,.md-fld textarea:focus){
  background:rgba(20,123,255,0.04) !important;
  border-color:var(--ac) !important;
  box-shadow:var(--sel-glow) !important;
}

/* ── GLASS SELECTABLE BUTTON (unified pattern) ───────────────────────
   Used in: md-radio-group, hs-ctrl (half selector), any toggle group   */
.glass-sel{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius:var(--rl);
  border:1px solid var(--bd);
  background:var(--bg2);
  color:var(--text2);
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  user-select:none;
}
.glass-sel:hover{
  background:var(--bg3);
  border-color:var(--bd2);
  color:var(--text);
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
.glass-sel.active,
.glass-sel[aria-selected="true"],
.glass-sel.selected{
  background:var(--sel-bg);
  border-color:var(--sel-border);
  color:var(--ac);
  font-weight:600;
  box-shadow:var(--sel-glow), 0 2px 8px rgba(20,123,255,0.12);
}
.glass-sel:disabled,.glass-sel[disabled]{
  opacity:.4;pointer-events:none;
}
.glass-sel:focus-visible{
  outline:2px solid var(--ac);outline-offset:2px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .glass-sel{background:rgba(255,255,255,0.04)}
  .glass-sel:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.14)}
  .glass-sel.active,.glass-sel.selected{background:var(--sel-bg)}
}}

/* ── SEGMENTED CONTROL (hs-ctrl upgrade) ─────────────────────────────── */
.hs-ctrl{
  background:var(--bg2) !important;
  border:1px solid var(--bd) !important;
  box-shadow:inset 0 1px 0 var(--glass-highlight), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.hs-btn{
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--text3) !important;
  transition:all .2s cubic-bezier(.4,0,.2,1) !important;
}
.hs-btn:hover{
  background:var(--bg2) !important;
  border-color:var(--bd2) !important;
  color:var(--text2) !important;
}
.hs-btn.active{
  background:var(--sel-bg) !important;
  border-color:var(--sel-border) !important;
  color:var(--ac) !important;
  box-shadow:var(--sel-glow), 0 2px 8px rgba(20,123,255,0.10) !important;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .hs-ctrl{background:rgba(255,255,255,0.03) !important}
  .hs-btn:hover{background:rgba(255,255,255,0.06) !important}
}}

/* ── md-radio-group dark mode ─────────────────────────────────────── */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .md-radio-group{background:rgba(255,255,255,0.06);border-color:var(--glass-border)}
  .md-radio-group label:has(input:checked){
    background:var(--ac);
    color:#fff;
    box-shadow:0 2px 8px rgba(20,123,255,.35);
  }
}}

/* ── Glass modal internal sections ───────────────────────────────────── */
:is(.md-section){
  border-top:1px solid var(--glass-border) !important;
  padding-top:14px;margin-top:2px;
}
:is(.md-section-title){
  font-size:11px;font-weight:700;color:var(--ac);
  text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:12px;
}

/* ── .lcard (login card) glass upgrade ───────────────────────────────── */
:is(.lcard){
  background:var(--glass-modal) !important;
  backdrop-filter:blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight) !important;
}

/* ── Sidebar glass surface ────────────────────────────────────────────── */
:is(.sb){
  background:var(--bg) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ── Topbar glass surface ─────────────────────────────────────────────── */
:is(.topb){
  background:var(--glass-surface) !important;
  backdrop-filter:blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) !important;
  border-bottom:1px solid var(--glass-border) !important;
}

/* ── KPI cards glass ──────────────────────────────────────────────────── */
:is(.kp){
  background:var(--glass-surface);
  backdrop-filter:blur(var(--glass-blur-light));
  -webkit-backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  transition:box-shadow .2s, transform .2s;
}
:is(.kp:hover){
  box-shadow:var(--glass-shadow), 0 4px 24px rgba(0,0,0,0.10), inset 0 1px 0 var(--glass-highlight);
  transform:translateY(-1px);
}

/* ── .af (add form) glass ─────────────────────────────────────────────── */
.af{
  background:var(--glass-surface) !important;
  backdrop-filter:blur(var(--glass-blur-light));
  -webkit-backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight) !important;
}

/* .btn-ok / .btn-cancel glass glow — merged into the canonical MODAL DESIGN SYSTEM block above. */

/* ── .bx (bills container) glass ─────────────────────────────────────── */
.bx{
  background:var(--glass-surface);
  backdrop-filter:blur(var(--glass-blur-light));
  -webkit-backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* ── .pn (panel) glass ───────────────────────────────────────────────── */
:is(.pn){
  background:var(--glass-surface);
  backdrop-filter:blur(var(--glass-blur-light));
  -webkit-backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* ── hc-panel (half content) glass ──────────────────────────────────── */
.hc-panel{
  background:var(--glass-surface) !important;
  backdrop-filter:blur(var(--glass-blur-light)) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur-light)) !important;
  border:1.5px solid var(--sel-border) !important;
  box-shadow:var(--glass-shadow), var(--sel-glow) !important;
}

/* ── Date input calendar icon ─────────────────────────────────────────── */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(40%) sepia(50%) saturate(300%) hue-rotate(190deg);
  opacity:.7;cursor:pointer;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(80%) sepia(10%) saturate(200%) hue-rotate(190deg);
  }
}}

/* ── .ib button glass treatment ──────────────────────────────────────── */
:is(.ib){
  height:var(--btn-h) !important;
  background:var(--bg2);
  border:1px solid var(--bd);
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
.ib:hover{
  background:var(--bg3);
  border-color:var(--bd2);
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .ib{background:rgba(255,255,255,0.04)}
  .ib:hover{background:rgba(255,255,255,0.08)}
}}

/* ── App background glow fix for glass contrast ─────────────────────── */
#app-screen::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(20,123,255,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 90%, rgba(18,214,192,0.12) 0%, transparent 60%);
  pointer-events:none;z-index:0;
}

/* ════════════════════════════════════════════════════════════════════════
   BOUNCY TOGGLE — Premium switch component
   Uses platform colors: --ac (#147BFF) when ON, --bg3 when OFF
   ════════════════════════════════════════════════════════════════════════ */
.bf-toggle-wrap{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.bf-toggle-wrap span{font-size:13px;font-weight:500;color:var(--text2);transition:color .3s}
.bf-toggle-wrap.on span{color:var(--text)}

/* The track */
.bf-toggle{
  position:relative;
  width:36px;height:20px;
  border-radius:10px;
  flex-shrink:0;
  background:var(--bg3);
  border:1.5px solid var(--bd2);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
  cursor:pointer;outline:none;
  -webkit-tap-highlight-color:transparent;
}
.bf-toggle:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ON state */
.bf-toggle.on{
  background:var(--bf-on-color, var(--ac));
  border-color:var(--bf-on-color, var(--acd));
  box-shadow:0 0 0 2px rgba(20,123,255,.12);
}

/* Glow layer — removed for discretion */
.bf-toggle::before{content:none}

/* Thumb */
.bf-toggle-thumb{
  position:absolute;
  top:2px;left:2px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--bg);
  box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7);
  transition:
    transform .35s cubic-bezier(0.68,-0.55,0.27,1.55),
    width .12s ease,
    box-shadow .25s ease;
  will-change:transform;
}
.bf-toggle.on .bf-toggle-thumb{
  transform:translateX(16px);
  box-shadow:0 1px 4px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.8);
}
/* Squish on press */
.bf-toggle.pressing .bf-toggle-thumb{width:16px}
.bf-toggle.on.pressing .bf-toggle-thumb{transform:translateX(12px);width:16px}

/* Status dot — hidden in smaller size for cleanliness */
.bf-toggle-dot{display:none}

/* Ripple ping on activation */
@keyframes bf-ping{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.4}
  100%{transform:translate(-50%,-50%) scale(2.8);opacity:0}
}
.bf-toggle-ripple{
  position:absolute;
  top:50%;left:50%;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--ac);
  pointer-events:none;
  animation:bf-ping .6s ease-out forwards;
}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .bf-toggle-thumb{
    box-shadow:0 1px 4px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12);
  }
}}

/* ════════════════════════════════════════════════════════════════════════
   NEON CHECKBOX — adapted from corrected HTML version (doc #18)
   Colors use BillFlow vars: --ac, --bg2, --bd2
   ════════════════════════════════════════════════════════════════════════ */
:is(:root){--nc-size:22px}

.neon-checkbox{
  position:relative;display:inline-flex;align-items:center;
  gap:9px;cursor:pointer;user-select:none;
}
.neon-checkbox__input{
  position:absolute;inset:0;opacity:0;cursor:pointer;z-index:5;
  width:100%;height:100%;
}
.neon-checkbox__control{
  position:relative;width:var(--nc-size);height:var(--nc-size);
  display:inline-block;flex:0 0 var(--nc-size);
}
.neon-checkbox__glow{
  position:absolute;inset:-2px;border-radius:8px;
  background:var(--ac);filter:blur(10px);opacity:0;
  transition:opacity .4s ease;z-index:0;
}
.neon-checkbox.is-checked .neon-checkbox__glow{opacity:.18}
.neon-checkbox__box{
  position:absolute;inset:0;
  background:var(--bg2);
  border-radius:6px;border:2px solid var(--bd2);
  transition:all .4s ease;overflow:visible;
}
.neon-checkbox.is-checked .neon-checkbox__box{
  border-color:var(--ac);background:rgba(20,123,255,.10);
}
.neon-checkbox__check-container{
  position:absolute;inset:2px;
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.neon-checkbox__check{
  width:80%;height:80%;fill:none;
  stroke:var(--ac);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
  transform-origin:center;
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.neon-checkbox.is-checked .neon-checkbox__check{stroke-dashoffset:0;transform:scale(1.1)}
.neon-checkbox__borders{
  position:absolute;inset:0;border-radius:6px;
  overflow:hidden;z-index:3;pointer-events:none;
}
.neon-checkbox__border-line{
  position:absolute;background:var(--ac);opacity:0;
  transition:opacity .4s ease;
}
.neon-checkbox.is-checked .neon-checkbox__border-line{opacity:1}
.nc-line-1{top:0;left:-100%;width:40px;height:1px;animation:ncFlow1 2s linear infinite}
.nc-line-2{top:-100%;right:0;width:1px;height:40px;animation:ncFlow2 2s linear infinite}
.nc-line-3{bottom:0;right:-100%;width:40px;height:1px;animation:ncFlow3 2s linear infinite}
.nc-line-4{bottom:-100%;left:0;width:1px;height:40px;animation:ncFlow4 2s linear infinite}
.neon-checkbox__particles,.neon-checkbox__rings,.neon-checkbox__sparks{
  position:absolute;inset:0;pointer-events:none;
}
.nc-particle{
  position:absolute;width:4px;height:4px;top:50%;left:50%;
  border-radius:9999px;background:var(--ac);box-shadow:0 0 6px var(--ac);opacity:0;
}
.neon-checkbox.animate .nc-particle{animation:ncParticle .6s ease-out forwards}
.nc-ring{
  position:absolute;inset:-20px;border-radius:9999px;
  border:1px solid var(--ac);opacity:0;transform:scale(0);
}
.neon-checkbox.animate .nc-ring{animation:ncRing .6s ease-out forwards}
.nc-spark{
  position:absolute;width:20px;height:1px;top:50%;left:50%;
  opacity:0;background:linear-gradient(to right,var(--ac),transparent);
  transform-origin:left center;
}
.neon-checkbox.animate .nc-spark{animation:ncSpark .6s ease-out forwards}
@keyframes ncFlow1{0%{transform:translateX(0)}100%{transform:translateX(200%)}}
@keyframes ncFlow2{0%{transform:translateY(0)}100%{transform:translateY(200%)}}
@keyframes ncFlow3{0%{transform:translateX(0)}100%{transform:translateX(-200%)}}
@keyframes ncFlow4{0%{transform:translateY(0)}100%{transform:translateY(-200%)}}
@keyframes ncParticle{
  0%{transform:translate(-50%,-50%) scale(1);opacity:0}
  20%{opacity:1}
  100%{transform:translate(calc(-50% + var(--x,20px)),calc(-50% + var(--y,20px))) scale(0);opacity:0}
}
@keyframes ncRing{0%{transform:scale(0);opacity:1}100%{transform:scale(2);opacity:0}}
@keyframes ncSpark{
  0%{transform:rotate(var(--r,0deg)) translateX(0) scale(1);opacity:1}
  100%{transform:rotate(var(--r,0deg)) translateX(30px) scale(0);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .neon-checkbox *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* hide native checkbox — neon takes over */
.neon-checkbox .neon-checkbox__input{pointer-events:all}
.md-fld input[type="checkbox"]:not(.neon-checkbox__input){all:revert;width:16px!important;height:16px!important;min-width:16px;cursor:pointer;accent-color:var(--ac)}

/* ── SELECTABLE CARD (radio group alternative) ──────────────────────── */
.sel-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border:1.5px solid var(--bd2);border-radius:var(--rl);
  cursor:pointer;background:var(--bg2);
  transition:all .15s cubic-bezier(.4,0,.2,1);
  position:relative;user-select:none;margin-bottom:6px;
}
.sel-card:hover{background:var(--bg3);border-color:var(--text3)}
.sel-card:has(input:checked){
  border-color:var(--ac);background:var(--acl);
}
.sel-card-check{
  width:20px;height:20px;border-radius:50%;
  background:var(--bg3);border:1.5px solid var(--bd2);
  display:flex;align-items:center;justify-content:center;
  color:transparent;flex-shrink:0;
  transition:all .15s;
}
.sel-card:has(input:checked) .sel-card-check{
  background:var(--ac);border-color:var(--ac);color:#fff;
}

/* ── DARK MODE TARGETED OVERRIDES ─────────────────────────────── */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  /* KPI cards */
  .kl{color:var(--text3)}
  .kv{color:var(--text)}
  .ks{color:var(--text3)}
  /* Sidebar nav active state — brighter text. --acd (#0060c0) was chosen
     here despite the comment; it's a medium-dark blue, not actually
     bright, and against the selected item's own blue-tinted background
     the label text nearly disappeared. Match the working, already-tested
     light blue used for the explicit data-theme="dark" case elsewhere. */
  .ni.on{color:#65aaff}
  .ni.on .ni-label{color:#65aaff}
  /* Topbar */
  .topb{border-bottom-color:var(--bd)}
  /* Modal text */
  
  
  /* Bill badge in dark */
  .badge{opacity:.9}
  /* Inst pill */
  .inst-pill.done{opacity:.7}
  /* Section headers */
  .pn .ph{background:var(--bg2)}
  .pn .pt{color:var(--text)}
  /* Progress bars track */
  .prog-track{background:var(--bg3)}
  /* Table headers */
  th{color:var(--text2)}
  /* Login card */
  .lcard{background:rgba(28,28,30,0.88)}
  /* Empty state */
  .l-hint{background:var(--bg2);border-color:var(--bd)}
  /* Medical bill OOP summary — override deep blue hardcoded color */
  [style*="#0B3D8F"]{color:var(--ac) !important}
  [style*="color:#1d1d1f"]{color:var(--text) !important}
  [style*="background:#EBF2FF"]{background:var(--acl) !important}
  [style*="background:#e8fdf2"]{background:var(--greenl) !important}
  [style*="background:#fff4e5"]{background:var(--orangel) !important}
  [style*="background:#fff0ef"]{background:var(--redl) !important}
  [style*="background:#fdf8ec"]{background:var(--bg2) !important}
  [style*="background:#f9f3e3"]{background:var(--bg2) !important}
  [style*="background:#e3f0fd"]{background:var(--bg2) !important}
  [style*="background:#fdecea"]{background:var(--bg2) !important}
  [style*="background:#fff3e8"]{background:var(--bg2) !important}
  [style*="background:#FDE8F4"]{background:var(--bg2) !important}
  /* Scrollbar in dark */
  ::-webkit-scrollbar-track{background:var(--bg2)}
  ::-webkit-scrollbar-thumb{background:var(--bd2)}
  /* Google Sign-In button dark adaptation */
  [style*="background:#fff;color:#3c4043"]{
    background:var(--bg2) !important;
    color:var(--text) !important;
    border-color:var(--bd2) !important;
  }
}}
@media(max-width:640px){
  #modal-box{max-height:94vh !important;width:98vw !important;border-radius:14px !important;padding:24px 24px 20px;}
  .md-form{padding:12px 16px 28px}
  .consent-foot{padding:12px 16px}
  .md-acts{padding:22px 16px 22px;gap:8px;margin-top:10px}
  .btn-ok,.btn-cancel{height:var(--btn-h-lg);font-size:13px;padding:0 16px}
  /* Bill rows: compact on mobile */
  .bi-row{grid-template-columns:36px minmax(0,1fr) auto;padding:8px 12px;gap:0 8px}
  .bi-am{min-width:60px;font-size:13px}
}
/* ─── BILL ROWS ──────────────────────────────────── */
.br{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;border-bottom:1px solid var(--bd);
  cursor:pointer;transition:background .1s;
}
.br:last-child{border-bottom:none}
.br:hover{background:var(--bg2)}
.bi2{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bi2 svg{width:16px;height:16px}
.binfo{flex:1;min-width:0}
.bname{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.bcat{font-size:11px;color:var(--text2)}

/* Bills box */
:is(.bx){
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--rl);overflow:hidden;
  margin-bottom:14px;display:flex;flex-direction:column;
  box-shadow:var(--sh-s);
}
.tabbar{
  display:flex;align-items:center;padding:0 18px;
  border-bottom:1px solid var(--bd);flex-shrink:0;
  background:var(--bg);
}
.tab{
  padding:11px 16px;font-size:13px;font-weight:500;color:var(--text2);
  cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-.5px;transition:color .12s;white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.on{color:var(--ac);border-bottom-color:var(--ac);font-weight:600}
.tab-sp{flex:1}
.bscroll{overflow-y:auto;max-height:520px}
.bscroll::-webkit-scrollbar{width:4px}
.bscroll::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}

/* Bill item */
.bi-row{
  /* Stable grid: icon | content | foot (due-badge + amount + actions, grouped) */
  display:grid;
  grid-template-columns: 40px minmax(90px,1fr) auto;
  align-items:center;gap:0 10px;
  padding:10px 16px;border-bottom:1px solid var(--bd);
  transition:background .1s;min-height:56px;
}
.bi-foot{display:flex;align-items:center;gap:10px}
.bi-row:last-child{border-bottom:none}
.bi-row:hover{background:rgba(255,255,255,0.04)}
.bi-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bi-ic svg{width:16px;height:16px}
.bi-bd{min-width:0;overflow:hidden}
.bi-nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;letter-spacing:-.1px}
.bi-mt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.bi-rt{display:flex;align-items:center;gap:10px}
.bi-am{font-size:15px;font-weight:700;white-space:nowrap;letter-spacing:-.3px;text-align:right;min-width:76px}
.bi-ac{display:flex;align-items:center;gap:2px;flex-shrink:0}

/* ── Pay Bill button — same tinted-badge language as the rest of the
   platform (soft tint background + matching text color, like the small
   "✓ Paid" tag), sized to sit naturally next to the edit/delete icons. ── */
.bf-pay-btn{
  display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;
  border-radius:8px;border:1px solid transparent;cursor:pointer;
  font-size:10.5px;font-weight:700;line-height:1;font-family:inherit;letter-spacing:.01em;
  transition:filter .15s ease,transform .1s ease;flex-shrink:0;margin-left:6px;
}
.bf-pay-btn:hover{filter:brightness(.96)}
@media(prefers-color-scheme:dark){.bf-pay-btn:hover{filter:brightness(1.15)}}
html[data-theme="dark"] .bf-pay-btn:hover{filter:brightness(1.15)}
.bf-pay-btn:active{transform:scale(.94)}
.bf-pay-btn-dot-wrap{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:15px;height:15px;border-radius:50%;flex-shrink:0}
.bf-pay-dot{width:2.5px;height:2.5px;border-radius:50%;background:#fff;animation:bfPayDotWave 1.3s ease-in-out infinite}
.bf-pay-dot:nth-child(2){animation-delay:.13s}
.bf-pay-dot:nth-child(3){animation-delay:.26s}
@keyframes bfPayDotWave{0%,70%,100%{opacity:.4;transform:scale(.75)}35%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bf-pay-dot{animation:none;opacity:1}}

.bf-pay-btn.is-paid{background:var(--tel);color:var(--tet);border-color:var(--te)}

.bf-pay-btn.is-due{background:var(--aml);color:var(--amt);border-color:var(--am)}
.bf-pay-btn.is-future{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;color:var(--text3);font-size:13px;cursor:default}
.bf-pay-btn.is-due .bf-pay-btn-dot-wrap{background:var(--am)}

.bf-pay-btn.is-overdue{background:var(--rel);color:var(--ret);border-color:var(--re)}
.bf-pay-btn-alert-wrap{color:#fff;background:var(--re);animation:bfPayAlertPulse 1.8s ease-in-out infinite}
@keyframes bfPayAlertPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.bf-pay-btn-alert-wrap{animation:none}}
.ic{
  background:none;border:none;cursor:pointer;
  padding:5px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text3);transition:background .15s,color .15s,box-shadow .15s,transform .1s;
  width:28px;height:28px;flex-shrink:0;
}
.ic svg{width:16px;height:16px;flex-shrink:0}
.ic:hover{background:var(--bg2);color:var(--text)}
.ic.paid{color:var(--greent)}
/* Mark-as-paid toggle specifically — unpaid state needs to read as
   clickable, not as a faint decorative dot. A visible ring + tint does
   that without needing extra markup, since bfExtractBillFromPhoto/etc
   already produce many bill rows a day and this is the one thing a
   first-time user needs to immediately recognize as tappable. */
button.ic[onclick*="togglePaid"]:not(.paid){
  color:var(--ac);box-shadow:inset 0 0 0 1.5px var(--bd2);background:var(--acl);
}
button.ic[onclick*="togglePaid"]:not(.paid):hover{
  box-shadow:inset 0 0 0 1.5px var(--ac);background:var(--acl);transform:scale(1.08);
}
.ic.paid:hover{transform:scale(1.08)}
.ic.del:hover{color:var(--redt);background:var(--redl)}
.ic.ed:hover{color:var(--ac);background:var(--acl)}
.bfoot{
  padding:12px 18px;border-top:1px solid var(--bd);
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;background:var(--bg);
}

/* Installment */
.inst-inline{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
.inst-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
  letter-spacing:.02em;
}
.inst-pill.ongoing{background:var(--aml);color:var(--oranget)}
.inst-pill.close{background:var(--redl);color:var(--redt)}
.inst-pill.done{background:var(--greenl);color:var(--greent)}
.inst-track{height:4px;border-radius:2px;background:var(--bg3);overflow:hidden;flex:1;max-width:80px}
.inst-fill{height:100%;border-radius:2px;transition:width .4s ease}
.inst-rem{font-size:10px;color:var(--text3);white-space:nowrap}

/* Due badge */
.due-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.due-badge.q1{background:var(--acl);color:var(--ac)}
.due-badge.q2{background:var(--greenl);color:var(--greent)}
/* ── HALF SEGMENTED CONTROL ────────────────────────────────── */
:is(.hs-ctrl){display:flex;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:4px;gap:3px;margin-bottom:14px;position:relative}
:is(.hs-btn){flex:1;border:none;border-radius:10px;padding:10px 16px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all .22s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;color:var(--text3)}
.hs-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
:is(.hs-btn.active){background:var(--bg);color:var(--ac);box-shadow:0 2px 8px rgba(0,0,0,.1),0 0 0 1.5px var(--ac);border-radius:10px}
.hs-btn .hs-label{font-size:13px;font-weight:700;transition:color .2s}
.hs-btn .hs-sub{font-size:10px;font-weight:500;opacity:.75;transition:opacity .2s}
.hs-btn.active .hs-sub{opacity:1}
.hs-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;transition:all .2s}
.hs-btn.active .hs-badge{background:var(--ac);color:#fff}
.hs-btn:not(.active) .hs-badge{background:var(--bg3);color:var(--text3)}
/* ── BILL PROGRESS BAR ─────────────────────────────────────── */
.bp-wrap{margin-top:6px}
.bp-track{height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;position:relative}
.bp-fill{height:100%;border-radius:3px;transition:width .45s cubic-bezier(.4,0,.2,1),background .45s}
.bp-text{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:3px}
/* ── HALF CONTENT PANEL ────────────────────────────────────── */
:is(.hc-panel){background:var(--bg);border:1.5px solid var(--ac);border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(20,123,255,.08)}
.hc-header{padding:12px 18px 10px;background:linear-gradient(135deg,rgba(20,123,255,.04) 0%,transparent 100%);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(var(--glass-blur-light))}
.hc-title{font-size:14px;font-weight:700;color:var(--ac);display:flex;align-items:center;gap:6px}
.hc-meta{font-size:11px;color:var(--text3)}
.due-badge.urgent{background:var(--redl);color:var(--redt)}

/* Add form */
:is(.af){
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--rl);padding:16px 18px;margin-bottom:14px;
  box-shadow:var(--sh-s);
}
.af-t{font-size:14px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:7px;letter-spacing:-.1px}
.af-t svg{width:15px;height:15px;color:var(--ac)}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;align-items:start}
.fg2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:9px}
@media(max-width:600px){
  .fg{grid-template-columns:1fr!important}
  .fg2{grid-template-columns:1fr 1fr!important}
}
@media(min-width:601px) and (max-width:1024px){
  .fg{grid-template-columns:1fr 1fr!important}
}
.fd{display:flex;flex-direction:column;gap:5px;min-width:0}
.fd label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.fd input,.fd select{height:36px;color:var(--text);background-color:var(--bg2)}
.btn-add{
  height:var(--btn-h);
  padding:0 18px;
  background:linear-gradient(135deg, #0060C0, #0A6E63);
  color:#fff;
  border:none;
  border-radius:var(--r);
  font-size:var(--btn-fs);
  font-weight:600;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  line-height:1;font-family:inherit;flex-shrink:0;white-space:nowrap;
  transition:opacity .15s,box-shadow .15s;
  box-shadow:0 4px 16px rgba(20,123,255,.28);
  letter-spacing:-.1px;
}
.btn-add:hover{opacity:.88}
.fa{display:flex;gap:8px;margin-top:10px}

/* Income row */
.ir{
  display:flex;align-items:center;gap:12px;
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--rl);padding:12px 18px;margin-bottom:16px;
  box-shadow:var(--sh-s);
}
.ir label{font-size:13px;font-weight:500;color:var(--text2);white-space:nowrap}
.ir input{max-width:140px;font-size:16px;font-weight:700;text-align:right;letter-spacing:-.3px}
.ir-h{font-size:11px;color:var(--text3);margin-left:auto;display:flex;align-items:center;gap:4px}
.ir-h svg{width:12px;height:12px}

/* Progress */
.pw{padding:12px 18px 16px}
.pl{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:500}
.pt2{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-bottom:11px}
.pf{height:100%;border-radius:3px;transition:width .5s ease}

/* Donut */
.dw{padding:16px 18px;display:flex;align-items:center;gap:18px}
.dl{flex:1;display:flex;flex-direction:column;gap:7px}
.dr{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--text2)}
.dd{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dv{margin-left:auto;font-weight:600;color:var(--text)}

/* Pay schedule */
.ps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.ps-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:16px 18px;box-shadow:var(--sh-s)}
.ps-card.next-pay{border-color:var(--ac);border-width:1.5px;box-shadow:0 0 0 3px rgba(20,123,255,.1),var(--sh-s)}
.ps-lbl{font-size:10px;font-weight:600;color:var(--text2);margin-bottom:6px;display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.06em}
.ps-lbl svg{width:12px;height:12px}
.ps-date{font-size:22px;font-weight:700;margin-bottom:5px;letter-spacing:-.5px}
.ps-day{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pd-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}
.pd-chip.normal{background:var(--greenl);color:var(--greent)}
.pd-chip.early{background:var(--orangel);color:var(--oranget)}

/* Toast */
.toast{
  position:fixed;bottom:22px;right:22px;
  background:rgba(30,30,32,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;padding:11px 18px;
  border-radius:var(--rl);
  font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:8px;
  opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;z-index:9999;
  box-shadow:var(--sh-l);
  transform:translateY(6px);
}
.toast svg{width:16px;height:16px;color:var(--greent)}
.toast.on{opacity:1;transform:translateY(0)}

/* ─── TABLE HEADER TOOLTIPS ─────────────────────────────────── */
.th-tip{position:static;cursor:help;border-bottom:1px dashed var(--bd2);padding-bottom:1px;display:inline-flex;align-items:center;gap:3px}

/* Sync badge */
#sync-badge span{font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px}

/* ─── TRUST & SECURITY NOTICES ─────────────────────────────── */
.sec-notice{border-radius:var(--r);padding:11px 14px;font-size:12px;line-height:1.75;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.sec-notice.blue{background:var(--acl);border:.5px solid rgba(20,123,255,.25);color:var(--ac)}
.sec-notice.green{background:var(--greenl);border:.5px solid rgba(52,199,89,.25);color:var(--greent)}
.sec-notice.amber{background:var(--orangel);border:.5px solid rgba(255,149,0,.25);color:var(--oranget)}
.sec-notice.slate{background:var(--bg2);border:.5px solid var(--bd2);color:var(--text2)}
.sec-notice-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sec-notice.blue  .sec-notice-ico{background:rgba(20,123,255,.15)}
.sec-notice.green .sec-notice-ico{background:rgba(52,199,89,.15)}
.sec-notice.amber .sec-notice-ico{background:rgba(255,149,0,.15)}
.sec-notice.slate .sec-notice-ico{background:var(--bg3)}
.trust-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px 16px;border-top:.5px solid var(--bd);font-size:11px;color:var(--text3)}
.trust-item{display:flex;align-items:center;gap:5px;font-weight:500;white-space:nowrap}
.trust-item svg{color:var(--greent)}
.consent-foot{padding:13px 24px;border-top:.5px solid var(--bd);font-size:11px;color:var(--text3);line-height:1.65;display:flex;gap:7px;align-items:flex-start}
.consent-foot svg{flex-shrink:0;margin-top:1px;color:#22c55e}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .sec-notice.blue{background:rgba(20,123,255,.1);border-color:rgba(20,123,255,.25);color:#93c5fd}
  .sec-notice.green{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);color:#6ee7b7}
  .sec-notice.amber{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2);color:#fcd34d}
}}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤900px) & Mobile (≤600px)
═══════════════════════════════════════════════════════════ */

/* ── TABLET: 601px – 900px ───────────────────────────────── */


/* ── MOBILE: ≤600px ─────────────────────────────────────── */
@media(max-width:768px){
  #mobile-more-menu.open{ display:block !important; }
  #mobile-more-menu{ bottom:60px !important; }
  .mm-item{
    display:flex;align-items:center;gap:14px;
    padding:13px 18px;border-radius:10px;
    font-size:15px;font-weight:500;color:var(--text);
    cursor:pointer;transition:background .1s;
    -webkit-tap-highlight-color:transparent;
  }
  .mm-item:active{ background:var(--bg2); }
  .mm-item svg{ color:var(--text2); }
  /* Hide sidebar entirely — use bottom nav */
  .sb{ display:none !important; }
  .layout{ flex-direction:column; }

  /* Topbar compact */
  .topb{ padding:0 12px;height:50px;width:100%;box-sizing:border-box;overflow:hidden; }
  .pg-t{ font-size:15px; }
  .mnav-lbl{ min-width:90px;font-size:12px; }
  .ib{ padding:0 10px;height:var(--btn-h-sm);font-size:12px; }
  .ib svg{ width:13px;height:13px; }

  /* Hide Export button on mobile */
  .tb-r .ib:not(.p){ display:none !important; }

  /* Content padding + bottom nav safe area */
  .sc{ padding:14px 12px calc(80px + env(safe-area-inset-bottom,0px)); }

  /* Bottom navigation */
  #mobile-nav-bar{
    display:flex !important;
    position:fixed;bottom:0;left:0;right:0;
    height:60px;
    background:var(--glass);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--bd);
    z-index:800;
    padding:0 4px;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mni-underline{
    position:absolute;top:2px;left:0;height:2.5px;border-radius:2px;
    background:linear-gradient(90deg,#147BFF,#12D6C0);
    transition:transform .32s cubic-bezier(.65,0,.35,1),width .32s cubic-bezier(.65,0,.35,1),opacity .2s ease;
    opacity:0;pointer-events:none;will-change:transform;
  }
  .mni{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:3px;cursor:pointer;
    border-radius:10px;margin:4px 2px;
    transition:background .18s,color .18s,box-shadow .18s;
    color:var(--text3);
    font-size:10px;font-weight:500;
    -webkit-tap-highlight-color:transparent;
    position:relative;
  }
  .mni:active{ background:var(--bg2); }
  .mni.on{
    color:#fff;
    background:linear-gradient(135deg,#0060C0,#0A6E63);
    box-shadow:0 3px 10px rgba(20,123,255,.35);
  }
  .mni.on:active{ background:linear-gradient(135deg,#0060C0,#0A6E63); }
  .mni svg{ width:22px;height:22px; }
  .mni .mni-dot{
    position:absolute;top:6px;right:calc(50% - 16px);
    width:7px;height:7px;border-radius:50%;
    background:var(--re);border:1.5px solid var(--bg);
    display:none;
  }
  .mni.has-badge .mni-dot{ display:block; }

  /* KPI 2 cols on mobile */
  .kg{ grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px; }
  .kp{ padding:12px 14px; }
  .kv{ font-size:20px; }

  /* Panels full width */
  .pn{ border-radius:12px; }

  /* Modal full-screen on mobile */
  .mo .md{
    width:100% !important;max-width:100% !important;
    min-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    position:fixed !important;bottom:0;left:0;right:0;
    max-height:92vh;overflow-y:auto;
  }
  .mo{ align-items:flex-end !important; }

  /* Tables scroll horizontally */
  table{ display:block;overflow-x:auto;-webkit-overflow-scrolling:touch; }

  /* Settings sections */
  .st-body{ font-size:14px; }

  /* Topbar month nav smaller */
  .mnav{ height:30px; }
  .mnav button{ width:20px;height:20px; }

  /* Prevent dashboard cards and panels from overflowing */
  .pn,.kp,.af,.bx,.hc-panel,.lcard{max-width:100%;box-sizing:border-box}
  :is(.kg){width:100%;box-sizing:border-box}

  /* Topbar: shrink month nav text */
  :is(.pg-t){font-size:14px;max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :is(.mnav-lbl){font-size:11px;min-width:70px}

  /* Prevent any child from escaping viewport */
  .sc > *{max-width:100%;box-sizing:border-box}
}

/* ── SMALL MOBILE: ≤380px ───────────────────────────────── */
@media(max-width:380px){
  .sc{ padding:10px 10px 80px; }
  .kg{ grid-template-columns:1fr 1fr;gap:6px; }
  .kv{ font-size:18px; }
  .kp{ padding:10px 12px; }
  .topb{ padding:0 10px; }
  .pg-t{ font-size:14px; }
}

/* ── TABLET LANDSCAPE / IPAD: 601px–1024px ──────────────── */
@media(min-width:601px) and (max-width:1024px){
  /* Tablet: sidebar still usable, just slightly narrower content */
  #mobile-navbar{ display:none; }
  .sc{ padding:14px; }
  .topb{ height:52px;padding:0 14px; }
  .kg{ grid-template-columns:repeat(2,1fr); }
}

/* ─── ONBOARDING ─────────────────────────────────────────── */
.ob-ov{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.ob-ov.show{display:flex;opacity:1;pointer-events:auto}
.ob-card{
  width:min(420px,95vw);background:var(--bg);
  border-radius:20px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  transform:translateY(20px);transition:transform .3s;
}
.ob-ov.show .ob-card{transform:translateY(0)}
.ob-slides{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.ob-slide{min-width:100%;display:flex;flex-direction:column}
.ob-hero{
  padding:36px 24px 28px;text-align:center;
  min-height:160px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.ob-body{padding:20px 24px 0}
.ob-step{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.ob-title{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.4px;margin-bottom:10px}
.ob-desc{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:14px}
.ob-feats{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
/* ── Onboarding plan-aware additions ───────────────────────────────────────*/
.ob-plan-tag{display:inline-flex;align-items:center;background:rgba(255,255,255,.22);backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:12px}
.ob-hero-icon{width:76px;height:76px;background:rgba(255,255,255,.18);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.ob-hero-step{font-size:11px;font-weight:600;color:rgba(255,255,255,.65);letter-spacing:.06em;text-align:center}
.ob-action-btn{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;height:38px;padding:0 16px;background:var(--ac);color:#fff;border:none;border-radius:var(--rl);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s}
.ob-action-btn:hover{opacity:.88}
.ob-helper{font-size:11px;color:var(--text3);margin-top:10px;line-height:1.5}
.ob-slide-done{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 28px;text-align:center;min-height:440px}
.ob-done-icon{margin-bottom:18px}
.ob-done-title{font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.4px}
.ob-done-msg{font-size:13px;color:var(--text2);line-height:1.7;max-width:300px;margin:0 auto 24px}
.ob-done-acts{display:flex;flex-direction:column;gap:10px;width:100%}
.ob-upgrade-hint{margin-top:20px;background:var(--acl);border:1px solid rgba(20,123,255,.15);border-radius:var(--rl);padding:12px 16px;text-align:left;width:100%}
.ob-upgrade-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ac);margin-bottom:4px}
.ob-upgrade-text{display:block;font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:8px}
.ob-upgrade-cta{font-size:12px;font-weight:600;color:var(--ac);background:none;border:none;cursor:pointer;padding:0;font-family:inherit}
.ob-upgrade-cta:hover{text-decoration:underline}

.ob-feat{display:flex;align-items:center;gap:10px}
.ob-feat-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ob-feat-t{font-size:13px;font-weight:600}
.ob-feat-s{font-size:11px;color:var(--text2)}
.ob-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px 20px;margin-top:8px;
}
.ob-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ob-dot{width:7px;height:7px;min-width:0;min-height:0;border-radius:50%;background:var(--bd2);transition:all .22s;cursor:pointer}
.ob-dot:hover:not(.on){background:var(--text3);transform:scale(1.25)}
.ob-dot.on{width:9px;height:9px;min-width:0;min-height:0;border-radius:50%;background:var(--ac);box-shadow:0 1px 5px rgba(20,123,255,.4);transform:scale(1.15)}
.ob-skip{background:none;border:none;cursor:pointer;font-size:13px;color:var(--text3);font-family:inherit;padding:0}
.ob-skip:hover{color:var(--text2)}
.ob-next{
  background:var(--ac);color:#fff;border:none;border-radius:10px;
  padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:opacity .15s;
}
.ob-next:hover{opacity:.9}


/* ── INFO TOOLTIP ─────────────────────────────────── */
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--bg3);color:var(--text3);font-size:10px;font-weight:700;cursor:help;margin-left:5px;flex-shrink:0;vertical-align:middle;border:1px solid var(--bd2);}
/* A real clickable button (opens a modal), distinct from .info-tip (a
   hover-only tooltip trigger) — solid fill and a hover/active state make
   it read as tappable at a glance instead of just decorative. */
.sched-c-info-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:var(--acl);color:var(--ac);border:1px solid rgba(20,123,255,.25);
  cursor:pointer;padding:0;transition:background .12s,transform .1s;
}
.sched-c-info-btn:hover{background:var(--ac);color:#fff;}
.sched-c-info-btn:active{transform:scale(.92);}
html[data-theme="dark"] .sched-c-info-btn{background:#0b315d;color:#65aaff;border-color:rgba(74,157,255,.20)}
html[data-theme="dark"] .sched-c-info-btn:hover{background:var(--ac);color:#fff}
#tip-global{display:none;position:fixed;background:#1d1d1f;color:#fff;font-size:11px;font-weight:400;line-height:1.5;padding:7px 10px;border-radius:8px;max-width:220px;z-index:99999;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:none;word-break:normal;}
#tip-global::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1d1d1f;}


/* ── CHART & GAUGE ANIMATIONS ──────────────────────────────── */
@keyframes barGrow {
  from { height:0; opacity:0; }
  to   { height:var(--bar-h); opacity:1; }
}
@keyframes fillBar {
  from { width:0; }
  to   { width:var(--bar-w); }
}
@keyframes gaugeArc {
  from { stroke-dashoffset: var(--arc-total); }
  to   { stroke-dashoffset: var(--arc-offset); }
}
@keyframes countUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes kpiFadeIn {
  from { opacity:0; transform:translateY(8px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
:is(.kp){ animation: kpiFadeIn .3s ease both; }
.kp:nth-child(1) { animation-delay:.0s }
.kp:nth-child(2) { animation-delay:.06s }
.kp:nth-child(3) { animation-delay:.12s }
.kp:nth-child(4) { animation-delay:.18s }
.kp:nth-child(5) { animation-delay:.24s }

/* Animate horizontal progress bars */
.bar-fill {
  animation: fillBar .6s cubic-bezier(.4,0,.2,1) both;
  animation-delay:.2s;
}
/* Animate vertical bars in charts */
.bar-v {
  animation: barGrow .5s cubic-bezier(.4,0,.2,1) both;
}
/* Animate KPI values */
:is(.kv){ animation: countUp .35s ease both; animation-delay:.15s; }

.inv-row:hover{background:var(--bg2)}

/* Live Quotes button ring effect */
@keyframes ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(20,123,255,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(20,123,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,123,255,0); }
}
.live-btn-off { animation: ring-pulse 2s infinite; }
.live-btn-on  { animation: none; box-shadow: 0 0 0 0 transparent; }

/* ── MODAL SCROLL AREA ───────────────────────────────── */
:is(.md-form){
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
  padding:0 20px;
  scrollbar-width:none;
}
:is(.md-form::-webkit-scrollbar){ display:none; }
.md-form-wrap {
  position:relative;
  flex:1;
  overflow:hidden;
  min-height:0;
}
/* Fade gradient top & bottom to hint scrollable content */
.md-form-wrap::before,
.md-form-wrap::after {
  content:'';
  position:absolute;
  left:0;right:0;
  height:28px;
  pointer-events:none;
  z-index:2;
}
.md-form-wrap::before {
  top:0;
  background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}
.md-form-wrap::after {
  bottom:0;
  background:linear-gradient(to top, var(--bg) 0%, transparent 100%);
}
/* .md-acts scroll-area pass — merged into the canonical MODAL DESIGN SYSTEM block. */

/* ── ACCESSIBILITY (WCAG 2.1 AA) ───────────────────────────────── */

/* Skip link — visible only on focus */
.skip-link {
  position:fixed;top:-100px;left:8px;z-index:99999;
  background:var(--ac);color:#fff;
  padding:8px 16px;border-radius:0 0 8px 8px;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:top .15s;
}
.skip-link:focus { top:0; outline:3px solid #fff; outline-offset:2px; }

/* Focus ring — visible, high-contrast for keyboard nav */
:focus-visible {
  outline:2.5px solid var(--ac) !important;
  outline-offset:2px !important;
  border-radius:4px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2.5px solid var(--ac) !important;
  outline-offset:2px !important;
}

/* Remove outline only for mouse users (not keyboard) */
:focus:not(:focus-visible) { outline:none; }

/* Ensure min touch target 44×44px (WCAG 2.5.5) */
button, .ni, [role="button"] { min-height:44px; min-width:44px; }
.ic, .ib, .btn-add, .btn-cancel, .btn-ok, .cc-nav-btn, .ob-action-btn { min-height:36px; min-width:0; } /* buttons with their own explicit height shouldn't be forced up by the 44px touch-target floor */
.cc-dot-item { min-height:0; min-width:0; } /* small pagination dots — the prev/next buttons already provide an accessible 36px navigation target */

/* High contrast text */
:is(:root){
  --a11y-min-contrast: 4.5; /* WCAG AA normal text */
}

/* Ensure error messages are announced */
[aria-live] { speak:normal; }
[role="alert"] { speak:normal; }

/* Reduce motion for vestibular disorders */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skip-link { transition:none; }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  :root {
    --bd: rgba(255,255,255,.5);
    --text: #ffffff;
    --text2: #e0e0e0;
  }
  /* button border removed */
}





/* Prevent any child from causing horizontal overflow */
:is(.sc > *){ max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.kg, .pn, .bx, .af, .ps-grid { max-width: 100%; box-sizing: border-box; }




/* ═══════════════════════════════════════════════════════════════════
   TYPE SCALE — unified typography system
   ═══════════════════════════════════════════════════════════════════ */

/* Scale tokens */
:is(:root){
  --fs-xs:   10px;   /* micro labels, badges */
  --fs-sm:   11px;   /* secondary meta, hints */
  --fs-base: 13px;   /* default body, nav items */
  --fs-md:   14px;   /* primary body, list items */
  --fs-lg:   15px;   /* section descriptions */
  --fs-xl:   17px;   /* modal titles, card headlines */
  --fs-2xl:  20px;   /* KPI values small */
  --fs-3xl:  24px;   /* KPI values medium */
  --fs-4xl:  32px;   /* KPI values large */

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-s:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-m:  0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --sh-l:  0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
}

/* ── Type utility classes ──────────────────────────────────────────── */
.t-xs   { font-size:var(--fs-xs);   line-height:var(--lh-tight) }
.t-sm   { font-size:var(--fs-sm);   line-height:var(--lh-snug) }
.t-base { font-size:var(--fs-base); line-height:var(--lh-normal) }
.t-md   { font-size:var(--fs-md);   line-height:var(--lh-normal) }
.t-lg   { font-size:var(--fs-lg);   line-height:var(--lh-relaxed) }
.t-xl   { font-size:var(--fs-xl);   line-height:var(--lh-tight) }

.t-muted  { color:var(--text3) }
.t-subtle { color:var(--text2) }
.t-strong { color:var(--text);  font-weight:var(--fw-semi) }
.t-label  { font-size:var(--fs-xs); font-weight:var(--fw-semi); letter-spacing:.07em; text-transform:uppercase; color:var(--text3) }
.t-mono   { font-family:'SF Mono','Fira Code',monospace; font-size:.9em }

/* ═══════════════════════════════════════════════════════════════════
   IMPROVED COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Panel (.pn) — more breathable ────────────────────────────────── */
:is(.pn){
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: var(--sh-s);
  overflow: visible;
}

/* ── Panel header (.ph) — consistent height ────────────────────────── */
:is(.ph){
  padding: 14px 20px;
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px;
}

/* ── Panel title (.pt) — clear hierarchy ───────────────────────────── */
:is(.pt){
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  color: var(--text);
  letter-spacing: -.1px;
  display: flex; align-items: center; gap: 7px;
}

/* ── KPI value — unified large number ──────────────────────────────── */
:is(.kv){
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.6px;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--text);
}
.kv-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
}

/* ── Badge — single consistent style ──────────────────────────────── */
:is(.badge){
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  letter-spacing: .02em;
}

/* ── Inline button (.ib) — improved ───────────────────────────────── */
:is(.ib){
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px; height: var(--btn-h);
  border-radius: var(--r);
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  font-family: inherit; cursor: pointer;
  border: 1px solid var(--bd);
  background: var(--bg2); color: var(--text2);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
:is(.ib:hover){ background: var(--bg3); color: var(--text); border-color: var(--bd2); }
:is(.ib.p){
  background: linear-gradient(135deg, #0060C0, #0A6E63); color: #fff; border-color: transparent;
  box-shadow: 0 1px 4px rgba(20,123,255,.25);
}
.ib.p:hover { opacity: .88; }
.ib.p.green { background: var(--green); box-shadow: 0 1px 4px rgba(52,199,89,.25); }
.ib.p.green:hover { background: var(--greent); }
.ib.danger { border-color: rgba(255,59,48,.2); color: var(--re); }
.ib.danger:hover { background: var(--rel); }

/* ── Icon button (.ic) — more clickable ────────────────────────────── */
:is(.ic){
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text3);
  transition: background .15s, color .15s;
}
:is(.ic:hover){ background: var(--bg3); color: var(--text2); }
:is(.ic.ed:hover){ color: var(--ac); background: var(--acl); }
:is(.ic.del:hover){ color: var(--re); background: var(--rel); }

/* ── Sidebar nav item (.ni) — refined ──────────────────────────────── */
:is(.ni){
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r);
  cursor: pointer; font-size: var(--fs-base);
  font-weight: var(--fw-medium); color: var(--text2);
  transition: background .12s, color .12s;
  position: relative;
  user-select: none;
}
:is(.ni:hover){ background: var(--bg2); color: var(--text); }
:is(.ni.on){
  background: var(--acl); color: var(--ac);
  font-weight: var(--fw-semi);
}
.ni svg { flex-shrink: 0; opacity: .75; }
.ni.on svg { opacity: 1; }
:is(.ni-label){ flex: 1; }

/* ── Section label (replaces scattered inline uppercase labels) ──── */
.section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 12px 10px 4px;
  display: block;
}

/* ── Empty state — unified ──────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
  min-height: 240px;
}
.empty-state-ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--acl);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--ac);
}
.empty-state-title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--text); margin-bottom: 8px; letter-spacing: -.2px;
}
.empty-state-desc {
  font-size: var(--fs-base); color: var(--text3);
  line-height: var(--lh-relaxed); max-width: 340px; margin-bottom: 24px;
}

/* ── Data row — unified list item pattern ──────────────────────────── */
.data-row {
  display: flex; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bd);
  gap: 12px;
  transition: background .1s;
}
.data-row:last-child { border-bottom: none; }
.data-row:hover { background: var(--bg2); }
.data-row-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
}
.data-row-body { flex: 1; min-width: 0; }
.data-row-title {
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  color: var(--text); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.data-row-sub {
  font-size: var(--fs-sm); color: var(--text3);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.data-row-right {
  text-align: right; flex-shrink: 0;
}
.data-row-amt {
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--text); white-space: nowrap;
}
.data-row-meta {
  font-size: var(--fs-xs); color: var(--text3);
  margin-top: 2px;
}

/* ── Stat card — KPI pattern ───────────────────────────────────────── */
.stat-card {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 16px 18px;
  box-shadow: var(--sh-s);
}
.stat-card-val {
  font-size: var(--fs-4xl); font-weight: var(--fw-black);
  letter-spacing: -.8px; line-height: 1;
  margin-bottom: 4px;
}
.stat-card-label {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text3);
}
.stat-card-sub {
  font-size: var(--fs-sm); color: var(--text3);
  margin-top: 3px;
}

/* .md-ttl / .md-sub "Modal improvements" pass — merged into the canonical MODAL DESIGN SYSTEM block. */
.md-fld > label {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 2px;
}
:is(.md-fld input:focus, .md-fld select:focus, .md-fld textarea:focus){
  outline: none;
  border-color: var(--ac);
  box-shadow: var(--sel-glow);
}

/* ── Section divider ───────────────────────────────────────────────── */
.section-divider {
  padding: 8px 20px 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text3);
  border-top: 1px solid var(--bd);
  margin-top: 4px;
}

/* ── Info chip — meta tag ───────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 2px 8px; border-radius: 20px;
  background: var(--bg3); color: var(--text2);
  white-space: nowrap; border: 1px solid var(--bd);
}
.chip.blue   { background: var(--acl); color: var(--ac); border-color: rgba(20,123,255,.15); }
.chip.green  { background: var(--tel); color: var(--tet); border-color: rgba(52,199,89,.15); }
.chip.amber  { background: var(--aml); color: var(--amt); border-color: rgba(255,149,0,.15); }
.chip.red    { background: var(--rel); color: var(--ret); border-color: rgba(255,59,48,.15); }

/* ── Scrollbar — subtle ─────────────────────────────────────────────── */
:is(::-webkit-scrollbar){ width: 5px; height: 5px; }
:is(::-webkit-scrollbar-track){ background: transparent; }
:is(::-webkit-scrollbar-thumb){ background: var(--bd2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text4); }

/* ── Focus ring — consistent ────────────────────────────────────────── */
:is(:focus-visible){
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Transition defaults ─────────────────────────────────────────────── */
.pn, .ib, .ic, .ni, .badge, .chip, .data-row {
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.2,0,.2,1);
}

/* ── Dark mode refinements ──────────────────────────────────────────── */
[data-theme="dark"] .pn,
[data-theme="dark"] .stat-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
}
[data-theme="dark"] .ib {
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .chip {
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
}


/* ═══════════════════════════════════════════════════════════════════
   BILLFLOW — MOBILE FIRST REDESIGN
   Target: ≤768px
   Philosophy: native fintech, thumb-friendly, scannable, premium
   ═══════════════════════════════════════════════════════════════════ */

@media(max-width:600px){
  .sb{ width:52px !important; }
  .sb .s-logo{ padding:0 !important;justify-content:center !important; }
  .sb .s-logo-text{ opacity:0 !important;width:0 !important;flex:0 !important;pointer-events:none !important; }
  .sb .sb-toggle{ display:none !important; }
  .sb .ns{ opacity:0 !important;max-height:0 !important;padding:0 !important;border:none !important;margin:0 !important; }
  .sb .ni{ padding:9px 0 !important;justify-content:center !important;gap:0 !important;width:100% !important; }
  .sb .ni > svg{ width:18px !important;height:18px !important;min-width:18px !important;margin:0 !important; }
  .sb .ni-label,.sb .n-badge{ display:none !important; }
  .sc{ padding:12px; }
  .topb{ padding:0 12px;height:52px; }
  .kg{ grid-template-columns:repeat(2,1fr);gap:10px; }
  .bc-grid{ grid-template-columns:1fr !important; }

  @keyframes mob-sheet-up {
    from { transform:translateY(100%); opacity:.8; }
    to   { transform:translateY(0);    opacity:1;  }
  }

  /* ── More menu ── */
  #mobile-more-menu {
    border-radius: 20px 20px 0 0 !important;
    max-height: 72dvh !important;
    overflow-y: auto;
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }
  .mm-item {
    padding: 13px 20px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
  }
  .mm-item:active { background:var(--bg2); }

  /* ── Dashboard mobile cards ── */
  .mob-dash-hero {
    margin: 14px 16px 0;
    padding: 20px;
    background: linear-gradient(135deg,#0f3460,#147BFF 60%,#12D6C0);
    border-radius: 22px;
    color: #fff;
    position:relative; overflow:hidden;
  }
  .mob-dash-hero::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.15) 0%, transparent 60%);
  }
  .mob-dash-hero-lbl {
    font-size:11px; font-weight:600; opacity:.75;
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;
  }
  .mob-dash-hero-val {
    font-size:34px; font-weight:800; letter-spacing:-1.2px; line-height:1;
    margin-bottom:4px;
  }
  .mob-dash-hero-sub { font-size:12px; opacity:.75; }
  .mob-dash-hero-actions {
    display:flex; gap:8px; margin-top:18px;
  }
  .mob-dash-hero-btn {
    flex:1; height:36px; border-radius:12px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
    color:#fff; font-size:12px; font-weight:600;
    display:flex;align-items:center;justify-content:center;gap:5px;
    cursor:pointer; font-family:inherit;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s;
  }
  .mob-dash-hero-btn:active { background:rgba(255,255,255,.28); }

  /* ── Quick actions row ── */
  .mob-quick-row {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
    padding: 4px 16px 14px;
  }
  .mob-quick-btn {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    padding:12px 6px;
    background:var(--bg);
    border:1px solid var(--bd);
    border-radius:16px;
    font-size:10px; font-weight:600; color:var(--text2);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background .12s, transform .12s;
  }
  .mob-quick-btn:active { background:var(--bg3); transform:scale(.95); }
  .mob-quick-btn svg { width:20px; height:20px; color:var(--ac); }

  /* ── Bill row mobile ── */
  .mob-bill-row {
    display:flex; align-items:center; gap:12px;
    padding: 13px 16px;
    border-bottom: .5px solid var(--bd);
  }
  .mob-bill-row:last-child { border-bottom:none; }
  .mob-bill-icon {
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .mob-bill-name { font-size:14px; font-weight:600; }
  .mob-bill-due  { font-size:11px; color:var(--text3); margin-top:1px; }
  .mob-bill-amt  {
    margin-left:auto; flex-shrink:0;
    font-size:15px; font-weight:700; color:var(--text);
  }
  .mob-bill-status {
    font-size:10px; font-weight:700; padding:2px 7px;
    border-radius:20px; margin-top:2px; text-align:right;
  }

  /* ── Upcoming section ── */
  .mob-upcoming-header {
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 16px 8px;
  }
  .mob-upcoming-title { font-size:16px; font-weight:700; }
  .mob-upcoming-all   { font-size:12px; color:var(--ac); font-weight:600; }

  /* ── CC card in list ── */
  .mob-cc-row {
    display:flex; align-items:center; gap:12px;
    padding: 12px 16px; border-bottom:.5px solid var(--bd);
  }
  .mob-cc-face {
    width:56px; height:36px; border-radius:8px; flex-shrink:0; overflow:hidden;
    position:relative;
  }
  .mob-cc-name  { font-size:13px; font-weight:600; }
  .mob-cc-last4 { font-size:11px; color:var(--text3); }
  .mob-cc-bal   { margin-left:auto; font-size:15px; font-weight:700; color:var(--rn); }
  .mob-cc-util  { font-size:10px; font-weight:600; margin-top:1px; }

  /* ── Section header with divider ── */
  .mob-sh {
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 16px 10px;
  }
  .mob-sh-title { font-size:16px; font-weight:800; letter-spacing:-.3px; }
  .mob-sh-action { font-size:12px; color:var(--ac); font-weight:600; }

  /* ── Scrollable horizontal cards ── */
  .mob-hscroll {
    display:flex; gap:10px;
    overflow-x:auto; padding:0 16px 14px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .mob-hscroll::-webkit-scrollbar { display:none; }
  .mob-hscroll > * { scroll-snap-align:start; flex-shrink:0; }

  /* ── Summary band ── */
  .mob-summary-band {
    display:flex; overflow-x:auto; gap:0;
    background:var(--bg); border:1px solid var(--bd);
    border-radius:16px; margin:0 16px;
    scrollbar-width:none;
  }
  .mob-summary-band::-webkit-scrollbar { display:none; }
  .mob-stat {
    flex:1; min-width:90px; padding:13px 14px;
    border-right:1px solid var(--bd);
  }
  .mob-stat:last-child { border-right:none; }
  .mob-stat-lbl {
    font-size:9px; font-weight:700; color:var(--text3);
    text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px;
  }
  .mob-stat-val { font-size:16px; font-weight:800; letter-spacing:-.4px; }

  /* ── Due alert badge ── */
  .mob-due-badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; border-radius:20px;
    font-size:11px; font-weight:700;
  }

  /* ── Grid tweaks ── */
  .md-row { grid-template-columns:1fr !important; }
  .cc-grid, .bccs-grid { grid-template-columns:1fr !important; }
  .ccs-summary { grid-template-columns:1fr 1fr !important; }
  .ccs-strat-grid { grid-template-columns:1fr !important; }
  .ccs-tl-table { font-size:10px !important; }

  /* ── Input groups ── */
  .md-fld input, .md-fld select, .md-fld textarea {
    font-size:16px !important; /* prevent iOS zoom */
  }

  /* ── Typography scale ── */
  .pg-t { font-size:17px !important; }

  /* ── Alert panel mobile only ── */
  @media (max-width: 600px) {
    #alert-panel {
      top: 56px !important;
      right: 0 !important; left: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      border-radius: 0 0 14px 14px !important;
    }
  }

  /* ── More menu ── */
  #mobile-more-menu .mm-item {
    display:flex;align-items:center;gap:14px;
    font-size:14px;font-weight:500;
  }

}

@media(max-width:380px){
  .mob-quick-row { grid-template-columns:repeat(4,1fr); gap:6px; }
  .mob-quick-btn { padding:10px 4px; font-size:9.5px; }
  .mob-dash-hero-val { font-size:28px; }
}
  .mm-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:14px 8px;
    background:var(--bg2); border:1px solid var(--bd);
    border-radius:16px; cursor:pointer;
    font-size:11px; font-weight:600; color:var(--text2);
    -webkit-tap-highlight-color:transparent;
    transition:background .12s, transform .12s;
  }
  .mm-card:active { background:var(--bg3); transform:scale(.96); }
  .mm-card svg { color:var(--ac); }



/* ═══════════════════════════════════════════════════════════════════
   CREDIT CARDS — Static CSS (CC pages: Bills + Credit Cards)
   ═══════════════════════════════════════════════════════════════════ */

/* Owner section */
.cc-owner-section { margin-bottom: 28px; }

/* 2-col grid: stack | detail */
.cc-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
}

/* Stack wrapper */
.cc-stack-wrap { display: flex; flex-direction: column; }
.cc-stack      { position: relative; user-select: none; }

/* Card elements — absolutely stacked */
.cc-card-el {
  position: absolute; left: 0; right: 0; height: 192px;
  border-radius: 20px; overflow: hidden; cursor: pointer;
  transform-origin: 50% 0;
  transition: top .3s cubic-bezier(.4,0,.2,1),
              transform .3s, box-shadow .3s, opacity .3s;
  will-change: top, transform, opacity;
}
.cc-card-el:hover { filter: brightness(1.07); }

/* Nav row */
.cc-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 0 4px;
}
.cc-nav-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--bd); background: var(--bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: all .15s; flex-shrink: 0;
}
.cc-nav-btn:hover:not([disabled]) {
  background: var(--bg3); border-color: var(--ac); color: var(--ac);
}
.cc-nav-btn[disabled] { opacity: .3; cursor: not-allowed; pointer-events: none; }

/* Dots */
.cc-dot {
  display: inline-block; height: 5px; border-radius: 3px;
  cursor: pointer; background: var(--bd2); width: 6px;
  transition: all .22s; flex-shrink: 0;
}
.cc-dot.on { width: 16px; background: var(--ac); border-radius: 3px; }

/* Detail panel */
.cc-detail {
  background: var(--bg); border: 1px solid var(--bd);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.cc-dhead {
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--bd); background: var(--bg2);
}

/* KPI 2-col grid */
.cc-kpis { display: grid; grid-template-columns: 1fr 1fr; }
.cc-kpi {
  padding: 13px 16px;
  border-bottom: 1px solid var(--bd);
  border-right: 1px solid var(--bd);
}
.cc-kpi:nth-child(2n)      { border-right: none; }
.cc-kpi:nth-last-child(-n+2) { border-bottom: none; }
.cc-kpi-lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3); margin-bottom: 5px;
}
.cc-kpi-val  { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.cc-kpi-sub  { font-size: 10px; color: var(--text3); margin-top: 3px; }

/* Utilization bar */
.cc-util { padding: 13px 16px; border-bottom: 1px solid var(--bd); }
.cc-util-bar {
  height: 7px; background: var(--bg3);
  border-radius: 99px; margin-top: 7px; overflow: hidden;
}
.cc-util-fill {
  height: 100%; border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* Due date row */
.cc-due {
  padding: 12px 16px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* APR section */
.cc-apr { padding: 12px 16px; border-bottom: 1px solid var(--bd); }
.cc-apr-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.cc-apr-row:last-child { margin-bottom: 0; }

/* Footer */
.cc-footer {
  padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Badge */
.cc-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
}
@keyframes cc-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.cc-pulse { animation: cc-pulse 1.4s ease-in-out infinite; }

/* Generic small pulsing-dot indicator (live status dots etc.) — several
   spots already reference `animation:pulse ...` inline but this keyframe
   never actually existed anywhere, so those dots silently never pulsed. */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Overdue-bill alert badge (Bills page half-month cards) — a firmer
   scale+glow throb rather than a plain opacity fade, since this needs to
   read as "pay attention" rather than just a status dot. */
@keyframes bf-overdue-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48,.45); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 7px rgba(255,59,48,0); }
}
.bf-overdue-badge { animation: bf-overdue-pulse 1.6s ease-in-out infinite; }

/* Transactions box */
.cc-tx-box {
  background: var(--bg2); border-radius: 16px;
  overflow: hidden; margin-top: 16px;
  border: 1px solid var(--bd);
}
.cc-tx-head {
  padding: 12px 16px; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.cc-tx-head.open { border-bottom-color: var(--bd); }
.cc-tx-head:hover { background: var(--bg3); }

/* Responsive — mobile */
@media(max-width:800px) {
  .cc-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media(max-width:600px) {
  .cc-kpi-val { font-size: 15px; }
  .cc-card-el { height: 178px; }
}

/* Bills CC page shared classes */
.bccs-section  { margin-bottom: 24px; }
.bccs-owner-label {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.bccs-grid {
  display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start;
}
@media(max-width:720px) { .bccs-grid { grid-template-columns: 1fr; } }

.bccs-detail { background:var(--bg);border:1px solid var(--bd);border-radius:16px;overflow:hidden }
.bccs-dhead  { padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bd);background:var(--bg2) }
.bccs-badge  { width:38px;height:24px;border-radius:7px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg3) }
.bccs-kpis   { display:grid;grid-template-columns:1fr 1fr;gap:0 }
.bccs-kpi    { padding:11px 14px;border-bottom:1px solid var(--bd);border-right:1px solid var(--bd) }
.bccs-kpi:nth-child(2n) { border-right:none }
.bccs-kpi-lbl{ font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:3px }
.bccs-kpi-val{ font-size:14px;font-weight:700;color:var(--text) }
.bccs-util-row{ padding:10px 14px;border-bottom:1px solid var(--bd) }
.bccs-util-bar{ height:5px;background:var(--bg3);border-radius:3px;margin-top:5px;overflow:hidden }
.bccs-util-fill{ height:100%;border-radius:3px;transition:width .5s ease }
.bccs-footer { padding:10px 14px;display:flex;align-items:center;justify-content:space-between }


/* ═══ PREMIUM CC UI ═══════════════════════════════════════════════════════ */
@keyframes cc-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* KPI strip */
.cc-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--bg);border:1px solid var(--bd);border-radius:18px;
  overflow:hidden;margin-bottom:16px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.cc-kpi-strip .k{padding:16px 20px;border-right:1px solid var(--bd);min-width:0}
.cc-kpi-strip .k:last-child{border-right:none}
.cc-kpi-strip .k-lbl{font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text3);margin-bottom:6px}
.cc-kpi-strip .k-val{font-size:22px;font-weight:800;letter-spacing:-.6px;line-height:1.1}

/* Card stack */
.cc-stack-box{position:relative;background:transparent;overflow:visible}
.cc-card-item{position:absolute;left:0;right:0;height:var(--ccard-h);
  transform-origin:50% 0;
  transition:top .3s cubic-bezier(.4,0,.2,1),transform .3s,opacity .3s;
  will-change:top,transform}

/* Nav */
.cc-nav-row{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:6px 0 2px}
:is(.cc-nav-btn){width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:50%;border:1.5px solid var(--bd);
  background:var(--bg);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--text2);transition:all .15s;flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06)}
:is(.cc-nav-btn:hover:not([disabled])){border-color:var(--ac);color:var(--ac);
  background:rgba(20,123,255,.06)}
:is(.cc-nav-btn[disabled]){opacity:.3;cursor:not-allowed;pointer-events:none}
:is(.cc-dot-item){height:6px!important;width:6px!important;min-height:0!important;min-width:0!important;border-radius:999px;cursor:pointer;flex-shrink:0;
  background:var(--bd2);transition:all .25s}
.cc-dot-item:hover:not(.on){background:var(--text3);transform:scale(1.25)}
.cc-dot-item.on{width:18px!important;border-radius:999px;background:var(--ac);box-shadow:0 1px 5px rgba(20,123,255,.4)}

/* Detail panel */
.cc-det{background:var(--bg);border:1px solid var(--bd);border-radius:20px;
  overflow:hidden}
.cc-det-head{padding:16px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--bd);background:var(--bg2)}
.cc-det-logo{width:36px;height:36px;border-radius:10px;flex-shrink:0;overflow:hidden}
.cc-det-bal-hero{padding:20px 18px 14px;border-bottom:1px solid var(--bd)}
.cc-det-bal-lbl{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text3);margin-bottom:6px}
.cc-det-bal-val{font-size:30px;font-weight:800;letter-spacing:-1.2px;line-height:1}
.cc-det-bal-avail{font-size:11px;color:var(--text3);margin-top:5px}
.cc-det-util-bar{height:6px;background:var(--bg3);border-radius:99px;
  margin-top:12px;overflow:hidden}
.cc-det-util-fill{height:100%;border-radius:99px;transition:width .45s}
.cc-det-util-row{display:flex;justify-content:space-between;margin-top:5px}
.cc-det-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--bd)}
.cc-det-metric{padding:13px 16px;border-right:1px solid var(--bd);min-width:0}
.cc-det-metric:last-child{border-right:none}
.cc-det-metric-lbl{font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text3);margin-bottom:4px;white-space:normal;overflow-wrap:break-word}
.cc-det-metric-val{font-size:16px;font-weight:800;letter-spacing:-.3px;overflow-wrap:break-word}
.cc-det-due{padding:12px 16px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-due-badge{display:inline-flex;align-items:center;padding:2px 8px;
  border-radius:20px;font-size:10px;font-weight:700}
.cc-det-footer{padding:11px 16px;display:flex;align-items:center;
  justify-content:space-between;background:var(--bg2)}

/* Tx section */
.cc-tx-wrap{background:var(--bg2);border:1px solid var(--bd);
  border-radius:var(--rl);overflow:hidden;margin-top:14px}
.cc-tx-hdr{padding:13px 16px;display:flex;align-items:center;
  justify-content:space-between;cursor:pointer;user-select:none;
  flex-wrap:wrap;row-gap:8px}
.cc-tx-hdr > span{white-space:nowrap;flex-shrink:0}
.cc-tx-hdr:hover{background:rgba(0,0,0,.02)}

/* Strat */
.cc-strat{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);
  overflow:hidden;margin-top:14px}
.cc-strat-hdr{padding:14px 18px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;background:var(--bg2)}
.cc-strat-grid{display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--bd)}
.cc-strat-opt{padding:18px;border:none;text-align:left;cursor:pointer;
  font-family:inherit;position:relative;transition:background .15s}
.cc-strat-opt:first-child{border-right:1px solid var(--bd)}
.cc-strat-tag{position:absolute;top:10px;right:10px;font-size:9px;
  font-weight:800;padding:2px 8px;border-radius:20px;color:#fff;letter-spacing:.05em}

@media(max-width:860px){
  .cc-kpi-strip{grid-template-columns:1fr 1fr}
  .cc-kpi-strip .k:nth-child(2){border-right:none}
  .cc-kpi-strip .k:nth-child(3){border-right:1px solid var(--bd)}
  .cc-det-metrics{grid-template-columns:1fr 1fr}
  .cc-det-metric:nth-child(2){border-right:none}
  .cc-strat-grid{grid-template-columns:1fr}
  .cc-strat-opt:first-child{border-right:none;border-bottom:1px solid var(--bd)}
}
@media(max-width:400px){
  .cc-det-metrics{grid-template-columns:1fr}
  .cc-det-metric{border-right:none!important;border-bottom:1px solid var(--bd)}
  .cc-det-metric:last-child{border-bottom:none}
}
.cc-grid-main{overflow:visible}
.cc-grid-main > *{min-width:0}
@media(max-width:700px){
  .cc-grid-main{grid-template-columns:1fr!important}
}


/* ═══ PREMIUM CARD FACES — v3 with 3D tilt + sheen ═══════════════ */
:is(:root){
  --ccard-h: 208px;
  --ccard-r: 26px;
  --ease-premium: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --card-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 8px 24px rgba(0,0,0,.18),
    0 2px 8px rgba(0,0,0,.10);
  --card-shadow-hover:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 16px 40px rgba(0,0,0,.26),
    0 6px 16px rgba(0,0,0,.14);
}

/* ── Card element ── */
.ccard-wrap {
  position: relative;
  width: 100%; height: var(--ccard-h);
  border-radius: var(--ccard-r);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,.08);
  isolation: isolate;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition:
    transform var(--dur-med) var(--ease-premium),
    box-shadow var(--dur-med) var(--ease-premium),
    border-color var(--dur-med) var(--ease-premium),
    filter var(--dur-med) var(--ease-premium);
}
.ccard-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%),
    linear-gradient(125deg, transparent 0%, rgba(255,255,255,.10) 24%, transparent 44%);
  z-index: 0; pointer-events: none;
}
.ccard-wrap::after {
  content: "";
  position: absolute; inset: 1px;
  border-radius: calc(var(--ccard-r) - 1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -20px 40px rgba(0,0,0,.08);
  pointer-events: none; z-index: 0;
}
.ccard-wrap:hover {
  transform:
    perspective(1200px) rotateX(5deg) rotateY(-7deg)
    translateY(-6px) scale(1.012);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(255,255,255,.16);
  filter: saturate(1.04);
}
.ccard-wrap:active {
  transform:
    perspective(1200px) rotateX(2deg) rotateY(-3deg)
    translateY(-1px) scale(.995);
}

/* ── Layers ── */
.ccard-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 24%),
    radial-gradient(circle at 84% 80%, rgba(0,0,0,.22), transparent 28%);
  opacity: .9; z-index: 0;
  transition: opacity var(--dur-med) var(--ease-premium);
}
.ccard-wrap:hover .ccard-glow { opacity: 1; }

.ccard-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 38%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 82%, rgba(0,0,0,.10) 0 1px, transparent 2px);
  mix-blend-mode: soft-light; opacity: .4; z-index: 0;
}

.ccard-halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 55%);
  opacity: 0; z-index: 0;
  transition: opacity var(--dur-med) var(--ease-premium);
}
.ccard-wrap:hover .ccard-halo { opacity: .65; }

/* Sheen sweep */
.ccard-sheen {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 35%,
    rgba(255,255,255,.18) 48%, rgba(255,255,255,.06) 52%,
    transparent 66%, transparent 100%
  );
  transform: translateX(-140%); opacity: .9;
}
.ccard-wrap:hover .ccard-sheen {
  transform: translateX(140%);
  transition: transform 900ms var(--ease-premium);
}

/* Textures */
.ctx-metal {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 1px, transparent 1px 7px);
  opacity: .2;
}
.ctx-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px; opacity: .15;
}
.ctx-soft {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.18), transparent 48%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,.24), transparent 44%);
  opacity: .45;
}
.ctx-rings {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.20), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(0,0,0,.26), transparent 30%);
  opacity: .4;
}
.ctx-frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.20),
    inset 0 0 0 3px rgba(255,255,255,.13),
    inset 0 0 0 10px rgba(255,255,255,.025);
}
.ctx-star {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.48) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 42%, rgba(255,255,255,.26) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 78%, rgba(255,255,255,.20) 0 1px, transparent 2px);
  opacity: .38;
}

/* Inner layout */
.ccard-inner {
  position: relative; z-index: 2; height: 100%;
  padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ccard-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px;
}
.ccard-issuer {
  min-width: 0; display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--dur-med) var(--ease-premium);
}
.ccard-wrap:hover .ccard-issuer { transform: translateY(-1px); }
.ccard-issuer-lbl {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; opacity: .72;
}
.ccard-name {
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.2; max-width: 18ch;
}

/* Network badge — top right */
.ccard-net-top {
  flex: 0 0 auto; min-width: 76px; min-height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 10px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform var(--dur-fast) var(--ease-premium),
    background var(--dur-fast) var(--ease-premium);
}
.ccard-wrap:hover .ccard-net-top {
  transform: translateY(-1px) scale(1.03);
  background: rgba(255,255,255,.12);
}

/* Hero watermark */
/* .ccard-hero removed */

/* Bottom row */
.ccard-bottom {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 10px;
}
.ccard-meta {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  transition: transform var(--dur-med) var(--ease-premium);
}
.ccard-wrap:hover .ccard-meta { transform: translateY(-1px); }
.ccard-tag {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-premium),
    transform var(--dur-fast) var(--ease-premium);
}
.ccard-wrap:hover .ccard-tag {
  background: rgba(255,255,255,.12); transform: translateY(-1px);
}
.ccard-num {
  font-size: 12px; letter-spacing: .22em;
  font-variant-numeric: tabular-nums; font-family: 'Courier New', monospace;
}
.ccard-bal {
  font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin-top: 2px;
}
.ccard-issuer-foot {
  font-size: 11px; opacity: .7; text-align: right; white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-premium),
    transform var(--dur-fast) var(--ease-premium);
}
.ccard-wrap:hover .ccard-issuer-foot { opacity: .9; transform: translateY(-1px); }

/* Chip CSS removed — no chip on cards */

/* Touch devices — no 3D */
@media(hover:none){
  .ccard-wrap:hover {
    transform: none;
    box-shadow: var(--card-shadow);
    border-color: rgba(255,255,255,.08);
    filter: none;
  }
  .ccard-wrap:active { transform: scale(.992); }
}
.mob-topbar{
  align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--bd);
  gap:10px; width:100%; box-sizing:border-box; overflow:hidden;
}
.mob-topbar > div:first-child{ min-width:0; flex:1 1 auto; overflow:hidden; }
.mob-topbar > div:first-child svg{ flex-shrink:0; }
#mob-pg-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.mob-topbar > div:last-child{ flex-shrink:0; }
@media(max-width:600px){
  :root { --ccard-h: 188px; --ccard-r: 20px; }
  .ccard-name { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce){
  .ccard-wrap, .ccard-issuer, .ccard-net-top,
  .ccard-hero, .ccard-meta, .ccard-tag, .ccard-issuer-foot,
  .ccard-halo, .ccard-glow, .ccard-sheen {
    transition: none !important; animation: none !important;
    transform: none !important;
  }
}


/* ═══ GLOBAL STANDARD — no dark squares, consistent panels ══════════════════ */

/* Page background matches panels — no contrast gap */
body, .mn { background: var(--bg) !important; }

/* ALL panels consistent: white bg, subtle border, gentle shadow, NO overflow:hidden */
:is(.pn){
  background: var(--bg) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--rl) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03) !important;
  overflow: visible !important;
}

/* KPI cards — same standard */
:is(.kp){
  background: var(--bg) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--rl) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

/* Stack wrapper — transparent, shadow can overflow freely */
:is(.cc-stack-box){
  position: relative !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Card stack grid — let shadows bleed outside */
:is(.cc-grid-main){
  overflow: visible !important;
}

/* ccard-wrap: shadow only on bottom, no lateral cutoff */
:is(.ccard-wrap){
  --card-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 6px 20px rgba(0,0,0,.14),
    0 2px 6px rgba(0,0,0,.08) !important;
  --card-shadow-hover:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 12px 32px rgba(0,0,0,.20),
    0 4px 12px rgba(0,0,0,.12) !important;
}

/* Remove box-shadow from cc detail/strat — use border only */
.cc-det, .cc-strat, .cc-tx-wrap {
  box-shadow: none !important;
}

/* Section wrappers — match panel standard */
.cc-owner-section, .bccs-section {
  background: transparent;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]){
}}



/* ── Animated "Scan Recurring Bills" button ─────────────────────────── */
@keyframes rsb-letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } }
@keyframes rsb-flicker { 50% { opacity: .3; } }
@keyframes rsb-appear { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rsb-sheen-sweep {
  0%, 88% { transform: translateX(-140%) skewX(-20deg); }
  100% { transform: translateX(240%) skewX(-20deg); }
}

.rsb-btn {
  --padding: 4px;
  --radius: 24px;
  --transition: .4s;
  --highlight-hue: 165deg;
  --highlight: hsl(var(--highlight-hue), 100%, 70%);
  --highlight-50: hsla(var(--highlight-hue), 100%, 70%, .5);
  --highlight-30: hsla(var(--highlight-hue), 100%, 70%, .3);
  --highlight-20: hsla(var(--highlight-hue), 100%, 70%, .2);
  --highlight-80: hsla(var(--highlight-hue), 100%, 70%, .8);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; border: none; font-family: inherit;
  border-radius: var(--radius); padding: 10px 20px; overflow: hidden;
  background: linear-gradient(180deg,#12D6C0,#147BFF); color: #fff;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35), inset 0 2px 2px rgba(255,255,255,.25),
    inset 0 4px 4px rgba(255,255,255,.15), inset 0 8px 8px rgba(255,255,255,.08),
    inset 0 -2px 4px rgba(0,0,0,.12),
    0 1px 2px rgba(9,53,110,.15);
  transition: box-shadow var(--transition), border-color var(--transition), background-color var(--transition), transform var(--transition);
}
.rsb-sheen {
  position: absolute; top: -40%; left: 0; width: 30%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-140%) skewX(-20deg);
  animation: rsb-sheen-sweep 3.2s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
.rsb-btn::before {
  content: ""; position: absolute;
  top: calc(0px - var(--padding)); left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--radius) + var(--padding)); pointer-events: none;
  background-image: linear-gradient(0deg, #0003, #0007); z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition);
  box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff3, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.rsb-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(0deg, #fff, var(--highlight), var(--highlight-50), 8%, transparent);
  background-position: 0 0; opacity: 0;
  transition: opacity var(--transition), filter var(--transition);
}
.rsb-btn:hover { border-color: hsla(var(--highlight-hue),100%,80%,.5); filter: brightness(1.06); transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35), inset 0 2px 2px rgba(255,255,255,.25),
    inset 0 4px 4px rgba(255,255,255,.15), inset 0 8px 8px rgba(255,255,255,.08),
    inset 0 -2px 4px rgba(0,0,0,.1),
    0 2px 4px rgba(9,53,110,.18);
}
.rsb-btn:hover::before {
  box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px var(--highlight-30) inset,
    1px 1px 1px #fff3, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.rsb-btn:hover::after { opacity: .8; -webkit-mask-image: linear-gradient(0deg,#fff,transparent); mask-image: linear-gradient(0deg,#fff,transparent); }
.rsb-btn:hover .rsb-svg { fill: #fff; filter: drop-shadow(0 0 3px var(--highlight)) drop-shadow(0 -2px 4px rgba(0,0,0,.35)); animation: none; }
.rsb-btn:active { border-color: hsla(var(--highlight-hue),100%,80%,.7); filter: brightness(.94); transform: translateY(0px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.3), inset 0 2px 2px rgba(255,255,255,.2),
    inset 0 -2px 4px rgba(0,0,0,.15),
    0 1px 2px rgba(9,53,110,.2);
}
.rsb-btn:active::before {
  box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px var(--highlight-80) inset,
    1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.rsb-btn:active::after { opacity: 1; -webkit-mask-image: linear-gradient(0deg,#fff,transparent); mask-image: linear-gradient(0deg,#fff,transparent); filter: brightness(140%); }
.rsb-btn:active .rsb-letter { text-shadow: 0 0 1px hsla(var(--highlight-hue),100%,90%,.9); animation: none; }
.rsb-btn:disabled { opacity: .6; cursor: not-allowed; }

.rsb-svg {
  margin-right: 8px; width: 20px; height: 20px; flex-shrink: 0;
  fill: #ffffff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  animation: rsb-flicker 2s linear infinite; animation-delay: .5s;
  transition: fill .4s, filter .4s, opacity .4s;
}
.rsb-txt-wrap { position: relative; display: flex; align-items: center; min-width: 11em; height: 1.2em; }
.rsb-btn-compact { width: 100%; box-sizing: border-box; padding: 8px 14px; min-height: 34px; }
.rsb-btn-compact .rsb-svg { width: 16px; height: 16px; margin-right: 6px; }
.rsb-btn-compact .rsb-txt-wrap { min-width: 0; font-size: 12px; }
.rsb-btn-compact .rsb-letter { font-size: 12px; }
.rsb-btn-mini {
  height: 28px; min-height: 28px; padding: 0 12px; border-radius: 20px; flex-shrink: 0; white-space: nowrap;
}
.rsb-btn-mini .rsb-svg { width: 13px; height: 13px; margin-right: 5px; flex-shrink: 0; }
.rsb-btn-mini .rsb-txt-wrap { min-width: 11.5em; font-size: 11px; height: auto; }
.rsb-btn-mini .rsb-letter { font-size: 11px; }
.rsb-txt-1, .rsb-txt-2 { position: absolute; left: 0; white-space: nowrap; }
.rsb-txt-1 { animation: rsb-appear 1s ease-in-out forwards; }
.rsb-btn.generating .rsb-txt-1 { opacity: 0; animation: none; }
.rsb-txt-2 { opacity: 0; }
.rsb-btn.generating .rsb-txt-2 { opacity: 1; }
.rsb-letter { display: inline-block; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.2); animation: rsb-letter-anim 2s ease-in-out infinite; transition: color .4s, text-shadow .4s, opacity .4s; }





/* ==== next <style> block ==== */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS — refined for both light & dark modes
═══════════════════════════════════════════════════════════ */
:is(:root){
  /* Tighter, more premium radius scale */
  --r:   12px;
  --rl:  16px;
  --rxl: 22px;
  --r2:  26px;

  /* Stronger shadows — Copilot-style depth */
  --sh-s: 0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sh-m: 0 4px 20px rgba(0,0,0,.10), 0 1px 6px rgba(0,0,0,.06);
  --sh-l: 0 12px 48px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.08);

  /* Brand teal override */
  --green:  #0FB47A;
  --greent: #0a7a54;
  --greenl: #e6f7f1;
  --gt:     #0a7a54;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-s: 0 1px 4px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
    --sh-m: 0 4px 20px rgba(0,0,0,.40), 0 1px 6px rgba(0,0,0,.25);
    --sh-l: 0 12px 48px rgba(0,0,0,.60), 0 4px 14px rgba(0,0,0,.35);

    --green:  #14DFA9;
    --greent: #14DFA9;
    --greenl: rgba(20,223,169,0.12);
    --gt:     #14DFA9;
  }
}

/* ═══════════════════════════════════════════════════════════
   2. TYPOGRAPHY — Copilot Money-style weight & spacing
═══════════════════════════════════════════════════════════ */
:is(.pg-t){
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
}
:is(.kl){
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
:is(.kv){
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
}
:is(.pt){
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

/* ═══════════════════════════════════════════════════════════
   3. SIDEBAR — Copilot-style slim nav
═══════════════════════════════════════════════════════════ */
:is(.sb){
  border-right-width: 1px !important;
}
:is(.ni){
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 9px 10px !important;
  margin-bottom: 2px !important;
  transition: background 0.15s, color 0.15s !important;
}
:is(.ni.on){
  font-weight: 600 !important;
}
:is(.ns){
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  padding: 14px 10px 5px !important;
}
:is(.s-logo){
  height: 62px !important;
  padding: 0 16px !important;
}
:is(.sf){
  padding: 10px !important;
}
:is(.u-row){
  border-radius: 10px !important;
  padding: 8px 10px !important;
}

/* ═══════════════════════════════════════════════════════════
   4. TOPBAR — slim, high-contrast header
═══════════════════════════════════════════════════════════ */
:is(.topb){
  height: 58px !important;
  padding: 0 24px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
:is(.ib){
  border-radius: var(--r) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 36px !important;
  padding: 0 14px !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
:is(.ib.p){
  background: linear-gradient(135deg, #0060C0, #0A6E63) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 14px rgba(20,123,255,.30) !important;
  font-weight: 600 !important;
}
:is(.ib.p:hover){
  opacity: 0.88 !important;
  box-shadow: 0 5px 20px rgba(20,123,255,.42) !important;
}
:is(.mnav){
  border-radius: 10px !important;
  height: 34px !important;
}

/* ═══════════════════════════════════════════════════════════
   5. KPI CARDS — Rocket Money-style metric tiles
═══════════════════════════════════════════════════════════ */
:is(.kg){
  gap: 12px !important;
}
:is(.kp){
  border-radius: 18px !important;
  padding: 18px 18px 16px !important;
  box-shadow: var(--sh-m) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
:is(.kp:hover){
  transform: translateY(-2px) !important;
  box-shadow: var(--sh-l) !important;
}
.kp[onclick] { cursor: pointer !important; }
.kp::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,123,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}
:is(.kv){
  margin: 8px 0 6px !important;
}
:is(.ks){
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* ═══════════════════════════════════════════════════════════
   6. PANELS — Copilot-style clean cards
═══════════════════════════════════════════════════════════ */
:is(.pn){
  border-radius: 18px !important;
  box-shadow: var(--sh-m) !important;
  overflow: visible !important;
  margin-bottom: 16px !important;
}
/* Only clip overflow for panels that explicitly need it (credit cards, etc.) */
.pn.clip { overflow: hidden !important; }
:is(.ph){
  padding: 16px 20px !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
}
.pb {
  padding: 16px 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   7. BILL ROWS — Rocket Money transaction style
═══════════════════════════════════════════════════════════ */
:is(.bx){
  border-radius: 18px !important;
  box-shadow: var(--sh-m) !important;
  overflow: hidden !important;
}
:is(.bi-row){
  padding: 13px 20px !important;
  transition: background 0.12s !important;
}
:is(.bi-row:last-child){
  border-bottom: none !important;
}
:is(.bi-nm){
  font-size: 14px !important;
  font-weight: 600 !important;
}
:is(.bcat){
  font-size: 12px !important;
}
:is(.tabbar){
  padding: 0 20px !important;
}
:is(.tab){
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 14px 0 !important;
}
:is(.bfoot){
  padding: 12px 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   8. ADD FORM — Copilot-style inline form card
═══════════════════════════════════════════════════════════ */
:is(.af){
  border-radius: 18px !important;
  box-shadow: var(--sh-m) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
:is(.fd input, .fd select){
  border-radius: 10px !important;
  height: 40px !important;
  font-size: 14px !important;
  padding: 0 14px !important;
}
:is(.fd label){
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 5px !important;
}

/* 9. MODAL — Rocket Money bottom-sheet style — merged into the canonical MODAL DESIGN SYSTEM block (line ~628). */

/* ═══════════════════════════════════════════════════════════
   10. PROGRESS BARS — Rocket Money colored budget bars
═══════════════════════════════════════════════════════════ */
:is(.pt2){
  border-radius: 99px !important;
  height: 6px !important;
  overflow: hidden !important;
}
:is(.pf){
  border-radius: 99px !important;
  transition: width 0.5s cubic-bezier(.4,0,.2,1) !important;
}
.prog-track, .bp-track, .inst-track {
  border-radius: 99px !important;
  height: 6px !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   11. BADGES & CHIPS — rounded pill style
═══════════════════════════════════════════════════════════ */
.badge, .chip, .due-badge, .inst-pill {
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

/* ═══════════════════════════════════════════════════════════
   12. TOGGLES & SEGMENTED CONTROLS
═══════════════════════════════════════════════════════════ */
:is(.hs-ctrl){
  border-radius: 14px !important;
  padding: 4px !important;
}
:is(.hs-btn){
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════
   13. INCOME ROWS — cleaner spacing
═══════════════════════════════════════════════════════════ */
:is(.ir){
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   14. TOAST — floating pill notification
═══════════════════════════════════════════════════════════ */
:is(.toast){
  border-radius: 14px !important;
  padding: 12px 18px !important;
  box-shadow: var(--sh-l) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════
   15. ONBOARDING
═══════════════════════════════════════════════════════════ */
:is(.ob-card){
  border-radius: 24px !important;
  overflow: hidden !important;
}
:is(.ob-next){
  border-radius: 12px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #0060C0, #0A6E63) !important;
  box-shadow: 0 4px 16px rgba(20,123,255,.28) !important;
}

/* ═══════════════════════════════════════════════════════════
   16. MAIN CONTENT SPACING
═══════════════════════════════════════════════════════════ */
:is(.sc){
  padding: 24px 26px !important;
}

/* ═══════════════════════════════════════════════════════════
   17. HC PANEL (detail view highlight)
═══════════════════════════════════════════════════════════ */
:is(.hc-panel){
  border-radius: 18px !important;
  box-shadow: 0 0 0 2px rgba(20,123,255,0.20), var(--sh-m) !important;
}

/* ═══════════════════════════════════════════════════════════
   18. EMPTY STATE
═══════════════════════════════════════════════════════════ */
:is(.empty-state-ico){
  border-radius: 18px !important;
  width: 56px !important;
  height: 56px !important;
}
:is(.empty-state-title){
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

/* ═══════════════════════════════════════════════════════════
   19. MOBILE BOTTOM NAV — Copilot-style frosted tab bar
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #mobile-nav-bar {
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
  }
  .mni {
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
  }
  .kp {
    border-radius: 16px !important;
    padding: 14px 14px 12px !important;
  }
  .pn, .bx, .af {
    border-radius: 16px !important;
  }
  .sc {
    padding: 16px 14px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .kv {
    font-size: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   20. TABLET — icon sidebar
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sc {
    padding: 18px 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   21. DESKTOP WIDE — more breathing room
═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .sc {
    padding: 28px 32px !important;
  }
  .kg {
    gap: 14px !important;
  }
}
@media (min-width: 1400px) {
  .sc {
    padding: 32px 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   22. LIGHT MODE — Copilot Money clean whites
═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    --bg:  #ffffff;
    --bg2: #F8FBFF;
    --bg3: #F2F8FF;
    --bg4: #E8F3FF;
    --bd:  rgba(20,123,255,.10);
    --bd2: rgba(20,123,255,.18);
    --glass: rgba(246,247,250,0.85);
    --glass-surface: rgba(255,255,255,0.80);
  }
  .kp {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,.06) !important;
  }
  .pn {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,.06) !important;
  }
  .bx {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,.06) !important;
  }
  .af {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,.06) !important;
  }
  .sb {
    background: #FFFFFF !important;
    border-right: 1px solid rgba(0,0,0,.07) !important;
  }
  .topb {
    background: rgba(246,247,250,0.90) !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
  }
  .bi-row {
    border-bottom: 1px solid rgba(0,0,0,.05) !important;
  }
  .ib:not(.p) {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,.10) !important;
  }
  .ib:not(.p):hover {
    background: #F0F2F8 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   23. DARK MODE — Copilot Money deep dark
═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]){
  :is(&){
    --bg:  #0E1018;
    --bg2: #161923;
    --bg3: #1C2030;
    --bg4: #222840;
    --bd:  rgba(255,255,255,.07);
    --bd2: rgba(255,255,255,.12);
    --glass: rgba(14,16,24,0.88);
    --glass-surface: rgba(22,25,35,0.84);
    --text:  #F0F2FF;
    --text2: #9196B8;
    --text3: #9CA2C8;
    --text4: #9aa0cc;
    --acl:   rgba(20,123,255,0.14);
    --redl:  rgba(255,59,48,0.14);
    --rel:   rgba(255,59,48,0.14);
    --orangel: rgba(255,149,0,0.14);
    --pul:   rgba(26,95,255,0.14);
  }
  .kp {
    background: rgba(22,25,35,0.90) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
  }
  .pn {
    background: rgba(22,25,35,0.90) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
  }
  .bx {
    background: rgba(22,25,35,0.90) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
  }
  .af {
    background: rgba(22,25,35,0.90) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
  }
  .sb {
    background: rgba(10,12,18,0.98) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
  .topb {
    background: rgba(10,12,18,0.88) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  .ib:not(.p) {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
  }
  .ib:not(.p):hover {
    background: rgba(255,255,255,.10) !important;
  }
  .bi-row:hover {
    background: rgba(255,255,255,.03) !important;
  }
  .bi-row {
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
  }
  #mobile-nav-bar {
    background: rgba(10,12,18,0.92) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
  }
  .mnav {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.07) !important;
  }
  select option {
    background: #1C2030 !important;
    color: #F0F2FF !important;
  }
  #modal-box, .md {
    border: 1px solid rgba(255,255,255,.09) !important;
  }
  .toast {
    border: 1px solid rgba(255,255,255,.09) !important;
  }
  .ob-card {
    border: 1px solid rgba(255,255,255,.08) !important;
  }
}}

/* ═══════════════════════════════════════════════════════════
   24. CREDIT CARDS — light & dark mode overrides
═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  .ccs-summary { background: #FFFFFF !important; border-color: rgba(0,0,0,.07) !important; }
  .ccs-owner   { background: #FFFFFF !important; border-color: rgba(0,0,0,.07) !important; }
  .ccs-detail  { background: #FFFFFF !important; border-color: rgba(0,0,0,.07) !important; }
  .ccs-strat   { background: #FFFFFF !important; border-color: rgba(0,0,0,.07) !important; }
  .ccs-strat-opt { background: #FFFFFF !important; }
  .ccs-strat-opt.on-av { background: rgba(255,149,0,.06) !important; }
  .ccs-strat-opt.on-sb { background: rgba(20,123,255,.06) !important; }
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]){
  .ccs-summary { background: rgba(22,25,35,.90) !important; border-color: rgba(255,255,255,.07) !important; }
  .ccs-owner   { background: rgba(22,25,35,.90) !important; border-color: rgba(255,255,255,.07) !important; }
  .ccs-detail  { background: rgba(22,25,35,.90) !important; border-color: rgba(255,255,255,.07) !important; }
  .ccs-strat   { background: rgba(22,25,35,.90) !important; border-color: rgba(255,255,255,.07) !important; }
  .ccs-stat    { border-right-color: rgba(255,255,255,.07) !important; }
  .ccs-kpi     { border-color: rgba(255,255,255,.07) !important; }
  .ccs-strat-opt { background: rgba(22,25,35,.90) !important; border-color: rgba(255,255,255,.07) !important; }
  .ccs-strat-opt.on-av { background: rgba(255,149,0,.09) !important; }
  .ccs-strat-opt.on-sb { background: rgba(20,123,255,.09) !important; }
  .ccs-detail-head { background: linear-gradient(135deg,rgba(20,123,255,.06) 0%,transparent 100%) !important; }
  .ccs-owner-head  { border-bottom-color: rgba(255,255,255,.07) !important; }
  .ccs-tl-table th { background: rgba(255,255,255,.03) !important; }
  .ccs-nav-btn { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; }
}}


/* ==== next <style> block ==== */
/* ═══════════════════════════════════════════════════════════════════════
   BILLFLOW ASSISTANT 2.0
   Context-aware, local-first financial copilot
   ═══════════════════════════════════════════════════════════════════════ */
#chat-fab{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  min-height:54px !important;
  right:22px !important;
  bottom:22px !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#147BFF,#1A5FFF) !important;
  border:none !important;
  box-shadow:0 8px 22px rgba(20,123,255,.32) !important;
  z-index:8900 !important;
  overflow:visible !important;
  transition:transform .18s ease,box-shadow .18s ease !important;
}
#chat-fab:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 28px rgba(20,123,255,.38) !important;
}
#chat-fab:active{transform:translateY(0) scale(.97) !important}
#chat-fab svg{width:22px !important;height:22px !important;pointer-events:none}
#chat-fab .bf-chat-fab-dot{
  position:absolute;right:-2px;top:-2px;width:11px;height:11px;border-radius:50%;
  background:#34c759;border:2.5px solid var(--bg);
}
#chat-fab[aria-expanded="true"] .bf-chat-fab-dot{display:none}

.bf-chat-panel{
  position:fixed;
  right:22px;
  bottom:88px;
  width:min(410px,calc(100vw - 32px));
  height:min(650px,calc(100vh - 116px));
  min-height:430px;
  z-index:9000;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--text);
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border:1px solid var(--bd);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.08);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  transform-origin:calc(100% - 26px) 100%;
  animation:bfChatIn .2s ease both;
}
@keyframes bfChatIn{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.bf-chat-panel.is-expanded{
  right:24px;bottom:24px;
  width:min(760px,calc(100vw - 48px));
  height:min(820px,calc(100vh - 48px));
}
.bf-chat-header{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  min-height:60px;padding:11px 10px 11px 14px;
  border-bottom:1px solid var(--bd);
}
.bf-chat-avatar{
  position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,#147BFF,#1A5FFF);
}
.bf-chat-avatar svg{width:18px;height:18px}
.bf-chat-avatar::after{
  content:'';position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:#34c759;border:2px solid var(--bg);
}
.bf-chat-head-copy{min-width:0;flex:1}
.bf-chat-title{font-size:14px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-chat-subtitle{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-chat-subtitle svg{width:11px;height:11px;flex:0 0 auto;color:var(--gt)}
.bf-chat-head-actions{display:flex;align-items:center;gap:1px;flex:0 0 auto}
.bf-chat-icon-btn{
  width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:none;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text3);background:transparent;cursor:pointer;
  transition:background .14s,color .14s;
}
.bf-chat-icon-btn:hover{background:var(--bg2);color:var(--text)}
.bf-chat-icon-btn svg{width:15px;height:15px}

.bf-chat-context-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:8px 14px 4px;overflow-x:auto;scrollbar-width:none;
}
.bf-chat-context-bar::-webkit-scrollbar{display:none}
.bf-chat-context-chip{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:10.5px;font-weight:600;color:var(--text3);white-space:nowrap;
}
.bf-chat-context-chip svg{width:11px;height:11px;color:var(--text3);opacity:.7}

.bf-chat-messages{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:15px 14px 12px;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.bf-chat-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 6px 8px}
.bf-chat-empty-icon{
  width:60px;height:60px;border-radius:20px;margin:2px 0 14px;
  display:flex;align-items:center;justify-content:center;color:var(--ac);
  background:var(--acl);
}
.bf-chat-empty-icon svg{width:26px;height:26px}
.bf-chat-empty-title{font-size:17px;font-weight:850;letter-spacing:-.4px;color:var(--text)}
.bf-chat-empty-copy{max-width:320px;margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--text3)}
.bf-chat-privacy{
  display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:5px 9px;border-radius:999px;
  background:var(--greenl);color:var(--greent);font-size:10px;font-weight:650;
}
.bf-chat-privacy svg{width:11px;height:11px}
.bf-chat-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:16px;text-align:left}
.bf-chat-quick{
  min-height:62px;padding:10px 11px;border:1px solid var(--bd);border-radius:13px;
  background:var(--bg2);color:var(--text);cursor:pointer;font-family:inherit;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
  transition:border-color .15s,background .15s;
}
.bf-chat-quick:hover{border-color:var(--sel-border);background:var(--sel-bg)}
.bf-chat-quick svg{width:16px;height:16px;color:var(--ac)}
.bf-chat-quick span{font-size:11px;font-weight:700;line-height:1.3}

.bf-chat-turn{display:flex;flex-direction:column;margin-bottom:14px}
.bf-chat-turn.is-user{align-items:flex-end}
.bf-chat-turn.is-assistant{align-items:flex-start}
.bf-chat-bubble{
  position:relative;max-width:91%;padding:10px 12px;border-radius:15px;
  font-size:12.5px;line-height:1.58;word-break:break-word;
}
.bf-chat-turn.is-user .bf-chat-bubble{
  color:#fff;background:linear-gradient(145deg,#147BFF,#1A5FFF);
  border-radius:15px 15px 4px 15px;
}
.bf-chat-turn.is-assistant .bf-chat-bubble{
  color:var(--text);background:var(--bg2);
  border-radius:15px 15px 15px 4px;
}
.bf-chat-meta{margin:4px 5px 0;font-size:9px;color:var(--text4)}
.bf-chat-bubble p{margin:0 0 8px}.bf-chat-bubble p:last-child{margin-bottom:0}
.bf-chat-bubble ul,.bf-chat-bubble ol{margin:6px 0 2px;padding-left:18px}
.bf-chat-bubble li{margin:3px 0}
.bf-chat-bubble b,.bf-chat-bubble strong{font-weight:800}
.bf-chat-bubble code{padding:1px 5px;border-radius:5px;background:var(--bg3);font-family:'SF Mono','Fira Code',monospace;font-size:.9em}
.bf-chat-answer-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;letter-spacing:-.1px;margin-bottom:8px}
.bf-chat-answer-title svg{width:15px;height:15px;color:var(--ac);flex:0 0 auto}
.bf-chat-muted{color:var(--text3)}
.bf-chat-small{font-size:10.5px;color:var(--text3)}
.bf-chat-divider{height:1px;background:var(--bd);margin:9px 0}
.bf-chat-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}
.bf-chat-stat{
  min-width:0;padding:9px 10px;border:1px solid var(--bd);border-radius:11px;background:var(--bg2);
}
.bf-chat-stat-label{font-size:8.5px;font-weight:750;letter-spacing:.065em;text-transform:uppercase;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-chat-stat-value{margin-top:3px;font-size:15px;font-weight:850;letter-spacing:-.35px;color:var(--text)}
.bf-chat-stat-value.good{color:var(--gt)}
.bf-chat-stat-value.warn{color:var(--am)}
.bf-chat-stat-value.bad{color:var(--re)}
.bf-chat-insight{
  display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 10px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--bd);border-left:2.5px solid var(--ac);color:var(--text2);
}
.bf-chat-insight.good{border-left-color:var(--gt)}
.bf-chat-insight.warn{border-left-color:var(--am)}
.bf-chat-insight.bad{border-left-color:var(--re)}
.bf-chat-insight svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;color:var(--ac)}
.bf-chat-insight.good svg{color:var(--gt)}
.bf-chat-insight.warn svg{color:var(--am)}
.bf-chat-insight.bad svg{color:var(--re)}
.bf-chat-list{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.bf-chat-list-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:7px 8px;border-radius:9px;background:var(--bg2);
}
.bf-chat-list-main{min-width:0}
.bf-chat-list-title{font-size:11.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-chat-list-sub{font-size:9.5px;color:var(--text3);margin-top:1px}
.bf-chat-list-value{font-size:11.5px;font-weight:800;white-space:nowrap;text-align:right}
.bf-chat-list-value.good{color:var(--gt)}
.bf-chat-list-value.warn{color:var(--am)}
.bf-chat-list-value.bad{color:var(--re)}
.bf-chat-progress{height:4px;margin-top:5px;border-radius:99px;background:var(--bg3);overflow:hidden}
.bf-chat-progress > span{display:block;height:100%;border-radius:99px;background:var(--ac)}
.bf-chat-category{margin-top:7px}
.bf-chat-category-head{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;margin-bottom:3px}
.bf-chat-category-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-chat-category-bar{height:4px;background:var(--bg3);border-radius:99px;overflow:hidden}
.bf-chat-category-bar span{display:block;height:100%;border-radius:99px;background:var(--ac)}
.bf-chat-score{display:flex;align-items:center;gap:12px;margin:7px 0}
.bf-chat-score-ring{
  --score:0;position:relative;width:58px;height:58px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--ac) calc(var(--score)*1%),var(--bg3) 0);
  display:flex;align-items:center;justify-content:center;
}
.bf-chat-score-ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--bg2)}
.bf-chat-score-ring b{position:relative;z-index:1;font-size:16px;font-weight:850}
.bf-chat-score-copy{min-width:0;flex:1}
.bf-chat-score-copy b{display:block;font-size:12px;margin-bottom:3px}
.bf-chat-score-copy span{display:block;font-size:10px;line-height:1.45;color:var(--text3)}

.bf-chat-actions,.bf-chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;max-width:94%}
.bf-chat-action,.bf-chat-suggestion{
  min-height:29px;min-width:0;padding:6px 10px;border-radius:9px;font-family:inherit;
  font-size:10.5px;font-weight:700;line-height:1.2;cursor:pointer;
  transition:background .13s,border-color .13s,color .13s;
}
.bf-chat-action{border:1px solid var(--bd2);background:var(--bg2);color:var(--ac)}
.bf-chat-action:hover{background:var(--sel-bg);border-color:var(--sel-border)}
.bf-chat-action.good{color:var(--greent)}
.bf-chat-action.danger{color:var(--redt)}
.bf-chat-action.neutral{color:var(--text2)}
.bf-chat-suggestion{border:1px solid var(--bd);background:var(--bg);color:var(--text2);font-weight:600}
.bf-chat-suggestion:hover{border-color:var(--sel-border);color:var(--ac)}

.bf-chat-typing{display:inline-flex;align-items:center;gap:4px;padding:11px 13px;border-radius:16px 16px 16px 4px;background:var(--bg2)}
.bf-chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:bfChatDot 1.15s infinite ease-in-out}
.bf-chat-typing span:nth-child(2){animation-delay:.14s}.bf-chat-typing span:nth-child(3){animation-delay:.28s}
@keyframes bfChatDot{0%,60%,100%{transform:translateY(0);opacity:.38}30%{transform:translateY(-4px);opacity:1}}

.bf-chat-composer-wrap{flex:0 0 auto;border-top:1px solid var(--bd);padding:9px 10px 10px}
.bf-chat-shortcuts{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:0 1px 7px;scrollbar-width:none}
.bf-chat-shortcuts::-webkit-scrollbar{display:none}
.bf-chat-shortcut{
  flex:0 0 auto;min-height:27px;min-width:0;padding:5px 9px;border-radius:999px;
  border:1px solid var(--bd);background:var(--bg2);color:var(--text2);font-size:9.5px;font-weight:650;font-family:inherit;cursor:pointer;
}
.bf-chat-shortcut:hover{color:var(--ac);border-color:var(--sel-border);background:var(--sel-bg)}
.bf-chat-composer{
  display:flex;align-items:flex-end;gap:6px;padding:5px 5px 5px 9px;
  border:1px solid rgba(20,123,255,.20);border-radius:15px;background:var(--bg2);
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.bf-chat-composer:focus-within{
  border-color:rgba(20,123,255,.38);
  box-shadow:0 0 0 2px rgba(20,123,255,.07),0 2px 10px rgba(20,123,255,.05);
  background:var(--bg);
}
.bf-chat-input:focus,
.bf-chat-input:focus-visible{
  outline:none!important;
  outline-offset:0!important;
  border:none!important;
  box-shadow:none!important;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .bf-chat-composer{border-color:rgba(255,255,255,.16)}
  .bf-chat-composer:focus-within{
    border-color:rgba(85,166,255,.45);
    box-shadow:0 0 0 2px rgba(20,123,255,.09),0 2px 12px rgba(0,0,0,.16);
  }
}}
.bf-chat-input{
  flex:1;min-width:0;max-height:104px;min-height:34px;height:34px;padding:8px 2px;
  resize:none;overflow-y:auto;border:none !important;outline:none !important;box-shadow:none !important;
  background:transparent !important;color:var(--text);font-size:13px;line-height:1.35;font-family:inherit;cursor:text;
}
.bf-chat-input::placeholder{color:var(--text3)}
.bf-chat-composer-btn{
  flex:0 0 auto;width:34px;height:34px;min-width:34px;min-height:34px;border-radius:11px;border:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--text3);background:transparent;cursor:pointer;
}
.bf-chat-composer-btn:hover{background:var(--bg2);color:var(--text)}
.bf-chat-composer-btn.is-listening{color:var(--re);background:var(--redl);animation:bfChatMic 1.1s infinite}
@keyframes bfChatMic{50%{box-shadow:0 0 0 6px rgba(255,59,48,0)}}
.bf-chat-send{
  color:#fff !important;background:linear-gradient(145deg,#147BFF,#1A5FFF) !important;
}
.bf-chat-send:disabled{opacity:.45;cursor:not-allowed}
.bf-chat-composer-btn svg{width:16px;height:16px}
.bf-chat-footnote{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;font-size:8.5px;color:var(--text4);text-align:center}
.bf-chat-footnote svg{width:9px;height:9px}

.bf-chat-toast{
  position:absolute;left:50%;bottom:86px;transform:translateX(-50%) translateY(8px);
  max-width:calc(100% - 32px);padding:8px 11px;border-radius:10px;background:rgba(28,28,30,.94);color:#fff;
  font-size:10.5px;font-weight:650;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bf-chat-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .bf-chat-panel{background:rgba(14,16,24,.94);border-color:rgba(255,255,255,.10);box-shadow:0 20px 60px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3)}
  .bf-chat-quick,.bf-chat-stat,.bf-chat-list-row,.bf-chat-suggestion,.bf-chat-composer,.bf-chat-insight{background:rgba(255,255,255,.04)}
  .bf-chat-turn.is-assistant .bf-chat-bubble{background:rgba(255,255,255,.06)}
  .bf-chat-score-ring::after{background:#181b27}
}}

@media(max-width:768px){
  #chat-fab{right:14px !important;bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important;border-radius:16px !important}
  .bf-chat-panel,.bf-chat-panel.is-expanded{
    left:8px;right:8px;bottom:calc(66px + env(safe-area-inset-bottom,0px));
    width:auto;height:min(74dvh,660px);min-height:420px;border-radius:22px;
  }
  .bf-chat-panel.is-expanded{top:8px;bottom:calc(66px + env(safe-area-inset-bottom,0px));height:auto}
  .bf-chat-header{min-height:62px;padding:9px 9px 9px 12px}
  .bf-chat-head-actions .bf-chat-icon-btn[data-chat-control="expand"]{display:none}
  .bf-chat-messages{padding:13px 11px 10px}
  .bf-chat-bubble{max-width:94%;font-size:13px}
  .bf-chat-quick-grid{gap:7px}
  .bf-chat-composer-wrap{padding-bottom:9px}
  .bf-chat-input{font-size:16px}
}
@media(max-width:380px){
  .bf-chat-panel,.bf-chat-panel.is-expanded{left:5px;right:5px;border-radius:19px}
  .bf-chat-quick-grid{grid-template-columns:1fr}
  .bf-chat-stat-grid{gap:5px}
}
@media(prefers-reduced-motion:reduce){
  .bf-chat-panel,#chat-fab,.bf-chat-typing span,.bf-chat-composer-btn.is-listening{animation:none !important;transition:none !important}
}

/* ==== next <style> block ==== */
/* ═══════════════════════════════════════════════════════════════════════
   BILLFLOW 2026.07 — localization, goals, mobile & recurring scan patch
   Pure HTML/CSS/JavaScript; no React/Tailwind runtime required.
   ═══════════════════════════════════════════════════════════════════════ */

:is(:root){
  --bf-mobile-nav-h:64px;
  --bf-safe-bottom:env(safe-area-inset-bottom,0px);
  --bf-viewport-h:100dvh;
}

/* ── Global language dropdown with embedded country flags ───────────── */
.bf-lang-switcher{
  position:relative;display:inline-flex;align-items:center;flex-shrink:0;
  color:var(--text);font-family:inherit;
}
.bf-lang-trigger{
  min-width:164px;height:36px!important;min-height:36px!important;
  display:inline-flex;align-items:center;gap:9px;
  padding:0 10px!important;border:1px solid var(--bd2)!important;
  border-radius:12px!important;background:var(--bg)!important;color:var(--text)!important;
  box-shadow:var(--sh-s);font-family:inherit;cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.bf-lang-trigger:hover{
  background:var(--bg2)!important;border-color:var(--sel-border)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.bf-lang-trigger:active{transform:translateY(1px)}
.bf-lang-switcher.is-open .bf-lang-trigger{
  border-color:var(--ac)!important;box-shadow:var(--sel-glow),var(--sh-s);
}
.bf-lang-flag-frame{
  width:29px;height:20px;flex:0 0 29px;overflow:hidden;border-radius:5px;
  background:#fff;border:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 3px rgba(0,0,0,.16);display:inline-flex;align-items:center;justify-content:center;
}
.bf-lang-flag{display:block;width:100%;height:100%;object-fit:cover}
.bf-lang-trigger-copy{
  min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;text-align:left;
}
.bf-lang-current-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-size:12.5px;font-weight:650;line-height:1;color:var(--text);
}
.bf-lang-current-code{
  font-size:9px;font-weight:750;line-height:1;color:var(--text3);
  letter-spacing:.06em;text-transform:uppercase;
}
.bf-lang-chevron{
  width:14px;height:14px;flex:0 0 14px;color:var(--text3);
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.bf-lang-switcher.is-open .bf-lang-chevron{transform:rotate(180deg);color:var(--ac)}

/* The menu is portaled to <body>, preventing clipping by mobile/topbar overflow. */
#bf-lang-menu-portal{
  position:fixed;z-index:12050;width:244px;max-width:calc(100vw - 16px);
  padding:6px;border:1px solid var(--bd2);border-radius:15px;
  background:var(--bg);color:var(--text);box-shadow:0 18px 52px rgba(0,0,0,.22),0 4px 16px rgba(0,0,0,.10);
  opacity:0;transform:translateY(-5px) scale(.985);transform-origin:top right;
  transition:opacity .14s ease,transform .14s ease;
  overscroll-behavior:contain;
}
#bf-lang-menu-portal.is-open{opacity:1;transform:translateY(0) scale(1)}
#bf-lang-menu-portal[data-placement="top"]{transform-origin:bottom right}
#bf-lang-menu-portal[hidden]{display:none!important}
.bf-lang-menu-head{
  padding:7px 10px 6px;font-size:10px;font-weight:750;color:var(--text3);
  letter-spacing:.075em;text-transform:uppercase;
}
.bf-lang-option{
  width:100%;min-width:0;min-height:48px!important;height:auto!important;
  display:grid;grid-template-columns:31px minmax(0,1fr) 20px;align-items:center;gap:10px;
  padding:7px 9px!important;border:1px solid transparent!important;border-radius:10px!important;
  background:transparent!important;color:var(--text)!important;text-align:left;font-family:inherit;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.bf-lang-option:hover,.bf-lang-option:focus-visible{
  background:var(--bg2)!important;border-color:var(--bd)!important;
}
.bf-lang-option.is-active{
  background:var(--acl)!important;border-color:var(--sel-border)!important;color:var(--ac)!important;
}
.bf-lang-option .bf-lang-flag-frame{width:29px;height:20px;flex-basis:29px}
.bf-lang-option-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.bf-lang-option-name{
  font-size:13px;font-weight:650;line-height:1.15;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bf-lang-option.is-active .bf-lang-option-name{color:var(--ac)}
.bf-lang-option-region{
  font-size:10px;font-weight:500;line-height:1.15;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bf-lang-option-check{
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  color:transparent;border-radius:50%;
}
.bf-lang-option.is-active .bf-lang-option-check{color:var(--ac)}
.bf-lang-option-check svg{width:16px;height:16px}

#bf-login-lang{position:absolute;top:16px;right:16px;z-index:4}
#bf-settings-lang-host{display:flex;justify-content:flex-end;min-width:220px}
#bf-settings-lang-host .bf-lang-trigger{width:230px;max-width:100%}
.topb,.topb .tb-r,.mob-topbar,#mob-topbar{overflow:visible!important}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .bf-lang-trigger,#bf-lang-menu-portal{background:#161923!important;border-color:rgba(255,255,255,.12)!important}
  .bf-lang-trigger:hover{background:#1C2030!important}
  .bf-lang-flag-frame{border-color:rgba(255,255,255,.18);box-shadow:0 1px 4px rgba(0,0,0,.45)}
  #bf-lang-menu-portal{box-shadow:0 22px 60px rgba(0,0,0,.56),0 5px 18px rgba(0,0,0,.34)}
  .bf-lang-option:hover,.bf-lang-option:focus-visible{background:#1C2030!important;border-color:rgba(255,255,255,.08)!important}
  .bf-lang-option.is-active{background:rgba(20,123,255,.16)!important;border-color:rgba(20,123,255,.38)!important}
}}

@media(max-width:600px){
  #bf-login-lang{top:12px;right:12px}
  #bf-login-lang .bf-lang-trigger{min-width:142px;height:34px!important;min-height:34px!important}
  #bf-mobile-lang .bf-lang-trigger{
    min-width:48px;width:48px;height:36px!important;min-height:36px!important;
    gap:5px;padding:0 7px!important;
  }
  #bf-mobile-lang .bf-lang-trigger-copy{display:none}
  #bf-mobile-lang .bf-lang-flag-frame{width:25px;height:18px;flex-basis:25px}
  #bf-mobile-lang .bf-lang-chevron{width:11px;height:11px;flex-basis:11px}
  #bf-settings-lang-host{width:100%;justify-content:stretch;min-width:0}
  #bf-settings-lang-host .bf-lang-switcher,#bf-settings-lang-host .bf-lang-trigger{width:100%;min-width:0}
  #bf-lang-menu-portal{width:min(244px,calc(100vw - 16px))}
}

@media(max-width:390px){
  #bf-login-lang .bf-lang-trigger{min-width:48px;width:48px;padding:0 7px!important;gap:5px}
  #bf-login-lang .bf-lang-trigger-copy{display:none}
  #bf-login-lang .bf-lang-flag-frame{width:25px;height:18px;flex-basis:25px}
  #bf-login-lang .bf-lang-chevron{width:11px;height:11px;flex-basis:11px}
}
.bf-logo-credit{
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:5px 8px;font-size:9.5px;line-height:1.2;color:var(--text3);
}
.bf-logo-credit a{color:var(--text3);text-decoration:none;font-weight:650}
.bf-logo-credit a:hover{color:var(--ac);text-decoration:underline}
.sb.collapsed .bf-logo-credit{display:none}

/* ── Mobile viewport and scroll repair ────────────────────────────────── */
@media(max-width:768px){
  /* Same CSS Grid blowout root cause found on the Credit Cards page: a
     grid item's default min-width:auto means it won't shrink below its
     content's natural width, so any grid with fixed/fr columns (there are
     ~46 of these, mostly inline-styled, across the app) can silently push
     the page wider than the viewport on mobile — invisible since the page
     already has overflow-x:hidden, it just looks like content got cut off
     at the edge. Force every direct child of a grid to be shrinkable. */
  .sc [style*="display:grid"] > *,
  .sc [style*="display: grid"] > *,
  .sc .kg > *, .sc .dash-kpi-row > *{
    min-width:0;
  }
  html,body{
    width:100%;height:100%;max-height:none!important;
    overflow:hidden!important;overscroll-behavior:none;
  }
  #app-screen,#app-screen.visible,#app-screen.visible.sb-collapsed{
    position:fixed!important;inset:0!important;width:100%!important;
    height:var(--bf-viewport-h)!important;min-height:0!important;
    overflow:hidden!important;display:grid!important;
    grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important;
  }
  #app-screen .layout{height:100%!important;min-height:0!important;overflow:hidden!important}
  #app-screen .mn{
    width:100%!important;height:100%!important;min-height:0!important;
    overflow:hidden!important;display:flex!important;flex-direction:column!important;
  }
  #main-content.sc{
    position:relative!important;flex:1 1 auto!important;height:auto!important;
    min-height:0!important;max-height:none!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;touch-action:pan-y!important;
    scroll-behavior:auto!important;
    padding-bottom:calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom) + 48px)!important;
    scroll-padding-bottom:calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom) + 36px)!important;
  }
  #main-content.sc > *:last-child{margin-bottom:24px!important}
  #mobile-nav-bar{
    display:flex;position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    top:auto!important;width:100%!important;
    height:calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom))!important;
    min-height:calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom))!important;
    padding-bottom:var(--bf-safe-bottom)!important;
    transform:translate3d(0,0,0)!important;will-change:transform;
    z-index:800!important;contain:layout paint;
  }
  #mobile-more-menu{
    position:fixed!important;left:0!important;right:0!important;
    bottom:calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom))!important;
    max-height:calc(var(--bf-viewport-h) - var(--bf-mobile-nav-h) - var(--bf-safe-bottom) - 24px)!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
    z-index:900!important;
  }
  #chat-fab{
    bottom:calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom) + 14px)!important;
    z-index:920!important;
  }
  .bf-chat-panel,.bf-chat-panel.is-expanded{
    z-index:930!important;
    bottom:calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom) + 10px)!important;
    max-height:calc(var(--bf-viewport-h) - var(--bf-mobile-nav-h) - var(--bf-safe-bottom) - 20px)!important;
  }
  .bf-chat-panel.is-expanded{top:8px!important;height:auto!important}
  .bf-logo-credit.bf-logo-credit-mobile{padding:11px 8px 4px}
  .bf-lang-switcher{max-width:100%}
}


body.bf-modal-open #chat-fab,body.bf-modal-open #chat-widget{display:none!important}
body.bf-modal-open .toast{bottom:calc(94px + var(--bf-safe-bottom))!important;right:14px!important}
@media(max-width:768px){
  body.bf-inline-form-open #chat-fab,body.bf-inline-form-open #chat-widget{display:none!important}
  .fa{padding-bottom:4px}
}

/* ── Opaque, legible mobile modals — especially dark mode ─────────────── */
#modal{overscroll-behavior:none;touch-action:none}
#modal-box .md{min-height:0!important;overflow:hidden!important}
#modal-box .md-form{
  min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
}
@media(max-width:768px){
  #modal{align-items:flex-end!important;padding:0!important}
  #modal-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,.72)!important}
  #modal-box{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;max-width:100%!important;
    height:calc(var(--bf-viewport-h) - 12px)!important;max-height:calc(var(--bf-viewport-h) - 12px)!important;
    min-height:0!important;border-radius:22px 22px 0 0!important;
    overflow:hidden!important;padding:0!important;
  }
  #modal-box .md{height:100%!important;max-height:100%!important;flex:1 1 auto!important}
  #modal-box .md-hdr{flex:0 0 auto}
  #modal-box .md-form{padding-bottom:24px!important}
  #modal-box .md-acts{
    position:relative!important;bottom:auto!important;flex:0 0 auto!important;
    padding-bottom:calc(16px + var(--bf-safe-bottom))!important;
  }
}
@media(max-width:768px) and (prefers-color-scheme:dark){
  #modal-box,
  #modal-box .md,
  #modal-box .md-hdr,
  #modal-box .md-form,
  #modal-box .md-acts{
    background:#161923!important;
    background-color:#161923!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  #modal-box{border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 -18px 70px rgba(0,0,0,.72)!important}
  #modal-box .md-acts{border-top-color:rgba(255,255,255,.10)!important}
  #modal-box .md-fld input,#modal-box .md-fld select,#modal-box .md-fld textarea,
  #modal-box .fd input,#modal-box .fd select,#modal-box .fd textarea{
    background:#1c2030!important;color:#f0f2ff!important;border-color:rgba(255,255,255,.14)!important;
  }
  #modal-box .md-fld input:focus,#modal-box .md-fld select:focus,#modal-box .md-fld textarea:focus,
  #modal-box .fd input:focus,#modal-box .fd select:focus,#modal-box .fd textarea:focus{
    background:#222840!important;border-color:var(--ac)!important;
  }
  #modal-box .btn-cancel{background:#222840!important;border-color:rgba(255,255,255,.13)!important;color:#f0f2ff!important}
}

/* ── Goal planner/checklist ────────────────────────────────────────────── */
.bf-goals-page{display:flex;flex-direction:column;flex:1;min-width:0}
.bf-goals-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.bf-goals-title{font-size:22px;font-weight:850;letter-spacing:-.55px;color:var(--text)}
.bf-goals-sub{font-size:13px;color:var(--text2);margin-top:3px;line-height:1.5}
.bf-goal-grid{padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.bf-goal-card{
  background:var(--bg);border:1px solid var(--bd);border-radius:18px;
  padding:16px;min-width:0;box-shadow:var(--sh-s);
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.bf-goal-card:hover{transform:translateY(-1px);box-shadow:var(--sh-m)}
.bf-goal-card.is-achieved{border-color:rgba(52,199,89,.45)}
.bf-goal-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bf-goal-icon{
  width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;color:var(--ac);background:linear-gradient(145deg,var(--acl),rgba(18,214,192,.10));
  border:1px solid rgba(20,123,255,.14);
}
.bf-goal-icon svg{width:20px;height:20px}
.bf-goal-title-wrap{min-width:0;flex:1}
.bf-goal-name{font-size:15px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-goal-meta{font-size:10.5px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-goal-actions{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.bf-goal-money-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:8px}
.bf-goal-money-label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.bf-goal-money-value{font-size:16px;font-weight:850;letter-spacing:-.4px;margin-top:2px}
.bf-goal-progress{height:8px;background:var(--bg3);border-radius:999px;overflow:hidden}
.bf-goal-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ac),#12D6C0);transition:width .3s}
.bf-goal-progress.is-done span{background:linear-gradient(90deg,var(--green),#12D6C0)}
.bf-goal-progress-meta{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:10.5px;color:var(--text3)}
.bf-goal-check-summary{
  display:grid;grid-template-columns:minmax(70px,.55fr) minmax(0,1.45fr);gap:8px;margin-top:13px;padding:10px;
  border:1px solid var(--bd);border-radius:13px;background:var(--bg2);
}
.bf-goal-check-stat{min-width:0}
.bf-goal-check-stat b{display:block;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-goal-check-stat span{display:block;font-size:9.5px;color:var(--text3);margin-top:2px}
.bf-goal-checklist{margin-top:10px;border-top:1px solid var(--bd);padding-top:7px}
.bf-goal-checklist summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:34px;font-size:11px;font-weight:700;color:var(--ac);user-select:none;
}
.bf-goal-checklist summary::-webkit-details-marker{display:none}
.bf-goal-checklist-items{display:flex;flex-direction:column;gap:5px;padding-top:5px}
.bf-goal-check-item{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;
  min-height:38px;padding:6px 8px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);
}
.bf-goal-check-item.is-done{background:var(--greenl);border-color:rgba(52,199,89,.20)}
.bf-goal-check-item.is-done .bf-goal-check-name{text-decoration:line-through;color:var(--text3)}
.bf-goal-check-box{
  width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;
  accent-color:var(--green);cursor:pointer;
}
.bf-goal-check-name{font-size:11.5px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-goal-check-amount{font-size:11px;font-weight:750;color:var(--text2);white-space:nowrap}
.bf-goal-deposits{margin-top:10px;border-top:1px solid var(--bd);padding-top:8px}
.bf-goal-template-note{
  display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;
  background:var(--acl);border:1px solid rgba(20,123,255,.16);font-size:11px;line-height:1.5;color:var(--text2);
}
.bf-goal-template-note svg{flex:0 0 auto;color:var(--ac);margin-top:1px}
.bf-goal-editor{display:flex;flex-direction:column;gap:8px}
.bf-goal-editor-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;
  padding-top:12px;border-top:1px solid var(--bd);
}
.bf-goal-editor-title{font-size:12px;font-weight:800;color:var(--text)}
.bf-goal-editor-summary{font-size:10.5px;color:var(--text3);text-align:right}
.bf-goal-editor-list{display:flex;flex-direction:column;gap:7px}
.bf-goal-editor-row{
  display:grid;grid-template-columns:24px minmax(120px,1fr) minmax(92px,120px) 32px;
  align-items:center;gap:7px;padding:7px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);
}
.bf-goal-editor-row input[type="checkbox"]{width:18px!important;height:18px!important;min-width:18px;accent-color:var(--green)}
.bf-goal-editor-row input[type="text"],.bf-goal-editor-row input[type="number"]{
  height:36px!important;min-width:0;background:var(--bg)!important;
}
.bf-goal-editor-remove{
  width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
  display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--re);background:transparent;border:0;
}
.bf-goal-editor-remove:hover{background:var(--rel)}
.bf-goal-editor-actions{display:flex;gap:8px;flex-wrap:wrap}
.bf-goal-editor-actions .ib{min-width:0!important}

/* ── Recurring scan ripple and stable list ─────────────────────────────── */
.bf-ripple-wrap{
  width:92px;height:92px;margin:2px auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(20,123,255,.12),rgba(18,214,192,.05) 55%,transparent 72%);
  color:var(--ac);position:relative;
}
.bf-ripple-wrap::after{
  content:'';position:absolute;inset:18px;border-radius:50%;
  background:linear-gradient(145deg,#147BFF,#1A5FFF 55%,#12D6C0);
  box-shadow:0 9px 24px rgba(20,123,255,.30),inset 0 1px 0 rgba(255,255,255,.3);
}
.bf-ripple-wrap svg{width:78px;height:78px;position:relative;z-index:2;overflow:visible}
.bf-ripple-center{position:absolute;z-index:3;color:#fff;display:flex;align-items:center;justify-content:center}
.bf-ripple-center svg{width:20px;height:20px}
.bf-scan-loading{padding:26px 24px 30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bf-scan-loading-title{font-size:16px;font-weight:820;letter-spacing:-.25px;color:var(--text)}
.bf-scan-loading-message{min-height:42px;max-width:360px;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--text2)}
.bf-scan-loading-dots{display:flex;gap:5px;margin-top:14px}
.bf-scan-loading-dots span{width:6px;height:6px;border-radius:50%;background:var(--bd2);transition:all .2s}
.bf-scan-loading-dots span.on{width:18px;border-radius:5px;background:linear-gradient(90deg,#147BFF,#12D6C0)}
.bf-recurring-list{
  flex:1;min-height:0;max-height:58vh;overflow-y:auto;overflow-x:hidden;
  padding:2px 4px 12px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;
  scroll-behavior:auto;
}
.bf-recurring-row{
  border:1px solid var(--bd);border-radius:14px;padding:13px 14px;margin-bottom:10px;background:var(--bg);
}
.bf-recurring-row.is-duplicate{border-color:rgba(255,59,48,.32)}
.bf-recurring-row.is-household{border-color:rgba(20,123,255,.36)}
.bf-recurring-actions{display:grid;grid-template-columns:minmax(130px,1.5fr) minmax(70px,.75fr) minmax(82px,.85fr);gap:7px;margin-top:11px}
.bf-recurring-actions button{width:100%;min-width:0!important}
.bf-recurring-add{
  height:34px!important;min-height:34px!important;border:0!important;border-radius:10px!important;
  background:linear-gradient(135deg,#0060C0,#0A6E63)!important;color:#fff!important;
  box-shadow:0 3px 12px rgba(20,123,255,.26)!important;font-size:11px!important;font-weight:750!important;
}
.bf-recurring-add:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bf-recurring-confirm-form{padding-top:4px!important}
.bf-recurring-merchant-card{background:var(--bg2);border:1px solid var(--bd2);border-radius:14px;padding:14px;margin-bottom:2px}
.bf-recurring-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.bf-recurring-inline-alert{display:flex;align-items:flex-start;gap:7px;margin-top:8px;border-radius:9px;padding:8px 10px;font-size:11px;line-height:1.45}

@media(max-width:640px){
  .bf-goals-head{align-items:stretch;flex-direction:column}
  .bf-goals-head .ib{width:100%}
  .bf-goal-grid{grid-template-columns:1fr;padding:10px;gap:10px}
  .bf-goal-card{padding:14px}
  .bf-goal-editor-row{grid-template-columns:22px minmax(0,1fr) 32px;gap:6px}
  .bf-goal-editor-row .bf-goal-item-amount{grid-column:2/3}
  .bf-goal-editor-row .bf-goal-editor-remove{grid-column:3;grid-row:1/3}
  .bf-recurring-list{max-height:none!important;flex:1}
  .bf-recurring-actions{grid-template-columns:1fr 1fr}
  .bf-recurring-actions .bf-recurring-add{grid-column:1/-1}
  .bf-recurring-field-grid{grid-template-columns:1fr}
  .bf-scan-loading{padding:24px 16px 28px}
}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .bf-goal-card,.bf-goal-check-item,.bf-recurring-row{background:#161923}
  .bf-goal-check-summary,.bf-goal-editor-row,.bf-recurring-merchant-card{background:#1c2030}
  .bf-goal-editor-row input[type="text"],.bf-goal-editor-row input[type="number"]{background:#161923!important}
}}


/* ==== next <style> block ==== */
/* Recurring scanner confirmation buttons.
   The generic light-mode .ib rule uses !important, so a dedicated selector
   is required to keep the confirmation action visible and on-brand. */
#modal .bf-recurring-confirm-btn,
.mo .bf-recurring-confirm-btn {
  min-width: 96px !important;
  height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
  box-shadow: 0 3px 12px rgba(20,123,255,.24) !important;
  opacity: 1 !important;
}
#modal .bf-recurring-confirm-btn.is-primary,
.mo .bf-recurring-confirm-btn.is-primary {
  background: linear-gradient(135deg, #0060C0 0%, #0A6E63 100%) !important;
  border-color: rgba(0,96,192,.28) !important;
}
#modal .bf-recurring-confirm-btn.is-primary:hover,
.mo .bf-recurring-confirm-btn.is-primary:hover {
  background: linear-gradient(135deg, #0873DB 0%, #0D8276 100%) !important;
  box-shadow: 0 5px 18px rgba(20,123,255,.34) !important;
}
#modal .bf-recurring-confirm-btn.is-danger,
.mo .bf-recurring-confirm-btn.is-danger {
  background: linear-gradient(135deg, #FF5A52 0%, #D70015 100%) !important;
  border-color: rgba(215,0,21,.34) !important;
  box-shadow: 0 3px 12px rgba(215,0,21,.24) !important;
}
#modal .bf-recurring-confirm-btn.is-danger:hover,
.mo .bf-recurring-confirm-btn.is-danger:hover {
  background: linear-gradient(135deg, #FF6B63 0%, #EF233C 100%) !important;
  box-shadow: 0 5px 18px rgba(215,0,21,.34) !important;
}
#modal .bf-recurring-confirm-btn:active,
.mo .bf-recurring-confirm-btn:active {
  transform: translateY(0) scale(.985) !important;
}

/* Sidebar header spacing. The previous .ns rules stacked 14px of margin and
   14px of padding above the first section label, creating the large blank gap. */
@media (min-width: 769px) {
  #sidebar .s-logo {
    height: 58px !important;
    min-height: 58px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  #sidebar > .nav {
    padding-top: 1px !important;
  }
  #sidebar > .nav > .ns:first-child,
  #sidebar > .nav > .sb-section:first-child {
    margin: 0 0 4px !important;
    padding: 6px 10px 3px !important;
    border-top: 0 !important;
  }
}

/* ==== next <style> block ==== */
/* ═══════════════════════════════════════════════════════════════════════
   FLOWBOT — BillFlow Assistant mascot
   The illustration is rendered as inline SVG so the site remains a single
   self-contained HTML file and stays sharp on Retina/mobile displays.
   ═══════════════════════════════════════════════════════════════════════ */
.bf-flowbot{
  display:block;
  overflow:visible;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.bf-flowbot-eye{
  transform-box:fill-box;
  transform-origin:center;
  animation:bfFlowBotBlink 5.6s ease-in-out infinite;
}
@keyframes bfFlowBotBlink{
  0%,43%,46%,48%,100%{transform:scaleY(1)}
  44.5%,47%{transform:scaleY(.08)}
}
@keyframes bfFlowBotFloat{
  0%,100%{transform:translateY(0) rotate(-.4deg)}
  50%{transform:translateY(-5px) rotate(.7deg)}
}
@keyframes bfFlowBotHello{
  0%,76%,100%{transform:rotate(0deg)}
  82%{transform:rotate(-7deg)}
  88%{transform:rotate(6deg)}
  94%{transform:rotate(-2deg)}
}

/* Floating launcher */
:is(#chat-fab){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
}
#chat-fab svg.bf-flowbot-fab{
  width:49px!important;
  height:49px!important;
  max-width:none!important;
  max-height:none!important;
  filter:drop-shadow(0 4px 7px rgba(2,35,92,.28));
  animation:bfFlowBotHello 7s ease-in-out infinite;
}
#chat-fab:hover svg.bf-flowbot-fab{animation:none;transform:scale(1.04)}

/* Header identity — mascot fills the existing header avatar, no extra glow/pill */
:is(.bf-chat-avatar){
  width:40px!important;
  height:40px!important;
  border-radius:13px!important;
  background:var(--bg2)!important;
  overflow:hidden!important;
}
.bf-chat-avatar svg.bf-flowbot-header{
  width:100%!important;
  height:100%!important;
}
:is(.bf-chat-avatar::after){
  right:-1px!important;
  bottom:-1px!important;
  width:9px!important;
  height:9px!important;
  z-index:4;
}

/* Mascot in the welcome state — one soft badge, no layered glow */
:is(.bf-chat-empty-icon){
  width:72px!important;
  height:72px!important;
  margin:2px 0 14px!important;
  border:none!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:var(--acl)!important;
}
.bf-chat-empty-icon svg.bf-flowbot-full{
  width:100%!important;
  height:100%!important;
}

/* Assistant messages: plain "FlowBot" label in the meta line — no per-message avatar box */
.bf-flowbot-speaker{
  color:var(--text3);
  font-weight:700;
}
.bf-flowbot-meta-dot{opacity:.6}

@media(max-width:768px){
  .bf-chat-avatar{width:36px!important;height:36px!important}
  .bf-chat-empty-icon{width:64px!important;height:64px!important}
}

@media(prefers-reduced-motion:reduce){
  .bf-flowbot-eye,
  #chat-fab svg.bf-flowbot-fab,
  .bf-chat-empty-icon svg.bf-flowbot-full{
    animation:none!important;
  }
}

/* ==== next <style> block ==== */
/* BillFlow Dashboard V4: customizable, data-driven, responsive */
.bf-dashboard-v4{max-width:1480px;margin:0 auto;padding-bottom:30px}
.bf-dashboard-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.bf-dashboard-hero{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;
  margin-bottom:16px;padding:20px 24px;border-radius:20px;border:1px solid var(--bd);
  background:linear-gradient(160deg,var(--bg2),var(--bg));background-repeat:no-repeat;min-height:96px;
}
.bf-dashboard-hero-icon{
  position:relative;z-index:1;width:56px;height:56px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--ac);
  background:var(--bg);border:1px solid var(--bd);box-shadow:0 6px 18px rgba(20,123,255,.08);
}
@media(max-width:640px){.bf-dashboard-hero-icon{display:none}}
.bf-dashboard-hero-text{min-width:0;flex:1 1 260px}
.bf-hero-phrase{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.5;max-width:440px}
.bf-dashboard-eyebrow{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ac);margin-bottom:4px}
.bf-dashboard-hero h2{font-size:26px;line-height:1.15;letter-spacing:-.65px;margin:0;color:var(--text)}
.bf-dashboard-hero p{font-size:12px;color:var(--text3);margin:6px 0 0;line-height:1.5}
.bf-dashboard-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Weather block — right side, own column, icon + temp/condition/city
   stacked, never just a lone icon (see bf-weather-fallback for the
   no-data state, which still carries text). */
.bf-hero-weather{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-left:18px;border-left:1px solid rgba(255,255,255,.25)}
.bf-hero-weather-icon{width:44px;height:44px;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.bf-hero-weather-icon img{width:100%;height:100%;display:block}
.bf-hero-weather-info{text-align:left;line-height:1.3}
.bf-hero-weather-temp{font-size:18px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.bf-hero-weather-cond{font-size:11.5px;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.3)}
.bf-hero-weather-city{font-size:10.5px;color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.3)}
.bf-hero-weather-fallback{font-size:11px;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.3);max-width:150px;line-height:1.4}
.bf-hero-weather-set-link{color:#fff;font-weight:700;text-decoration:underline}
.bf-hero-weather-manual{min-width:170px}
.bf-hero-weather-manual-row{display:flex;gap:6px}
.bf-hero-weather-manual-row input{width:110px;height:28px;border-radius:8px;border:1px solid var(--bd);background:var(--bg2);padding:0 8px;font-size:11px;color:var(--text);outline:none}
.bf-hero-weather-manual-row input:focus{border-color:var(--ac)}
.bf-hero-weather-manual-row button{height:28px;padding:0 10px;border-radius:8px;border:none;background:var(--ac);color:#fff;font-size:11px;font-weight:600;cursor:pointer}
.bf-hero-weather-manual-status{font-size:10px;color:var(--text3);margin-top:4px}
.bf-hero-weather-fallback button{margin-top:3px;font-size:11px;color:var(--ac);background:none;border:none;cursor:pointer;padding:0;font-family:inherit;text-decoration:underline}
.bf-ask-bar{position:relative;border-radius:16px;margin-bottom:14px;background:var(--bg);border:1.5px solid #6938EF;animation:bfAskBorderColor 4s ease infinite;box-shadow:0 0 0 1px rgba(105,56,239,.08),0 4px 18px -6px rgba(105,56,239,.25);overflow:hidden}
@keyframes bfAskBorderColor{0%,100%{border-color:#6938EF}33%{border-color:#147BFF}66%{border-color:#12D6C0}}
.bf-ask-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg)}
.bf-ask-orb{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6938EF,#147BFF);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 2px 10px rgba(105,56,239,.4)}
.bf-ask-orb.small{width:22px;height:22px;border-radius:7px;margin-top:1px}
.bf-ask-orb.small svg{width:13px;height:13px}
.bf-ask-orb.answer-orb{border-radius:50%;background:linear-gradient(135deg,#147BFF,#12D6C0)}
.bf-ask-orb.pulsing{animation:bfAskPulse 1.3s ease-in-out infinite}
@keyframes bfAskPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.92)}}
.bf-ask-bar input{flex:1;border:none;background:none;outline:none;font-size:13px;color:var(--text);font-family:inherit}
.bf-ask-bar input::placeholder{color:var(--text3)}
.bf-ask-bar input:disabled{opacity:.5}
.bf-ask-bar button{width:30px;height:30px;border-radius:9px;border:none;background:linear-gradient(135deg,#6938EF,#147BFF);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:opacity .15s}
.bf-ask-bar button:hover{opacity:.85}
.bf-ask-bar button:disabled{opacity:.4;cursor:default}
.bf-ask-bar.is-thinking .bf-ask-row{background:linear-gradient(90deg,var(--bg),var(--bg2),var(--bg));background-size:200% 100%;animation:bfAskShimmer 1.4s linear infinite}
@keyframes bfAskShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.bf-ask-answer{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 13px;border-top:1px solid var(--bd);background:var(--bg)}
.bf-ask-answer-text{font-size:13px;color:var(--text2);line-height:1.55;padding-top:2px}
.bf-ask-thinking-text{color:var(--text3);font-style:italic}
.bf-achievements-strip{position:relative;padding:16px 18px 16px 22px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--bd);border-radius:16px;margin-bottom:16px;box-shadow:0 8px 24px rgba(17,24,39,.04)}
.bf-achievements-strip::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#ffb340,#7c3aed)}
.bf-achievements-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px}
.bf-achievements-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--text3);background:var(--bg3);padding:2px 9px;border-radius:20px}
.bf-achievements-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.bf-achievements-row::-webkit-scrollbar{display:none}
.bf-badge{flex:0 0 auto;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;background:var(--bg);border:1px solid var(--bd);opacity:1;filter:grayscale(1);transition:transform .2s ease,opacity .3s ease,filter .3s ease}
.bf-badge.earned{opacity:1;filter:none;animation:bfBadgePop .5s cubic-bezier(.34,1.56,.64,1) both}
.bf-badge.earned:hover{transform:translateY(-3px) scale(1.04)}
@keyframes bfBadgePop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.bf-badge-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffb340,#ff8a00);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .2s ease}
.bf-badge.earned:hover .bf-badge-icon{transform:rotate(-8deg) scale(1.08)}
.bf-badge:not(.earned) .bf-badge-icon{background:var(--bg3);color:var(--text3)}
.bf-badge-label{font-size:9.5px;font-weight:700;text-align:center;line-height:1.25;color:var(--text2)}
.bf-forecast-card{position:relative;padding:16px 18px 16px 22px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--bd);border-radius:16px;margin-bottom:16px;box-shadow:0 8px 24px rgba(17,24,39,.04)}
.bf-forecast-card::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#147BFF,#12D6C0)}
.bf-forecast-amt{font-variant-numeric:tabular-nums}
.bf-forecast-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;flex-wrap:wrap}
.bf-forecast-note{font-size:10.5px;font-weight:500;color:var(--text3);margin-left:auto}
.bf-forecast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bf-forecast-col{text-align:center;padding:10px 8px;background:var(--bg);border-radius:12px;border:1px solid var(--bd);opacity:0;animation:bfLegendFade .5s ease forwards}
.bf-forecast-col:nth-child(1){animation-delay:.05s}
.bf-forecast-col:nth-child(2){animation-delay:.15s}
.bf-forecast-col:nth-child(3){animation-delay:.25s}
.bf-forecast-days{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:6px}
:is(.bf-forecast-amt){font-size:19px;font-weight:800;letter-spacing:-.4px}
.bf-forecast-sub{font-size:10px;color:var(--text3);margin-top:4px}
.bf-onboard-opt{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:14px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s;width:100%}
.bf-onboard-opt:hover{border-color:var(--ac);background:rgba(20,123,255,.05)}
.bf-onboard-opt-icon{width:36px;height:36px;border-radius:10px;background:rgba(20,123,255,.12);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bf-onboard-opt-label{font-size:13.5px;font-weight:700;color:var(--text)}
.bf-onboard-opt-desc{font-size:11.5px;color:var(--text3);margin-top:2px}
.bf-health-card{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px 16px 22px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--bd);border-radius:16px;margin-bottom:16px;cursor:pointer;flex-wrap:wrap;box-shadow:0 8px 24px rgba(17,24,39,.04);transition:box-shadow .2s ease,transform .2s ease}
.bf-health-card::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--health-band-color,var(--ac))}
.bf-health-card:hover{box-shadow:0 12px 32px rgba(17,24,39,.08)}
.bf-health-ring-score{font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.bf-health-ring-wrap{position:relative;width:64px;height:64px;flex-shrink:0}
.bf-health-ring-wrap svg circle{transition:stroke-dasharray .6s ease}
:is(.bf-health-ring-score){position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--text)}
.bf-health-info{flex:1;min-width:120px}
.bf-health-title{font-size:13px;font-weight:700;color:var(--text)}
.bf-health-band{font-size:12px;font-weight:600;margin-top:2px}
.bf-health-chev{color:var(--text3);transition:transform .2s}
.bf-health-card.is-open .bf-health-chev{transform:rotate(90deg)}
.bf-health-detail{display:none;flex-direction:column;gap:10px;width:100%;margin-top:6px;padding-top:14px;border-top:1px solid var(--bd)}
.bf-health-row{display:flex;align-items:center;gap:10px;font-size:12px}
.bf-health-row>span:first-child{width:150px;flex-shrink:0;color:var(--text2)}
.bf-health-bar{flex:1;height:6px;border-radius:4px;background:var(--bg3);overflow:hidden}
.bf-health-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.bf-health-pts{width:44px;text-align:right;flex-shrink:0;color:var(--text3);font-weight:600}
.bf-insights-strip{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.bf-insight-card{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--bd);border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;box-shadow:0 8px 24px rgba(17,24,39,.04);opacity:0;animation:bfLegendFade .4s ease forwards}
.bf-insight-card:hover{transform:translateX(2px)}
:is(.bf-insight-card:hover){border-color:var(--bd2);background:var(--bg3)}
.bf-insight-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bf-insight-body{flex:1;min-width:0}
.bf-insight-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.bf-insight-msg{font-size:12.5px;color:var(--text2);line-height:1.5}
.bf-insight-ask-hint{color:var(--text3);flex-shrink:0;align-self:center;opacity:.6}
.bf-insight-card:hover .bf-insight-ask-hint{opacity:1}
.bf-essential-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.bf-essential-card{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;min-height:142px;padding:17px 18px;border:1px solid var(--bd);border-radius:18px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:var(--sh-s);cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;font-family:inherit;color:var(--text)}
.bf-essential-card:after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;right:-50px;top:-58px;background:currentColor;opacity:.045;pointer-events:none}
.bf-essential-card:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
.bf-essential-card.success{color:var(--gt);border-color:rgba(52,199,89,.25)}
.bf-essential-card.warning{color:var(--am);border-color:rgba(255,149,0,.28)}
.bf-essential-card.danger{color:var(--re);border-color:rgba(255,59,48,.25)}
.bf-essential-card.neutral{color:var(--ac);border-color:rgba(20,123,255,.22)}
.bf-essential-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:currentColor;margin-bottom:12px}
.bf-essential-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 10%,transparent)}
.bf-essential-value{font-size:28px;line-height:1.05;font-weight:900;letter-spacing:-1px;color:var(--text);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-essential-card.success .bf-essential-value{color:var(--gt)}
.bf-essential-card.warning .bf-essential-value{color:var(--am)}
.bf-essential-card.danger .bf-essential-value{color:var(--re)}
.bf-essential-sub{font-size:11px;line-height:1.35;color:var(--text3);margin-top:auto;white-space:normal}
.bf-essential-track{height:5px;border-radius:99px;background:var(--bg3);margin-top:12px;overflow:hidden}
.bf-essential-track span{display:block;height:100%;border-radius:inherit;background:currentColor;transition:width .35s ease}
.bf-widget-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 2px 10px}
.bf-widget-section-head>div{display:flex;flex-direction:column;gap:2px}
.bf-widget-section-head strong{font-size:15px;color:var(--text)}
.bf-widget-section-head span{font-size:11px;color:var(--text3)}
.bf-widget-section-head>button,.bf-widget-footer-link{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:none;border:none;color:var(--ac);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:5px 0;min-height:0;min-width:0}
.bf-dashboard-widget-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.bf-dashboard-widget{position:relative;background:var(--bg);border:1px solid var(--bd);border-radius:18px;box-shadow:var(--sh-s);overflow:hidden;min-width:0;transition:transform .18s,box-shadow .18s,border-color .18s}
.bf-dashboard-widget:hover{box-shadow:var(--sh-m)}
.bf-dashboard-widget.is-wide{grid-column:span 2}
.bf-dashboard-widget.dragging{opacity:.55;transform:scale(.985)}
.bf-dashboard-widget.drag-over{border-color:var(--ac);box-shadow:0 0 0 3px rgba(20,123,255,.12)}
.bf-widget-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--bd);background:linear-gradient(180deg,var(--bg),var(--bg2))}
.bf-widget-title-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.bf-widget-icon{width:31px;height:31px;border-radius:9px;background:var(--acl);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bf-widget-title{font-size:13px;font-weight:800;color:var(--text);line-height:1.15}
.bf-widget-subtitle{font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px}
.bf-widget-tools{display:flex;align-items:center;gap:2px;flex-shrink:0}
.bf-widget-tool{width:28px;height:28px;min-width:28px;min-height:28px;border:none;border-radius:8px;background:transparent;color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bf-widget-tool:hover{background:var(--bg3);color:var(--text)}
.bf-widget-drag{cursor:grab}.bf-widget-drag:active{cursor:grabbing}
.bf-widget-body{padding:14px 15px}
.bf-dashboard-v4.is-compact .bf-widget-body{padding:10px 12px}
.bf-dashboard-v4.is-compact .bf-widget-head{padding:10px 12px}
.bf-dashboard-v4.is-compact .bf-essential-card{min-height:120px;padding:14px 15px}
.bf-dashboard-v4.is-compact .bf-essential-value{font-size:24px}
.bf-widget-empty{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--text3);gap:5px}
.bf-widget-empty strong{font-size:14px;color:var(--text)}
.bf-widget-empty span:not(.bf-empty-check){font-size:11px;line-height:1.5;max-width:280px}
.bf-widget-empty button{margin-top:8px;height:32px;padding:0 13px;border:none;border-radius:9px;background:var(--ac);color:white;font-size:11px;font-weight:700;cursor:pointer}
.bf-empty-check{width:38px;height:38px;border-radius:12px;background:var(--acl);color:var(--ac);display:flex;align-items:center;justify-content:center;margin-bottom:5px}
.bf-upcoming-list{display:flex;flex-direction:column}
.bf-upcoming-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}
.bf-upcoming-row:last-child{border-bottom:none}
.bf-upcoming-date{width:40px;height:40px;border-radius:11px;background:var(--acl);color:var(--ac);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.bf-upcoming-date.is-overdue{background:var(--rel);color:var(--re)}
.bf-upcoming-date b{font-size:15px}.bf-upcoming-date span{font-size:8px;font-weight:800;text-transform:uppercase;margin-top:2px}
.bf-upcoming-main{min-width:0;display:flex;flex-direction:column;gap:2px}.bf-upcoming-main strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-upcoming-main span{font-size:10px;color:var(--text3)}
.bf-upcoming-right{display:flex;align-items:center;gap:9px}.bf-upcoming-right>b{font-size:12px;white-space:nowrap}.bf-upcoming-right button{height:27px;padding:0 9px;border-radius:20px;border:1px solid rgba(20,123,255,.2);background:var(--acl);color:var(--ac);font-size:9px;font-weight:800;cursor:pointer;min-height:0;min-width:0}
.bf-widget-footer-link{width:100%;border-top:1px solid var(--bd);margin-top:9px;padding-top:10px}
.bf-donut-layout{display:flex;justify-content:flex-start;align-items:center;gap:28px;flex-wrap:wrap;min-height:205px}
.bf-donut-wrap{position:relative;width:140px;height:140px;margin:0;flex-shrink:0}.bf-donut-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.bf-donut-wrap svg circle{animation:bfDonutDraw .8s ease-out both}
.bf-donut-wrap svg circle:nth-child(1){animation:none}
@keyframes bfDonutDraw{from{opacity:0;stroke-width:2}to{opacity:1}}
@keyframes bfLegendFade{to{opacity:1}}
.bf-chart-legend-row{opacity:0;animation:bfLegendFade .4s ease forwards}
.bf-chart-legend-row:nth-child(1){animation-delay:.05s}
.bf-chart-legend-row:nth-child(2){animation-delay:.12s}
.bf-chart-legend-row:nth-child(3){animation-delay:.19s}
.bf-chart-legend-row:nth-child(4){animation-delay:.26s}
.bf-chart-legend-row:nth-child(5){animation-delay:.33s}
.bf-chart-legend-row:nth-child(6){animation-delay:.4s}
.bf-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16%;gap:4px}.bf-donut-center b{font-size:15px;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}.bf-donut-center span{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;max-width:100%;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(.bf-chart-legend){display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;padding:12px 0}.bf-chart-legend-row{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:7px;font-size:11px;color:var(--text2)}.bf-chart-legend-row span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-chart-legend-row b{font-size:10px;color:var(--text)}.bf-chart-dot{width:8px;height:8px;border-radius:50%}

/* ── Spending-by-category donut (Credit Cards / Recent Transactions) ─── */
@keyframes bfDonutPop{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}
.bf-spend-donut-wrap{animation:bfDonutPop .5s cubic-bezier(.34,1.56,.64,1) both}
.bf-spend-slice{transition:opacity .25s ease,stroke-width .2s ease,filter .25s ease;cursor:pointer;outline:none}
.bf-spend-slice:focus-visible{opacity:1;filter:drop-shadow(0 0 0 2px var(--ac))}
.bf-spend-slice.is-active{stroke-width:15.5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.bf-spend-slice.is-dim{opacity:.28}
:is(.bf-donut-center b){transition:font-size .15s ease}
:is(.bf-donut-center span){transition:color .15s ease}
.bf-spend-legend-row{cursor:pointer;border-radius:9px;padding:4px 6px;margin:-4px -6px;transition:background .15s ease}
.bf-spend-legend-row:hover,.bf-spend-legend-row:focus-visible{background:var(--bg2);outline:none}
:is(.bf-spend-legend-row){grid-template-rows:auto auto}
.bf-spend-legend-bar-track{grid-column:1/-1;height:3px;border-radius:2px;background:var(--bg3);overflow:hidden;margin-top:3px}
.bf-spend-donut-layout{justify-content:flex-start;gap:24px;margin-bottom:16px}
:is(.bf-spend-donut-wrap){width:170px;height:170px}
.bf-spend-legend{max-width:none;flex:1;min-width:220px}
@media(max-width:640px){.bf-spend-donut-layout{justify-content:center}.bf-spend-donut-wrap{width:150px;height:150px}.bf-spend-legend{min-width:0}}
@media(max-width:600px){.bf-spend-donut-layout .bf-chart-legend{max-width:none}}
/* Compact selects that carry their own inline sizing (transaction day filters, etc.)
   still need this — an inline `background:` shorthand on the element wipes out the
   global select chevron, since inline styles always win the cascade. */
.bf-mini-select{
  -webkit-appearance:none;appearance:none;
  background-color:var(--bg)!important;color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 8px center!important;
}
.bf-flow-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:var(--bg2);border:1px solid var(--bd);border-radius:13px;padding:12px 13px;margin-bottom:13px}.bf-flow-summary>div{display:flex;flex-direction:column;gap:3px}.bf-flow-summary span{font-size:10px;color:var(--text3)}.bf-flow-summary b{font-size:20px;letter-spacing:-.5px}.bf-flow-summary b.is-good{color:var(--gt)}.bf-flow-summary b.is-bad{color:var(--re)}.bf-flow-summary>span{text-align:right;max-width:170px;line-height:1.35}
.bf-flow-bars{display:flex;flex-direction:column;gap:10px}.bf-flow-row{display:flex;flex-direction:column;gap:5px}.bf-flow-label{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--text3)}.bf-flow-label b{color:var(--text);font-size:10px}.bf-flow-track{height:8px;border-radius:99px;background:var(--bg3);overflow:hidden}.bf-flow-track span{display:block;height:100%;border-radius:inherit;min-width:2px}
.bf-simple-list{display:flex;flex-direction:column}.bf-simple-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--bd)}.bf-simple-row:last-child{border-bottom:none}.bf-simple-icon{width:32px;height:32px;border-radius:10px;background:var(--bg2);color:var(--ac);display:flex;align-items:center;justify-content:center}.bf-simple-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}.bf-simple-row strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-simple-row span{font-size:9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-simple-row>b{font-size:11px;white-space:nowrap}
.bf-card-mini-list{display:flex;flex-direction:column;gap:11px}.bf-card-mini-row{display:flex;flex-direction:column;gap:6px}.bf-card-mini-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.bf-card-mini-top>div{display:flex;flex-direction:column;gap:2px;min-width:0}.bf-card-mini-top strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-card-mini-top span{font-size:9px;color:var(--text3)}.bf-card-mini-top>b{font-size:10px}.bf-card-mini-top>b.good{color:var(--gt)}.bf-card-mini-top>b.warn{color:var(--am)}.bf-card-mini-top>b.bad{color:var(--re)}.bf-card-mini-track{height:6px;border-radius:99px;background:var(--bg3);overflow:hidden}.bf-card-mini-track span{display:block;height:100%;border-radius:inherit}.bf-card-mini-track span.good{background:var(--gt)}.bf-card-mini-track span.warn{background:var(--am)}.bf-card-mini-track span.bad{background:var(--re)}
.bf-goal-widget-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.bf-goal-widget-card{padding:11px 12px;border:1px solid var(--bd);background:var(--bg2);border-radius:13px;min-width:0}.bf-goal-widget-top{display:flex;justify-content:space-between;gap:8px}.bf-goal-widget-top strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-goal-widget-top b{font-size:10px;color:var(--ac)}.bf-goal-widget-amount{font-size:9px;color:var(--text3);margin:6px 0}.bf-goal-widget-track{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden}.bf-goal-widget-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ac),#12B8A6)}
.bf-dashboard-empty-layout{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:42px 20px;border:1px dashed var(--bd2);border-radius:18px;color:var(--text3)}.bf-dashboard-empty-layout strong{font-size:14px;color:var(--text)}.bf-dashboard-empty-layout span{font-size:11px;margin:5px 0 13px}
.bf-dash-customizer{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .18s}.bf-dash-customizer.is-open{pointer-events:auto;opacity:1}.bf-dash-customizer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(6px)}
.bf-dash-customizer-panel{position:relative;width:min(560px,94vw);max-height:min(760px,90vh);display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--bd2);border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.32);overflow:hidden;transform:translateY(12px) scale(.985);transition:transform .2s}.bf-dash-customizer.is-open .bf-dash-customizer-panel{transform:none}
.bf-customizer-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid var(--bd);background:linear-gradient(135deg,rgba(20,123,255,.08),rgba(18,184,166,.05))}.bf-customizer-head>div{display:flex;flex-direction:column}.bf-customizer-head span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ac);font-weight:800}.bf-customizer-head strong{font-size:17px;margin-top:2px}.bf-customizer-head>button{width:32px;height:32px;min-width:32px;min-height:32px;border:none;border-radius:10px;background:var(--bg);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.bf-fixed-note{display:flex;gap:10px;margin:14px 18px 4px;padding:11px 12px;border-radius:13px;background:var(--acl);color:var(--ac)}.bf-fixed-note>span{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.bf-fixed-note div{display:flex;flex-direction:column;gap:2px}.bf-fixed-note strong{font-size:11px}.bf-fixed-note p{font-size:10px;line-height:1.45;color:var(--text2);margin:0}
.bf-customizer-list{padding:10px 18px 16px;overflow-y:auto}.bf-density-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 13px;border-bottom:1px solid var(--bd)}.bf-density-choice>span{font-size:11px;font-weight:700}.bf-density-choice>div{display:flex;background:var(--bg2);padding:3px;border-radius:10px}.bf-density-choice button{height:27px;min-height:27px;min-width:0;border:none;border-radius:8px;background:transparent;color:var(--text3);font-size:9px;font-weight:700;padding:0 9px;cursor:pointer}.bf-density-choice button.on{background:var(--bg);color:var(--ac);box-shadow:var(--sh-s)}
.bf-customizer-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd)}.bf-customizer-row:last-child{border-bottom:none}.bf-customizer-icon{width:32px;height:32px;border-radius:10px;background:var(--bg2);color:var(--ac);display:flex;align-items:center;justify-content:center}.bf-customizer-row>div:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}.bf-customizer-row strong{font-size:11px}.bf-customizer-row span{font-size:9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-customizer-order{display:flex;gap:2px}.bf-customizer-order button{width:27px;height:27px;min-width:27px;min-height:27px;border:1px solid var(--bd);background:var(--bg2);color:var(--text3);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.bf-customizer-order button:first-child svg{transform:rotate(90deg)}.bf-customizer-order button:last-child svg{transform:rotate(90deg)}.bf-customizer-order button:disabled{opacity:.3;cursor:not-allowed}
.bf-customizer-switch{position:relative;width:38px;height:22px;display:block}.bf-customizer-switch input{position:absolute;opacity:0}.bf-customizer-switch span{position:absolute;inset:0;border-radius:99px;background:var(--bg3);border:1px solid var(--bd2);cursor:pointer;transition:.18s}.bf-customizer-switch span:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}.bf-customizer-switch input:checked+span{background:var(--ac);border-color:var(--ac)}.bf-customizer-switch input:checked+span:after{transform:translateX(16px);background:white}
.bf-customizer-foot{display:flex;gap:9px;padding:14px 18px 18px;border-top:1px solid var(--bd);background:var(--bg)}
@media(max-width:1100px){.bf-essential-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bf-dashboard-widget-grid{grid-template-columns:1fr}.bf-dashboard-widget.is-wide{grid-column:auto}}
@media(max-width:600px){.bf-dashboard-v4{padding-bottom:12px}.bf-dashboard-toolbar{margin-bottom:8px}.bf-dashboard-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.bf-dashboard-actions .ib{width:100%;padding:0 8px}.bf-dashboard-hero{flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;margin-bottom:12px;padding:14px 16px;min-height:0;gap:10px}.bf-dashboard-hero-text{flex:none;width:100%}.bf-dashboard-hero h2{font-size:19px}.bf-dashboard-hero p{font-size:10.5px;margin-top:3px}.bf-hero-phrase{max-width:none}.bf-hero-weather{border-left:none;border-top:1px solid var(--bd);padding-left:0;padding-top:10px;width:100%;justify-content:center;gap:8px}.bf-hero-weather-icon{width:26px;height:26px}.bf-hero-weather-info{text-align:left;line-height:1.2}.bf-hero-weather-temp{font-size:14px}.bf-hero-weather-cond{font-size:10px}.bf-hero-weather-city{display:none}.bf-essential-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}.bf-essential-card{min-height:132px;padding:13px 12px;border-radius:15px}.bf-essential-top{font-size:8px;letter-spacing:.055em;margin-bottom:9px}.bf-essential-icon{width:26px;height:26px}.bf-essential-value{font-size:22px;letter-spacing:-.6px}.bf-essential-sub{font-size:9px;line-height:1.35}.bf-widget-section-head{align-items:center}.bf-widget-section-head span{display:none}.bf-widget-section-head>button{font-size:10px}.bf-dashboard-widget-grid{gap:9px}.bf-dashboard-widget{border-radius:15px}.bf-widget-head{padding:11px 12px}.bf-widget-subtitle{max-width:205px}.bf-widget-body{padding:11px 12px}.bf-widget-drag{display:none}.bf-upcoming-row{grid-template-columns:38px minmax(0,1fr);gap:9px}.bf-upcoming-date{width:36px;height:36px}.bf-upcoming-right{grid-column:2;justify-content:space-between;margin-top:-3px}.bf-donut-layout{gap:8px;min-height:180px}.bf-donut-wrap{width:118px;height:118px}.bf-chart-legend-row{font-size:9px}.bf-flow-summary{align-items:flex-start;flex-direction:column}.bf-flow-summary>span{text-align:left;max-width:none}.bf-goal-widget-grid{grid-template-columns:1fr}.bf-dash-customizer{align-items:flex-end}.bf-dash-customizer-panel{width:100%;max-height:88vh;border-radius:22px 22px 0 0;transform:translateY(100%)}.bf-dash-customizer.is-open .bf-dash-customizer-panel{transform:translateY(0)}.bf-customizer-head{padding:16px}.bf-fixed-note{margin:12px 14px 3px}.bf-customizer-list{padding:8px 14px 14px}.bf-customizer-row{grid-template-columns:32px minmax(0,1fr) auto auto;gap:8px}.bf-customizer-foot{padding:12px 14px calc(14px + env(safe-area-inset-bottom))}.bf-customizer-foot button{height:42px!important}.bf-customizer-order button{width:25px;height:25px;min-width:25px}.bf-widget-empty{min-height:150px}}
@media(max-width:380px){.bf-essential-grid{grid-template-columns:1fr}.bf-essential-card{min-height:112px}.bf-donut-wrap{width:100px;height:100px}.bf-customizer-row{grid-template-columns:30px minmax(0,1fr) auto}.bf-customizer-order{display:none}}



/* ── Investment ticker/company autocomplete ─────────────────────────── */
#ticker-autocomplete-popover{
  display:none;position:fixed;z-index:20050;
  max-height:min(330px,48vh);overflow-y:auto;overflow-x:hidden;
  padding:6px;background:var(--glass-modal, var(--bg));
  border:1px solid var(--bd2);border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.20),0 3px 12px rgba(0,0,0,.10);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.ticker-suggest-item{
  width:100%;min-height:52px;border:0;border-radius:10px;padding:8px 10px;
  display:grid;grid-template-columns:68px minmax(0,1fr) 18px;align-items:center;gap:10px;
  background:transparent;color:var(--text);text-align:left;cursor:pointer;
  transition:background .12s,box-shadow .12s,transform .12s;
}
.ticker-suggest-item:hover,.ticker-suggest-item.active{
  background:var(--acl);box-shadow:inset 0 0 0 1px rgba(20,123,255,.16);
}
.ticker-suggest-item:active{transform:scale(.995)}
.ticker-suggest-symbol{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:0 8px;border-radius:8px;
  background:rgba(20,123,255,.10);color:var(--ac);
  font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
}
.ticker-suggest-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.ticker-suggest-copy strong{font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker-suggest-copy small{font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker-suggest-arrow{font-size:20px;color:var(--text3);line-height:1;text-align:center}
.ticker-suggest-empty{padding:14px 12px;font-size:12px;color:var(--text3);text-align:center;line-height:1.45}
@media(max-width:600px){
  .ip-ticker-row{flex-direction:column!important}
  .ip-fetch-price{width:100%!important;justify-content:center!important}
  #ticker-autocomplete-popover{max-height:42vh}
  .ticker-suggest-item{grid-template-columns:64px minmax(0,1fr) 14px;padding:8px}
}


/* ==== next <style> block ==== */
.imp-drag{border-color:var(--ac)!important;background:var(--acl)!important}
#imp-preview-table table{width:100%;border-collapse:collapse;font-size:12px}
#imp-preview-table th{background:var(--bg2);padding:7px 10px;text-align:left;font-weight:600;color:var(--text2);border-bottom:1px solid var(--bd);white-space:nowrap}
#imp-preview-table td{padding:7px 10px;border-bottom:.5px solid var(--bd);color:var(--text)}
#imp-preview-table tr:hover td{background:var(--bg2)}
.imp-row-del{background:none;border:none;cursor:pointer;color:var(--re);padding:2px 6px;font-size:14px}

/* Modal entrance - no pseudo element (causes mobile paint issues) */

/* ── Modal header with icon ──────────────────────────────────────────── */
.md-hdr{
  display:flex;flex-direction:column;align-items:center;
  padding:24px 28px 0;text-align:center;
  gap:0;
}
.md-hdr-ico{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;flex-shrink:0;
}
.md-hdr-ico.blue  { background:var(--acl); color:var(--ac); }
.md-hdr-ico.green { background:var(--tel); color:var(--tet); }
.md-hdr-ico.red   { background:var(--rel); color:var(--re); }
.md-hdr-ico.amber { background:var(--aml); color:var(--amt); }
.md-hdr-ico.purple{ background:var(--pul); color:var(--pu); }
.md-hdr-ico.gray  { background:var(--bg2); color:var(--text2); }
.md-hdr .md-ttl { padding:0; }
.md-hdr .md-sub { padding:6px 0 0; }

/* Illustrated modal header variant — a themed SVG banner instead of the
   small icon badge, used on the primary "Add X" modals. Negative margin
   pulls it flush with the modal's own edges/padding (md-hdr has
   padding:24px 28px 0) so the illustration reaches the rounded corners.
   Background is transparent — the illustration sits directly on the
   modal's own surface, no boxed-in panel behind it. */
.md-hdr.has-illus{ padding:0; gap:0; }
.md-hdr-illus{
  width:100%;
  aspect-ratio:16/9;
  max-height:170px;
  overflow:hidden;
  border-radius:var(--r-lg,16px) var(--r-lg,16px) 0 0;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  position:relative;
}
.md-hdr-illus img{
  width:72%;height:72%;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.12));
  position:absolute;
}
/* Two versions of each illustration are rendered (see mdHdr() in
   billflow.js) — one with the original dark near-black linework (for
   light mode), one with that linework pre-lightened in the SVG itself
   (for dark mode, file suffixed "-dark"). Only one shows at a time; which
   one depends on the same two dark-mode signals used everywhere else in
   this file (explicit data-theme="dark", or OS-level preference when the
   person hasn't overridden it). This keeps the actual artwork and its
   colors visible in both themes, rather than flattening it to a
   silhouette. */
.md-hdr-illus .illus-dark{ display:none; }
html[data-theme="dark"] .md-hdr-illus .illus-light{ display:none; }
html[data-theme="dark"] .md-hdr-illus .illus-dark{ display:block; }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .md-hdr-illus .illus-light{ display:none; }
  :root:not([data-theme="light"]) .md-hdr-illus .illus-dark{ display:block; }
}
.md-hdr.has-illus .md-ttl{ padding:0 28px; }
.md-hdr.has-illus .md-sub{ padding:6px 28px 0; }

/* ════════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Skeleton loading ─────────────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -600px 0 }
  100% { background-position:  600px 0 }
}
.sk {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 600px 100%;
  animation: sk-shimmer 1.4s ease infinite;
  border-radius: 6px;
  display: block;
}
.sk-line { height: 14px; margin-bottom: 8px; }
.sk-line.w-80 { width: 80% }
.sk-line.w-60 { width: 60% }
.sk-line.w-40 { width: 40% }
.sk-title { height: 22px; width: 45%; margin-bottom: 16px; border-radius: 8px; }
.sk-kpi  { height: 90px; border-radius: var(--rl); }
.sk-row  { height: 48px; border-radius: 8px; margin-bottom: 8px; }
.sk-card { height: 120px; border-radius: var(--rl); }
.sk-grid { display: grid; gap: 12px; }
.sk-grid-3 { grid-template-columns: repeat(3,1fr); }
.sk-grid-2 { grid-template-columns: repeat(2,1fr); }

/* ── 2. Compact mode ─────────────────────────────────────────────── */
body.compact .pn { border-radius: var(--r); }
body.compact .ni { padding: 5px 8px; font-size: 12px; }
body.compact .ni svg { width: 15px; height: 15px; }
body.compact .ph { padding: 10px 16px; min-height: 42px; }
body.compact .kv { font-size: 20px; }
body.compact .data-row { padding: 8px 16px; }
body.compact .bi-row { padding: 8px 14px !important; }
body.compact .md-form { gap: 10px; }
body.compact .ns { padding: 8px 8px 2px; }

/* ── 3. Drag & drop dashboard widgets ────────────────────────────── */
.dash-widget {
  position: relative;
  transition: opacity .2s, transform .2s;
}
.dash-widget.dragging {
  opacity: .5;
  transform: scale(.98);
}
.dash-widget.drag-over {
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 2px var(--ac) !important;
}
.dash-drag-handle {
  position: absolute;
  top: 14px; right: 14px;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  opacity: 0;
  transition: opacity .15s, background .15s;
  z-index: 2;
  padding: 0;
}
.dash-widget:hover .dash-drag-handle { opacity: 1; }
.dash-drag-handle:hover { background: var(--bg2); color: var(--text2); }
.dash-drag-handle:active { cursor: grabbing; }

/* ── 4. Keyboard shortcut hints ──────────────────────────────────── */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--bd2);
  border-radius: 5px; padding: 1px 5px;
  font-size: 10px; font-weight: 600;
  color: var(--text3); font-family: inherit;
  min-width: 18px; height: 18px;
  box-shadow: 0 1px 0 var(--bd2);
}

/* ── 5. Shortcuts overlay ───────────────────────────────────────── */
#shortcuts-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
#shortcuts-overlay.open { display: flex; }
.shortcuts-box {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 28px;
  width: 480px; max-width: 95vw;
  box-shadow: var(--sh-l);
  animation: slideUp .2s cubic-bezier(.34,1.56,.64,1);
}
.shortcuts-box h3 {
  font-size: 17px; font-weight: 800; color: var(--text);
  letter-spacing: -.3px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--bd);
  font-size: 13px; color: var(--text2);
}
.shortcut-row:last-child { border: none; }
.shortcut-keys { display: flex; gap: 4px; }

/* ── 6. Compact toggle in topbar ─────────────────────────────────── */
.compact-btn.on {
  background: var(--acl) !important;
  color: var(--ac) !important;
  border-color: rgba(20,123,255,.2) !important;
}

/* ── 7. Smooth page transitions ──────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: fadeInUp .22s cubic-bezier(.22,1,.36,1); }

/* ── 8. Better empty state for new users ─────────────────────────── */
.welcome-banner {
  background: linear-gradient(135deg, var(--acl), rgba(18,214,192,.06));
  border: 1px solid rgba(20,123,255,.15);
  border-radius: var(--rxl);
  padding: 24px 28px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 20px;
}
.welcome-banner-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--ac); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.welcome-steps {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.welcome-step {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  border: 1px solid var(--bd);
  background: var(--bg); color: var(--text2);
}
.welcome-step:hover { border-color: var(--ac); color: var(--ac); background: var(--acl); }
.welcome-step.done {
  background: var(--tel); color: var(--tet);
  border-color: rgba(52,199,89,.2);
}
.welcome-step .step-num {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ac); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.welcome-step.done .step-num {
  background: var(--gt);
}

/* === SIDEBAR HEADER CLEANUP === */
@media (min-width: 901px) {
  #sidebar .sb-toggle{ display:none !important; }
  #sidebar [id="sb-plan-badge"], #sidebar .s-tg{ display:none !important; }
  #sidebar .s-logo{ min-height:58px !important; padding:10px 14px !important; align-items:center !important; gap:0 !important; cursor:pointer !important; }
  #sidebar .s-mk{ display:none !important; }
  #sidebar .s-logo-text{ display:flex !important; opacity:1 !important; width:auto !important; flex:1 !important; overflow:visible !important; pointer-events:none !important; }
  #sidebar .s-logo-text svg{ max-width:124px !important; height:auto !important; }
  #sidebar.collapsed .s-mk, #sidebar.sb.collapsed .s-mk{ display:flex !important; width:32px !important; height:32px !important; }
  #sidebar.collapsed .s-logo-text, #sidebar.sb.collapsed .s-logo-text{ display:none !important; opacity:0 !important; width:0 !important; flex:0 !important; overflow:hidden !important; }
}
/* === VISUAL HIERARCHY SYSTEM === */
:is(:root){
  --vf-page-title: 20px;
  --vf-card-title: 14px;
  --vf-body: 13px;
  --vf-meta: 11px;
  --vf-radius-panel: 20px;
}
:is(.topb){min-height:56px !important;padding:0 16px !important;border-bottom:1px solid var(--bd) !important;background:var(--bg) !important;backdrop-filter:blur(10px)}
/* Same bug pattern as .ph (panel headers): this rule used to hard-code a
   white translucent background with !important, so in dark mode the (light)
   title/icons sat on a white bar and vanished. Now theme-aware. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .topb{ background:rgba(15,17,23,.72) !important; }
}}
:is(.pg-t){font-size:var(--vf-page-title) !important;line-height:1.15 !important;font-weight:800 !important;letter-spacing:-.03em !important;color:var(--text) !important;text-transform:none !important}
.mnav-lbl,#m-lbl{font-size:12px !important;font-weight:700 !important;color:var(--text2) !important}
:is(.sc){padding:16px 20px 24px !important}
:is(.pn){border:1px solid var(--glass-border,var(--bd)) !important;border-radius:var(--vf-radius-panel) !important;box-shadow:0 8px 24px rgba(17,24,39,.04) !important;overflow:hidden !important;background:var(--glass) !important;backdrop-filter:blur(20px) saturate(1.6) !important;-webkit-backdrop-filter:blur(20px) saturate(1.6) !important}
:is(.ph){min-height:48px !important;padding:0 14px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;border-bottom:1px solid var(--bd) !important;background:linear-gradient(180deg,var(--bg4),var(--bg3)) !important}
:is(.pt){font-size:var(--vf-card-title) !important;font-weight:800 !important;letter-spacing:-.01em !important;color:var(--text) !important;text-transform:none !important}
.pn .sub,.pn .muted,.pn .hint,.pn .cap,.pn small{font-size:var(--vf-meta) !important;color:var(--text3) !important}
:is(.ni){min-height:40px !important;border-radius:14px !important;font-size:14px !important;font-weight:500 !important}
:is(.ni-label){font-size:14px !important;text-transform:none !important}
:is(.ns){font-size:10px !important;font-weight:800 !important;letter-spacing:.12em !important;color:var(--text3) !important;margin:14px 0 8px !important;text-transform:uppercase !important}
@media (max-width: 900px){
  :root{--vf-page-title:18px;--vf-card-title:13px;--vf-body:13px;--vf-meta:11px}
  .sc{padding:14px 14px 24px !important}
}

/* ── Responsive pass v2 (2026-07-19): touch, iOS zoom, tablet polish ─────── */
/* Momentum scrolling em todos os wrappers de tabela (inline overflow-x) */
div[style*="overflow-x:auto"], div[style*="overflow-x: auto"]{
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
/* iOS: inputs <16px disparam auto-zoom ao focar — trava em 16px no celular */
@media (max-width: 600px){
  input, select, textarea{ font-size:16px !important; }
  /* Modais ocupam melhor a tela pequena */
  #modal .md, .md{ max-width:calc(100vw - 20px) !important; }
  /* Rebalance the rest of the modal form to match the mandatory 16px
     input size above — without this, 11px uppercase labels sat next to
     16px input text with no visual relationship, which is what made
     modals look oversized/misaligned/confusing on phones. */
  .md-fld label{ font-size:12.5px !important; letter-spacing:.03em !important; }
  .md-fld input,.md-fld select,.md-fld textarea{ height:46px !important; border-radius:12px !important; }
  .md-form{ gap:18px !important; padding:16px 18px 8px !important; }
  .consent-foot{ padding:12px 18px !important; }
  .md-row{ gap:10px !important; }
  .md-toggle-row{ padding:13px 2px !important; gap:12px !important; }
  .md-toggle-row .md-toggle-label{ font-size:14px !important; }
  .md-section-title{ font-size:12px !important; }
  .md-ttl{ font-size:17px !important; padding:20px 20px 0 !important; }
  .md-sub{ font-size:12.5px !important; padding:6px 20px 0 !important; }
}
/* Tablet / iPad (601–1024px): respiro no conteúdo e modais confortáveis */
@media (min-width: 601px) and (max-width: 1024px){
  .sc{ padding:18px 20px 28px !important; }
  #modal .md{ max-width:min(560px, calc(100vw - 48px)) !important; }
  .two-col-row{ gap:14px !important; }
}
/* Guarda global contra scroll horizontal acidental */
:is(body){ overflow-x:clip; }

/* ── Platform-wide responsive pass: KPI/summary grids, iPad + phone ──────── */
/* Tablet / iPad (601–1024px): keep the remaining KPI rows compact
   since there's still enough width, but tighten the 4-col ones (Loans card
   detail row, Credit Cards top strip) down to 2 columns so nothing feels cramped. */
@media (min-width: 601px) and (max-width: 1024px){
  .loan-kpi-row{ grid-template-columns:repeat(2,1fr) !important; }
}

/* Phone (≤600px): collapse everything down to something that actually fits */
@media (max-width: 600px){
  .dash-kpi-row{ grid-template-columns:1fr !important; gap:10px !important; }
  .loan-kpi-row{ grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .two-col-row{ grid-template-columns:1fr !important; }

  /* Recurring Bills Scanner modal — let cards breathe, stack account/confidence info */
  #modal .md{ padding-left:14px !important; padding-right:14px !important; }

  /* Bank security notice — icon/text stack cleanly, dismiss button stays reachable */
  .rsb-btn-mini{ font-size:10px !important; }

  /* Mode switcher (General Bills / Credit Cards) — keep side-by-side but let labels shrink */
  .kg{ max-width:100%; }
}

@media (max-width: 380px){
  .loan-kpi-row{ grid-template-columns:1fr !important; }
}

/* ── Thicker borders across the whole platform — clearer separation between boxes ── */
:is(.pn){ border-width:1.5px !important; }
:is(.ph){ border-bottom-width:1.5px !important; }
:is(.bi-row){ border-bottom-width:1.5px !important; }
.md-row, .md-fld input, .md-fld select, .md-fld textarea{ border-width:1.5px !important; }
.ib, .ib.p{ border-width:1.5px !important; }
table th, table td{ border-color:var(--bd) !important; }
:is(.hc-panel){ border-width:1.5px !important; }

/* Every inline-styled border that used the old hairline widths (.5px / 1px) against
   the standard border colors — covers bill rows, KPI tiles, cards, list separators,
   etc. across every page, without having to touch each render function individually. */
[style*="border:.5px solid var(--bd)"],
[style*="border: .5px solid var(--bd)"],
[style*="border:1px solid var(--bd)"],
[style*="border: 1px solid var(--bd)"],
[style*="border:.5px solid var(--bd2)"],
[style*="border: .5px solid var(--bd2)"],
[style*="border:1px solid var(--bd2)"],
[style*="border: 1px solid var(--bd2)"]{
  border-width:1.5px !important;
}
[style*="border-bottom:.5px solid var(--bd)"],
[style*="border-bottom: .5px solid var(--bd)"],
[style*="border-bottom:1px solid var(--bd)"],
[style*="border-bottom: 1px solid var(--bd)"],
[style*="border-bottom:.5px solid var(--bd2)"],
[style*="border-bottom:1px solid var(--bd2)"]{
  border-bottom-width:1.5px !important;
}
[style*="border-top:.5px solid var(--bd)"],
[style*="border-top: .5px solid var(--bd)"],
[style*="border-top:1px solid var(--bd)"],
[style*="border-top: 1px solid var(--bd)"]{
  border-top-width:1.5px !important;
}
[style*="border-left:.5px solid var(--bd)"],
[style*="border-left:1px solid var(--bd)"]{
  border-left-width:1.5px !important;
}
[style*="border-right:.5px solid var(--bd)"],
[style*="border-right:1px solid var(--bd)"]{
  border-right-width:1.5px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT FIXES (2026-07-19)
   Root causes found from real device screenshots:
   1. iOS Safari was inflating text (no text-size-adjust), which blew up every
      layout — huge fonts pushed columns out of alignment.
   2. .ph panel headers had a hardcoded WHITE gradient with !important, so in
      dark mode the (white) title text sat on a white bar and vanished.
   3. Several KPI/detail grids were locked to 4 columns via INLINE styles,
      which no media query could override.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 ─ Stop iOS from auto-inflating text */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 2 ─ Panel headers: follow the theme instead of a fixed white gradient */
:is(.ph){
  background: var(--bg2) !important;
  color: var(--text) !important;
  gap: 10px !important;
  flex-wrap: wrap !important;      /* title + action buttons wrap instead of colliding */
  row-gap: 8px !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 10px 14px !important;
}
.ph .pt { min-width: 0; flex: 1 1 auto; }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]){
  .ph { background: var(--bg2) !important; }
  .ph, .ph .pt, .ph * { color: var(--text); }
  .ph .pa { color: var(--ac); }
}}

@media (max-width: 700px) {
  /* 3 ─ Break inline 4-column grids down to 2 on phones */
  .kg,
  .cc-kpi-strip,
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Inner cells keep their dividers tidy when wrapped to 2 columns */
  .cc-kpi-strip .k:nth-child(2n) { border-right: none !important; }

  /* Card page: stack + details go single column (inline style needs !important) */
  .cc-grid-main { grid-template-columns: 1fr !important; }
  .cc-det-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* 4 ─ Bill rows: name column must never collapse to nothing */
  .br { gap: 9px !important; padding: 11px 12px !important; flex-wrap: nowrap !important; }
  .binfo { flex: 1 1 auto !important; min-width: 96px !important; }
  .bname { font-size: 13px !important; }

  /* Long numbers shouldn't clip inside KPI tiles */
  .kp, .cc-kpi-strip .k { min-width: 0 !important; overflow: hidden !important; }
  .kp > div, .cc-kpi-strip .k > div { min-width: 0; overflow-wrap: anywhere; }

  /* Section titles that sat next to action buttons */
  .pt { font-size: 14px !important; }
}

@media (max-width: 420px) {
  /* Tiny phones: single column beats cramped pairs for the wide KPI tiles */
  .cc-kpi-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .ph { padding: 9px 12px !important; }
  .pt { font-size: 13.5px !important; }
}

/* ═══ COLLAPSED SIDEBAR — HARD CONTAINMENT ═══════════════════════════════
   Two long-standing defects fixed here:
   1. GAP: the app grid reserved 56px for the collapsed column while the
      sidebar itself is 52px wide — a permanent 4px strip of background
      showed between sidebar and content. Both now agree on 52px.
   2. BLEED: the wordmark SVG (with its text/tagline paths) was forced to
      overflow:visible + width:auto !important by the "SIDEBAR HEADER
      CLEANUP" block, letting it paint over the top bar when collapsed.
      These rules use higher specificity (#sidebar.sb.collapsed) so they
      beat that block's !important declarations in every state.
   Scoped to >600px so the mobile single-column layout is untouched. */
@media (min-width: 601px) {
  #app-screen.visible.sb-collapsed { grid-template-columns: 52px 1fr !important; }
  #sidebar.sb.collapsed { width: 52px !important; }
  #sidebar.sb.collapsed .s-logo {
    padding: 0 !important; justify-content: center !important;
    gap: 0 !important; overflow: hidden !important;
  }
  #sidebar.sb.collapsed .s-logo-text {
    display: none !important; opacity: 0 !important;
    width: 0 !important; min-width: 0 !important; max-width: 0 !important;
    flex: 0 0 0 !important; overflow: hidden !important; pointer-events: none !important;
  }
  #sidebar.sb.collapsed .s-logo-text svg { display: none !important; }
  #sidebar.sb.collapsed .s-mk {
    display: flex !important; width: 32px !important; height: 32px !important;
    margin: 0 auto !important;
  }
  #sidebar.sb.collapsed .s-tg,
  #sidebar.sb.collapsed [id="sb-plan-badge"] { display: none !important; }
}

/* Settings tab bar: labels were marked .hide-xs in markup but that class
   had no CSS rule anywhere, so they never actually hid on narrow phones —
   6 full-text tabs squeezed into one flex row with zero breathing room. */
@media (max-width:560px){
  .hide-xs{ display:none; }
}
/* Bills → Credit Cards tab: the card face + detail panel were forced into a
   hardcoded 2-column grid (min(280px,45%) 1fr) with no mobile override —
   at phone widths both columns shrank to ~180-200px, truncating balances,
   APR and utilization text. Stack them instead. */
@media (max-width:680px){
  .bcc-grid{ grid-template-columns:1fr !important; }
}
/* Bills → General Bills/Credit Cards mode switcher: on very narrow phones,
   drop the trailing amount so the label always fits on one line instead of
   wrapping mid-word inside the fixed-height pill. */
@media (max-width:380px){
  .bms-amt{ display:none; }
}
.bms-lbl{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* Bill list rows on phones: the row was cramming icon + name + category/
   type/status badges + installment details + due-badge + amount + up to 4
   action buttons into ONE horizontal line, which either truncated the name
   to almost nothing or (pre-fix) mangled it into illegible fragments.
   Proper fix: stack into two lines. Line 1 (icon + name/badges/details)
   gets the full row width to breathe. Line 2 (due-badge, amount, actions —
   already grouped under .bi-foot) becomes a compact, evenly-spaced strip
   below, no longer competing with the name for space. */
@media (max-width:480px){
  .bi-row:has(.bi-foot){
    grid-template-columns: 34px 1fr;
    grid-template-areas: "icon body" "foot foot";
    row-gap:10px; column-gap:10px; padding:12px 14px;
  }
  .bi-row:has(.bi-foot) > *:first-child{ grid-area:icon; }
  .bi-row:has(.bi-foot) .bi-bd{ grid-area:body; }
  .bi-foot{
    grid-area:foot;
    justify-content:space-between; flex-wrap:nowrap; gap:6px;
    margin-top:2px; padding:9px 10px;
    background:var(--bg2); border-top:1.5px solid var(--bd2); border-radius:10px;
    min-width:0;
  }
  .bi-foot > *{ min-width:0; flex-shrink:1; }
  .bi-foot .bi-amt-wrap{ text-align:left; flex-shrink:0; }
  .bi-foot .bi-ac{ gap:2px; margin-left:auto; flex-shrink:0; }
  .bi-foot .ic{ width:26px; height:26px; padding:4px; }
  .bi-foot .ic svg{ width:15px; height:15px; }
  .bi-row:has(.bi-foot) .bi-nm{ white-space:normal; overflow:visible; text-overflow:clip; }
}
@media (max-width:480px){
  .cf-proj-grid{ grid-template-columns:1fr !important; }
  .ob-plan-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:600px){
  .cal-cell-detail{ display:none !important; }
  .cal-day-cell{ min-height:40px !important; }
  .cal-day-num{ font-size:15px !important; }
}

/* ==== next <style> block ==== */
/* ── Split Calculator — floating, draggable, minimizable widget ─────────── */
.split-calc{
  position:fixed;top:100px;left:100px;width:300px;z-index:9400;
  background:var(--bg);border:1px solid var(--bd2);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.22),0 4px 16px rgba(0,0,0,.10);
  overflow:hidden;font-family:inherit;
  animation:splitCalcIn .18s ease both;
}
@keyframes splitCalcIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.split-calc-header{
  display:flex;align-items:center;gap:8px;padding:11px 8px 11px 14px;
  background:linear-gradient(135deg,#0060C0,#0A6E63);color:#fff;
  cursor:grab;user-select:none;touch-action:none;
}
.split-calc-header:active{cursor:grabbing}
.split-calc-title{font-size:13px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.split-calc-header-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.split-calc-icon-btn{
  width:26px;height:26px;border:none;border-radius:7px;background:rgba(255,255,255,.16);
  color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .12s;
}
.split-calc-icon-btn:hover{background:rgba(255,255,255,.28)}
.split-calc-body{padding:14px}
.split-calc.is-minimized .split-calc-body{display:none}
.split-calc.is-minimized{width:220px}
.split-calc-total-wrap{text-align:center;padding:10px 8px;background:var(--bg2);border-radius:12px;margin-bottom:10px}
.split-calc-total-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:3px}
.split-calc-total{font-size:26px;font-weight:800;letter-spacing:-.5px}
.split-calc-total.is-positive{color:var(--gt)}
.split-calc-total.is-negative{color:var(--re)}
.split-calc-entries{max-height:150px;overflow-y:auto;margin-bottom:10px;display:flex;flex-direction:column;gap:4px}
.split-calc-week-bills{margin:16px 0 18px;padding-top:14px;border-top:1px solid var(--bd)}
.split-calc-week-bills select{margin-top:2px}
.split-calc-entry{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--bg2);font-size:12px;
}
.split-calc-entry-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.split-calc-entry-amt{font-weight:700;flex:0 0 auto}
.split-calc-entry-amt.is-positive{color:var(--gt)}
.split-calc-entry-amt.is-negative{color:var(--re)}
.split-calc-entry-del{
  flex:0 0 auto;width:18px;height:18px;border:none;background:none;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;font-size:14px;line-height:1;border-radius:5px;
}
.split-calc-entry-del:hover{background:var(--bg3);color:var(--re)}
.split-calc-empty{font-size:11px;color:var(--text3);text-align:center;padding:10px 0}
.split-calc-input-row{display:flex;gap:6px;margin-bottom:8px}
.split-calc-input-row input{
  height:34px;border:1px solid var(--bd2);border-radius:9px;background:var(--bg2);color:var(--text);
  font-size:12.5px;font-family:inherit;padding:0 10px;outline:none;transition:border-color .12s;
}
.split-calc-input-row input:focus{border-color:var(--ac)}
.split-calc-input-row input#split-calc-desc{flex:1;min-width:0}
.split-calc-input-row input#split-calc-amt{width:84px;flex:0 0 auto}
.split-calc-btn-row{display:flex;gap:6px;margin-bottom:8px}
.split-calc-add-btn{
  flex:1;height:34px;border:none;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;
  font-family:inherit;color:#fff;transition:opacity .12s;
}
.split-calc-add-btn:hover{opacity:.88}
.split-calc-add-btn.plus{background:var(--green,#34c759)}
.split-calc-add-btn.minus{background:var(--re,#ff3b30)}
.split-calc-clear-btn{
  width:100%;height:28px;border:none;background:none;color:var(--text3);font-size:11px;cursor:pointer;
  font-family:inherit;text-decoration:underline;
}
.split-calc-clear-btn:hover{color:var(--text2)}
@media(max-width:480px){
  .split-calc{width:calc(100vw - 32px);max-width:300px}
}

/* ==== next <style> block ==== */
/* BillFlow feature patch — Bills calculator, periodic bills, business Plaid,
   goal privacy, compact languages, and AI recurring scanner. */
:is(.topb){position:relative!important;z-index:15000!important}
#tb-more-menu{z-index:16000!important;isolation:isolate}
#main-content{position:relative;z-index:1}

/* Compact language menu: remove the unused middle whitespace. */
:is(#bf-lang-menu-portal){width:190px!important;max-width:calc(100vw - 16px)!important;padding:5px!important}
:is(.bf-lang-menu-head){display:none!important}
:is(.bf-lang-option){grid-template-columns:31px max-content 20px!important;justify-content:start!important;gap:9px!important;min-height:42px!important;padding:6px 8px!important}
:is(.bf-lang-option-copy){width:auto!important;min-width:0!important}
:is(.bf-lang-option-region){font-size:10.5px!important;font-weight:700!important}

/* Bills page calculator entry point. */
.bf-bills-tool-strip{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:14px;padding:12px 14px;border:1px solid rgba(20,123,255,.18);
  border-radius:16px;background:linear-gradient(135deg,rgba(20,123,255,.08),rgba(18,214,192,.07));
  box-shadow:0 4px 18px rgba(20,123,255,.06)
}
.bf-bills-tool-copy{display:flex;align-items:center;gap:10px;min-width:0}
.bf-bills-tool-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#147BFF,#0A6E63);box-shadow:0 5px 14px rgba(20,123,255,.24);flex-shrink:0}
.bf-bills-tool-title{font-size:13px;font-weight:800;color:var(--text)}
.bf-bills-tool-sub{font-size:11px;color:var(--text3);margin-top:2px;line-height:1.35}
.bf-bills-tool-btn{height:36px!important;flex-shrink:0}
@media(max-width:600px){.bf-bills-tool-strip{align-items:flex-start}.bf-bills-tool-sub{display:none}.bf-bills-tool-btn{padding:0 12px!important}}

/* Periodic bill form: stable amount UI and installments grouped lower. */
.af .fg{align-items:start!important}
.af #fa-freq-preview{
  display:block;min-height:18px;margin-top:5px!important;padding:3px 7px;border-radius:7px;
  background:var(--acl);color:var(--ac)!important;font-weight:600;line-height:1.25
}
.af #fa-freq-preview:empty{display:none!important}
.af #fa-freq-hint{white-space:nowrap}
.af.bf-periodic-bill .fd:has(#fa){min-width:220px}
.bf-installment-section{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--bd);
  display:flex;flex-direction:column;gap:8px
}
.bf-installment-section::before{content:'Installment plan';font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--text3)}
.bf-installment-section>.fg2{display:grid!important;grid-template-columns:minmax(260px,420px)!important;margin:0!important;width:100%}
.bf-installment-section>#inst-extra-fields{margin-top:0!important}
.bf-periodic-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;background:var(--acl);color:var(--ac);font-size:9.5px;font-weight:750}

/* Free-plan basic mortgage block. */
.bf-free-mortgage-fields{display:grid;gap:11px}
.bf-free-mortgage-head{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(20,123,255,.09),rgba(18,214,192,.06));border:1px solid rgba(20,123,255,.18)}
.bf-free-mortgage-head strong{display:block;font-size:12.5px;color:var(--text)}
.bf-free-mortgage-head span{display:block;font-size:11px;color:var(--text2);line-height:1.45;margin-top:2px}
.bf-free-mortgage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
@media(max-width:700px){.bf-free-mortgage-grid{grid-template-columns:1fr}}

/* Calculator v2. */
.split-calc.bf-calc-v2{width:330px;border-radius:18px;overflow:hidden;z-index:20000!important}
.split-calc.bf-calc-v2 .split-calc-header{padding:10px 9px 10px 14px;background:linear-gradient(135deg,#0B5FC4,#087B70)}
.split-calc-brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.split-calc-brand-icon{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.17);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.split-calc-subtitle{font-size:9.5px;opacity:.72;margin-top:1px}
.split-calc.bf-calc-v2 .split-calc-icon-btn{width:29px;height:29px;border-radius:9px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
.split-calc.bf-calc-v2 .split-calc-icon-btn svg{width:14px;height:14px}
.split-calc.bf-calc-v2 .split-calc-icon-btn:hover{background:rgba(255,255,255,.25)}
.split-calc.bf-calc-v2 .split-calc-icon-btn.is-close:hover{background:rgba(255,72,72,.82);border-color:rgba(255,255,255,.25)}
.split-calc-base{display:grid;grid-template-columns:1fr 118px;align-items:center;gap:10px;padding:10px 11px;margin-bottom:10px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2)}
.split-calc-base-label{font-size:11px;font-weight:750;color:var(--text)}
.split-calc-base-help{font-size:9.5px;color:var(--text3);margin-top:2px}
.split-calc-base input{height:34px!important;text-align:right;font-weight:750;background:var(--bg)!important}
.split-calc-live-preview{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:-2px 0 9px}
.split-calc-live-card{padding:7px 9px;border-radius:10px;background:var(--bg2);border:1px solid var(--bd);font-size:9.5px;color:var(--text3)}
.split-calc-live-card b{display:block;font-size:12px;margin-top:2px;color:var(--text)}
.split-calc-live-card.plus b{color:var(--gt)}.split-calc-live-card.minus b{color:var(--re)}
.split-calc-mini{display:none;width:54px;height:54px;border:none;background:linear-gradient(135deg,#147BFF,#0A6E63);color:#fff;align-items:center;justify-content:center;cursor:pointer}
.split-calc-mini svg{width:23px;height:23px}
.split-calc.bf-calc-v2.is-minimized{width:54px!important;height:54px!important;border-radius:16px!important;box-shadow:0 12px 32px rgba(20,123,255,.28)}
.split-calc.bf-calc-v2.is-minimized .split-calc-header,.split-calc.bf-calc-v2.is-minimized .split-calc-body{display:none!important}
.split-calc.bf-calc-v2.is-minimized .split-calc-mini{display:flex}
@media(max-width:480px){.split-calc.bf-calc-v2{width:calc(100vw - 24px);max-width:330px}}

/* Business Plaid section. */
.bf-biz-finance-section{padding:13px 16px;border-top:1px solid var(--bd)}
.bf-biz-finance-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.bf-biz-finance-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.055em;color:var(--text3)}
.bf-biz-finance-actions{display:flex;gap:6px;flex-wrap:wrap}
.bf-biz-finance-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bf-biz-finance-card{border:1px solid var(--bd);border-radius:13px;background:var(--bg2);overflow:hidden}
.bf-biz-finance-card-head{padding:9px 11px;border-bottom:1px solid var(--bd);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.055em;color:var(--text3);display:flex;justify-content:space-between}
.bf-biz-account-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--bd)}
.bf-biz-account-row:last-child{border-bottom:none}
.bf-biz-account-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--acl);color:var(--ac)}
.bf-biz-account-name{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-biz-account-meta{font-size:10px;color:var(--text3);margin-top:2px}
.bf-biz-account-value{font-size:12px;font-weight:800;text-align:right;white-space:nowrap}
.bf-biz-empty{padding:16px 12px;text-align:center;font-size:11px;color:var(--text3);line-height:1.5}
@media(max-width:760px){.bf-biz-finance-grid{grid-template-columns:1fr}}

/* Goal privacy notice. */
.bf-goal-privacy-banner{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.bf-goal-privacy-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--bd);border-radius:13px;background:var(--bg2);font-size:11px;color:var(--text2)}
.bf-goal-privacy-item strong{display:block;color:var(--text);font-size:11.5px;margin-bottom:1px}
.bf-goal-privacy-icon{width:31px;height:31px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bf-goal-privacy-item.private .bf-goal-privacy-icon{background:var(--acl);color:var(--ac)}
.bf-goal-privacy-item.shared .bf-goal-privacy-icon{background:var(--greenl);color:var(--greent)}
@media(max-width:600px){.bf-goal-privacy-banner{grid-template-columns:1fr}}

/* AI recurring scanner. Keep the original product name; enhance only the visual treatment. */
.bf-ai-scan-btn{
  position:relative;
  height:34px!important;min-height:34px!important;
  padding:0 15px!important;
  border:1px solid rgba(86,231,255,.62)!important;
  border-radius:999px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 12% 20%,rgba(135,247,255,.34),transparent 28%),
    linear-gradient(112deg,#073a8c 0%,#086fd1 37%,#00a4c7 68%,#0fc69f 100%)!important;
  box-shadow:
    0 7px 18px rgba(0,116,190,.24),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 0 rgba(255,255,255,.28) inset!important;
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.005em;
  overflow:hidden;isolation:isolate;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.bf-ai-scan-btn::before{
  content:'';position:absolute;z-index:0;
  top:-20%;bottom:-20%;width:24%;left:-34%;
  background:linear-gradient(90deg,transparent,rgba(189,251,255,.72),transparent);
  transform:skewX(-18deg);
  animation:bfAiSweep 3.2s ease-in-out infinite;
}
.bf-ai-scan-btn::after{
  content:'';position:absolute;z-index:0;left:10px;right:10px;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(147,250,255,.68),transparent);
  opacity:.7;box-shadow:0 0 7px rgba(79,232,255,.72);
  animation:bfAiScanLine 2.4s ease-in-out infinite;
}
@keyframes bfAiSweep{0%,68%{left:-34%;opacity:0}74%{opacity:1}100%{left:118%;opacity:0}}
@keyframes bfAiScanLine{0%,100%{transform:translateY(-5px);opacity:.28}50%{transform:translateY(5px);opacity:.82}}
.bf-ai-scan-btn>*{position:relative;z-index:1}
.bf-ai-scan-btn svg{
  width:15px;height:15px;color:#d9fdff;
  filter:drop-shadow(0 0 4px rgba(118,244,255,.82));
}
.bf-ai-scan-btn:hover{
  transform:translateY(-1px);filter:brightness(1.07);
  box-shadow:0 9px 22px rgba(0,116,190,.30),0 0 0 1px rgba(255,255,255,.13) inset,0 1px 0 rgba(255,255,255,.32) inset!important;
}
.bf-ai-scan-btn:active{transform:translateY(0);filter:brightness(.97)}
.bf-ai-scan-btn:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(73,218,255,.20),0 7px 18px rgba(0,116,190,.24)!important;
}
.bf-ai-badge{display:none!important}
@media(max-width:600px){
  .bf-ai-scan-btn{height:36px!important;min-height:36px!important;padding:0 13px!important;font-size:10.5px}
}
#modal-box.bf-ai-recurring-modal{border-color:rgba(105,56,239,.28)!important;box-shadow:0 34px 90px rgba(42,35,120,.28),0 7px 26px rgba(20,123,255,.14)!important}
.bf-ai-recurring-hero{margin:16px 20px 12px;padding:14px 15px;border-radius:15px;background:linear-gradient(125deg,rgba(105,56,239,.11),rgba(20,123,255,.09),rgba(18,214,192,.08));border:1px solid rgba(105,56,239,.17);display:flex;align-items:center;gap:12px}
.bf-ai-orb{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#6938EF,#147BFF,#12D6C0);box-shadow:0 8px 22px rgba(91,70,220,.27);flex-shrink:0;position:relative}
.bf-ai-orb::after{content:'';position:absolute;inset:-4px;border:1px solid rgba(105,56,239,.2);border-radius:17px;animation:bfAiPulse 2s ease-in-out infinite}
@keyframes bfAiPulse{50%{transform:scale(1.08);opacity:.35}}
.bf-ai-recurring-hero strong{font-size:13px;color:var(--text)}.bf-ai-recurring-hero p{font-size:10.5px;color:var(--text2);line-height:1.45;margin-top:3px}
#modal-box.bf-ai-recurring-modal .bf-recurring-row{border:1px solid rgba(105,56,239,.13)!important;border-radius:14px!important;margin:0 14px 9px!important;background:linear-gradient(145deg,var(--bg),rgba(20,123,255,.025))!important;box-shadow:0 4px 14px rgba(48,40,120,.05)}
#modal-box.bf-ai-recurring-modal .bf-scan-loading{padding-top:10px}

/* ==== next <style> block ==== */
/* Dashboard V5 — full-width responsive grid with readable, constrained widget sizes. */
.sc:has(.bf-dashboard-v4){padding-left:14px;padding-right:14px}
:is(.bf-dashboard-v4){width:100%!important;max-width:none!important;margin:0!important;padding-bottom:28px}
:is(.bf-dashboard-widget-grid){
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:14px!important;
  grid-auto-flow:dense;
  align-items:start;
}
:is(.bf-dashboard-widget){
  container-type:inline-size;
  container-name:dashboard-widget;
  min-height:220px;
}
.bf-dashboard-widget.bf-size-small{grid-column:span 4!important}
.bf-dashboard-widget.bf-size-medium{grid-column:span 6!important}
.bf-dashboard-widget.bf-size-wide{grid-column:span 12!important}
:is(.bf-widget-body){min-width:0}
.bf-widget-size-cycle{font-size:10px!important;font-weight:900!important;color:var(--ac)!important;background:var(--acl)!important;border:1px solid rgba(20,123,255,.14)!important}
.bf-widget-size-cycle span{line-height:1}

/* Larger and clearer dashboard customizer. */
:is(.bf-dash-customizer-panel){width:min(700px,calc(100vw - 32px))!important;max-height:min(840px,92vh)!important}
:is(.bf-customizer-head){padding:21px 24px!important}
:is(.bf-customizer-head span){font-size:11px!important}
:is(.bf-customizer-head strong){font-size:21px!important;line-height:1.2!important;letter-spacing:-.35px}
:is(.bf-customizer-head>button){width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;border-radius:12px!important}
:is(.bf-fixed-note){margin:16px 22px 5px!important;padding:14px 15px!important;gap:12px!important}
:is(.bf-fixed-note>span){width:30px!important;height:30px!important}
:is(.bf-fixed-note strong){font-size:13px!important}
:is(.bf-fixed-note p){font-size:12px!important;line-height:1.5!important}
:is(.bf-customizer-list){padding:11px 22px 18px!important}
:is(.bf-density-choice){padding:10px 0 15px!important}
:is(.bf-density-choice>span){font-size:13px!important}
:is(.bf-density-choice button){height:31px!important;min-height:31px!important;font-size:11px!important;padding:0 12px!important}
.bf-size-guide{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--bd)}
.bf-size-guide>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.bf-size-guide strong{font-size:13px;color:var(--text)}
.bf-size-guide span{font-size:11px;line-height:1.45;color:var(--text3)}
.bf-size-guide-keys{display:flex;gap:5px;flex-shrink:0}
.bf-size-guide-keys b{width:28px;height:28px;border-radius:8px;background:var(--bg2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:10px}
:is(.bf-customizer-row){grid-template-columns:38px minmax(0,1fr) 104px auto auto!important;gap:12px!important;padding:12px 0!important}
:is(.bf-customizer-icon){width:36px!important;height:36px!important}
:is(.bf-customizer-row strong){font-size:13px!important;line-height:1.3}
.bf-customizer-row>div:nth-child(2)>span{font-size:11px!important;line-height:1.35;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bf-customizer-size{display:flex;gap:3px;padding:3px;background:var(--bg2);border:1px solid var(--bd);border-radius:10px}
.bf-customizer-size button{width:30px;height:28px;min-width:30px;min-height:28px;border:none;border-radius:7px;background:transparent;color:var(--text3);font-size:10px;font-weight:800;cursor:pointer;padding:0}
.bf-customizer-size button.on{background:var(--bg);color:var(--ac);box-shadow:var(--sh-s)}
:is(.bf-customizer-order button){width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}
:is(.bf-customizer-foot){padding:16px 22px 20px!important}
.bf-customizer-foot button{font-size:14px!important;height:46px!important}

/* Container-aware adaptations preserve legibility even when a widget is compact. */
@container dashboard-widget (max-width:520px){
  .bf-widget-head{padding:12px 13px}
  .bf-widget-subtitle{max-width:230px}
  .bf-donut-layout{flex-direction:column;gap:12px;min-height:auto}
  .bf-donut-wrap{width:126px;height:126px}
  .bf-chart-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;max-width:none}
  .bf-upcoming-row{grid-template-columns:42px minmax(0,1fr);align-items:center}
  .bf-upcoming-right{grid-column:2;justify-content:space-between;margin-top:-2px}
  .bf-flow-summary{align-items:flex-start;flex-direction:column}
  .bf-flow-summary>span{text-align:left;max-width:none}
  .bf-goal-widget-grid{grid-template-columns:1fr}
}
@container dashboard-widget (max-width:390px){
  .bf-chart-legend{grid-template-columns:1fr}
  .bf-widget-tools{gap:0}
  .bf-widget-tool{width:26px;height:26px;min-width:26px;min-height:26px}
}
@container dashboard-widget (min-width:640px){
  .bf-donut-wrap{width:172px;height:172px}
  .bf-chart-legend{max-width:280px}
  .bf-chart-legend-row{font-size:12.5px}
  .bf-donut-center b{font-size:18px;max-width:110px}
}

/* Tablet: a six-column grid. Small widgets can share a row; larger widgets remain full-width. */
@media(max-width:1199px){
  .sc:has(.bf-dashboard-v4){padding-left:12px;padding-right:12px}
  .bf-dashboard-widget-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important}
  .bf-dashboard-widget.bf-size-small{grid-column:span 3!important}
  .bf-dashboard-widget.bf-size-medium,.bf-dashboard-widget.bf-size-wide{grid-column:span 6!important}
}

/* Mobile: one readable column, regardless of the chosen desktop size. */
@media(max-width:767px){
  .sc:has(.bf-dashboard-v4){padding-left:10px;padding-right:10px}
  .bf-dashboard-v4{padding-bottom:16px}
  .bf-dashboard-widget-grid{grid-template-columns:1fr!important;gap:10px!important}
  .bf-dashboard-widget.bf-size-small,.bf-dashboard-widget.bf-size-medium,.bf-dashboard-widget.bf-size-wide{grid-column:1/-1!important;min-height:0}
  .bf-essential-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bf-dash-customizer-panel{width:100%!important;max-height:91dvh!important}
  .bf-customizer-head{padding:18px 16px!important}
  .bf-customizer-head strong{font-size:20px!important}
  .bf-fixed-note{margin:12px 14px 4px!important;padding:13px!important}
  .bf-customizer-list{padding:8px 14px 16px!important}
  .bf-size-guide{align-items:flex-start}
  .bf-size-guide span{font-size:10.5px}
  .bf-customizer-row{grid-template-columns:36px minmax(0,1fr) auto!important;gap:9px!important;padding:12px 0!important}
  .bf-customizer-row>.bf-customizer-switch{grid-column:3;grid-row:1}
  .bf-customizer-size{grid-column:2;grid-row:2;justify-self:start}
  .bf-customizer-order{grid-column:3;grid-row:2}
  .bf-customizer-foot{padding:13px 14px calc(15px + env(safe-area-inset-bottom))!important}
}
@media(max-width:420px){
  .bf-essential-grid{grid-template-columns:1fr!important}
  .bf-dashboard-actions{grid-template-columns:1fr 1fr!important}
  .bf-customizer-head strong{font-size:18px!important}
  .bf-size-guide-keys{display:none}
  .bf-customizer-row{grid-template-columns:34px minmax(0,1fr) auto!important}
  .bf-customizer-order{display:none!important}
  .bf-customizer-size{grid-column:2/4}
}

/* ==== next <style> block ==== */
/* Truly compact top-bar language selector: no artificial flexible space. */
#bf-top-lang .bf-lang-trigger{
  width:max-content!important;min-width:0!important;max-width:none!important;
  gap:4px!important;padding:0 8px!important;
}
#bf-top-lang .bf-lang-trigger-copy{
  flex:0 0 auto!important;width:auto!important;min-width:0!important;
}
#bf-top-lang .bf-lang-current-code{white-space:nowrap!important;letter-spacing:.025em!important}
#bf-top-lang .bf-lang-chevron{margin-left:0!important;width:12px!important;height:12px!important;flex-basis:12px!important}
@media(max-width:600px){
  #bf-top-lang .bf-lang-trigger{padding:0 7px!important;gap:3px!important}
}

/* Minimized calculator docks beside FlowBot and stays visually prominent. */
:is(.split-calc.bf-calc-v2.is-minimized){
  width:54px!important;height:54px!important;opacity:1!important;
  z-index:20010!important;border:1px solid rgba(255,255,255,.72)!important;
  background:linear-gradient(145deg,#147BFF,#0755C7 58%,#0A6E63)!important;
  box-shadow:0 14px 34px rgba(8,59,142,.42),0 0 0 3px rgba(20,123,255,.16)!important;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
:is(.split-calc.bf-calc-v2.is-minimized .split-calc-mini){
  width:54px!important;height:54px!important;border-radius:15px!important;
  opacity:1!important;color:#fff!important;cursor:grab!important;
  background:transparent!important;filter:none!important;
}
.split-calc.bf-calc-v2.is-minimized .split-calc-mini:active{cursor:grabbing!important;transform:scale(.96)}
.split-calc.bf-calc-v2.is-minimized .split-calc-mini svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.24))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .split-calc.bf-calc-v2.is-minimized{border-color:rgba(255,255,255,.42)!important;box-shadow:0 16px 38px rgba(0,0,0,.58),0 0 0 3px rgba(20,123,255,.22)!important}
}}

/* ==== next <style> block ==== */
/* FlowBot: white dock with a visible, gently pulsing blue border. */
:is(#chat-fab){
  background:#fff !important;
  border:2px solid #147BFF !important;
  box-shadow:0 8px 24px rgba(20,123,255,.22),0 0 0 0 rgba(20,123,255,.28) !important;
  animation:bfFlowBotBorderPulse 2.2s ease-out infinite !important;
}
:is(#chat-fab:hover){
  background:#fff !important;
  box-shadow:0 12px 30px rgba(20,123,255,.28),0 0 0 5px rgba(20,123,255,.10) !important;
}
:is(#chat-fab .bf-chat-fab-dot){border-color:#fff !important}
@keyframes bfFlowBotBorderPulse{
  0%,100%{box-shadow:0 8px 24px rgba(20,123,255,.22),0 0 0 0 rgba(20,123,255,.26)}
  55%{box-shadow:0 10px 28px rgba(20,123,255,.25),0 0 0 7px rgba(20,123,255,0)}
}
@media(prefers-reduced-motion:reduce){#chat-fab{animation:none !important}}

/* Dashboard widget headers: stronger visual hierarchy with accessible color. */
.bf-dashboard-widget .bf-widget-head{
  background:linear-gradient(135deg,#eef5ff,#e8f8f6) !important;
  border-bottom:1px solid rgba(20,123,255,.20) !important;
  border-left:4px solid #147BFF;
  padding-left:12px !important;
}
.bf-dashboard-widget .bf-widget-title{color:#12345a !important;font-weight:850 !important}
.bf-dashboard-widget .bf-widget-subtitle{color:#53677d !important}
.bf-dashboard-widget[data-widget-id="upcoming"] .bf-widget-head{background:linear-gradient(135deg,#eaf3ff,#f4f8ff)!important;border-left-color:#147BFF}
.bf-dashboard-widget[data-widget-id="categories"] .bf-widget-head{background:linear-gradient(135deg,#f1edff,#f8f6ff)!important;border-left-color:#7557d8}
.bf-dashboard-widget[data-widget-id="cashflow"] .bf-widget-head{background:linear-gradient(135deg,#e5faf5,#f2fffb)!important;border-left-color:#0a9a7d}
.bf-dashboard-widget[data-widget-id="accounts"] .bf-widget-head{background:linear-gradient(135deg,#e9f9ee,#f5fff8)!important;border-left-color:#20a45a}
.bf-dashboard-widget[data-widget-id="cards"] .bf-widget-head{background:linear-gradient(135deg,#fff2e5,#fff9f2)!important;border-left-color:#f08a24}
.bf-dashboard-widget[data-widget-id="goals"] .bf-widget-head{background:linear-gradient(135deg,#fff0f7,#fff8fb)!important;border-left-color:#d94f91}
.bf-dashboard-widget[data-widget-id="paydays"] .bf-widget-head{background:linear-gradient(135deg,#e9f3ff,#f2f8ff)!important;border-left-color:#3579c8}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .bf-dashboard-widget .bf-widget-head{background:rgba(20,123,255,.12)!important;border-bottom-color:rgba(89,166,255,.25)!important}
  .bf-dashboard-widget .bf-widget-title{color:#f5f8ff!important}.bf-dashboard-widget .bf-widget-subtitle{color:#b5c1d0!important}
}}

/* Goal page actions: header buttons only after the corresponding list exists. */
.bf-goals-page .bf-goal-section-action{height:32px!important;padding:0 13px!important;font-size:11px!important}
@media(max-width:600px){
  .bf-goals-page .ph{gap:8px;align-items:center}.bf-goals-page .bf-goal-section-action{height:34px!important;padding:0 10px!important}
}

/* Calendar month picker v2. */
.bf-date-picker-v2{padding:22px;width:min(560px,calc(100vw - 28px))}
.bf-date-picker-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:19px}
.bf-date-picker-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#147BFF,#0A8E82);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 7px 18px rgba(20,123,255,.22);flex-shrink:0}
.bf-date-picker-copy{min-width:0;flex:1}.bf-date-picker-title{font-size:18px;font-weight:850;letter-spacing:-.35px}.bf-date-picker-sub{font-size:11.5px;color:var(--text3);margin-top:3px;line-height:1.45}
.bf-date-picker-today{height:34px!important;padding:0 12px!important;flex-shrink:0}
.bf-date-picker-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.075em;color:var(--text3);margin:0 0 8px}
.bf-date-years{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:18px}
.bf-date-year,.bf-date-month{border:1px solid var(--bd)!important;background:var(--bg2)!important;color:var(--text)!important;border-radius:11px!important;font-family:inherit;font-weight:650;transition:.15s ease}
.bf-date-year{height:38px!important;min-width:0!important;font-size:12px}.bf-date-month{height:48px!important;min-width:0!important;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:5px}
.bf-date-year:hover,.bf-date-month:hover{border-color:rgba(20,123,255,.35)!important;background:var(--acl)!important;color:var(--ac)!important}
.bf-date-year.is-active,.bf-date-month.is-active{background:linear-gradient(135deg,#147BFF,#0A7E73)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 5px 14px rgba(20,123,255,.22)}
.bf-date-month.is-current:not(.is-active)::after{content:'';width:5px;height:5px;border-radius:50%;background:#34c759}
.bf-date-months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bf-date-picker-foot{display:flex;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--bd)}
@media(max-width:600px){
  .bf-date-picker-v2{padding:18px 15px 16px;width:100%}.bf-date-picker-head{gap:10px}.bf-date-picker-icon{width:38px;height:38px}.bf-date-picker-title{font-size:17px}.bf-date-picker-sub{font-size:11px}.bf-date-years{grid-template-columns:repeat(3,1fr)}.bf-date-months{grid-template-columns:repeat(3,1fr)}.bf-date-month{height:46px!important}.bf-date-picker-today span{display:none}
}
@media(min-width:601px) and (max-width:900px){.bf-date-picker-v2{width:min(620px,calc(100vw - 50px))}}

/* Income form help: compact and progressive instead of a dense blue box. */
.bf-income-guide{margin:2px 0 10px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);overflow:hidden}
.bf-income-guide summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:11.5px;font-weight:750;color:var(--text2)}
.bf-income-guide summary::-webkit-details-marker{display:none}.bf-income-guide summary svg{color:var(--ac);flex-shrink:0}.bf-income-guide summary::after{content:'›';margin-left:auto;font-size:17px;color:var(--text3);transform:rotate(90deg);transition:transform .15s}.bf-income-guide[open] summary::after{transform:rotate(-90deg)}
.bf-income-guide-body{padding:0 12px 11px;border-top:1px solid var(--bd)}
.bf-income-guide-row{display:grid;grid-template-columns:minmax(120px,.8fr) 16px minmax(0,1.4fr);gap:5px;padding:7px 0;border-bottom:1px solid var(--bd);font-size:10.5px;line-height:1.45}.bf-income-guide-row:last-child{border-bottom:none}.bf-income-guide-row b{color:var(--text)}.bf-income-guide-row span{color:var(--text3)}
.bf-income-guide-note{font-size:9.5px;color:var(--text3);margin-top:8px;line-height:1.45}
@media(max-width:600px){.bf-income-guide-row{grid-template-columns:1fr}.bf-income-guide-row>i{display:none}}

/* ==== next <style> block ==== */
/* ── Flatter content surfaces: remove the heavy floating-card shadows on pages. ── */
.sc .kp,
.sc .pn,
.sc .bx,
.sc .ps-card,
.sc .cc-detail,
.sc .hc-panel,
.sc .af,
.sc .ir{
  box-shadow:0 1px 2px rgba(15,23,42,.035)!important;
}
.sc .kp:hover,
.sc .pn:hover,
.sc .bx:hover,
.sc .ps-card:hover{
  transform:none!important;
  box-shadow:0 2px 6px rgba(15,23,42,.055)!important;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .sc .kp,.sc .pn,.sc .bx,.sc .ps-card,.sc .cc-detail,.sc .hc-panel,.sc .af,.sc .ir{
    box-shadow:0 1px 2px rgba(0,0,0,.22)!important;
  }
}}

/* ── Calendar picker: Today sits on its own row, away from the modal close button. ── */
.bf-date-picker-v3{padding:22px;width:min(560px,calc(100vw - 28px))}
.bf-date-picker-v3 .bf-date-picker-head{margin-bottom:10px;padding-right:42px;align-items:center}
.bf-date-picker-quick{display:flex;justify-content:flex-end;margin:0 0 17px}
.bf-date-picker-quick .bf-date-picker-today{
  position:static!important;margin:0!important;height:35px!important;padding:0 13px!important;
  border-color:rgba(20,123,255,.20)!important;background:var(--acl)!important;color:var(--ac)!important;
  font-weight:750!important;box-shadow:none!important;
}
.bf-date-picker-quick .bf-date-picker-today:hover{background:rgba(20,123,255,.14)!important;border-color:rgba(20,123,255,.34)!important}
@media(max-width:600px){
  .bf-date-picker-v3{padding:18px 15px 16px;width:100%}
  .bf-date-picker-v3 .bf-date-picker-head{padding-right:40px;align-items:flex-start}
  .bf-date-picker-quick{justify-content:stretch;margin-bottom:15px}
  .bf-date-picker-quick .bf-date-picker-today{width:100%;justify-content:center}
  .bf-date-picker-quick .bf-date-picker-today span{display:inline!important}
}
@media(min-width:601px) and (max-width:900px){.bf-date-picker-v3{width:min(620px,calc(100vw - 50px))}}

/* ── Goal template behavior: make automatic checklist targeting clearly optional. ── */
.bf-goal-auto-target-card{
  position:relative;display:grid!important;grid-template-columns:20px minmax(0,1fr);gap:2px 9px!important;
  width:100%;padding:11px 12px!important;border:1px solid var(--bd)!important;border-radius:12px;
  background:var(--bg2);align-items:center!important;
}
.bf-goal-auto-target-card>input{grid-row:1/3;align-self:start;margin-top:1px}
.bf-goal-auto-target-card>span{font-size:12px!important;font-weight:700!important;color:var(--text)!important}
.bf-goal-auto-help{grid-column:2;font-size:10.5px;line-height:1.45;color:var(--text3)}
#gm-target[readonly]{opacity:1!important;background:rgba(20,123,255,.045)!important}

/* ── Dashboard widget resize: drag the right edge and snap to the readable grid. ── */
.bf-widget-size-cycle,.bf-customizer-size,.bf-size-guide{display:none!important}
:is(.bf-customizer-row){grid-template-columns:38px minmax(0,1fr) auto auto!important}
.bf-resize-guide{
  display:flex;align-items:flex-start;gap:10px;padding:12px 0 14px;border-bottom:1px solid var(--bd);
  color:var(--text3);font-size:11px;line-height:1.45;
}
.bf-resize-guide>span{width:28px;height:28px;border-radius:9px;background:var(--acl);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bf-resize-guide strong{display:block;color:var(--text);font-size:12px;margin-bottom:2px}
:is(.bf-dashboard-widget){overflow:visible!important}
.bf-dashboard-widget .bf-widget-head,.bf-dashboard-widget .bf-widget-body{overflow:hidden}
.bf-widget-resize-handle{
  position:absolute;z-index:9;right:-6px;top:50%;transform:translateY(-50%);
  width:13px;height:58px;border-radius:9px;cursor:ew-resize;touch-action:none;
  background:var(--bg);border:1px solid rgba(20,123,255,.24);box-shadow:0 2px 8px rgba(20,123,255,.10);
  opacity:0;transition:opacity .15s,border-color .15s,background .15s;
}
.bf-widget-resize-handle::before{
  content:'';position:absolute;left:4px;top:17px;width:3px;height:22px;border-radius:3px;
  background:repeating-linear-gradient(to bottom,var(--ac) 0 2px,transparent 2px 5px);opacity:.62;
}
.bf-dashboard-widget:hover .bf-widget-resize-handle,.bf-dashboard-widget.is-resizing .bf-widget-resize-handle{opacity:1}
.bf-widget-resize-handle:hover,.bf-dashboard-widget.is-resizing .bf-widget-resize-handle{border-color:var(--ac);background:var(--acl)}
.bf-dashboard-widget.is-resizing{z-index:15;outline:2px solid rgba(20,123,255,.24);outline-offset:2px;transition:none!important;user-select:none}
body.bf-widget-resizing{cursor:ew-resize!important;user-select:none!important}
@media(max-width:767px){
  .bf-widget-resize-handle{display:none!important}
  .bf-customizer-row{grid-template-columns:36px minmax(0,1fr) auto!important}
}

/* ==== next <style> block ==== */
/* Keep the drag-to-resize target inside the rounded widget boundary.
   The full edge remains draggable, but the visual grip only appears when
   the pointer is directly over that edge or while resizing. */
:is(.bf-dashboard-widget){
  overflow:hidden!important;
}
:is(.bf-dashboard-widget .bf-widget-head){
  overflow:hidden!important;
}
.bf-dashboard-widget .bf-widget-body{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
:is(.bf-widget-resize-handle){
  right:0!important;
  top:0!important;
  transform:none!important;
  width:12px!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
  border-radius:0 17px 17px 0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  cursor:ew-resize!important;
}
:is(.bf-widget-resize-handle::before){
  left:auto!important;
  right:3px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:3px!important;
  height:34px!important;
  border-radius:999px!important;
  background:var(--ac)!important;
  opacity:0!important;
  transition:opacity .15s ease,box-shadow .15s ease!important;
}
.bf-dashboard-widget:hover .bf-widget-resize-handle::before{
  opacity:.18!important;
}
.bf-widget-resize-handle:hover::before,
.bf-dashboard-widget.is-resizing .bf-widget-resize-handle::before{
  opacity:.78!important;
  box-shadow:0 0 0 3px rgba(20,123,255,.10)!important;
}
.bf-widget-resize-handle:hover,
.bf-dashboard-widget.is-resizing .bf-widget-resize-handle{
  border:0!important;
  background:linear-gradient(to left,rgba(20,123,255,.055),transparent)!important;
}
:is(.bf-dashboard-widget.is-resizing){
  overflow:hidden!important;
}
@media(max-width:767px){
}

/* ==== next <style> block ==== */
/* Calendar picker v4: the current-period action belongs to the introduction,
   aligned with the title rather than floating against the modal's right edge. */
.bf-date-picker-v4{
  width:min(560px,calc(100vw - 32px));
  padding:24px 22px 20px;
  animation:bfSheetPop .38s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bfSheetPop{0%{transform:scale(.92) translateY(6px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
.bf-date-picker-v4 .bf-date-picker-intro{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:13px;
  align-items:start;
  padding-right:48px;
  margin-bottom:22px;
}
.bf-date-picker-v4 .bf-date-picker-icon{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(20,123,255,.14),rgba(18,214,192,.14));
  color:var(--ac);border:1px solid rgba(20,123,255,.12);
  box-shadow:0 5px 16px rgba(20,123,255,.10);
}
.bf-date-picker-v4 .bf-date-picker-title{
  font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.35px;
  color:var(--text);margin:1px 0 5px;
}
.bf-date-picker-v4 .bf-date-picker-sub{
  font-size:12.5px;line-height:1.5;color:var(--text3);max-width:360px;
}
.bf-date-current-action{
  width:max-content;max-width:100%;
  margin-top:12px;padding:0 12px 0 10px;height:36px;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(20,123,255,.22);border-radius:11px;
  background:rgba(20,123,255,.065);color:var(--ac);
  font-family:inherit;cursor:pointer;box-shadow:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.bf-date-current-action:hover{
  background:rgba(20,123,255,.12);border-color:rgba(20,123,255,.38);
  transform:translateY(-1px);
}
.bf-date-current-action .bf-date-current-label{font-size:12px;font-weight:800}
.bf-date-current-action .bf-date-current-period{
  padding-left:8px;border-left:1px solid rgba(20,123,255,.20);
  font-size:11px;font-weight:650;color:var(--text2);white-space:nowrap;
}
.bf-date-picker-v4 .bf-date-picker-label{
  margin:0 0 8px;font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text3);
}
.bf-date-picker-v4 .bf-date-years{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:20px;
}
.bf-date-picker-v4 .bf-date-year,
.bf-date-picker-v4 .bf-date-month{
  min-width:0;height:44px;border:1px solid var(--bd);border-radius:12px;
  background:var(--bg2);color:var(--text);font:600 13px/1 -apple-system,BlinkMacSystemFont,inherit;
  cursor:pointer;transition:background .14s,border-color .14s,color .14s,box-shadow .14s,transform .1s ease;
}
.bf-date-picker-v4 .bf-date-year:active,
.bf-date-picker-v4 .bf-date-month:active{transform:scale(.92)}
.bf-date-picker-v4 .bf-date-year:hover,
.bf-date-picker-v4 .bf-date-month:hover{background:var(--bg3);border-color:var(--bd2)}
.bf-date-picker-v4 .bf-date-year.is-active,
.bf-date-picker-v4 .bf-date-month.is-active{
  color:#fff;border-color:transparent;
  background:#007AFF;
  box-shadow:0 3px 10px rgba(0,122,255,.32);
}
.bf-date-picker-v4 .bf-date-month.is-current:not(.is-active){
  border-color:rgba(0,122,255,.30);background:rgba(0,122,255,.07);color:#007AFF;
}
.bf-date-picker-v4 .bf-date-month.has-overdue{
  position:relative;border-width:2px;border-color:var(--re);color:var(--re);background:var(--rel);
}
.bf-date-picker-v4 .bf-date-month.has-overdue::after{
  content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--re);box-shadow:0 0 0 2px var(--rel);
}
.bf-date-picker-v4 .bf-date-month.has-overdue.is-active{
  color:#fff;border-color:transparent;background:var(--re);
  box-shadow:0 3px 10px rgba(255,59,48,.32);
}
.bf-date-picker-v4 .bf-date-month.has-overdue.is-active::after{background:#fff}
.bf-date-picker-v4 .bf-date-months{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
}
.bf-date-picker-v4 .bf-date-picker-foot{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--bd);
}
.bf-date-picker-v4 .bf-date-picker-foot .btn-cancel{width:100%;height:44px!important}

@media(max-width:600px){
  .bf-date-picker-v4{width:100%;padding:20px 16px 16px}
  .bf-date-picker-v4 .bf-date-picker-intro{
    grid-template-columns:42px minmax(0,1fr);gap:11px;padding-right:38px;margin-bottom:19px;
  }
  .bf-date-picker-v4 .bf-date-picker-icon{width:42px;height:42px;border-radius:13px}
  .bf-date-picker-v4 .bf-date-picker-title{font-size:18px}
  .bf-date-picker-v4 .bf-date-picker-sub{font-size:12px}
  .bf-date-current-action{width:100%;justify-content:flex-start;height:40px}
  .bf-date-current-action .bf-date-current-period{margin-left:auto}
  .bf-date-picker-v4 .bf-date-years{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .bf-date-picker-v4 .bf-date-months{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .bf-date-picker-v4 .bf-date-year,.bf-date-picker-v4 .bf-date-month{height:43px}
}
@media(min-width:601px) and (max-width:900px){
  .bf-date-picker-v4{width:min(620px,calc(100vw - 48px))}
}

/* ==== next <style> block ==== */
/* Keep the month picker inside the modal's real content box.
   The previous 560px child width overflowed the 540px modal and made the
   right padding disappear. */
#modal-box .md:has(.bf-date-picker-v4){
  width:100% !important;
  min-width:0 !important;
  padding-top:0 !important;
}
#modal-box .bf-date-picker-v4{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 auto !important;
  overflow:hidden !important;
}
#modal-box .bf-date-picker-v4 .bf-date-picker-intro,
#modal-box .bf-date-picker-v4 .bf-date-years,
#modal-box .bf-date-picker-v4 .bf-date-months,
#modal-box .bf-date-picker-v4 .bf-date-picker-foot{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
#modal-box .bf-date-picker-v4 .bf-date-year,
#modal-box .bf-date-picker-v4 .bf-date-month{
  width:100% !important;
  max-width:100% !important;
}
@media(min-width:769px){
  #modal-box:has(.bf-date-picker-v4){
    width:min(560px,calc(100vw - 32px)) !important;
    max-width:min(560px,calc(100vw - 32px)) !important;
  }
}
@media(max-width:768px){
  #modal-box .bf-date-picker-v4{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

/* ==== next <style> block ==== */
/* Calculator header controls: distinct, legible targets. */
.split-calc.bf-calc-v2 .split-calc-header-actions{gap:7px!important}
:is(.split-calc.bf-calc-v2 .split-calc-icon-btn){
  width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
  border-radius:11px!important;background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:transform .16s ease,background .16s ease,box-shadow .16s ease!important
}
:is(.split-calc.bf-calc-v2 .split-calc-icon-btn:hover){transform:translateY(-1px);background:rgba(255,196,72,.28)!important;box-shadow:0 5px 14px rgba(0,0,0,.18)}
:is(.split-calc.bf-calc-v2 .split-calc-icon-btn.is-close:hover){background:#e83d49!important;border-color:rgba(255,255,255,.42)!important}
.split-calc.bf-calc-v2 .split-calc-icon-btn:active{transform:scale(.94)}

/* A clearer reset action and an in-calculator confirmation instead of a browser dialog. */
:is(.split-calc-clear-btn){
  min-height:38px!important;border:1px solid rgba(255,59,48,.24)!important;border-radius:11px!important;
  color:var(--re)!important;background:var(--rel)!important;font-weight:750!important;
  display:flex!important;align-items:center;justify-content:center;gap:7px!important;transition:.16s ease!important
}
:is(.split-calc-clear-btn:hover){background:rgba(255,59,48,.16)!important;border-color:rgba(255,59,48,.42)!important;transform:translateY(-1px)}
.split-calc-reset-confirm{
  display:none;margin:10px 0 0;padding:12px;border-radius:13px;
  border:1px solid rgba(255,59,48,.24);background:linear-gradient(145deg,var(--rel),var(--bg));
  box-shadow:0 8px 22px rgba(130,28,24,.10)
}
.split-calc-reset-confirm.is-visible{display:block;animation:bfCalcResetIn .18s ease both}
@keyframes bfCalcResetIn{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}
.split-calc-reset-top{display:flex;align-items:flex-start;gap:9px}
.split-calc-reset-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--re);background:rgba(255,59,48,.12);flex-shrink:0}
.split-calc-reset-copy strong{display:block;font-size:11.5px;color:var(--text)}
.split-calc-reset-copy span{display:block;font-size:9.5px;color:var(--text3);line-height:1.4;margin-top:2px}
.split-calc-reset-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.split-calc-reset-actions button{height:34px!important;min-height:34px!important;border-radius:9px!important;font-size:10.5px!important;font-weight:750!important}
.split-calc-reset-confirm-btn{border:0;background:var(--re);color:#fff}

/* Droplet animation used while the calculator collapses toward FlowBot. */
.bf-calc-droplet{
  position:fixed;z-index:30000;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#0B5FC4,#147BFF 55%,#087B70);
  border:1px solid rgba(255,255,255,.46);box-shadow:0 18px 46px rgba(12,69,160,.38)
}
.bf-calc-droplet svg{filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))}

/* Dashboard header contrast for both system dark mode and explicit themes. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .bf-dashboard-widget .bf-widget-head{background:linear-gradient(135deg,#173456,#183d4a)!important;border-bottom-color:rgba(117,188,255,.30)!important}
  .bf-dashboard-widget .bf-widget-title,.bf-dashboard-widget .bf-widget-head svg{color:#f7fbff!important;stroke:#f7fbff!important}
  .bf-dashboard-widget .bf-widget-subtitle{color:#c5d5e6!important}
  .bf-dashboard-widget .bf-widget-drag{color:#d6e3f0!important}
}}
html[data-theme="dark"] .bf-dashboard-widget .bf-widget-head,
body[data-theme="dark"] .bf-dashboard-widget .bf-widget-head,
[data-theme="dark"] .bf-dashboard-widget .bf-widget-head{
  background:linear-gradient(135deg,#173456,#183d4a)!important;border-bottom-color:rgba(117,188,255,.30)!important
}
html[data-theme="dark"] .bf-dashboard-widget .bf-widget-title,
html[data-theme="dark"] .bf-dashboard-widget .bf-widget-head svg,
body[data-theme="dark"] .bf-dashboard-widget .bf-widget-title,
body[data-theme="dark"] .bf-dashboard-widget .bf-widget-head svg,
[data-theme="dark"] .bf-dashboard-widget .bf-widget-title,
[data-theme="dark"] .bf-dashboard-widget .bf-widget-head svg{color:#f7fbff!important;stroke:#f7fbff!important}
[data-theme="dark"] .bf-dashboard-widget .bf-widget-subtitle{color:#c5d5e6!important}

/* Required/optional symbols inside modals should be unmistakable. */
.bf-modal-marker{
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  min-width:18px;height:18px;padding:0 4px;margin-left:3px;border-radius:6px;
  font-size:13px!important;line-height:1!important;font-weight:900!important;
  color:#075fc7!important;background:rgba(20,123,255,.12);border:1px solid rgba(20,123,255,.28);
  text-transform:none!important;letter-spacing:0!important
}
.bf-modal-marker.is-required{color:#b42318!important;background:rgba(255,59,48,.11);border-color:rgba(255,59,48,.28)}
#modal-box .info-tip{width:17px!important;height:17px!important;font-size:11px!important;color:var(--ac)!important;border-color:rgba(20,123,255,.35)!important;background:rgba(20,123,255,.10)!important}

/* Explicit card expenses always use the semantic red. */
.bf-credit-expense-amount{color:var(--re)!important}

@media(max-width:600px){
  .split-calc.bf-calc-v2 .split-calc-icon-btn{width:34px!important;height:34px!important}
  .split-calc-reset-actions button{height:38px!important;min-height:38px!important}
}
@media(prefers-reduced-motion:reduce){.bf-calc-droplet{display:none!important}.split-calc-reset-confirm{animation:none!important}}

/* ==== next <style> block ==== */
/* Neutral secondary action: never turns pink/red on hover. */
.split-calc-reset-actions .btn-cancel:hover,
.split-calc-reset-actions .btn-cancel:focus-visible{
  background:var(--bg2)!important;
  color:var(--text)!important;
  border-color:var(--bd2)!important;
  box-shadow:0 1px 4px rgba(0,0,0,.08)!important;
  transform:none!important;
}
/* The new minimize motion uses the calculator itself; suppress legacy ghost visuals. */
:is(.bf-calc-droplet){display:none!important}

/* ==== next <style> block ==== */
.bms-month{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:0;max-width:180px;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  color:inherit;font-size:10px;font-weight:750;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;
}
button:not([style*="color:#fff"]) .bms-month{
  background:var(--bg2);border-color:var(--bd);color:var(--text2);
}
@media(max-width:720px){
  .bms-month{max-width:112px;font-size:9px;padding:3px 6px}
  .bms-amt{display:none!important}
}
@media(max-width:410px){
  .bms-month{max-width:86px}
  .bms-lbl{max-width:92px;overflow:hidden;text-overflow:ellipsis}
}
:is(.split-calc.bf-calc-v2.is-minimized){
  width:54px!important;height:54px!important;min-width:54px!important;max-width:54px!important;
  min-height:54px!important;max-height:54px!important;padding:0!important;overflow:hidden!important;
  border-radius:16px!important;
}
.split-calc.bf-calc-v2.is-minimized > :not(.split-calc-mini){display:none!important}
:is(.split-calc.bf-calc-v2.is-minimized .split-calc-mini){
  display:flex!important;position:absolute!important;inset:0!important;
  width:54px!important;height:54px!important;margin:0!important;padding:0!important;
}
.split-calc.bf-calc-v2.bf-final-minimizing{transition:none!important;pointer-events:none!important}

/* ==== next <style> block ==== */
/* ======================================================================
   BILLFLOW TYPOGRAPHY CONSISTENCY AUDIT
   One readable hierarchy across Dashboard, Bills, Income, Goals,
   Calendar, Banking, Credit Cards, Investments, Loans, Business,
   Medical Bills, Tax Return, Settings, dialogs and responsive layouts.
   ====================================================================== */
:is(:root){
  --bf-type-page-title:20px;
  --bf-type-hero-title:22px;
  --bf-type-section-title:15px;
  --bf-type-card-title:14px;
  --bf-type-body:13px;
  --bf-type-body-strong:13.5px;
  --bf-type-meta:11.5px;
  --bf-type-label:10.5px;
  --bf-type-button:13px;
  --bf-type-input:14px;
  --bf-type-kpi:24px;
  --bf-type-modal-title:19px;
  --bf-leading-tight:1.2;
  --bf-leading-body:1.45;
  --bf-leading-relaxed:1.58;
}

/* One font family everywhere, including controls generated dynamically. */
html,body,#app-screen,#main-content,#modal,#modal-box,#chat-panel,
button,input,select,textarea,option{
  font-family:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
#main-content,.sc{font-size:var(--bf-type-body);line-height:var(--bf-leading-body)}

/* App chrome */
:is(.pg-t){font-size:var(--bf-type-page-title)!important;line-height:var(--bf-leading-tight)!important;font-weight:800!important;letter-spacing:-.025em!important}
:is(#mob-pg-title){font-size:18px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:-.02em!important}
.ni,.ni-label{font-size:14px!important;line-height:1.25!important}
:is(.ns){font-size:var(--bf-type-label)!important;line-height:1.2!important}
:is(.mnav-lbl,#m-lbl){font-size:12px!important;line-height:1.2!important}
.u-info,.u-info *{line-height:1.25}

/* Page-level headings and descriptive copy */
#main-content h1{font-size:var(--bf-type-hero-title)!important;line-height:1.18!important;letter-spacing:-.03em!important}
#main-content h2{font-size:18px!important;line-height:1.22!important;letter-spacing:-.02em!important}
#main-content h3{font-size:var(--bf-type-section-title)!important;line-height:1.28!important}
#main-content .page-title,#main-content .hero-title,#main-content .empty-state-title{
  font-size:17px!important;line-height:1.25!important;font-weight:800!important;letter-spacing:-.02em!important;
}
#main-content .page-subtitle,#main-content .hero-subtitle,#main-content .empty-state-desc{
  font-size:var(--bf-type-body)!important;line-height:var(--bf-leading-relaxed)!important;
}

/* Panels, widgets and cards */
.ph,.hc-header,.cc-dhead,.cc-tx-head{line-height:1.25}
.pt,.hc-title,.data-row-title,.bi-nm,.bname,.mob-bill-name,.mob-cc-name{
  font-size:var(--bf-type-card-title)!important;line-height:1.3!important;font-weight:700!important;letter-spacing:-.01em!important;
}
.pn .sub,.pn .muted,.pn .hint,.pn .cap,.pn small,
.data-row-sub,.data-row-meta,.bi-mt,.bcat,.mob-bill-due,.mob-cc-last4,
.cc-kpi-sub,.cc-det-bal-avail,.cc-kpi-lbl,.cc-det-metric-lbl{
  font-size:var(--bf-type-meta)!important;line-height:1.42!important;
}
.data-row-amt,.bi-am,.mob-bill-amt,.mob-cc-bal{
  font-size:15px!important;line-height:1.2!important;font-weight:750!important;
}
.kl,.kv-label,.stat-card-label,.cc-kpi-lbl,.cc-det-bal-lbl,.cc-det-metric-lbl,
.mob-stat-lbl,.section-label,.section-divider,.t-label{
  font-size:var(--bf-type-label)!important;line-height:1.25!important;
}
.kv,.stat-card-val{font-size:var(--bf-type-kpi)!important;line-height:1.05!important}
.ks,.stat-card-sub{font-size:var(--bf-type-meta)!important;line-height:1.4!important}

/* Tables and dense financial lists */
#main-content table{font-size:var(--bf-type-body)!important;line-height:1.4!important}
#main-content th{
  font-size:var(--bf-type-label)!important;line-height:1.25!important;font-weight:750!important;letter-spacing:.055em!important;
}
#main-content td{font-size:var(--bf-type-body)!important;line-height:1.4!important}

/* Controls and actions */
.ib,.btn-add,.btn-ok,.btn-cancel,.ob-action-btn,.ob-next,.cc-nav-btn,
.mob-dash-hero-btn,.mob-quick-btn,.pa,.ic,.split-calc button{
  font-size:var(--bf-type-button)!important;line-height:1.2!important;
}
.badge,.chip,.due-badge,.inst-pill,.pd-chip,.cc-badge,.mob-bill-status,.mob-due-badge{
  font-size:var(--bf-type-label)!important;line-height:1.2!important;
}

/* Forms */
.fd label,.md-fld>label,.md-fld label,.l-field label{
  font-size:11px!important;line-height:1.3!important;font-weight:700!important;letter-spacing:.045em!important;
}
.fd input,.fd select,.md-fld input,.md-fld select,.md-fld textarea,
.l-field input,.ir input{
  font-size:var(--bf-type-input)!important;line-height:1.35!important;
}
.md-toggle-row .md-toggle-label,.bf-toggle-wrap span,.neon-checkbox{
  font-size:var(--bf-type-body)!important;line-height:1.42!important;
}

/* Dialogs and sheets */
/* .md-ttl / .md-sub / .md-acts button type — merged into the canonical MODAL DESIGN SYSTEM block (line ~628). */
:is(.md-section-title){font-size:11px!important;line-height:1.3!important}
.sec-notice,.consent-foot,.trust-bar{font-size:var(--bf-type-meta)!important;line-height:1.5!important}

/* Calculator and chatbot */
.split-calc,.split-calc input,.split-calc button,#chat-panel,#chat-panel input,#chat-panel textarea{
  font-size:var(--bf-type-body)!important;line-height:1.4!important;
}
.split-calc h1,.split-calc h2,.split-calc h3{line-height:1.25!important}

/* Legacy inline micro-copy audit: preserve hierarchy but eliminate 8–9px text. */
#main-content [style*="font-size:8px"],#main-content [style*="font-size: 8px"],
#main-content [style*="font-size:8.5px"],#main-content [style*="font-size: 8.5px"],
#main-content [style*="font-size:9px"],#main-content [style*="font-size: 9px"],
#modal-box [style*="font-size:8px"],#modal-box [style*="font-size: 8px"],
#modal-box [style*="font-size:8.5px"],#modal-box [style*="font-size: 8.5px"],
#modal-box [style*="font-size:9px"],#modal-box [style*="font-size: 9px"]{
  font-size:10.5px!important;line-height:1.32!important;
}
#main-content [style*="font-size:9.5px"],#main-content [style*="font-size: 9.5px"],
#main-content [style*="font-size:10px"],#main-content [style*="font-size: 10px"],
#modal-box [style*="font-size:9.5px"],#modal-box [style*="font-size: 9.5px"],
#modal-box [style*="font-size:10px"],#modal-box [style*="font-size: 10px"]{
  font-size:11px!important;line-height:1.36!important;
}

/* Tablet: retain hierarchy while preventing cramped controls. */
@media(min-width:601px) and (max-width:1024px){
  :root{
    --bf-type-page-title:19px;
    --bf-type-hero-title:20px;
    --bf-type-section-title:14px;
    --bf-type-card-title:13.5px;
    --bf-type-body:13px;
    --bf-type-meta:11.5px;
    --bf-type-button:13px;
    --bf-type-input:14px;
    --bf-type-kpi:22px;
    --bf-type-modal-title:19px;
  }
  .ni,.ni-label{font-size:13.5px!important}
  .md{font-size:13px!important}
}

/* Mobile: body text remains comfortable; micro text never falls below 11px. */
@media(max-width:600px){
  :root{
    --bf-type-page-title:18px;
    --bf-type-hero-title:19px;
    --bf-type-section-title:15px;
    --bf-type-card-title:14px;
    --bf-type-body:14px;
    --bf-type-meta:11.5px;
    --bf-type-label:10.5px;
    --bf-type-button:13.5px;
    --bf-type-input:16px;
    --bf-type-kpi:22px;
    --bf-type-modal-title:19px;
  }
  #main-content,.sc{line-height:1.5}
  .pg-t,#mob-pg-title{font-size:18px!important}
  .pt,.hc-title,.data-row-title,.bi-nm,.bname{font-size:14px!important}
  .md-ttl{font-size:19px!important}
  .md-sub{font-size:13px!important}
  .md-fld>label,.md-fld label,.fd label{font-size:12px!important}
  .md-acts button,.btn-ok,.btn-cancel,.btn-add,.ib{font-size:14px!important}
  #main-content th{font-size:10.5px!important}
  #main-content td{font-size:13px!important}
}

/* Small phones: retain readability without wrapping every control. */
@media(max-width:380px){
  :root{--bf-type-page-title:17px;--bf-type-card-title:13.5px;--bf-type-kpi:20px}
  .md-ttl{font-size:18px!important}
  .md-sub{font-size:12.5px!important}
}

/* ==== next <style> block ==== */
/* Bills: month belongs to the contextual list header, not the mode tabs. */
.bf-bills-table-title{display:flex!important;align-items:center;gap:7px!important;min-width:0;flex-wrap:wrap}
.bf-bills-month-chip{
  display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:999px;
  background:rgba(20,123,255,.10);border:1px solid rgba(20,123,255,.22);
  color:var(--ac);font-size:10.5px;font-weight:750;white-space:nowrap
}
.bf-bills-half{color:var(--text3);font-weight:500;white-space:nowrap}

/* Business actions: a compact, intentional control group that does not dominate the card. */
.bf-biz-card{overflow:hidden!important;border:1.5px solid var(--bd2)!important;box-shadow:0 2px 12px rgba(17,24,39,.06),0 1px 3px rgba(17,24,39,.04)!important}
.bf-chart-bar-col:hover .bf-chart-tooltip{opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(-2px)}
@keyframes bfChartGrow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:.88}}
.bf-chart-bar{transition:transform .18s ease,opacity .18s ease;transform-origin:bottom;animation:bfChartGrow .55s cubic-bezier(.22,1,.36,1) both}
.bf-chart-bar-col:hover .bf-chart-bar{transform:scaleX(1.25) scaleY(1);opacity:1}
.bf-biz-card-head{
  min-height:64px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;border-radius:var(--rl) var(--rl) 0 0;background:var(--bg2)!important
}
.bf-biz-card-head>div:first-child{min-width:0;flex:1;border-radius:12px}
.bf-biz-card-head>div:first-child>div:last-child{min-width:0}
.bf-biz-actions{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
}
.bf-biz-action{
  min-width:34px!important;height:34px!important;min-height:34px!important;padding:0 10px!important;
  border-radius:9px!important;border:1px solid transparent!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;gap:6px!important;
  font-size:12px!important;font-weight:750!important;line-height:1!important;
  transition:background .15s,border-color .15s,transform .15s,color .15s!important
}
.bf-biz-action.is-edit{background:var(--acl)!important;color:var(--ac)!important;border-color:transparent!important}
.bf-biz-action.is-edit:hover{background:var(--ac)!important;color:#fff!important;transform:translateY(-1px)}
.bf-biz-action.is-delete{width:34px!important;padding:0!important;background:var(--rel)!important;color:var(--re)!important;border-color:transparent!important}
.bf-biz-action.is-delete:hover{background:var(--re)!important;color:#fff!important;transform:translateY(-1px)}

/* Tax Return: clearer, touch-friendly filing-year selector. */
.bf-tax-year-picker{
  display:flex;align-items:center;gap:12px;padding:7px 8px 7px 10px;border-radius:14px;
  background:var(--bg);border:1px solid var(--bd2);box-shadow:var(--sh-s)
}
.bf-tax-year-copy{display:flex;align-items:center;gap:8px;min-width:92px}
.bf-tax-year-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--acl);color:var(--ac)}
.bf-tax-year-copy span:last-child{display:flex;flex-direction:column;line-height:1.05}
.bf-tax-year-copy small{font-size:9.5px;font-weight:750;letter-spacing:.055em;text-transform:uppercase;color:var(--text3)}
.bf-tax-year-copy strong{font-size:14px;color:var(--text);margin-top:3px}
.bf-tax-year-actions{display:flex;align-items:center;gap:5px}
.bf-tax-year-actions button{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:9px;border:1px solid var(--bd);background:var(--bg2);color:var(--text2);display:flex;align-items:center;justify-content:center}
.bf-tax-year-actions button:hover{background:var(--acl);border-color:rgba(20,123,255,.25);color:var(--ac)}
.bf-tax-year-actions select{height:32px;width:86px;padding:0 28px 0 10px;border-radius:9px;font-size:13px;font-weight:750;background-color:var(--bg2)}

@media(max-width:768px){
  .bf-biz-card-head{padding:11px 12px;min-height:62px}
  .bf-biz-actions{padding:3px;gap:4px}
  .bf-biz-action{width:36px!important;min-width:36px!important;height:36px!important;padding:0!important}
  .bf-biz-action span{display:none}
  .bf-tax-year-picker{width:100%;justify-content:space-between;margin-top:3px}
  .bf-tax-year-actions{flex:1;justify-content:flex-end}
  .bf-tax-year-actions select{flex:1;max-width:150px}
}
@media(max-width:520px){
  .bf-bills-table-title{gap:5px!important}
  .bf-bills-month-chip{order:3;width:100%;justify-content:flex-start;background:transparent;border:none;padding:0;height:auto;font-size:11px}
  .bf-bills-half{margin-left:1px}
  .bf-tax-year-picker{align-items:stretch;flex-direction:column;gap:8px;padding:10px}
  .bf-tax-year-copy{min-width:0}
  .bf-tax-year-actions{width:100%;justify-content:stretch}
  .bf-tax-year-actions select{max-width:none;width:auto;flex:1}
}

/* Monthly Report: onboarding-style guided review. */
#modal-box.bf-report-modal-box{
  width:min(590px,calc(100vw - 28px))!important;
  max-width:590px!important;
  max-height:min(780px,92vh)!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:var(--bg)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.34)!important;
}
#modal-box.bf-report-modal-box .md{padding:0!important;overflow:auto!important;display:block!important}
#modal-box.bf-report-modal-box > button{
  top:16px!important;right:16px!important;width:38px!important;height:38px!important;
  color:#fff!important;background:rgba(10,20,40,.22)!important;
  border-color:rgba(255,255,255,.32)!important;backdrop-filter:blur(8px);
}
#modal-box.bf-report-modal-box > button:hover{background:rgba(10,20,40,.40)!important;border-color:rgba(255,255,255,.54)!important}
.bf-report-shell{display:flex;flex-direction:column;min-height:580px;background:var(--bg)}
.bf-report-art{
  min-height:226px;padding:26px 74px 28px 30px;color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
}
.bf-report-art::before,.bf-report-art::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.bf-report-art::before{width:230px;height:230px;right:-78px;top:-105px;background:rgba(255,255,255,.16)}
.bf-report-art::after{width:145px;height:145px;right:74px;bottom:-105px;background:rgba(255,255,255,.10)}
.bf-report-art-glow{position:absolute;inset:auto auto -95px -70px;width:260px;height:220px;border-radius:50%;background:rgba(255,255,255,.10);filter:blur(12px)}
.bf-report-toprow{display:flex;align-items:center;gap:13px;margin-bottom:18px;position:relative;z-index:1}
.bf-report-step{display:flex;flex-direction:column;gap:3px;min-width:0;position:static;color:#fff}
.bf-report-step span{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.78);line-height:1.2}
.bf-report-step strong{font-size:12px;font-weight:750;color:rgba(255,255,255,.96);line-height:1.2}
.bf-report-icon{width:56px;height:56px;flex:0 0 56px;border-radius:17px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px rgba(255,255,255,.20);backdrop-filter:blur(8px);margin:0;position:relative;z-index:1}
.bf-report-icon svg{width:30px!important;height:30px!important;display:block}
.bf-report-art h2{font-size:24px;line-height:1.16;letter-spacing:-.55px;margin:0 0 7px;font-weight:850;position:relative;z-index:1;max-width:450px}
.bf-report-art p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.86);margin:0;max-width:455px;position:relative;z-index:1}
.bf-report-body{padding:22px 30px 18px;flex:1;min-height:245px;display:flex;flex-direction:column;justify-content:center}
.bf-report-slide{padding:0!important;text-align:left!important;width:100%}
.bf-report-slide > div[style*="display:grid"],.bf-report-slide > div[style*="display:flex"]{width:100%}
.bf-report-slide [style*="background:var(--bg2)"]{border:1px solid var(--bd)}
.bf-report-empty{min-height:190px;border:1px dashed var(--bd2);border-radius:16px;background:linear-gradient(135deg,var(--bg2),var(--bg));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px}
.bf-report-empty-icon{width:48px;height:48px;border-radius:15px;background:var(--acl);color:var(--ac);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.bf-report-empty strong{font-size:15px;color:var(--text);margin-bottom:5px}
.bf-report-empty span{font-size:12px;line-height:1.55;color:var(--text3);max-width:310px}
.bf-report-empty button{margin-top:14px;height:36px;padding:0 15px;border-radius:10px;border:1px solid rgba(20,123,255,.22);background:var(--acl);color:var(--ac);font:700 12px inherit;cursor:pointer}
.bf-report-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 30px 20px;border-top:1px solid var(--bd);background:var(--bg)}
.bf-report-progress{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:112px}
.bf-report-progress > span{font-size:10.5px;font-weight:750;letter-spacing:.05em;color:var(--text3);text-transform:uppercase}
.bf-report-dots{display:flex!important;align-items:center!important;gap:7px!important;min-height:10px}
button.bf-report-dot{
  all:unset!important;box-sizing:border-box!important;appearance:none!important;
  display:block!important;flex:0 0 auto!important;width:8px!important;height:8px!important;
  min-width:8px!important;min-height:8px!important;max-width:none!important;max-height:none!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:999px!important;
  background:var(--bd2)!important;cursor:pointer!important;
  transition:width .22s ease,background .22s ease,transform .18s ease!important;
}
button.bf-report-dot:hover{background:var(--text3)!important;transform:scale(1.12)!important}
button.bf-report-dot.is-active{width:28px!important;background:var(--ac)!important;transform:none!important}
.bf-report-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.bf-report-back,.bf-report-next{height:42px;border-radius:12px;padding:0 20px;font:750 13px inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.bf-report-back{background:var(--bg2);border:1px solid var(--bd2);color:var(--text2)}
.bf-report-back:hover{background:var(--bg3);color:var(--text)}
.bf-report-next{min-width:128px;border:0;color:#fff;background:linear-gradient(180deg,#12D6C0,#147BFF);box-shadow:0 5px 16px rgba(20,123,255,.28)}
.bf-report-next:hover{filter:brightness(1.04)}
.bf-report-next.is-done{background:linear-gradient(180deg,#22c55e,#0f9f62);box-shadow:0 5px 16px rgba(15,159,98,.25)}

/* Tax-year icon must always render at a readable size. */
.bf-tax-year-icon svg{width:17px!important;height:17px!important;display:block;stroke:currentColor;fill:none}

@media(max-width:620px){
  #modal-box.bf-report-modal-box{width:100vw!important;max-width:none!important;max-height:94vh!important;border-radius:24px 24px 0 0!important;align-self:flex-end}
  .bf-report-shell{min-height:0}
  .bf-report-art{min-height:220px;padding:24px 58px 24px 22px}
  .bf-report-toprow{gap:11px;margin-bottom:16px}
  .bf-report-icon{width:50px;height:50px;flex-basis:50px;border-radius:15px}
  .bf-report-icon svg{width:27px!important;height:27px!important}
  .bf-report-art h2{font-size:21px}
  .bf-report-body{padding:20px 22px 16px;min-height:235px}
  .bf-report-foot{padding:14px 22px 18px;gap:12px;flex-wrap:wrap}
  .bf-report-progress{order:1;width:100%;align-items:center;min-width:0}
  .bf-report-actions{order:2;width:100%}
  .bf-report-back,.bf-report-next{flex:1}
  .bf-report-next{min-width:0;padding:0 16px}
  .bf-report-back{padding:0 15px}
}
@media(max-width:390px){
  .bf-report-art{min-height:214px;padding-left:18px;padding-right:54px}
  .bf-report-art p{font-size:12px}
  .bf-report-step span{font-size:9.5px}
  .bf-report-step strong{font-size:11px}
  .bf-report-body{padding-left:18px;padding-right:18px}
  .bf-report-foot{padding-left:18px;padding-right:18px}
  .bf-report-dots{gap:6px!important}
}


/* ==== next <style> block ==== */
  #import-modal .bf-import-sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #import-modal .bf-import-sheet-card{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2)}
  #import-modal .bf-import-sheet-card input{margin-top:2px;width:16px;height:16px;accent-color:var(--ac)}
  #import-modal .bf-import-sheet-name{font-size:13px;font-weight:750;color:var(--text)}
  #import-modal .bf-import-sheet-desc{font-size:11px;line-height:1.45;color:var(--text3);margin-top:2px}
  #import-modal .bf-import-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--ac);background:var(--acl);border-radius:999px;padding:3px 7px;white-space:nowrap}
  #import-modal .bf-import-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #import-modal .bf-import-preview-card{padding:12px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2)}
  #import-modal .bf-import-preview-card strong{font-size:13px;color:var(--text)}
  #import-modal .bf-import-preview-card span{font-size:11px;color:var(--text3)}
  #import-modal .bf-import-preview-card .ok{font-size:20px;font-weight:800;color:var(--gt);margin-top:8px}
  #import-modal .bf-import-errors{margin-top:12px;padding:12px;border:1px solid rgba(255,59,48,.25);border-radius:12px;background:var(--rel);color:var(--re);font-size:12px;line-height:1.5;max-height:150px;overflow:auto}
  #import-modal .bf-import-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px;border-radius:12px;background:var(--bg2);border:1px solid var(--bd)}
  #import-modal .bf-import-mode select{height:34px;border:1px solid var(--bd2);border-radius:9px;background-color:var(--bg);color:var(--text);padding:0 28px 0 10px;font:600 12px inherit}
  @media(max-width:640px){
    #import-modal .bf-import-sheet-grid,#import-modal .bf-import-preview-grid{grid-template-columns:1fr}
    #import-modal .bf-import-mode{align-items:flex-start;flex-direction:column}
  }

/* ==== next <style> block ==== */
/* Installments already in progress */
.bf-inst-onboarding{margin-top:10px;padding:12px;border:1px solid rgba(20,123,255,.18);border-radius:12px;background:linear-gradient(135deg,rgba(20,123,255,.075),rgba(18,214,192,.045));display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:end}
.bf-inst-onboarding-copy strong{display:block;font-size:12.5px;color:var(--text);margin-bottom:3px}.bf-inst-onboarding-copy span{display:block;font-size:11px;line-height:1.45;color:var(--text3)}
.bf-inst-paid-field label{font-size:10.5px!important}.bf-inst-paid-field input{height:38px!important;text-align:center;font-weight:800;font-size:15px!important;background:var(--bg)!important}
.bf-inst-estimate{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--bd);font-size:11px;color:var(--text2)}
.bf-inst-estimate button{height:29px;min-height:29px;padding:0 10px;border:1px solid rgba(20,123,255,.22);border-radius:8px;background:var(--acl);color:var(--ac);font:700 10.5px inherit;cursor:pointer;white-space:nowrap}
@media(max-width:640px){.bf-inst-onboarding{grid-template-columns:1fr}.bf-inst-estimate{grid-column:1}}

/* Vertical dashboard resizing. Right edge keeps width; bottom edge controls height. */
:is(.bf-dashboard-widget){display:flex!important;flex-direction:column!important;height:var(--bf-widget-height,auto);min-height:220px;max-height:900px}
.bf-dashboard-widget>.bf-widget-body{flex:1 1 auto;min-height:0;overflow:auto}
.bf-widget-height-handle{position:absolute;left:0;right:0;bottom:0;height:12px;z-index:9;cursor:ns-resize;background:transparent;touch-action:none}
.bf-widget-height-handle::before{content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:36px;height:3px;border-radius:999px;background:var(--ac);opacity:0;transition:opacity .15s,box-shadow .15s}
.bf-dashboard-widget:hover .bf-widget-height-handle::before{opacity:.18}.bf-widget-height-handle:hover::before,.bf-dashboard-widget.is-resizing-height .bf-widget-height-handle::before{opacity:.78;box-shadow:0 0 0 3px rgba(20,123,255,.10)}
body.bf-widget-height-resizing{cursor:ns-resize!important;user-select:none!important}
@media(max-width:767px){.bf-widget-height-handle{display:none!important}.bf-dashboard-widget{height:auto!important;max-height:none!important}}

/* Security coverage panel */
.bf-security-coverage{overflow:hidden}.bf-security-cover-head{padding:18px 20px;background:linear-gradient(135deg,#0b3d8f,#147bff 58%,#0a6e63);color:#fff;display:flex;align-items:flex-start;gap:13px}.bf-security-cover-icon{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0}.bf-security-cover-head strong{display:block;font-size:16px;line-height:1.25}.bf-security-cover-head p{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.8);margin:4px 0 0}.bf-security-cover-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 16px}.bf-security-cover-item{padding:11px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);display:flex;align-items:flex-start;gap:9px}.bf-security-cover-item>span{width:28px;height:28px;border-radius:9px;background:var(--acl);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}.bf-security-cover-item strong{display:block;font-size:12px;color:var(--text);margin-bottom:2px}.bf-security-cover-item small{display:block;font-size:10.5px;line-height:1.42;color:var(--text3)}
.bf-security-sessions{margin:0 16px 16px;border:1px solid var(--bd);border-radius:12px;overflow:hidden}.bf-security-sessions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;background:var(--bg2);border-bottom:1px solid var(--bd)}.bf-security-sessions-head strong{font-size:12.5px}.bf-security-sessions-head button{height:30px;min-height:30px;padding:0 10px;border:1px solid var(--bd2);border-radius:8px;background:var(--bg);color:var(--text2);font:650 10.5px inherit;cursor:pointer}.bf-session-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--bd)}.bf-session-row:last-child{border-bottom:0}.bf-session-device{font-size:11.5px;font-weight:650;color:var(--text)}.bf-session-meta{font-size:10px;color:var(--text3);margin-top:2px}.bf-session-current{font-size:9.5px;font-weight:750;color:var(--tet);background:var(--tel);padding:3px 7px;border-radius:999px}.bf-security-session-empty{padding:14px 12px;font-size:11px;color:var(--text3)}
@media(max-width:600px){.bf-security-cover-grid{grid-template-columns:1fr}.bf-security-cover-head{padding:16px}.bf-security-sessions-head{align-items:flex-start;flex-direction:column}.bf-security-sessions-head button{width:100%}}
@media(max-width:480px){#ibr-header-btn .ibr-btn-label{display:none}#ibr-header-btn{width:32px;padding:0!important}}

/* ==== next <style> block ==== */
/* ── Explicit appearance override: works independently of OS/browser theme. ── */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff;--bg2:#F8FBFF;--bg3:#F2F8FF;--bg4:#E8F3FF;--bg5:#DDEEFF;
  --glass:rgba(255,255,255,.72);--glass-surface:rgba(255,255,255,.68);
  --glass-border:rgba(20,123,255,.10);--glass-border-inner:rgba(255,255,255,.80);
  --glass-highlight:rgba(255,255,255,.55);--glass-shadow:0 8px 32px rgba(20,60,120,.12),0 2px 8px rgba(20,60,120,.08);
  --glass-modal:rgba(255,255,255,.78);--sel-bg:rgba(20,123,255,.09);--sel-border:rgba(20,123,255,.28);--sel-glow:0 0 0 3px rgba(20,123,255,.12);
  --text:#1d1d1f;--text2:#3a3a3d;--text3:#636366;--text4:#68686c;
  --bd:rgba(20,123,255,.10);--bd2:rgba(20,123,255,.18);--acl:#EBF2FF;
  --greenl:#e8faf0;--greent:#1a7a31;--orangel:#fff4e5;--oranget:#7d4800;
  --redl:#fff0ef;--redt:#8b1a15;--pul:#eeeefd;--put:#2d2d9a;
  --tel:#e8faf0;--tet:#1a7a31;--aml:#fff4e5;--amt:#7d4800;
  --rel:#fff0ef;--ret:#8b1a15;--gt:#1a7a31;--rn:#d70015;
  --sh-s:0 1px 3px rgba(20,60,120,.07),0 1px 2px rgba(20,60,120,.05);
  --sh-m:0 4px 16px rgba(20,60,120,.09),0 1px 4px rgba(20,60,120,.05);
  --sh-l:0 12px 40px rgba(20,60,120,.13),0 4px 12px rgba(20,60,120,.07);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1c1c1e;--bg2:#2c2c2e;--bg3:#3a3a3c;--bg4:#48484a;
  --glass:rgba(28,28,30,.85);--glass-surface:rgba(44,44,46,.82);
  --glass-border:rgba(255,255,255,.10);--glass-border-inner:rgba(255,255,255,.06);
  --glass-highlight:rgba(255,255,255,.06);--glass-shadow:0 8px 40px rgba(0,0,0,.40),0 2px 8px rgba(0,0,0,.25);
  --glass-modal:rgba(32,32,34,.88);--sel-bg:rgba(20,123,255,.15);--sel-border:rgba(20,123,255,.40);--sel-glow:0 0 0 3px rgba(20,123,255,.18);
  --text:#f5f5f7;--text2:#d1d1d6;--text3:#b8b8bc;--text4:#b6b6ba;
  --bd:rgba(255,255,255,.10);--bd2:rgba(255,255,255,.18);--acl:#06284f;
  --greenl:#0a2e15;--greent:#4cd964;--orangel:#2d1c00;--oranget:#ffb340;
  --redl:#2d0c0b;--redt:#ff6b63;--pul:#1a1950;--put:#b6b4ff;
  --tel:#0a2e15;--tet:#4cd964;--aml:#2d1c00;--amt:#ffb340;
  --rel:#2d0c0b;--ret:#ff6b63;--gt:#4cd964;--rn:#ff6b63;
  --sh-s:0 1px 3px rgba(0,0,0,.30);--sh-m:0 4px 16px rgba(0,0,0,.40);--sh-l:0 12px 40px rgba(0,0,0,.60);
}
html[data-theme="dark"] body,html[data-theme="dark"] .mn{background:var(--bg)!important;color:var(--text)!important}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:var(--bg2);color:var(--text);border-color:var(--bd2);color-scheme:dark}
html[data-theme="dark"] select option,html[data-theme="dark"] optgroup{background:#2c2c2e;color:#f5f5f7}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background-color:var(--bg);color:var(--text);border-color:var(--bd2);color-scheme:light}
html[data-theme="light"] select option,html[data-theme="light"] optgroup{background:#fff;color:#1d1d1f}
html[data-theme="dark"] #login-screen{background:#111113!important}
html[data-theme="light"] #login-screen{background:#f8f9fc!important}
html[data-theme="dark"] #hsvg_login,html[data-theme="dark"] #isvg,html[data-theme="dark"] #hsvg_sb{filter:brightness(0) invert(1);opacity:.94}
html[data-theme="light"] #hsvg_login,html[data-theme="light"] #isvg,html[data-theme="light"] #hsvg_sb{filter:none;opacity:1}
html[data-theme="dark"] .bf-dashboard-widget .bf-widget-head{background:linear-gradient(135deg,#24364c,#1d2c3f)!important;border-bottom-color:rgba(255,255,255,.10)!important}
html[data-theme="dark"] .bf-dashboard-widget .bf-widget-title,html[data-theme="dark"] .bf-dashboard-widget .bf-widget-head svg{color:#f7fbff!important;stroke:#f7fbff!important}
html[data-theme="dark"] .bf-dashboard-widget .bf-widget-subtitle{color:#cad5e2!important}

/* ── Appearance selector in Settings. ── */
.bf-appearance-card{overflow:hidden}
.bf-appearance-head{padding:15px 17px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--bd);background:linear-gradient(135deg,var(--acl),rgba(18,214,192,.08))}
.bf-appearance-head-icon{width:38px;height:38px;border-radius:12px;background:var(--bg);border:1px solid var(--bd);color:var(--ac);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:var(--sh-s)}
.bf-appearance-head-icon svg{width:19px;height:19px;flex-shrink:0}
.bf-appearance-head strong{font-size:14px;display:block}.bf-appearance-head small{font-size:11px;color:var(--text3);display:block;margin-top:2px;line-height:1.4}
.bf-theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px}
.bf-theme-choice{min-height:72px;border:1px solid var(--bd2);border-radius:12px;background:var(--bg2);color:var(--text2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:650 11.5px inherit;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.bf-theme-choice:hover{border-color:var(--ac);background:var(--acl);color:var(--ac);transform:translateY(-1px)}
.bf-theme-choice[aria-checked="true"]{border-color:var(--ac);background:var(--acl);color:var(--ac);box-shadow:0 0 0 3px rgba(20,123,255,.11)}
.bf-theme-choice svg{width:20px;height:20px}
.bf-theme-note{padding:0 16px 14px;color:var(--text3);font-size:10.5px;line-height:1.5}
@media(max-width:520px){.bf-theme-options{grid-template-columns:1fr}.bf-theme-choice{min-height:52px;flex-direction:row}}

/* ── Installment plan onboarding: compact, explicit and readable. ── */
:is(.bf-inst-onboarding){
  position:relative!important;margin-top:12px!important;padding:16px!important;
  border:1px solid rgba(20,123,255,.24)!important;border-radius:16px!important;
  background:linear-gradient(135deg,rgba(20,123,255,.10),rgba(18,214,192,.07))!important;
  display:grid!important;grid-template-columns:44px minmax(0,1fr) 146px!important;
  grid-template-areas:"icon copy counter" "icon progress progress" "icon estimate estimate"!important;
  gap:12px 14px!important;align-items:center!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.bf-inst-onboarding::before{
  content:'↻';grid-area:icon;width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--bd);
  color:var(--ac);font-size:23px;font-weight:700;box-shadow:var(--sh-s);align-self:start;
}
.bf-inst-onboarding-copy{grid-area:copy;align-self:start;min-width:0}
:is(.bf-inst-onboarding-copy strong){font-size:13.5px!important;line-height:1.3!important;margin-bottom:4px!important;color:var(--text)!important}
:is(.bf-inst-onboarding-copy span){font-size:11.5px!important;line-height:1.5!important;color:var(--text2)!important;max-width:610px}
.bf-inst-paid-field{grid-area:counter!important;align-self:start!important;gap:6px!important}
:is(.bf-inst-paid-field label){font-size:10px!important;letter-spacing:.055em!important;color:var(--text2)!important;text-transform:uppercase!important;font-weight:750!important}
.bf-inst-stepper{height:42px;display:grid;grid-template-columns:38px 1fr 38px;border:1px solid var(--bd2);border-radius:11px;background:var(--bg);overflow:hidden;box-shadow:var(--sh-s)}
.bf-inst-stepper button{min-width:38px;min-height:40px;background:var(--bg2);color:var(--text2);font-size:18px;font-weight:500;border-right:1px solid var(--bd)}
.bf-inst-stepper button:last-child{border-right:0;border-left:1px solid var(--bd)}
.bf-inst-stepper button:hover{background:var(--acl);color:var(--ac)}
.bf-inst-stepper input{height:40px!important;min-width:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;text-align:center!important;font-size:16px!important;font-weight:800!important;padding:0 4px!important;box-shadow:none!important;-moz-appearance:textfield}
.bf-inst-stepper input::-webkit-inner-spin-button,.bf-inst-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bf-inst-progress{grid-area:progress;min-width:0;padding:10px 12px;border:1px solid var(--bd);border-radius:11px;background:rgba(255,255,255,.34)}
html[data-theme="dark"] .bf-inst-progress{background:rgba(0,0,0,.14)}
.bf-inst-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10.5px;color:var(--text3);margin-bottom:7px}
.bf-inst-progress-meta strong{font-size:11.5px;color:var(--text)}
.bf-inst-progress-track{height:7px;border-radius:999px;background:var(--bg3);overflow:hidden}
.bf-inst-progress-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#147BFF,#12D6C0);transition:width .22s ease}
:is(.bf-inst-estimate){grid-area:estimate!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding-top:11px!important;border-top:1px solid var(--bd)!important;font-size:11px!important;line-height:1.45!important;color:var(--text2)!important}
.bf-inst-estimate span{min-width:0!important;flex:1 1 auto!important}
:is(.bf-inst-estimate button){height:34px!important;min-height:34px!important;padding:0 13px!important;border:1px solid rgba(20,123,255,.26)!important;border-radius:9px!important;background:var(--bg)!important;color:var(--ac)!important;font:700 11px inherit!important;box-shadow:var(--sh-s)!important;white-space:nowrap!important;flex-shrink:0!important}
.bf-inst-estimate button:hover{background:var(--acl)!important;border-color:var(--ac)!important}
@media(max-width:700px){
  .bf-inst-onboarding{grid-template-columns:40px minmax(0,1fr)!important;grid-template-areas:"icon copy" "counter counter" "progress progress" "estimate estimate"!important;padding:14px!important}
  .bf-inst-onboarding::before{width:40px;height:40px;font-size:21px}
  .bf-inst-estimate{align-items:flex-start!important;flex-direction:column!important}.bf-inst-estimate button{width:100%!important}
}

/* ── Accessibility foundation (WCAG 2.2-oriented). ── */
.bf-skip-link{position:fixed;left:12px;top:10px;z-index:100000;transform:translateY(-150%);padding:10px 14px;border-radius:9px;background:#111;color:#fff;font-size:13px;font-weight:750;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .15s}
.bf-skip-link:focus{transform:translateY(0)}
:where(button,a,input,select,textarea,[role="button"],[role="switch"],[role="radio"],[tabindex]):focus-visible{outline:3px solid #0b66d4!important;outline-offset:3px!important;box-shadow:0 0 0 5px rgba(20,123,255,.18)!important}
html[data-theme="dark"] :where(button,a,input,select,textarea,[role="button"],[role="switch"],[role="radio"],[tabindex]):focus-visible{outline-color:#66a8ff!important;box-shadow:0 0 0 5px rgba(102,168,255,.22)!important}
[aria-disabled="true"],button:disabled,input:disabled,select:disabled{cursor:not-allowed!important;opacity:.58!important}
.sr-only,.bf-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:768px){.ib,.ic,.mnav button,.bf-toggle-wrap{min-width:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){html:root *,html:root *::before,html:root *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
html[data-reduce-motion="true"] *,html[data-reduce-motion="true"] *::before,html[data-reduce-motion="true"] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media(forced-colors:active){button,input,select,textarea,.pn,.card,.bf-dashboard-widget{border:1px solid CanvasText!important}.bf-inst-progress-fill{background:Highlight!important}.bf-theme-choice[aria-checked="true"]{outline:2px solid Highlight!important}}

/* ==== next <style> block ==== */
.bf-discard-card{padding:22px 24px 8px}
.bf-discard-hero{display:flex;align-items:flex-start;gap:13px;padding:15px;border:1px solid rgba(255,59,48,.22);background:linear-gradient(135deg,rgba(255,59,48,.08),rgba(255,149,0,.06));border-radius:14px;margin:2px 0 14px}
.bf-discard-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--re);background:rgba(255,59,48,.10);border:1px solid rgba(255,59,48,.16)}
.bf-discard-copy{min-width:0;padding-top:1px}.bf-discard-copy strong{display:block;font-size:15px;line-height:1.3;color:var(--text);margin-bottom:4px}.bf-discard-copy span{display:block;font-size:12px;line-height:1.55;color:var(--text2)}
.bf-discard-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 6px}
.bf-discard-summary-item{min-width:0;padding:10px 11px;border:1px solid var(--bd);border-radius:11px;background:var(--bg2)}
.bf-discard-summary-item small{display:block;font-size:9.5px;line-height:1.2;text-transform:uppercase;letter-spacing:.055em;font-weight:750;color:var(--text3);margin-bottom:4px}
.bf-discard-summary-item b{display:block;font-size:12.5px;line-height:1.35;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-discard-actions{display:flex;gap:9px;padding:16px 24px 22px;border-top:1px solid var(--bd);margin-top:16px}
.bf-discard-actions button{min-height:42px;border-radius:11px;font-family:inherit;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.bf-discard-keep{flex:1;background:var(--bg2);color:var(--text);border:1px solid var(--bd2)}
.bf-discard-keep:hover{background:var(--bg3);border-color:var(--ac)}
.bf-discard-confirm{flex:1.15;background:var(--re);color:#fff;border:1px solid var(--re);box-shadow:0 5px 14px rgba(255,59,48,.20)}
.bf-discard-confirm:hover{filter:brightness(.94);box-shadow:0 7px 18px rgba(255,59,48,.27)}
@media(max-width:520px){.bf-discard-card{padding:20px 18px 6px}.bf-discard-summary{grid-template-columns:1fr}.bf-discard-actions{padding:14px 18px 18px;flex-direction:column-reverse}.bf-discard-actions button{width:100%}}

/* ==== next <style> block ==== */
/* Settings > Security: connected device list */
:is(.bf-security-sessions){overflow:visible!important}
:is(.bf-security-sessions-head){padding:14px 15px!important;gap:14px!important}
.bf-security-sessions-head>div:first-child{min-width:0;flex:1}
:is(.bf-security-sessions-head strong){font-size:13.5px!important;line-height:1.25!important}
:is(.bf-security-sessions-head button){height:34px!important;min-height:34px!important;padding:0 13px!important;font-size:11px!important;white-space:nowrap}
.bf-session-summary{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:10.5px;color:var(--text3)}
.bf-session-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;background:var(--acl);color:var(--ac);font-size:10px;font-weight:800}
:is(.bf-session-row){grid-template-columns:42px minmax(0,1fr) auto!important;gap:11px!important;padding:12px 14px!important;min-height:66px}
.bf-session-icon{width:42px;height:42px;border-radius:12px;background:var(--bg2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--text2);flex-shrink:0}
.bf-session-icon svg{width:18px;height:18px}
:is(.bf-session-device){font-size:12.5px!important;font-weight:750!important;line-height:1.25!important;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bf-session-browser{font-size:10.5px;color:var(--text2);margin-top:3px}
:is(.bf-session-meta){display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:10px!important;margin-top:4px!important}
.bf-session-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--text3);opacity:.55}
:is(.bf-session-current){font-size:9px!important;letter-spacing:.045em}
.bf-session-actions{display:flex;align-items:center;gap:7px}
.bf-session-signout{height:31px;min-height:31px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,59,48,.24);background:rgba(255,59,48,.07);color:var(--re);font:700 10px inherit;cursor:pointer;white-space:nowrap}
.bf-session-signout:hover{background:rgba(255,59,48,.13);border-color:rgba(255,59,48,.36)}
.bf-session-loading{display:flex;align-items:center;gap:9px;padding:14px;color:var(--text3);font-size:11px}
.bf-session-loading::before{content:'';width:14px;height:14px;border:2px solid var(--bd2);border-top-color:var(--ac);border-radius:50%;animation:bfSessionSpin .7s linear infinite}
@keyframes bfSessionSpin{to{transform:rotate(360deg)}}
html[data-theme="dark"] .bf-session-icon{background:rgba(255,255,255,.04)}
@media(max-width:620px){
  .bf-session-row{grid-template-columns:40px minmax(0,1fr)!important;align-items:start!important}
  .bf-session-icon{width:40px;height:40px}
  .bf-session-actions{grid-column:2;justify-content:flex-start;margin-top:2px}
  .bf-session-signout{width:100%}
}

/* ==== next <style> block ==== */
/* ========================================================================
   EXPLICIT DARK MODE — final authority over legacy prefers-color-scheme
   ======================================================================== */
:is(html[data-theme="dark"]){
  color-scheme:dark;
  --bg:#0f1217;
  --bg2:#171b21;
  --bg3:#20262e;
  --bg4:#2a323c;
  --glass:rgba(15,18,23,.92);
  --glass-surface:rgba(23,27,33,.96);
  --glass-modal:rgba(23,27,33,.98);
  --glass-border:rgba(255,255,255,.10);
  --glass-border-inner:rgba(255,255,255,.055);
  --text:#f4f7fb;
  --text2:#cbd3dc;
  --text3:#98a4b1;
  --text4:#94a0b8;
  --bd:rgba(255,255,255,.085);
  --bd2:rgba(255,255,255,.15);
  --acl:#0b2d55;
  --greenl:#102d20;
  --greent:#5be487;
  --orangel:#342409;
  --oranget:#ffbd59;
  --redl:#371514;
  --redt:#ff7971;
  --pul:#211f55;
  --put:#b9b7ff;
  --tel:#102d20;
  --tet:#5be487;
  --aml:#342409;
  --amt:#ffbd59;
  --rel:#371514;
  --ret:#ff7971;
  --gt:#55dc83;
  --rn:#ff7971;
  --sh-s:0 1px 2px rgba(0,0,0,.38),0 5px 18px rgba(0,0,0,.12);
  --sh-m:0 8px 24px rgba(0,0,0,.28);
  --sh-l:0 16px 48px rgba(0,0,0,.42);
}

html[data-theme="dark"] body{
  background:#0f1217!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .mn{
  color:var(--text)!important;
}
html[data-theme="dark"] #app-screen::after{opacity:.55!important}

/* Sidebar */
html[data-theme="dark"] .sb,
html[data-theme="dark"] .s-logo,
html[data-theme="dark"] .nav,
html[data-theme="dark"] .sf{
  background:#12161c!important;
  border-color:var(--bd)!important;
}
html[data-theme="dark"] .ns{color:#7f8b98!important;border-color:var(--bd)!important}
html[data-theme="dark"] .ni{color:#c5ced8!important}
html[data-theme="dark"] .ni:hover{background:#1b222a!important;color:#fff!important}
html[data-theme="dark"] .ni.on{
  background:#0b315d!important;
  color:#65aaff!important;
  box-shadow:inset 0 0 0 1px rgba(74,157,255,.20)!important;
}
html[data-theme="dark"] .ni.on .n-badge{background:#147bff!important;color:#fff!important}
html[data-theme="dark"] .u-row:hover{background:#1b222a!important}
html[data-theme="dark"] .u-info,
html[data-theme="dark"] .u-info *{color:var(--text2)!important}

/* Topbar and navigation controls */
html[data-theme="dark"] .topb{
  background:rgba(18,22,28,.96)!important;
  border-bottom-color:var(--bd)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] .mnav,
html[data-theme="dark"] .hs-ctrl{
  background:#1a1f26!important;
  border-color:var(--bd2)!important;
}
html[data-theme="dark"] .mnav button{color:var(--text2)!important}
html[data-theme="dark"] .mnav button:hover{background:#252c35!important;color:#fff!important}
html[data-theme="dark"] .ib:not(.p),
html[data-theme="dark"] .btn-cancel,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .bf-discard-keep{
  background:#1b2027!important;
  color:var(--text)!important;
  border-color:var(--bd2)!important;
  box-shadow:var(--sh-s)!important;
}
html[data-theme="dark"] .ib:not(.p):hover,
html[data-theme="dark"] .btn-cancel:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .bf-discard-keep:hover{
  background:#252c35!important;
  border-color:rgba(255,255,255,.22)!important;
}
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] [aria-disabled="true"]{
  background:#171b20!important;
  color:#697582!important;
  border-color:rgba(255,255,255,.07)!important;
  opacity:.72!important;
}
html[data-theme="dark"] #tb-more-menu,
html[data-theme="dark"] .lang-menu,
html[data-theme="dark"] .alert-panel,
html[data-theme="dark"] .dropdown-menu{
  background:#1a1f26!important;
  border-color:var(--bd2)!important;
  color:var(--text)!important;
}

/* General surfaces — explicit selector beats legacy light-mode !important */
html[data-theme="dark"] .kp,
html[data-theme="dark"] .dash-kpi,
html[data-theme="dark"] .pn,
html[data-theme="dark"] .bx,
html[data-theme="dark"] .af,
html[data-theme="dark"] .lcard,
html[data-theme="dark"] .hc-panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .bf-dashboard-widget,
html[data-theme="dark"] .bf-essential-card,
html[data-theme="dark"] .bf-goal-card,
html[data-theme="dark"] .bf-goal-widget-card,
html[data-theme="dark"] .bf-recurring-merchant-card,
html[data-theme="dark"] .bf-biz-finance-section,
html[data-theme="dark"] .bf-biz-finance-card,
html[data-theme="dark"] .bf-import-sheet-card,
html[data-theme="dark"] .bf-import-preview-card,
html[data-theme="dark"] .bf-appearance-card,
html[data-theme="dark"] .bf-discard-card,
html[data-theme="dark"] .bf-chat-panel,
html[data-theme="dark"] .cc-det,
html[data-theme="dark"] .cc-strat,
html[data-theme="dark"] .cc-tx-wrap{
  background:#171b21!important;
  color:var(--text)!important;
  border-color:var(--bd)!important;
  box-shadow:var(--sh-s)!important;
}
html[data-theme="dark"] .kp::after{opacity:.45!important}
html[data-theme="dark"] .kp .kl,
html[data-theme="dark"] .dash-kpi .kl{color:#aeb9c5!important}
html[data-theme="dark"] .kp .ks,
html[data-theme="dark"] .dash-kpi .ks{color:#99a5b2!important}
html[data-theme="dark"] .kp .ks.up,
html[data-theme="dark"] .dash-kpi .ks.up{color:var(--gt)!important}
html[data-theme="dark"] .kp .ks.dn,
html[data-theme="dark"] .dash-kpi .ks.dn{color:var(--rn)!important}

/* Panel headers, table headers and rows */
html[data-theme="dark"] .ph,
html[data-theme="dark"] .pb,
html[data-theme="dark"] .tabbar,
html[data-theme="dark"] .bfoot,
html[data-theme="dark"] .bf-biz-finance-head,
html[data-theme="dark"] .bf-biz-finance-card-head,
html[data-theme="dark"] .bf-card-mini-top,
html[data-theme="dark"] .bf-session-item{
  background:#191e25!important;
  color:var(--text)!important;
  border-color:var(--bd)!important;
}
html[data-theme="dark"] .bi-row,
html[data-theme="dark"] .data-row,
html[data-theme="dark"] .tx-row,
html[data-theme="dark"] .bf-simple-row,
html[data-theme="dark"] .bf-card-mini-row,
html[data-theme="dark"] .bf-biz-account-row{
  background:transparent!important;
  color:var(--text)!important;
  border-color:var(--bd)!important;
}
html[data-theme="dark"] .bi-row:hover,
html[data-theme="dark"] .data-row:hover,
html[data-theme="dark"] .tx-row:hover,
html[data-theme="dark"] .bf-simple-row:hover,
html[data-theme="dark"] .bf-biz-account-row:hover{background:#20262e!important}
html[data-theme="dark"] .bi-row[style*="opacity:.68"]{opacity:1!important}
html[data-theme="dark"] .bi-row[style*="opacity:.68"] .bi-am{opacity:1!important;color:#dbe2ea!important}
html[data-theme="dark"] .bi-nm,
html[data-theme="dark"] .bi-am,
html[data-theme="dark"] .pt,
html[data-theme="dark"] .bf-biz-account-name,
html[data-theme="dark"] .bf-biz-account-value{color:var(--text)!important}
html[data-theme="dark"] .bi-mt,
html[data-theme="dark"] .inst-rem,
html[data-theme="dark"] .bf-biz-account-meta{color:var(--text3)!important}
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] th{border-color:var(--bd)!important}
html[data-theme="dark"] thead,
html[data-theme="dark"] th{background:#191e25!important;color:#aeb9c5!important}

/* Forms, modals and popovers */
html[data-theme="dark"] #modal-box,
html[data-theme="dark"] .md,
html[data-theme="dark"] .mo .md,
html[data-theme="dark"] .ob-card,
html[data-theme="dark"] .bf-date-picker-v2,
html[data-theme="dark"] .bf-date-picker-v3,
html[data-theme="dark"] .bf-date-picker-v4{
  background:#171b21!important;
  color:var(--text)!important;
  border-color:var(--bd2)!important;
}
html[data-theme="dark"] .md-form,
html[data-theme="dark"] .md-acts{background:#171b21!important;border-color:var(--bd)!important}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#1d232b!important;
  color:#f4f7fb!important;
  border-color:#39424d!important;
  box-shadow:none;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#7f8b98!important;opacity:1!important}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  background:#202731!important;
  border-color:#4b9cff!important;
  box-shadow:0 0 0 3px rgba(75,156,255,.16)!important;
}
html[data-theme="dark"] .md-fld label,
html[data-theme="dark"] .fd label{color:#b8c3cf!important}
html[data-theme="dark"] .md-sub,
html[data-theme="dark"] .bf-theme-note{color:var(--text3)!important}

/* Business page */
html[data-theme="dark"] .bf-biz-card{background:#171b21!important;border-color:var(--bd)!important}
html[data-theme="dark"] .bf-biz-card .bf-biz-card-head{border-bottom-color:rgba(255,255,255,.10)!important}
html[data-theme="dark"] .bf-biz-finance-grid{background:transparent!important}
html[data-theme="dark"] .bf-biz-empty{background:#15191f!important;color:#9da8b4!important;border-color:var(--bd)!important}
html[data-theme="dark"] [style*="color:#0B3D8F"]{color:#72afff!important}
html[data-theme="dark"] [style*="background:var(--acl)"]{border-color:rgba(77,156,255,.24)!important}

/* Settings and appearance */
html[data-theme="dark"] .bf-appearance-head{
  background:linear-gradient(135deg,#102d4f,#173235)!important;
  border-color:var(--bd)!important;
}
html[data-theme="dark"] .bf-theme-choice{
  background:#1c2128!important;
  color:#cbd3dc!important;
  border-color:#414a55!important;
}
html[data-theme="dark"] .bf-theme-choice:hover{background:#222a33!important;color:#7db6ff!important;border-color:#4b9cff!important}
html[data-theme="dark"] .bf-theme-choice[aria-checked="true"]{
  background:#0d315d!important;
  color:#68abff!important;
  border-color:#2990ff!important;
  box-shadow:0 0 0 3px rgba(41,144,255,.15)!important;
}
html[data-theme="dark"] .settings-tabs,
html[data-theme="dark"] .st-tabs{background:#1a1f26!important;border-color:var(--bd)!important}

/* Credit cards, goals, investments and utility cards */
html[data-theme="dark"] .credit-summary,
html[data-theme="dark"] .cc-owner-section,
html[data-theme="dark"] .bccs-section,
html[data-theme="dark"] .goal-card,
html[data-theme="dark"] .loan-card,
html[data-theme="dark"] .investment-card,
html[data-theme="dark"] .medical-card{
  background:#171b21!important;
  color:var(--text)!important;
  border-color:var(--bd)!important;
}
html[data-theme="dark"] .inst-track,
html[data-theme="dark"] .bp-track,
html[data-theme="dark"] .bf-card-mini-track,
html[data-theme="dark"] .bf-chat-progress{background:#2b333d!important}

/* Keep semantic and branded elements readable */
html[data-theme="dark"] .badge[style*="background:var(--bg2)"],
html[data-theme="dark"] .chip{background:#252c35!important;color:#d7dee6!important;border-color:var(--bd)!important}
html[data-theme="dark"] .ic{color:#9aa6b3!important}
html[data-theme="dark"] .ic:hover{background:#252c35!important;color:#fff!important}
html[data-theme="dark"] .ic.paid{color:var(--gt)!important}
html[data-theme="dark"] .ic.del:hover{background:var(--redl)!important;color:var(--redt)!important}
html[data-theme="dark"] .ic.ed:hover{background:var(--acl)!important;color:#78b4ff!important}
html[data-theme="dark"] a{color:#70adff}

/* Mobile shell */
html[data-theme="dark"] #mobile-nav-bar,
html[data-theme="dark"] .mobile-header,
html[data-theme="dark"] #mobile-more-menu{
  background:rgba(18,22,28,.97)!important;
  color:var(--text)!important;
  border-color:var(--bd)!important;
}

/* Explicit light mode remains clean even when the OS is dark. */
html[data-theme="light"] .sb{background:#fff!important}
html[data-theme="light"] .topb{background:rgba(246,247,250,.94)!important}
html[data-theme="light"] .kp,
html[data-theme="light"] .pn,
html[data-theme="light"] .bx,
html[data-theme="light"] .af{background:#fff!important;color:var(--text)!important}

/* Mobile "there's more, swipe" hint for horizontally-scrollable tables —
   wrap the existing overflow-x:auto div with .bf-scroll-x-wrap to get a
   fade gradient hinting more content sits off to the right. Desktop
   never shows it, since content usually fits without scrolling there. */
.bf-scroll-x-wrap{position:relative}
.bf-scroll-x-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:24px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg) 85%);opacity:.9}
@media(min-width:769px){.bf-scroll-x-wrap::after{display:none}}

/* AI document-reading loading spinner (Add Bill "Fill from photo") */
.bf-extract-spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--bd);border-top-color:var(--ac);border-radius:50%;animation:bfExtractSpin .7s linear infinite;flex-shrink:0}
@keyframes bfExtractSpin{to{transform:rotate(360deg)}}

/* Drag & drop zones for "Fill from photo" (Bills, Medical, Business) */
.bf-dropzone{transition:background .15s ease,border-color .15s ease,transform .1s ease}
.bf-dropzone.is-dragover{background:var(--ac)!important;color:#fff!important;border-color:var(--ac)!important;transform:scale(1.03)}
.bf-dropzone-hint{font-weight:400;opacity:.65;font-size:.92em}

/* ── "Fill with BillFlow AI" shared component (Bills, Medical, Business) ── */
.bf-ai-fill-zone{
  display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px;
  border-radius:14px;border:1.5px dashed rgba(105,56,239,.35);
  background:linear-gradient(135deg,rgba(105,56,239,.05),rgba(20,123,255,.04));
  transition:border-color .2s ease,background .2s ease,transform .15s ease;
}
.bf-ai-fill-zone.is-dragover{
  border-color:var(--ac);border-style:solid;transform:scale(1.015);
  background:linear-gradient(135deg,rgba(105,56,239,.12),rgba(20,123,255,.10));
}
.bf-ai-fill-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;
  background:linear-gradient(135deg,#6938EF,#147BFF);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.bf-ai-fill-copy{flex:1;min-width:0}
.bf-ai-fill-btn{
  display:block;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;
  background:linear-gradient(90deg,#6938EF,#147BFF,#12D6C0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.bf-ai-fill-hint{font-size:11px;color:var(--text3);margin-top:1px}
.bf-ai-fill-status{margin:0 0 10px;padding:11px 13px;border-radius:12px;background:var(--bg2);font-size:12px;color:var(--text2);display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.bf-ai-fill-success{flex:1 1 100%;min-width:0}
.bf-ai-fill-success>div:first-child{color:var(--gt);font-weight:600;display:flex;align-items:center;gap:6px}
.bf-ai-fill-note{color:var(--text3);font-size:11.5px;margin-top:4px}
.bf-ai-fill-status>.bf-ai-fill-note{flex:1 1 100%;min-width:0;margin-top:0;padding-top:8px;border-top:1px solid var(--bd)}
.bf-ai-fill-review{
  display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--bd);font-size:11.5px;font-weight:600;color:var(--am);
}


/* =====================================================================
   PHASE 9 FINAL - WCAG 2.2 AA contrast/reflow closure
   ===================================================================== */
/* Inline legacy blue/red values are normalized to the accessible semantic
   tokens. These rules intentionally target color declarations only so brand
   gradients/background art remain visually unchanged. */
[style*="color:#147BFF"],[style*="color: #147BFF"],
[style*="color:#147bff"],[style*="color: #147bff"],
[style*="color:#187DFF"],[style*="color: #187DFF"],
[style*="color:#177DFF"],[style*="color: #177DFF"]{color:var(--ac)!important}
[style*="color:#FF3B30"],[style*="color: #FF3B30"],
[style*="color:#ff3b30"],[style*="color: #ff3b30"],
[style*="color:#ff3e33"],[style*="color: #ff3e33"]{color:var(--re)!important}

[data-view="taxreturn"] [style*="color:var(--am)"]{color:var(--amt)!important}

/* A bill summary amount was intentionally faded over a saturated blue
   surface; full opacity preserves the hierarchy and clears AA contrast. */
.bms-amt{opacity:1!important;color:#fff!important}

/* The main scroller becomes focusable only when it actually owns overflow
   (managed by accessibility-screenreader.js). Keep its focus indicator inset
   so it is visible without introducing horizontal overflow at 400% zoom. */
#main-content[tabindex="0"]:focus-visible{outline-offset:-3px!important}

/* Long labels and action rows must wrap rather than force horizontal scroll
   at the WCAG 1.4.10 320-CSS-pixel reflow boundary. */
@media(max-width:480px){
  #main-content{max-width:100%;min-width:0;overflow-wrap:anywhere}
  .ph,.pn,.bx,.kp,.af,.md,.md-body,.md-form-wrap{max-width:100%;min-width:0}
  .ph>div,.pn>div,.bx>div,.kp>div,.af>div{min-width:0}
  table{max-width:100%}
}

/* ═══════════════════════════════════════════════════════════
   PHASE 10 — SHARED FORM PRIMITIVES
   Native semantics + consistent label/help/error states.
═══════════════════════════════════════════════════════════ */
.bf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.bf-field__label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bf-field__label{font-size:12px;font-weight:650;color:var(--text2);line-height:1.35}
.bf-field__requirement,.bf-field__optional{font-size:10px;font-weight:600;color:var(--text3);line-height:1.35}
.bf-field__requirement{color:var(--redt)}
.bf-field__control{width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);color:var(--text);font:inherit;line-height:1.35;transition:border-color .15s,box-shadow .15s,background .15s}
.bf-field__control:hover:not(:disabled){border-color:var(--bd2)}
.bf-field__control:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-color:var(--ac)}
.bf-field__control:disabled{cursor:not-allowed;opacity:.62;background:var(--bg3)}
.bf-field__textarea{min-height:96px;resize:vertical}
.bf-field__help,.bf-field__error{font-size:11px;line-height:1.45}
.bf-field__help{color:var(--text3)}
.bf-field__error{color:var(--redt);font-weight:550}
.bf-field.is-invalid .bf-field__control{border-color:var(--redt)}
@media(max-width:600px){.bf-field__control{min-height:44px;font-size:16px}}