/* PeraFlow premium overlay — personal edition.
   Restrained banking palette: midnight navy, precise teal, cloud gray, white, limited copper.
   Overlay only: it does not alter application logic, auth, storage, or API behavior. */

:root{
  --pf-navy:#14283B;
  --pf-navy-2:#1B3448;
  --pf-navy-3:#24445C;
  --pf-teal:#127564;
  --pf-teal-dark:#0D5D50;
  --pf-teal-soft:#E8F3F0;
  --pf-cloud:#F4F6F7;
  --pf-cloud-2:#EDF1F3;
  --pf-white:#FFFFFF;
  --pf-ink:#17232C;
  --pf-muted:#667782;
  --pf-line:#E2E8EB;
  --pf-line-strong:#CBD5DA;
  --pf-copper:#B07A4A;
  --pf-copper-soft:#F7EFE8;
  --pf-danger:#A9433C;
  --pf-r-sm:8px;
  --pf-r:10px;
  --pf-r-lg:14px;
  --pf-shadow:0 1px 2px rgba(20,40,59,.04),0 8px 24px rgba(20,40,59,.04);

  --bg:var(--pf-cloud);
  --panel:var(--pf-white);
  --text:var(--pf-ink);
  --muted:var(--pf-muted);
  --line:var(--pf-line);
  --accent:var(--pf-teal);
  --accent-light:var(--pf-teal-soft);
  --red:var(--pf-danger);
  --sidebar:var(--pf-navy);
  --subtle:#F8FAFB;
  --soft-line:#EDF1F3;
  --ink:var(--pf-ink);
  --quiet:#F1F4F6;
  --shadow:var(--pf-shadow);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html,body{background:var(--pf-cloud);color:var(--pf-ink)}
body,button,input,select,textarea{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-.006em}
body{font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.dark{
  --bg:#101D2A;--panel:#162838;--text:#EAF0F3;--muted:#A5B4BD;--line:#2A4052;
  --accent:#4FA895;--accent-light:#1B3B3B;--red:#D98A81;--sidebar:#0D1D2B;
  --subtle:#132433;--soft-line:#243A4B;--quiet:#1A2C3B;
  background:var(--bg);color:var(--text)
}
::selection{background:#BFE3D9;color:#0C332B}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #2C9C86;outline-offset:3px}

/* ---------- workspace shell ---------- */
.app-shell{background:var(--pf-cloud)}
.sidebar{width:252px;flex-basis:252px;background:var(--pf-navy);color:#C9D6DD;border-right:1px solid #1D3548;padding:22px 12px 14px;box-shadow:none;scrollbar-color:#3A566B transparent}
.brand{color:#fff;padding:2px 10px 24px;gap:11px;font-size:19px;font-weight:650;letter-spacing:-.55px}
.brand-mark{width:36px;height:36px;border-radius:9px;background:#fff;color:var(--pf-teal);box-shadow:none}
.brand-mark svg{width:29px;height:29px}
.brand-text{color:#fff}
.brand small{color:#8EA3B1;font-size:9px;font-weight:600;letter-spacing:1.35px;margin-top:2px}
.workspace-chip{background:#1A3145;border:1px solid #29465C;border-radius:var(--pf-r);margin:4px 5px 26px;padding:10px;box-shadow:none}
.workspace-chip .avatar{background:#274B60;color:#D7EEE8;border-radius:7px}
.workspace-text b{color:#F2F7F9;font-size:12px;font-weight:600}
.workspace-text small{color:#8DA4B3;font-size:10.5px}
.workspace-chevron{color:#7E97A7}
.nav-section-title,.nav-section-bottom{color:#7890A1;font-size:9.5px;font-weight:700;letter-spacing:1.45px;padding:0 13px;margin:0 0 8px}
.nav-section-title:not(:first-of-type),.nav-section-bottom{margin-top:18px}
.sidebar nav{gap:1px}
.sidebar nav a{min-height:37px;padding:8px 12px;border-radius:7px;color:#B8C8D2;font-size:12.5px;font-weight:500;gap:12px;position:relative}
.sidebar nav a:hover{background:#1C374D;color:#fff}
.sidebar nav a.active{background:#23485A;color:#fff;font-weight:600}
.sidebar nav a.active::after{width:5px;height:5px;background:#5DB7A6;border-radius:50%;margin-left:auto;box-shadow:0 0 0 3px rgba(93,183,166,.14)}
.sidebar nav a.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#5DB7A6}
.nav-svg{opacity:.9;color:#9DB3C1}
.sidebar nav a.active .nav-svg{color:#E6F4F1;opacity:1}
.sidebar-footer{margin:auto 5px 2px;background:#16293B;border:1px solid #284459;border-radius:var(--pf-r);padding:11px 10px}
.sidebar-footer .shield{background:#244A5D;color:#77C8B8}
.sidebar-footer b{color:#DEE9EE;font-size:11px;font-weight:600}
.sidebar-footer small{color:#87A0AF;font-size:10.5px}

.main-frame{background:var(--pf-cloud)}
.topbar{height:64px;background:#fff;border-bottom:1px solid var(--pf-line);padding:0 clamp(18px,3vw,44px)}
.breadcrumb{color:#8A99A3;font-size:12px;font-weight:500;gap:9px}
.breadcrumb .breadcrumb-root{color:#84939D}
.breadcrumb strong{color:#253744;font-weight:600;font-size:12px}
.breadcrumb svg{color:#AAB7BF}
.status-pill{background:#EDF6F3;border:1px solid #D6EAE4;color:#2B6F60;border-radius:6px;font-size:11px;font-weight:600;padding:7px 10px}
.live-dot{background:#2B9C82;width:6px;height:6px;box-shadow:0 0 0 3px rgba(43,156,130,.12)}
.icon-btn{height:34px;width:34px;background:#fff;border:1px solid var(--pf-line);border-radius:7px;color:#5C6F7B}
.icon-btn:hover{background:var(--pf-cloud);border-color:var(--pf-line-strong);color:var(--pf-teal)}
.top-avatar{background:var(--pf-navy);color:#fff;border-radius:8px;font-size:12px;font-weight:650}
.preview-banner{background:#EEF3F5;color:#51656F;border-bottom:1px solid var(--pf-line);font-size:11px;padding:9px 18px}
.preview-banner strong{color:#274655;font-weight:650}

main{max-width:1480px;padding:34px clamp(18px,3vw,44px) 88px}
.page-heading{gap:20px;margin:0 0 24px}
.eyebrow{color:var(--pf-copper);font-size:9.5px;font-weight:700;letter-spacing:1.6px;margin-bottom:8px}
.page-heading h1{font-size:clamp(25px,2.3vw,31px);font-weight:650;letter-spacing:-.95px;color:#152430;line-height:1.18}
.page-heading p{color:#6B7B86;font-size:13px;margin-top:8px;line-height:1.55}
.heading-actions{gap:8px}

/* ---------- controls ---------- */
.btn{border:1px solid #D7E0E4;background:#fff;color:#2C3E4A;border-radius:7px;min-height:37px;padding:8px 13px;font-size:12px;font-weight:600;box-shadow:none;gap:7px}
.btn:hover{background:#F7F9FA;border-color:#B9C7CE;color:#18313F}
.btn.primary{background:var(--pf-teal);border-color:var(--pf-teal);color:#fff}
.btn.primary:hover{background:var(--pf-teal-dark);border-color:var(--pf-teal-dark);color:#fff}
.btn.soft{background:var(--pf-teal-soft);border-color:#D4E8E2;color:#176A5B}
.btn.soft:hover{background:#DDEFE9;border-color:#BFDCD4}
.btn.danger{background:#FCF2F1;border-color:#EED6D3;color:var(--pf-danger)}
.btn.small{padding:7px 10px;font-size:11px;border-radius:6px}
.btn:disabled{opacity:.46;cursor:not-allowed}
.pill,.pill.gray,.status-pill,.flash,.badge{border-radius:5px;font-size:11px;font-weight:600;letter-spacing:0}
.pill{background:#EAF4F1;color:#226B5D}
.pill.gray{background:#F0F3F5;color:#61727D}
.pill.red{background:#FBEDEC;color:#A84A45}
.search-input,.field input,.field select,.field textarea{background:#fff;color:var(--pf-ink);border:1px solid #D9E2E6;border-radius:7px;font-size:12px;padding:9px 11px;min-height:38px;box-shadow:none}
.field label{font-size:11.5px;font-weight:600;color:#415661;letter-spacing:0}
.search-input::placeholder{color:#9AA8B0}
.search-input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:#5AA896;box-shadow:0 0 0 3px rgba(18,117,100,.12);outline:none}
input[type=checkbox],input[type=radio]{accent-color:var(--pf-teal)}
.notice{background:var(--pf-copper-soft);border:1px solid #EADBCD;color:#76563B;border-radius:var(--pf-r);font-size:12px;padding:11px 14px;line-height:1.6}
.notice a,.notice button{color:#7A5433}
.data-hint{background:#EEF5F3;border:1px solid #D8E9E4;color:#326B5F;border-radius:7px}
.hint{color:#87949C;font-size:11px;line-height:1.55}

/* ---------- overview hierarchy ---------- */
.overview-top{gap:14px;margin-bottom:14px}
.overview-hero{background:var(--pf-navy);border:1px solid #203D52;border-radius:var(--pf-r-lg);padding:26px 28px;min-height:278px;position:relative;overflow:hidden}
.overview-hero::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;background:var(--pf-teal);border-radius:0 2px 2px 0}
.overview-hero::after{content:"";position:absolute;right:28px;top:28px;width:38px;height:2px;background:var(--pf-copper);opacity:.9}
.hero-kicker{color:#A9C2D1;font-size:9.5px;font-weight:700;letter-spacing:1.65px}
.hero-period{color:#C8A27E;font-size:9.5px;font-weight:600;letter-spacing:1.15px;text-transform:uppercase}
.hero-primary-money{color:#fff;font-size:clamp(32px,3.4vw,45px);font-weight:600;letter-spacing:-1.9px;margin:14px 0 8px}
.hero-under{color:#B6C8D3;font-size:12px}
.hero-bottom{border-top:1px solid #2B485D;padding-top:20px;gap:18px}
.hero-bottom small{color:#93AEBD;font-size:10px;letter-spacing:.15px}
.hero-bottom strong{color:#F3F8FA;font-size:14px;font-weight:600}
.overview-metrics{gap:9px}
.overview-metrics .metric{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:16px 20px;min-height:0;box-shadow:none}
.overview-metrics .metric-caption{color:#687A85;font-size:11.5px;font-weight:600}
.overview-metrics .metric-desc{color:#93A1A9;font-size:11px}
.overview-metrics .metric-value{color:#172A36;font-size:20px;font-weight:650;letter-spacing:-.6px}
.cashflow-summary{background:#F2F7F5;border-left:3px solid var(--pf-teal);border-radius:0 7px 7px 0;color:#4D675F;font-size:12px}
.cashflow-summary strong{color:#1E4E43}
.cashflow-summary.negative{border-left-color:var(--pf-copper);background:#FAF3EE;color:#7B6352}
.cashflow-summary.negative strong{color:#7C4C31}

.metric-grid{gap:12px;margin-bottom:18px}
.metric{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:18px 19px;min-height:118px;box-shadow:none}
.metric-caption{color:#667783;font-size:11.5px;font-weight:600}
.metric-icon{background:#EFF5F3;color:var(--pf-teal);border-radius:7px;height:27px;width:27px}
.metric-value{color:#152732;font-size:clamp(18px,1.8vw,24px);font-weight:650;letter-spacing:-.65px;margin:15px 0 7px}
.metric-desc{color:#92A0A8;font-size:11px}
.card{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:20px 21px;box-shadow:none}
.section-header{margin-bottom:18px}
.section-header h2{color:#1A2C37;font-size:13.5px;font-weight:650;letter-spacing:-.2px}
.section-header small{color:#87949C;font-size:11px}
.section-link{color:var(--pf-teal);font-size:11.5px;font-weight:600}
.section-link:hover{color:var(--pf-teal-dark);text-decoration:underline;text-underline-offset:3px}

/* charts */
.chart-legend{color:#768791;font-size:11px}
.legend-dot{background:var(--pf-teal)}
.legend-dot.expense{background:var(--pf-copper)}
.line-chart{height:224px}
.line-chart polygon{fill:#E8F2EF!important;opacity:.7}
.line-chart polyline:nth-of-type(1){stroke:var(--pf-teal)!important;stroke-width:2.8}
.line-chart polyline:nth-of-type(2){stroke:var(--pf-copper)!important;stroke-width:2.4}
.line-chart circle{fill:var(--pf-teal)!important;stroke:#fff!important;stroke-width:2!important}
.chart-foot{color:#97A4AC;font-size:10px}
.donut-hole strong{font-size:15px;font-weight:650}
.legend-line{color:#61737E;font-size:11px}
.legend-line b{color:#22343F;font-size:11px;font-weight:600}

/* rows, tables, filters */
.tx-row{border-color:var(--soft-line);padding:12px 0;gap:11px}
.tx-symbol{background:#F0F4F5;border-radius:7px;width:36px;height:36px;flex-basis:36px;color:#5A726E}
.tx-details b{color:#1D303C;font-size:12px;font-weight:600}
.tx-details small{color:#8B99A1;font-size:11px}
.tx-amount{color:#172A36;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.tx-amount.income,.text-green{color:#16735F}
.text-red{color:var(--pf-danger)}
.track{height:6px;background:#EAF0F2}
.track i{background:var(--pf-teal)}
.track i.warning{background:var(--pf-copper)}
.track i.over{background:var(--pf-danger)}
.progress-top{font-size:12px;color:#344A56}
.progress-top span{color:#7C8C95;font-size:11px}
.filters{gap:8px;margin-bottom:18px}
.data-table{font-size:12px;min-width:650px}
.data-table th{color:#7D8D96;font-size:10px;font-weight:650;letter-spacing:.8px;background:#F9FBFC;border-block:1px solid var(--pf-line);padding:12px 10px}
.data-table td{color:#5E717C;border-color:var(--soft-line);padding:13px 10px}
.data-table td strong{color:#1D303C;font-weight:600}
.data-table tr:hover td{background:#FAFCFC}
.ghost-btn{color:#87969E;border-radius:5px}
.ghost-btn:hover{background:#EDF3F3;color:var(--pf-teal)}
.table-scroll-hint{color:#87949C}
.empty{color:#8A98A0;font-size:12px}
.empty h3{color:#263A46;font-weight:600}
.empty-icon{font-size:0;width:34px;height:34px;margin:0 auto 10px;border-radius:9px;background:#F0F4F5;position:relative}
.empty-icon::before{content:"";position:absolute;inset:9px;border:1.6px solid #8CA09F;border-radius:50%}
.empty-icon::after{content:"";position:absolute;left:15px;top:15px;width:6px;height:6px;border-radius:50%;background:#8CA09F}

/* accounts, budgets, cards */
.account-grid,.card-grid{gap:12px}
.account-tile,.budget-tile{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:19px;box-shadow:none}
.account-tile .acc-icon{background:#EEF4F3;color:var(--pf-teal);border-radius:7px;width:34px;height:34px;margin-bottom:16px}
.account-tile h3{color:#1B2E3A;font-size:13px;font-weight:600}
.account-tile small{color:#8A98A0;font-size:11px}
.account-tile .amount{color:#152732;font-size:22px;font-weight:650;letter-spacing:-.55px}
.budget-tile .progress-top b{font-size:13px}
.budget-tile .budget-sums{color:#7D8C95}
.grocery-total{background:#F2F7F5;border:1px solid #DFEBE7;border-radius:var(--pf-r)}
.grocery-total strong{color:#1B5C50}
.grocery-summary{border-color:#DDE9E5;color:#71827C}
.grocery-summary b{color:#2A5148}
.credit-card,.credit-card:nth-child(3n+2),.credit-card:nth-child(3n+3){background:var(--pf-navy);border-radius:var(--pf-r-lg);border:1px solid #29475D;box-shadow:none;color:#fff}
.credit-card:nth-child(3n+2){background:#1C3E4D;border-color:#2E5363}
.credit-card:nth-child(3n+3){background:#26384A;border-color:#3A4E61}
.credit-card .cc-top small,.credit-card .cc-bottom small{color:#B9CCD6}
.card-issuer-tile{border-color:var(--pf-line);border-radius:var(--pf-r);box-shadow:none}
.card-stat{color:#788992;font-size:12px}
.card-stat b{color:#1E323E;font-weight:600}
.art-gallery-item{border-radius:var(--pf-r)}
.auth-card-visual,.art-thumbnail{background:#F2F5F6!important;border-radius:var(--pf-r)!important}
.card-catalog-info{background:#F1F5F4;border-color:#E0E9E7;color:#6C7D7A;border-radius:7px}
.report-grid{gap:14px}
.bar-line .bar-label{color:#697B86}
.bar-line .bar-track{background:#ECF1F3}
.bar-line .bar-track i{background:var(--pf-teal)}
.settings-grid{gap:14px}
.setting-line{border-color:var(--soft-line)}
.mini-card{border-color:var(--pf-line);border-radius:8px}
.split-section{background:#F8FAFB;border:1px solid var(--pf-line);border-radius:var(--pf-r)}
.split-total{background:#EAF4F1;border:1px solid #D3E7E1;border-radius:7px;color:#24685A}
.split-total.split-error{background:#FBEDEC;border-color:#EFCFCB;color:#9B443E}
.tx-detail-top{background:var(--pf-navy);border-radius:var(--pf-r)}
.tx-detail-top small{color:#A9C5D2}
.modal-overlay{background:rgba(10,24,35,.58)}
.modal{border-radius:var(--pf-r-lg);border:1px solid var(--pf-line);box-shadow:0 24px 60px rgba(10,24,35,.20);padding:25px}
.modal-title{border-bottom:1px solid var(--pf-line);padding-bottom:16px}
.modal-title h2{color:#172A36;font-size:19px;font-weight:650;letter-spacing:-.4px}
.modal-close{background:#F0F4F5;border-radius:6px;color:#667883}
.type-switch{background:#F0F3F5;border-radius:7px}
.type-switch button{color:#73858F;font-size:12px;border-radius:5px}
.type-switch button.active{background:#fff;color:var(--pf-teal);box-shadow:0 1px 3px rgba(20,40,59,.10)}
.toast{background:var(--pf-navy);color:#fff;border-radius:8px;font-size:12px;box-shadow:0 10px 30px rgba(20,40,59,.18)}
.toast.error{background:#9E403B}
.mobile-tabs{background:#fff;border-top:1px solid var(--pf-line);box-shadow:0 -3px 16px rgba(20,40,59,.05)}
.mobile-tabs a,.mobile-tabs button{color:#7C8D96;font-size:10px;font-weight:500}
.mobile-tabs a.active{color:var(--pf-teal);font-weight:650}
.mobile-tabs button svg{background:var(--pf-teal);border-radius:9px}
.mobile-tabs button span{color:#5F727D}
.backdrop{background:rgba(8,20,30,.5)}

/* ---------- sign-in ---------- */
html.pf-auth-locked{background:var(--pf-navy)}
#pf-auth-screen{background:var(--pf-navy);color:#DCE6EB;min-height:100dvh;padding:28px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;place-items:center}
#pf-auth-screen *{box-sizing:border-box}
.pf-auth-shell{width:min(100%,430px)}
.pf-auth-logo{color:#fff;font-size:22px;font-weight:650;letter-spacing:-.7px;gap:11px;margin-bottom:26px;justify-content:center}
.pf-auth-mark{width:38px;height:38px;border-radius:9px;background:#fff;color:var(--pf-teal);font-size:25px;font-weight:700;border:1px solid #fff}
.pf-auth-card{background:#fff;border:1px solid #E1E7EA;border-top:3px solid var(--pf-teal);border-radius:var(--pf-r-lg);padding:34px;box-shadow:0 22px 55px rgba(5,17,27,.28)}
.pf-auth-eyebrow{color:var(--pf-copper);font-size:9.5px;font-weight:700;letter-spacing:1.7px}
.pf-auth-card h1{color:#14283B;font-size:27px;font-weight:650;letter-spacing:-.9px;margin:12px 0 8px;line-height:1.18}
.pf-auth-subtitle{color:#667782;font-size:13.5px;line-height:1.6;margin:0 0 24px}
.pf-auth-card label{color:#354B58;font-size:12px;font-weight:600;margin:17px 0 7px}
.pf-auth-card input{background:#F7F9FA;border:1px solid #D8E1E5;border-radius:7px;color:#17232C;min-height:46px;padding:11px 13px;font-size:14px}
.pf-auth-card input:focus{outline:none;border-color:#4F9F8F;box-shadow:0 0 0 3px rgba(18,117,100,.13);background:#fff}
.pf-auth-submit{background:var(--pf-teal);border-radius:7px;color:#fff;min-height:46px;font-size:14px;font-weight:650;margin-top:22px}
.pf-auth-submit:hover{background:var(--pf-teal-dark)}
.pf-auth-submit:disabled{opacity:.58;cursor:wait}
.pf-auth-register{border-top:1px solid #E8EDEF;color:#6D7D87;font-size:12.5px;margin-top:22px;padding-top:17px}
.pf-auth-closed{background:#F2F5F6;border:1px solid #E0E7EA;color:#62747F;border-radius:6px;font-weight:600}
#pf-auth-message{color:#2E6F61;font-size:12.5px;line-height:1.5}
#pf-auth-message[data-error=true]{color:#A9433C}
.pf-auth-foot{color:#8FA5B3;font-size:11.5px;line-height:1.6;margin:18px 8px}
.pf-auth-link{color:var(--pf-teal);font-size:12.5px}
.pf-auth-link:hover{color:var(--pf-teal-dark)}

/* ---------- dark mode ---------- */
body.dark .app-shell,body.dark .main-frame{background:var(--bg)}
body.dark .sidebar{background:var(--sidebar);border-right-color:#20384A}
body.dark .brand,body.dark .brand-text{color:#F2F7F9}
body.dark .brand small{color:#8EA3B1}
body.dark .workspace-chip{background:#15293B;border-color:#28465B}
body.dark .workspace-chip .avatar{background:#24485C;color:#D7EEE8}
body.dark .workspace-text b{color:#EAF2F5}
body.dark .workspace-text small{color:#8DA4B3}
body.dark .sidebar-footer{background:#122536;border-color:#284459}
body.dark .sidebar-footer b{color:#DDE9EE}
body.dark .sidebar-footer small{color:#87A0AF}
body.dark .topbar,body.dark .icon-btn{background:#162838}
body.dark .breadcrumb strong{color:#DCE7EC}
body.dark .overview-hero{background:#162F44;border-color:#2A4A61}
body.dark .overview-metrics .metric,body.dark .metric,body.dark .card,body.dark .account-tile,body.dark .budget-tile{background:var(--panel);border-color:var(--line)}
body.dark .overview-metrics .metric-caption,body.dark .metric-caption{color:#A6B5BD}
body.dark .overview-metrics .metric-value,body.dark .metric-value,body.dark .page-heading h1,body.dark .section-header h2{color:#EDF3F6}
body.dark .page-heading p,body.dark .metric-desc,body.dark .tx-details small,body.dark .hint{color:#9FB0B9}
body.dark .cashflow-summary{background:#17332F;color:#B8CFC9}
body.dark .cashflow-summary strong{color:#D8EEE8}
body.dark .cashflow-summary.negative{background:#3B2C24;color:#D7B9A5}
body.dark .cashflow-summary.negative strong{color:#F0D5C3}
body.dark .data-table th{background:#132433;color:#93A6B0;border-color:var(--line)}
body.dark .data-table td{color:#A7B6BE}
body.dark .data-table td strong,body.dark .tx-details b,body.dark .card-stat b{color:#E4EDF1}
body.dark .data-table tr:hover td{background:#192C3C}
body.dark .field input,body.dark .field select,body.dark .field textarea,body.dark .search-input{background:#1A2E3E;border-color:#344C5D;color:#E7EEF2}
body.dark .modal,body.dark .type-switch,body.dark .modal-close,body.dark .grocery-total,body.dark .preview-banner{background:#1A2D3C;border-color:#2B4354;color:#DCE7EC}
body.dark .preview-banner strong{color:#DCE7EC}
body.dark .card-catalog-info{background:#1B3935;color:#B8D5CE;border-color:#2A4B46}
body.dark .account-tile .amount{color:#EDF3F6}
body.dark .empty h3{color:#DCE7EC}
body.dark .empty-icon{background:#203644}
body.dark .mobile-tabs{background:#162838;border-color:#2A4052}
body.dark .mobile-tabs a,.mobile-tabs button{color:#9CAFBA}

/* ---------- responsive ---------- */
@media (max-width:1300px){
  .sidebar{width:238px;flex-basis:238px}
  .metric-value{font-size:21px}
}
@media (max-width:1100px){
  .overview-top{grid-template-columns:1fr}
  .overview-hero{min-height:235px}
  .overview-metrics{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
  .overview-metrics .metric{display:block;padding:16px;min-height:112px}
  .overview-metrics .metric-value{font-size:18px;margin-top:11px;text-align:left}
}
@media (max-width:980px){
  .sidebar{width:252px;flex-basis:252px;box-shadow:12px 0 36px rgba(8,20,30,.22)}
  .menu-btn{display:grid}
  main{padding:28px 24px 90px}
  .topbar{padding:0 24px}
  .dashboard-grid,.secondary-grid,.grocery-layout{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar{height:58px;padding:0 14px}
  .top-right{gap:8px}
  .status-pill{display:none}
  .top-avatar{display:grid;width:30px;height:30px;border-radius:8px}
  .breadcrumb{font-size:11px;gap:6px}
  main{padding:22px 14px calc(98px + env(safe-area-inset-bottom))}
  .page-heading{gap:13px;margin-bottom:20px}
  .page-heading h1{font-size:24px;letter-spacing:-.75px}
  .page-heading p{font-size:12px;line-height:1.5;margin-top:6px}
  .page-heading .heading-actions{width:100%;justify-content:flex-start}
  .page-heading .heading-actions .btn.primary{flex:1}
  .eyebrow{font-size:9px;letter-spacing:1.35px}
  .btn{min-height:37px;font-size:11.5px}
  .overview-top{gap:10px}
  .overview-hero{padding:22px 20px;min-height:224px}
  .overview-hero::before{top:20px;bottom:20px}
  .overview-hero::after{right:20px;top:24px;width:30px}
  .hero-primary-money{font-size:33px;letter-spacing:-1.25px}
  .hero-bottom{gap:10px;padding-top:18px}
  .hero-bottom strong{font-size:13px}
  .overview-metrics{grid-template-columns:1fr 1fr;gap:9px}
  .overview-metrics .metric{min-height:104px;padding:14px}
  .overview-metrics .metric:first-child{grid-column:1/-1}
  .overview-metrics .metric-value{font-size:18px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .metric{padding:14px;min-height:108px}
  .metric-value{font-size:18px;margin:12px 0 5px}
  .card{padding:17px;border-radius:var(--pf-r)}
  .cashflow-summary{align-items:flex-start;flex-direction:column;gap:3px}
  .cashflow-summary .section-link{align-self:flex-start}
  .dashboard-grid,.secondary-grid,.grocery-layout,.report-grid,.settings-grid,.budget-grid,.two-col{grid-template-columns:1fr;gap:11px}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .filters #tx-search{grid-column:1/-1}
  .filters .search-input{height:38px;min-height:38px;font-size:11px;padding:8px 9px}
  .filters .btn{grid-column:1/-1;justify-self:start}
  .account-grid,.card-grid{grid-template-columns:1fr}
  .data-table{min-width:660px}
  .form-grid{grid-template-columns:1fr}
  .modal{padding:18px;border-radius:var(--pf-r)}
  .modal-title h2{font-size:18px}
  .donut-wrap{flex-direction:row;gap:10px}
  .donut{width:142px;height:142px}
  .donut-hole{width:100px;height:100px}
  #toast-root{bottom:calc(84px + env(safe-area-inset-bottom))}
  #pf-auth-screen{padding:18px}
  .pf-auth-shell{width:100%;max-width:410px}
  .pf-auth-logo{justify-content:flex-start;margin-bottom:20px;font-size:20px}
  .pf-auth-card{padding:24px 20px;border-radius:12px}
  .pf-auth-card h1{font-size:24px}
  .pf-auth-subtitle{font-size:13px;margin-bottom:20px}
}
@media (max-width:385px){
  .overview-metrics{grid-template-columns:1fr}
  .overview-metrics .metric:first-child{grid-column:auto}
  .hero-primary-money{font-size:29px}
  .donut-wrap{flex-direction:column}
  .topbar{padding:0 12px}
  .page-heading h1{font-size:22px}
  .pf-auth-card{padding:22px 17px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Dark-mode control refinements */
body.dark .btn.primary{background:#2C9380;border-color:#2C9380;color:#fff}
body.dark .btn.primary:hover{background:#237A69;border-color:#237A69}
body.dark .btn.soft{background:#1E3B3B;border-color:#2C4B4A;color:#A7D5CB}
body.dark .notice{background:#332A22;border-color:#554431;color:#DDC6AE}
body.dark .notice strong{color:#F0D9BE}
body.dark .notice a,body.dark .notice button{color:#E5C7A4}
body.dark .data-hint{background:#1B3834;border-color:#2A4F49;color:#B5D6CF}
body.dark .brand-mark{background:#F7FAFB;color:#127564}
body.dark .top-avatar{background:#2C9380;color:#fff}