@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#f4f3f0;--surface:#ffffff;--surface2:#f0efec;
  --border:#e6e4df;--border2:#d4d2cc;
  --text:#18170f;--text2:#64625c;--text3:#9e9c96;
  --green:#1a7a52;--green-light:#eaf5ef;
  --red:#b83030;--red-light:#fdf0f0;
  --blue:#1a5fa8;--blue-light:#edf4fc;
  --accent:#1a7a52;--accent-light:#eaf5ef;--radius:10px;--radius-lg:14px;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.12),0 4px 8px rgba(0,0,0,0.06);
  --accent-g:linear-gradient(135deg,#1a7a52 0%,#20956c 100%);
  --accent-glow:0 4px 16px rgba(26,122,82,0.28);
  --accent-glow-lg:0 6px 24px rgba(26,122,82,0.42);
  --ma-color:#1a7a52;--mb-color:#185FA5;
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5;}
.app{display:flex;flex-direction:column;min-height:100vh;}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:60px;position:sticky;top:0;z-index:10;box-shadow:var(--shadow);}
.logo{font-size:17px;font-weight:500;display:flex;align-items:center;gap:10px;letter-spacing:-0.01em;}
.logo-mark{width:30px;height:30px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.logo-mark svg{width:15px;height:15px;fill:white;}
.month-nav{display:flex;align-items:center;gap:12px;}
.month-nav button{background:none;border:1px solid var(--border);border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:14px;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background 0.1s;}
.month-nav button:hover{background:var(--surface2);}
#month-label{font-size:14px;font-weight:500;min-width:110px;text-align:center;}
/* ── Header right ────────────────────────────────────────────────────────── */
.header-right{display:flex;align-items:center;gap:6px;}
.hdr-icon-btn{position:relative;width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:none;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background 0.12s,color 0.12s;}
.hdr-icon-btn:hover{background:var(--surface2);color:var(--text);}
.hdr-icon-btn:disabled{opacity:0.3;cursor:default;}
.hdr-icon-btn svg{width:17px;height:17px;}
.hdr-badge{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--red);border-radius:50%;display:none;border:1.5px solid var(--surface);}
/* User avatar button */
.user-menu{position:relative;}
.user-avatar-btn{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border:1px solid var(--border);border-radius:10px;background:none;cursor:pointer;transition:background 0.12s;font-family:'DM Sans',sans-serif;}
.user-avatar-btn:hover{background:var(--surface2);}
.user-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:white;flex-shrink:0;letter-spacing:0;}
#user-display{font-size:13px;font-weight:500;color:var(--text);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-chevron{width:14px;height:14px;color:var(--text3);transition:transform 0.2s;flex-shrink:0;}
.user-menu.open .ua-chevron{transform:rotate(180deg);}
/* Dropdown */
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:240px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);z-index:200;overflow:hidden;animation:dd-in 0.15s cubic-bezier(.34,1.56,.64,1);}
.user-menu.open .user-dropdown{display:block;}
@keyframes dd-in{from{opacity:0;transform:translateY(-6px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.user-dropdown-header{display:flex;align-items:center;gap:10px;padding:14px 14px 10px;}
.ud-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:white;flex-shrink:0;}
.ud-name{font-size:13px;font-weight:600;color:var(--text);}
.ud-email{font-size:11px;color:var(--text3);margin-top:1px;}
.ud-plan-row{display:flex;align-items:center;justify-content:space-between;padding:0 14px 10px;}
.plan-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;padding:3px 8px;border-radius:99px;background:var(--surface2);color:var(--text3);border:1px solid var(--border);}
.plan-badge.pro{background:#fff8e6;color:#BA7517;border-color:#f0d090;}
.plan-upgrade{font-size:11px;font-weight:500;color:var(--accent);text-decoration:none;}
.plan-upgrade:hover{text-decoration:underline;}
.ud-divider{height:1px;background:var(--border);margin:2px 0;}
.ud-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:none;background:none;cursor:pointer;font-size:13px;font-family:'DM Sans',sans-serif;color:var(--text2);text-align:left;transition:background 0.1s,color 0.1s;}
.ud-item:hover{background:var(--surface2);color:var(--text);}
.ud-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text3);}
.ud-item.danger{color:var(--red);}
.ud-item.danger svg{color:var(--red);}
.ud-item.danger:hover{background:#fdf0f0;}
.tab-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 32px;display:flex;gap:2px;}
.tab-btn{padding:12px 18px;font-size:13px;font-family:'DM Sans',sans-serif;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--text2);margin-bottom:-1px;transition:all 0.15s;letter-spacing:0.01em;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:500;}
main{display:flex;flex:1;justify-content:center;}
.content{flex:1;padding:24px 32px;max-width:1100px;margin:0 auto;width:100%;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
#panel-profile.active{display:flex;flex-direction:column;overflow:hidden;}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.person-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow);}
.person-block-name{font-size:12px;font-weight:500;letter-spacing:0.01em;color:var(--text2);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.person-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.pstat{background:var(--surface2);border-radius:var(--radius);padding:14px 16px;border:1px solid var(--border);}
.pstat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;}
.pstat-val{font-family:'DM Mono',monospace;font-size:20px;font-weight:500;letter-spacing:-0.02em;}
.pstat-val.green{color:var(--green);}
.pstat-val.red{color:var(--red);}
.total-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;}
.tbar-item{text-align:center;padding:16px 20px;position:relative;}
.tbar-item+.tbar-item{border-left:1px solid var(--border);}
.tbar-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;font-weight:500;}
.tbar-val{font-family:'DM Mono',monospace;font-size:22px;font-weight:500;letter-spacing:-0.02em;}
.tbar-val.green{color:var(--green);}
.tbar-val.red{color:var(--red);}
.scard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;}
.scard-label{font-size:11px;color:var(--text3);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.06em;}
.scard-val{font-family:'DM Mono',monospace;font-size:22px;font-weight:500;}
.scard-val.green{color:var(--green);}
.scard-val.red{color:var(--red);}
.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow);transition:box-shadow 0.15s;}
.sec-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;user-select:none;transition:background 0.15s;}
.sec-header:hover{background:var(--surface2);}
.sec-title{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;letter-spacing:-0.01em;}
.sec-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.sec-right{display:flex;align-items:center;gap:12px;}
.sec-total{font-family:'DM Mono',monospace;font-size:14px;font-weight:500;letter-spacing:-0.01em;}
.chevron{color:var(--text3);font-size:10px;transition:transform 0.15s;}
.chevron.open{transform:rotate(90deg);}
.rows{display:none;border-top:1px solid var(--border);}
.rows.open{display:block;}
.row:last-child{border-bottom:none;}
.row:hover{background:var(--surface2);}
.row-name input{border:none;outline:none;background:none;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);padding:8px 0;width:100%;cursor:pointer;}
.row-name input:focus{cursor:text;}
.recurring-cell{display:flex;align-items:center;justify-content:center;}
.recur-toggle{width:28px;height:16px;border-radius:99px;background:var(--border2);border:none;cursor:pointer;position:relative;transition:background 0.2s;flex-shrink:0;}
.recur-toggle::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:white;transition:transform 0.2s;}
.recur-toggle.on{background:var(--accent);}
.recur-toggle.on::after{transform:translateX(12px);}
.row-amount{display:flex;align-items:center;border:1px solid transparent;border-radius:6px;transition:background 0.1s;padding:2px 4px;justify-content:flex-end;}
.row-amount:hover{background:var(--surface2);}
.row-amount:focus-within{background:var(--surface2);border-color:var(--border2);}
.row-amount .sym{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--text);flex-shrink:0;user-select:none;line-height:1;}
.row-amount input{text-align:left;padding:5px 2px 5px 0;font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--text);border:none;background:none;outline:none;cursor:pointer;min-width:0;width:60px;}
.row-amount input:focus{cursor:text;}
.del-btn{border:none;background:none;cursor:pointer;color:var(--text3);font-size:15px;padding:4px 6px;border-radius:6px;opacity:0;transition:opacity 0.1s;display:flex;align-items:center;justify-content:center;}
.row-total{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;text-align:right;padding:0 2px;color:var(--text2);}
.row:hover .del-btn{opacity:1;}
.del-btn:hover{background:#fdf0f0;color:var(--red);}
.col-headers{display:grid;grid-template-columns:1fr 52px 82px 82px 60px 62px 62px 28px;padding:5px 14px;border-bottom:1px solid var(--border);background:var(--surface2);}
.col-headers.savings-cols{grid-template-columns:1fr 52px 82px 82px 82px 82px 28px;}
.row{display:grid;grid-template-columns:1fr 52px 82px 82px 60px 62px 62px 28px;align-items:center;border-bottom:1px solid var(--border);padding:0 14px;transition:background 0.1s;}
.row.savings-row{grid-template-columns:1fr 52px 82px 82px 82px 82px 28px;}
.col-hdr{font-size:9px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.col-hdr.right{text-align:right;}
.col-hdr.center{text-align:center;}
.add-row-btn{padding:8px 16px;border-top:1px solid var(--border);}
.add-row-btn button{font-size:12px;color:var(--text3);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:2px 0;}
.add-row-btn button:hover{color:var(--accent);}
.savings-bar-wrap{padding:10px 16px 14px;border-top:1px solid var(--border);}
.savings-bar-wrap:first-of-type{border-top:none;}
.savings-bar-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.savings-bar-name{font-size:12px;font-weight:500;color:var(--text);}
.savings-bar-amounts{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);}
.savings-bar-pct{font-family:'DM Mono',monospace;font-size:11px;font-weight:500;}
.savings-progress{height:8px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:4px;}
.savings-fill{height:100%;border-radius:99px;transition:width 0.5s ease;}
.savings-bar-meta{font-size:10px;color:var(--text3);}
.pot-editable{font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);background:none;border:1px solid transparent;border-radius:5px;padding:2px 6px;cursor:pointer;width:90px;text-align:right;transition:background 0.1s;}
.pot-editable:hover{background:var(--surface2);}
.pot-editable:focus{background:var(--surface2);border-color:var(--border2);outline:none;cursor:text;}
.cal-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;}
.cal-scard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;}
.cal-scard-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;}
.cal-scard-val{font-family:'DM Mono',monospace;font-size:18px;font-weight:500;}
.cal-grid-wrap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day-hdr{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);text-align:center;padding:4px 0 8px;}
.cal-cell{min-height:80px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px 6px;overflow:hidden;}
.cal-cell.other-month{background:var(--surface2);opacity:0.45;}
.cal-cell.today{border-color:var(--accent);border-width:2px;}
.cal-date-num{font-size:11px;font-weight:500;color:var(--text3);margin-bottom:3px;}
.cal-cell.today .cal-date-num{color:var(--accent);}
.cal-chip{font-size:9px;padding:2px 5px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.day-picker{width:100%;text-align:right;padding:6px 4px;font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);border:1px solid transparent;border-radius:6px;background:none;outline:none;cursor:pointer;transition:background 0.1s;-webkit-appearance:none;}
.day-picker:hover{background:var(--surface2);}
.day-picker:focus{background:var(--surface2);border-color:var(--border2);}
/* ── Profile (identical structure to Pocket Schedule) ── */
.profile-hero{background:var(--accent);padding:20px 16px 16px;text-align:center;color:#fff;flex-shrink:0;}
.profile-tab-strip{display:flex;overflow-x:auto;gap:2px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;-webkit-overflow-scrolling:touch;}
.profile-tab-strip::-webkit-scrollbar{display:none;}
.profile-tab{flex-shrink:0;padding:7px 14px;border-radius:8px;border:none;background:none;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .15s;}
.profile-tab.active{background:var(--accent);color:#fff;font-weight:600;}
.profile-pane{display:none;}
.profile-pane.active{display:block;}
.profile-avatar-wrap{position:relative;width:72px;height:72px;margin:0 auto 12px;cursor:pointer;}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;overflow:hidden;background-size:cover;background-position:center;border:3px solid rgba(255,255,255,.4);}
.avatar-cam{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:20px;opacity:0;transition:opacity .2s;pointer-events:none;}
.profile-avatar-wrap:hover .avatar-cam{opacity:1;}
.profile-name{font-size:20px;font-weight:700;}
.profile-email{font-size:13px;opacity:.8;margin-top:2px;}
.profile-badge{display:inline-block;padding:3px 10px;background:rgba(255,255,255,.2);border-radius:99px;font-size:11px;font-weight:700;margin-top:8px;}
.profile-section{background:var(--surface);border-radius:var(--radius-lg);padding:18px;margin-bottom:12px;border:1px solid var(--border);}
.profile-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;}
.profile-field{margin-bottom:12px;}
.profile-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:5px;}
.profile-inp{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;background:var(--surface);color:var(--text);}
.profile-inp:focus{border-color:var(--accent);}
.color-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.color-swatch-btn{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s;outline:2px solid transparent;outline-offset:2px;}
.color-swatch-btn:hover{transform:scale(1.12);}
.color-swatch-btn.active{outline-color:var(--text);}
.profile-save{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;}
.profile-save:hover{opacity:.88;}
.profile-msg{font-size:12px;margin-top:8px;}
.profile-msg.ok{color:var(--green);}
.profile-msg.err{color:var(--red);}
.partner-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.partner-stat{background:var(--surface2);border-radius:var(--radius);padding:12px 14px;}
.partner-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);margin-bottom:4px;}
.partner-stat-val{font-size:14px;font-weight:500;}
.partner-hero{display:flex;align-items:center;gap:16px;padding:16px;background:var(--surface2);border-radius:var(--radius-lg);}
.partner-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:500;color:white;flex-shrink:0;}
.partner-name{font-size:15px;font-weight:500;}
.partner-meta{font-size:12px;color:var(--text3);margin-top:3px;}
.sec-label-input{background:none;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:var(--text);width:160px;max-width:40vw;cursor:pointer;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sec-label-input:focus{border-bottom:1.5px solid var(--border2);cursor:text;}
.sec-del-btn{border:none;background:none;cursor:pointer;color:var(--text3);font-size:14px;padding:4px 6px;border-radius:6px;opacity:0;transition:opacity 0.1s;margin-left:2px;}
.sec-header:hover .sec-del-btn{opacity:1;}
.sec-del-btn:hover{background:#fdf0f0;color:var(--red);}
.sec-priv-btn{border:none;background:none;cursor:pointer;font-size:13px;padding:4px 6px;border-radius:6px;opacity:0.25;transition:all 0.15s;margin-left:2px;}
.sec-header:hover .sec-priv-btn{opacity:0.65;}
.sec-priv-btn:hover{opacity:1;background:var(--surface2);}
.sec-priv-btn.active{opacity:1;background:#fff3cd;}
.sec-priv-note{padding:9px 14px;background:#fffbeb;font-size:11px;color:#BA7517;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);line-height:1.4;}
.sec-color-btn{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex-shrink:0;transition:transform 0.1s;}
.sec-color-btn:hover{transform:scale(1.2);}
.add-section-wrap{margin-top:8px;padding:12px 0;}
.add-section-btn{width:100%;padding:11px;background:none;border:1.5px dashed var(--border2);border-radius:var(--radius-lg);font-size:13px;color:var(--text3);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;letter-spacing:0.01em;}
.add-section-btn:hover{border-color:var(--accent);color:var(--accent);}
.color-picker-popup{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px;display:flex;gap:6px;flex-wrap:wrap;width:156px;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.color-pip{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform 0.1s;}
.color-pip:hover{transform:scale(1.2);}
.color-pip.selected{border-color:var(--text);}
.announcement-bar{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-radius:var(--radius-lg);margin-bottom:20px;border:1px solid;position:relative;animation:slideDown 0.2s ease;}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.announcement-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:white;flex-shrink:0;margin-top:1px;}
.announcement-body{flex:1;min-width:0;}
.announcement-text{font-size:13px;line-height:1.5;font-weight:500;}
.announcement-meta{font-size:11px;margin-top:3px;opacity:0.7;}
.announcement-actions{display:flex;gap:6px;flex-shrink:0;margin-top:1px;}
.ann-btn{border:none;background:none;cursor:pointer;font-size:11px;padding:3px 8px;border-radius:5px;font-family:'DM Sans',sans-serif;opacity:0.7;transition:opacity 0.1s;}
.ann-btn:hover{opacity:1;}
.ann-edit-wrap{margin-bottom:20px;}
.ann-edit-box{width:100%;display:flex;gap:8px;align-items:flex-end;}
.ann-textarea{flex:1;padding:9px 12px;font-size:13px;font-family:'DM Sans',sans-serif;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);color:var(--text);outline:none;resize:none;line-height:1.5;transition:border-color 0.1s;}
.ann-textarea:focus{border-color:var(--border2);background:var(--surface);}
.ann-post-btn{padding:9px 16px;background:var(--accent);color:white;border:none;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.ann-post-btn:hover{opacity:0.88;}
.ann-cancel-btn{padding:9px 12px;background:none;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:13px;font-family:'DM Sans',sans-serif;color:var(--text2);}
/* ── Dashboard ── */
.dash-person-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;border-left-width:3px;}
.dash-stat{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border);}
.dash-stat:last-child{border-bottom:none;}
.dash-stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;}
.dash-stat-val{font-family:'DM Mono',monospace;font-size:16px;font-weight:500;}
.dash-stat-val.green{color:var(--green);}
.dash-stat-val.red{color:var(--red);}
.dash-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:16px;}
.dash-section-title{font-size:13px;font-weight:500;margin-bottom:16px;}
.spend-bar-wrap{margin-bottom:12px;}
.spend-bar-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.spend-bar-track{height:6px;background:var(--border);border-radius:99px;overflow:hidden;}
.spend-bar-fill{height:100%;border-radius:99px;transition:width 0.6s ease;}
.upcoming-item{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--surface2);border-radius:var(--radius);border-left:3px solid;}
.upcoming-day{font-size:11px;font-weight:500;color:var(--text3);white-space:nowrap;min-width:44px;}
.upcoming-name{flex:1;font-size:12px;font-weight:500;}
.upcoming-person{font-size:11px;color:var(--text3);}
.upcoming-amount{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;}
/* ── Scenarios ── */
.scenario-chip{padding:5px 14px;border:1.5px solid var(--border);border-radius:99px;font-size:12px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--text2);transition:all 0.15s;}
.scenario-chip:hover{border-color:var(--accent);color:var(--accent);}
.scenario-chip.active{background:var(--accent);border-color:var(--accent);color:white;}
.scenario-table{width:100%;border-collapse:collapse;font-size:13px;}
.scenario-table th{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);font-weight:600;padding:8px 14px;text-align:right;border-bottom:2px solid var(--border);background:var(--surface2);}
.scenario-table th:first-child{text-align:left;}
.scenario-table td{padding:9px 14px;text-align:right;border-bottom:1px solid var(--border);font-family:'DM Mono',monospace;}
.scenario-table td:first-child{text-align:left;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text2);}
.scenario-table tr.subtotal td{font-weight:600;background:var(--surface2);}
.scenario-table tr.highlight td{background:#eaf5ef;}
.scenario-diff{font-size:10px;margin-left:4px;}
.scenario-diff.pos{color:var(--green);}
.scenario-diff.neg{color:var(--red);}
.scenario-editor{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;margin-bottom:16px;}
.scenario-row-override{display:grid;grid-template-columns:1fr 100px 100px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);}
.scenario-row-override:last-child{border-bottom:none;}
.override-input{padding:5px 8px;font-size:12px;font-family:'DM Mono',monospace;border:1px solid var(--border);border-radius:6px;background:var(--surface2);width:100%;text-align:right;color:var(--text);}
.override-input:focus{border-color:var(--accent);outline:none;background:var(--surface);}
.override-input::placeholder{color:var(--text3);}
.priv-btn{border:none;background:none;cursor:pointer;font-size:15px;padding:4px 6px;border-radius:6px;opacity:0.35;transition:all 0.15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.priv-btn:hover{opacity:0.8;background:var(--surface2);}
.priv-btn.priv-on{opacity:1;background:#fff3cd;}
.row:hover .priv-btn{opacity:0.6;}
.row:hover .priv-btn.priv-on{opacity:1;}
.split-btn{padding:6px 14px;font-size:12px;border:1px solid var(--border);border-radius:7px;cursor:pointer;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--text2);transition:all 0.15s;white-space:nowrap;}
.split-btn:hover{border-color:var(--border2);color:var(--text);}
.split-btn.active{background:var(--accent);border-color:var(--accent);color:white;font-weight:500;}
.split-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 18px;margin-bottom:16px;}
.split-result{font-size:12px;color:var(--text3);margin-left:auto;}
.split-result.warn{color:#BA7517;}
.split-apply{padding:5px 14px;background:var(--accent);color:white;border:none;border-radius:7px;cursor:pointer;font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;transition:opacity 0.15s;white-space:nowrap;}
.split-apply:hover{opacity:0.88;}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;}
.chart-card.full{grid-column:1/-1;}
.chart-title{font-size:13px;font-weight:500;margin-bottom:3px;}
.chart-sub{font-size:11px;color:var(--text3);margin-bottom:16px;}
.donut-wrap{position:relative;}
.donut-center{position:absolute;top:50%;left:35%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;}
.donut-center-val{font-family:'DM Mono',monospace;font-size:17px;font-weight:500;}
.donut-center-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;}
.pot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.pot-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;}
.pot-name{font-size:12px;font-weight:500;margin-bottom:10px;}
.pot-amounts{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.pot-current{font-family:'DM Mono',monospace;font-size:18px;font-weight:500;}
/* Mobile header logout button */
.hdr-logout-btn{display:none;align-items:center;justify-content:center;padding:0 12px;height:34px;border-radius:9px;border:1px solid var(--border);background:none;cursor:pointer;color:var(--text2);font-size:13px;font-family:'DM Sans',sans-serif;font-weight:500;margin-right:6px;flex-shrink:0;white-space:nowrap;}
.pot-target{font-size:11px;color:var(--text3);}
.pot-bar{height:6px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:6px;}
.pot-fill{height:100%;border-radius:99px;transition:width 0.5s;}
.pot-meta{font-size:11px;color:var(--text3);}
.chat-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:99;backdrop-filter:blur(1px);}
.chat-backdrop.open{display:block;}
.chat-fab{display:none;position:fixed;bottom:80px;right:18px;z-index:101;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(26,122,82,0.4);align-items:center;justify-content:center;transition:transform 0.15s,background 0.15s;position:fixed;}
.chat-fab:active{transform:scale(0.93);}
.chat-fab.active{background:#14603f;}
.chat-fab-badge{position:absolute;top:5px;right:5px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:99px;display:none;align-items:center;justify-content:center;padding:0 3px;line-height:1;}
.chat-close-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:20px;padding:2px 6px;border-radius:6px;line-height:1;display:flex;align-items:center;}
.chat-close-btn:hover{background:var(--surface2);color:var(--text);}
.chat-panel{width:300px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;position:fixed;bottom:20px;right:20px;height:420px;z-index:100;box-shadow:0 4px 24px rgba(0,0,0,0.10);transition:opacity 0.2s,transform 0.2s;}
.chat-panel.hidden{opacity:0;pointer-events:none;transform:translateY(10px);}
.chat-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.online{display:flex;align-items:center;gap:6px;}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.chat-msgs{flex:1;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.msg{max-width:88%;display:flex;flex-direction:column;}
.msg.me{align-self:flex-end;align-items:flex-end;}
.msg.them{align-self:flex-start;}
.bubble{padding:8px 11px;border-radius:12px;font-size:12px;line-height:1.45;}
.msg.me .bubble{background:var(--accent);color:white;border-bottom-right-radius:3px;}
.msg.them .bubble{background:var(--surface2);color:var(--text);border-bottom-left-radius:3px;}
.msg-meta{font-size:10px;color:var(--text3);margin-top:3px;padding:0 2px;}
.chat-input-wrap{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:6px;flex-shrink:0;}
.chat-input{flex:1;padding:8px 10px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);font-family:'DM Sans',sans-serif;outline:none;}
.chat-input:focus{border-color:var(--border2);background:var(--surface);}
.chat-send{padding:8px 12px;background:var(--accent);color:white;border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-cell-clickable{cursor:pointer;transition:background 0.12s;}
.cal-cell-clickable:hover{background:var(--surface2);}
.cal-day-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.22);}
.cal-day-sheet{background:var(--surface);border-radius:16px 16px 0 0;width:100%;max-width:520px;max-height:70vh;overflow-y:auto;box-shadow:0 -4px 24px rgba(0,0,0,0.12);}
.cal-day-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.cal-day-sheet-title{font-size:15px;font-weight:500;}
.cal-day-sheet-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text2);padding:0 4px;line-height:1;}
.cal-day-event{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);}
.cal-day-event:last-child{border-bottom:none;}
.cal-day-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:white;flex-shrink:0;}
.cal-day-event-name{font-size:13px;font-weight:500;}
.cal-day-event-meta{font-size:11px;color:var(--text3);margin-top:1px;}
.cal-day-total{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--surface2);font-size:13px;font-weight:500;}
.cal-cell2{min-height:72px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px;transition:background 0.1s;}
.cal-cell2.other-month{background:var(--surface2);opacity:0.5;}
.cal-cell2.today{border-color:var(--accent);border-width:1.5px;}
.invite-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;text-align:center;}
.invite-code{font-family:'DM Mono',monospace;font-size:28px;font-weight:500;letter-spacing:0.1em;color:var(--accent);margin:10px 0;}
.invite-hint{font-size:12px;color:var(--text3);}
/* ── Mobile menu ── */
.burger-btn{display:none;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:6px;padding:5px 9px;cursor:pointer;font-size:18px;color:var(--text2);line-height:1;}
.header-actions{display:flex;align-items:center;gap:14px;}
.mob-menu{position:fixed;top:0;right:-300px;width:280px;height:100dvh;background:var(--surface);border-left:1px solid var(--border);z-index:1001;transition:right 0.25s ease;display:flex;flex-direction:column;padding:20px;gap:8px;overflow-y:auto;box-shadow:-4px 0 20px rgba(0,0,0,0.06);}
.mob-menu.open{right:0;}
.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.15);z-index:1000;display:none;}
.mob-overlay.open{display:block;}
.mob-close{align-self:flex-end;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text2);padding:2px 6px;line-height:1;margin-bottom:4px;}
.mob-item{padding:10px 14px;border-radius:9px;background:none;border:1px solid var(--border);font-size:14px;font-family:'DM Sans',sans-serif;color:var(--text);cursor:pointer;text-align:left;width:100%;transition:background 0.1s;}
.mob-item:hover{background:var(--surface2);}
.mob-item.red{color:var(--red);}
.mob-divider{height:1px;background:var(--border);margin:4px 0;}
.mob-user{padding:4px 2px;font-size:14px;font-weight:500;}
.mob-only{display:none;}
.trend-range-btn{padding:4px 10px;font-size:11px;border:1px solid var(--border);border-radius:6px;background:none;color:var(--text2);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;}
.trend-range-btn.active{background:var(--accent);border-color:var(--accent);color:white;}
.trend-range-btn.locked{color:var(--text3);border-style:dashed;cursor:default;font-size:10px;}
.dash-collapsible{margin-bottom:12px;}
.dash-coll-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;user-select:none;}
.dash-coll-hdr:hover{background:var(--surface2);}
.dash-coll-title{font-size:13px;font-weight:500;color:var(--text);}
.dash-coll-chev{font-size:10px;color:var(--text3);transition:transform .2s;}
.dash-collapsible.open .dash-coll-chev{transform:rotate(90deg);}
.dash-coll-body{display:none;padding-top:10px;}
.dash-collapsible.open .dash-coll-body{display:block;}
/* ── Unified row card ─────────────────────────────────────── */
.rc-card{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow);}
.rc-name-wrap{display:flex;align-items:center;gap:10px;padding:11px 14px;min-width:0;border-right:1px solid var(--border);flex:0 0 38%;}
.rc-name-inp{flex:1;min-width:0;border:none;background:none;font-size:14px;font-weight:500;font-family:'DM Sans',sans-serif;color:var(--text);outline:none;}
.rc-total{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--text2);flex-shrink:0;white-space:nowrap;}
.rc-persons-row{display:flex;align-items:stretch;flex:1;}
.rc-person-cell{display:flex;align-items:center;gap:8px;padding:11px 14px;flex:1;border-right:1px solid var(--border);}
.rc-person-cell:last-child{border-right:none;}
.rc-badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.rc-person-cell .row-amount{display:flex;align-items:center;gap:1px;flex:1;justify-content:flex-end;}
.rc-person-cell .sym{font-size:13px;font-family:'DM Mono',monospace;color:var(--text);font-weight:500;flex-shrink:0;}
.rc-person-cell input[type=number]{width:90px;border:none;background:none;font-size:15px;font-family:'DM Mono',monospace;font-weight:500;outline:none;text-align:right;color:var(--text);}
.rc-person-cell input[type=number]:focus{color:var(--accent);}
.rc-vsep{width:1px;height:20px;background:var(--border2);flex-shrink:0;margin:0 4px;}
.rc-due{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.rc-due-lbl{font-size:11px;color:var(--text2);font-weight:600;white-space:nowrap;}
.rc-due select{border:none;background:none;font-size:12px;font-family:'DM Sans',sans-serif;color:var(--text);font-weight:600;outline:none;max-width:72px;-webkit-appearance:none;}
.rc-card .recur-toggle{all:unset;cursor:pointer;display:inline-block;border-radius:6px;padding:3px 9px;font-size:11px;font-family:'DM Sans',sans-serif;font-weight:500;color:var(--text3);background:transparent;border:1.5px solid var(--border2);flex-shrink:0;line-height:1.5;}
.rc-card .recur-toggle::before{content:'↻ One-off';}
.rc-card .recur-toggle.on{color:var(--green);border-color:var(--green);background:#eaf5ef;}
.rc-card .recur-toggle.on::before{content:'↻ Repeating';}
.rc-card .del-btn{padding:6px 10px!important;font-size:18px!important;color:var(--red);opacity:1;flex-shrink:0;background:#fdf0f0;border:1px solid #fca5a5;border-radius:8px;cursor:pointer;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;}
/* ── Unified savings card ─────────────────────────────────── */
.sav-rc{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow);}
.sav-top{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.sav-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sav-name-inp{flex:1;min-width:0;border:none;background:none;font-size:14px;font-weight:500;font-family:'DM Sans',sans-serif;color:var(--text);outline:none;}
.sav-progress{padding:0 14px 10px;}
.sav-bar-track{height:6px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:4px;}
.sav-bar-fill{height:100%;border-radius:99px;}
.sav-meta{font-size:11px;color:var(--text3);}
.sav-fields{display:flex;border-top:1px solid var(--border);}
.sav-field{flex:1;padding:10px 12px;border-right:1px solid var(--border);}
.sav-field:last-child{border-right:none;}
.sav-field-lbl{font-size:10px;color:var(--text3);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sav-field .row-amount{display:flex;align-items:baseline;gap:2px;}
.sav-field .sym{font-size:11px;color:var(--text3);}
.sav-field input{width:100%;min-width:0;border:none;border-bottom:1px solid var(--border);background:none;font-size:14px;font-family:'DM Mono',monospace;font-weight:500;outline:none;padding:1px 0;color:var(--text);text-align:right;}
.sav-field input:focus{border-bottom-color:var(--accent);}
.sav-rc .recur-toggle{all:unset;cursor:pointer;display:inline-block;border-radius:6px;padding:3px 9px;font-size:11px;font-family:'DM Sans',sans-serif;font-weight:500;color:var(--text3);background:transparent;border:1.5px solid var(--border2);flex-shrink:0;line-height:1.5;}
.sav-rc .recur-toggle::before{content:'↻ One-off';}
.sav-rc .recur-toggle.on{color:var(--green);border-color:var(--green);background:#eaf5ef;}
.sav-rc .recur-toggle.on::before{content:'↻ Repeating';}
.sav-rc .del-btn{padding:6px 10px!important;font-size:18px!important;color:var(--red);opacity:1;background:#fdf0f0;border:1px solid #fca5a5;border-radius:8px;cursor:pointer;flex-shrink:0;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;}
.partner-locked input,.partner-locked select{opacity:0.6;cursor:not-allowed;background:var(--surface2);}
.partner-locked .rc-badge::after{content:'🔒';font-size:9px;margin-left:2px;}
@media(max-width:800px){.content{padding:16px;}.summary{grid-template-columns:1fr!important;}.charts-grid{grid-template-columns:1fr;}.chart-card.full{grid-column:1;}.pot-grid{grid-template-columns:1fr!important;}.profile-page{grid-template-columns:1fr!important;}}
@media(max-width:768px){
  /* Header */
  .burger-btn{display:flex;}
  .header-right{display:none;}
  header{padding:0 14px;height:54px;}
  #mob-undo-btn{display:flex!important;align-items:center;}
  /* Tabs */
  .tab-bar{padding:0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tab-bar::-webkit-scrollbar{display:none;}
  .tab-btn{padding:10px 12px;white-space:nowrap;font-size:12px;}
  .tab-btn-profile{display:none!important;}
  .content{padding:10px 12px;}
  /* Budget grid — keep as grid, override template via mob-grid-* classes */
  .col-headers:not(.savings-cols){display:grid!important;}
  .col-headers.savings-cols{display:grid!important;}
  .col-hdr{font-size:8px!important;padding:3px 2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important;}
  .row-total{text-align:left!important;}
  .row:not(.savings-row):not(.rc-card){display:grid!important;min-height:36px;}
  .del-btn{opacity:1!important;color:var(--red)!important;padding:4px 2px!important;}
  .day-picker{border-left:none!important;border-top:none!important;border-right:none!important;border-bottom:1px solid var(--border)!important;}
  .savings-row{display:grid!important;}
  /* Mobile grid column templates — !important overrides inline style */
  .mob-grid-solo{grid-template-columns:1fr 76px 46px 42px 22px!important;}
  .mob-grid-duo{grid-template-columns:100px 60px 60px 44px 38px 38px 22px!important;}
  /* Section scroll so all columns are reachable */
  .rows.open{overflow-x:auto;}
  /* Hide elements not in the mobile grid */
  .mob-hide{display:none!important;}
  .mob-only{display:none!important;}
  /* Compact inputs */
  .row-amount input{width:52px!important;}
  .row-name input{font-size:12px;padding:6px 0;}
  .day-picker{width:36px!important;font-size:9px!important;padding:1px!important;}
  .del-btn{padding:4px 2px!important;font-size:14px!important;}
  /* Dashboard */
  .dash-grid{grid-template-columns:1fr!important;}
  .dash-chart-wrap{height:160px!important;}
  .sc-2col{grid-template-columns:1fr!important;}
  /* Calendar */
  .cal-summary-grid{grid-template-columns:1fr 1fr!important;}
  .scard{padding:10px 12px;}
  .scard-val{font-size:16px!important;}
  /* Chat — full-width bottom sheet on mobile */
  .chat-fab{display:flex;}
  .chat-panel{right:0!important;bottom:0!important;width:100%!important;border-radius:16px 16px 0 0!important;height:60vh!important;z-index:103!important;}
  .chat-panel.hidden{transform:translateY(100%)!important;opacity:1!important;}
  .chat-backdrop.open{z-index:102!important;}
  .chat-fab{z-index:104!important;}
  #chat-toggle-btn{display:none;}
  /* Section delete hidden on mobile — use swipe-left to delete */
  .sec-del-btn{display:none!important;}
  .sec-move-btn{display:flex!important;opacity:0.8!important;}
  /* Savings pots — single column */
  .pot-grid{grid-template-columns:1fr!important;}
  .pot-card{padding:14px 16px;}
  .pot-name{font-size:13px;margin-bottom:6px;}
  .pot-amounts{margin-bottom:6px;}
  .pot-current{font-size:20px!important;}
  .pot-meta{font-size:12px;}
  /* Header logout button — show on mobile */
  .hdr-logout-btn{display:flex;}
  .hdr-avatar-left{display:none!important;}
  /* Summary stats */
  .person-stats{grid-template-columns:1fr 1fr;}
  .pstat-val{font-size:16px!important;}
  .pstat-label,.tbar-label{font-size:9px!important;}
  .tbar-val{font-size:16px!important;}
  .dash-section{padding:12px 14px;}
  .dash-section-title{font-size:12px!important;}
  /* Unified card — mobile overrides */
  .col-headers{display:none!important;}
  .rc-card{flex-direction:column;}
  .rc-name-wrap{border-right:none;border-bottom:1px solid var(--border);flex:none;}
  .rc-persons-row{flex-direction:column;}
  .rc-person-cell{border-right:none;border-top:1px solid var(--border);background:var(--surface2);}
  .rc-person-cell input[type=number]{width:100%;font-size:18px;}
  .rc-person-cell .row-amount{flex:1;}
  .rc-person-cell .sym{font-size:15px;}
  .rc-total{font-size:13px;}
  /* Savings card — same on mobile */
  .sav-fields{flex-wrap:wrap;}
  .sav-field{flex:1 1 45%;min-width:80px;}
  /* Bottom nav spacing */
  .content{padding-bottom:80px;}
  .chat-fab{bottom:72px;}
}

/* ── Toast ──────────────────────────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
@media(min-width:769px){
  #toast-container{bottom:24px;left:auto;right:24px;transform:none;align-items:flex-end;}
}
.toast{display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;color:white;box-shadow:0 4px 20px rgba(0,0,0,0.18);animation:toast-in 0.22s cubic-bezier(.34,1.56,.64,1);pointer-events:all;min-width:180px;max-width:320px;white-space:nowrap;}
.toast.fade-out{animation:toast-out 0.2s ease forwards;}
.toast.success{background:#1a7a52;}
.toast.error{background:#b83030;}
.toast.info{background:#185FA5;}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes toast-out{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(8px);}}

/* ── Bottom nav (mobile only) ────────────────────────────────────────────────── */
.bottom-nav{display:none;}
@media(max-width:768px){
  .tab-bar{display:none;}
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;
    background:var(--surface);border-top:1px solid var(--border);
    padding:4px 0 env(safe-area-inset-bottom,0px);
    box-shadow:0 -2px 16px rgba(0,0,0,0.07);
  }
  .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:6px 2px;border:none;background:none;cursor:pointer;
    color:var(--text3);font-size:9px;font-family:'DM Sans',sans-serif;font-weight:500;
    letter-spacing:0.03em;text-transform:uppercase;transition:color 0.15s;
  }
  .bn-item.active{color:var(--accent);}
  .bn-item svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.15s;}
  .bn-item.active svg{transform:translateY(-1px);}
}

/* ── Skeleton loading ────────────────────────────────────────────────────────── */
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skel{background:linear-gradient(90deg,var(--border) 25%,var(--surface2) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:7px;}
.skel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;margin-bottom:12px;box-shadow:var(--shadow);}
.skel-row{display:flex;gap:12px;margin-bottom:10px;}
.skel-line{height:13px;border-radius:6px;}
.skel-block{height:60px;border-radius:8px;}

/* ── Semantic layout classes (replacing one-off inline styles) ───────────────── */
.chart-canvas-wrap{height:230px;}
.cal-summary-wrap{margin-bottom:22px;}
.cal-hint{display:none;font-size:12px;color:var(--text3);margin-bottom:16px;padding:10px 14px;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border);}
.cal-legend{margin-top:18px;}
.pni-green{background:#eaf5ef;color:#1a7a52;}
.pni-red{background:#fdf0f0;color:#b83030;}
.pni-blue{background:#edf4fc;color:#185FA5;}
.pni-amber{background:#fef3c7;color:#92400e;}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — button, type, badge, layout primitives
   These replace all ad-hoc inline styles across budget.html + budget.js
   ═══════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:9px;
  font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;
  cursor:pointer;transition:background 0.15s,opacity 0.15s,color 0.15s,border-color 0.15s;
  white-space:nowrap;text-decoration:none;border:none;line-height:1;
}
.btn:disabled{opacity:0.4;cursor:default;pointer-events:none;}

/* Sizes */
.btn-sm{font-size:12px;padding:5px 12px;border-radius:7px;}
.btn-lg{font-size:15px;padding:11px 24px;border-radius:11px;}
.btn-block{width:100%;justify-content:center;}

/* Variants */
.btn-primary{background:var(--accent);color:white;border:none;}
.btn-primary:hover{opacity:0.88;}

.btn-ghost{background:none;color:var(--text2);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--surface2);color:var(--text);}

.btn-danger{background:none;color:var(--red);border:1px solid var(--border);}
.btn-danger:hover{background:var(--red-light);border-color:var(--red);}

.btn-accent-ghost{background:none;color:var(--accent);border:1px solid var(--accent);}
.btn-accent-ghost:hover{background:var(--accent-light);}

.btn-dashed{background:none;color:var(--text3);border:1.5px dashed var(--border2);border-radius:var(--radius);justify-content:flex-start;text-align:left;}
.btn-dashed:hover{border-color:var(--accent);color:var(--accent);}
.ann-btn.danger{color:var(--red);}

/* ── Type scale ──────────────────────────────────────────────────────────────── */
.t-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);}
.t-caption{font-size:11px;color:var(--text3);line-height:1.5;}
.t-meta{font-size:12px;color:var(--text2);line-height:1.5;}
.t-body{font-size:13px;color:var(--text);line-height:1.5;}
.t-title{font-size:15px;font-weight:500;color:var(--text);line-height:1.4;}
.t-heading{font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--text);line-height:1.3;}

/* Modifier helpers */
.t-accent{color:var(--accent);}
.t-muted{color:var(--text3);}
.t-strong{font-weight:600;}
.t-mono{font-family:'DM Mono',monospace;}

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;padding:3px 9px;
  border-radius:99px;font-size:11px;font-weight:600;letter-spacing:0.04em;
  white-space:nowrap;
}
.badge-green{background:var(--green-light);color:var(--green);}
.badge-red{background:var(--red-light);color:var(--red);}
.badge-blue{background:var(--blue-light);color:var(--blue);}
.badge-amber{background:#fff8e6;color:#BA7517;}
.badge-neutral{background:var(--surface2);color:var(--text3);border:1px solid var(--border);}

/* ── Layout helpers ──────────────────────────────────────────────────────────── */
.stack{display:flex;flex-direction:column;}
.stack-sm{gap:8px;}
.stack-md{gap:16px;}
.stack-lg{gap:24px;}

.cluster{display:flex;align-items:center;flex-wrap:wrap;}
.cluster-sm{gap:8px;}
.cluster-md{gap:12px;}
.cluster-lg{gap:16px;}

.split{display:flex;align-items:center;justify-content:space-between;}

/* ── Dashboard component classes ────────────────────────────────────────────── */
.dash-coll-hdr-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.dash-person-label{font-size:11px;text-transform:uppercase;letter-spacing:0.07em;font-weight:500;margin-bottom:14px;}
.dash-pots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.dash-pot-card{padding:18px;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border);}
.dash-pot-name{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--text);}
.dash-pot-amount{font-family:'DM Mono',monospace;font-size:17px;font-weight:500;margin-bottom:2px;}
.dash-pot-target{font-size:10px;color:var(--text3);margin-bottom:8px;}
.dash-pot-bar{height:4px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:4px;}
.dash-pot-fill{height:100%;border-radius:99px;}
.dash-pot-meta{font-size:10px;color:var(--text3);}
.spend-row{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;}
.spend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.spend-amt{font-family:'DM Mono',monospace;font-size:12px;}
.spend-pct{color:var(--text3);font-size:11px;}
.upcoming-items{display:flex;flex-direction:column;gap:6px;}
.dash-trend-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.dash-chart-wrap{height:200px;}

/* ── Onboarding / getting started card ─────────────────────────────────────── */
.onboarding-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px;box-shadow:var(--shadow);}
.onboarding-title{font-size:15px;font-weight:600;margin-bottom:4px;}
.onboarding-sub{font-size:13px;color:var(--text3);margin-bottom:20px;}
.onboarding-steps{display:flex;flex-direction:column;gap:12px;}
.onboarding-step{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;transition:background 0.12s,border-color 0.12s;background:none;font-family:'DM Sans',sans-serif;width:100%;text-align:left;}
.onboarding-step:hover{background:var(--surface2);border-color:var(--border2);}
.onboarding-step.done{opacity:0.5;cursor:default;}
.onboarding-step.done:hover{background:none;border-color:var(--border);}
.step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;background:var(--surface2);color:var(--text3);border:1.5px solid var(--border);}
.onboarding-step.done .step-num{background:var(--accent-light);color:var(--accent);border-color:var(--accent);}
.step-body{flex:1;}
.step-label{font-size:13px;font-weight:500;color:var(--text);}
.step-desc{font-size:12px;color:var(--text3);margin-top:2px;}
.step-arrow{color:var(--text3);font-size:16px;flex-shrink:0;}

/* ── Budget page: compact summary strip (mobile) ─────────────────────────────── */
.budget-summary-mobile{display:none;}
@media(max-width:768px){
  .summary{display:none;}
  .total-bar{display:none;}
  .budget-summary-mobile{
    display:grid;grid-template-columns:1fr 1fr 1fr;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);margin-bottom:14px;
    overflow:hidden;box-shadow:var(--shadow);
  }
  .bsm-item{padding:12px;text-align:center;position:relative;}
  .bsm-item+.bsm-item{border-left:1px solid var(--border);}
  .bsm-label{font-size:9px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);font-weight:500;margin-bottom:5px;}
  .bsm-val{font-family:'DM Mono',monospace;font-size:14px;font-weight:500;}
}

/* ── Bottom sheet / modal ────────────────────────────────────────────────────── */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:500;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.sheet-backdrop.open{opacity:1;pointer-events:all;}
.bottom-sheet{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-radius:20px 20px 0 0;
  z-index:501;transform:translateY(105%);
  transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);
  max-height:85vh;overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom,16px);
  box-shadow:0 -4px 40px rgba(0,0,0,0.12);
}
.bottom-sheet.open{transform:translateY(0);}
.sheet-handle{width:36px;height:4px;background:var(--border2);border-radius:99px;margin:12px auto 0;}
.sheet-header{padding:20px 24px 14px;}
.sheet-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px;}
.sheet-desc{font-size:13px;color:var(--text3);line-height:1.6;}
.sheet-actions{padding:8px 20px 8px;display:flex;flex-direction:column;gap:10px;}
.sheet-btn{width:100%;padding:14px;font-size:15px;font-weight:500;border-radius:12px;font-family:'DM Sans',sans-serif;cursor:pointer;border:none;transition:opacity 0.15s,background 0.15s;}
.sheet-btn:hover{opacity:0.88;}
.sheet-btn-primary{background:var(--accent);color:white;}
.sheet-btn-danger{background:var(--red);color:white;}
.sheet-btn-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}

/* Desktop: centered modal instead of bottom sheet */
@media(min-width:769px){
  .bottom-sheet{
    left:50%;right:auto;bottom:auto;top:50%;width:420px;
    transform:translate(-50%,-46%) scale(0.97);
    border-radius:var(--radius-lg);opacity:0;pointer-events:none;
    transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),opacity 0.15s;
  }
  .bottom-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;}
  .sheet-handle{display:none;}
  .sheet-btn{padding:11px;font-size:14px;}
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;
}
.empty-state-icon{font-size:36px;margin-bottom:16px;opacity:0.6;}
.empty-state-title{font-size:15px;font-weight:500;color:var(--text);margin-bottom:8px;}
.empty-state-body{font-size:13px;color:var(--text3);max-width:320px;line-height:1.6;margin-bottom:20px;}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM DESIGN LAYER — richness, depth and polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Type weight upgrades ── */
.t-heading{font-weight:700;}
.t-title{font-weight:600;}

/* ── Logo mark: gradient + glow ── */
.logo-mark{
  background:var(--accent-g);
  box-shadow:0 3px 10px rgba(26,122,82,0.28);
}

/* ── Header: glassmorphism ── */
header{
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border),0 2px 12px rgba(0,0,0,0.05);
}
.tab-bar{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ── Primary button: gradient + lift on hover ── */
.btn-primary{
  background:var(--accent-g);
  box-shadow:var(--accent-glow);
  transition:opacity 0.15s,transform 0.12s,box-shadow 0.15s;
}
.btn-primary:hover:not(:disabled){
  opacity:1;
  box-shadow:var(--accent-glow-lg);
  transform:translateY(-1px);
}
.btn-primary:active:not(:disabled){
  transform:scale(0.97) translateY(0);
  box-shadow:none;
}

/* ── All major cards: richer shadow ── */
.section,.person-block,.dash-person-card,.dash-section,.chart-card,
.scard,.cal-scard,.pot-card,.skel-card,.profile-section,.split-panel,
.scenario-editor,.invite-box,.onboarding-card,.sav-rc,.rc-card{
  box-shadow:var(--shadow-md);
}
.section:hover{box-shadow:0 6px 24px rgba(0,0,0,0.10);}
.total-bar{box-shadow:var(--shadow-md);}
.tbar-item:first-child{
  background:linear-gradient(160deg,rgba(26,122,82,0.05),rgba(26,122,82,0.02));
}

/* ── Stat numbers: bigger on desktop ── */
@media(min-width:769px){
  .tbar-val{font-size:26px;letter-spacing:-0.04em;}
  .pstat-val{font-size:23px;letter-spacing:-0.03em;}
  .scard-val{font-size:26px;letter-spacing:-0.04em;}
  .cal-scard-val{font-size:22px;letter-spacing:-0.03em;}
  .dash-stat-val{font-size:18px;letter-spacing:-0.02em;}
  .dash-pot-amount{font-size:19px;letter-spacing:-0.02em;}
}
.invite-code{font-size:30px;letter-spacing:0.12em;}

/* ── Profile inputs: focus glow ── */
.profile-inp:focus{
  box-shadow:0 0 0 3px rgba(26,122,82,0.12);
  border-color:var(--accent);
}

/* ── Active tab: bolder ── */
.tab-btn.active{font-weight:600;letter-spacing:-0.01em;}

/* ── Scenario + split chips: gradient ── */
.scenario-chip.active{
  background:var(--accent-g);
  border-color:transparent;
  box-shadow:var(--accent-glow);
}
.split-btn.active{
  background:var(--accent-g);
  border-color:transparent;
  box-shadow:var(--accent-glow);
}
.trend-range-btn.active{
  background:var(--accent-g);
  border-color:transparent;
}

/* ── Chat FAB: gradient + glow ── */
.chat-fab{
  background:var(--accent-g);
  box-shadow:0 6px 20px rgba(26,122,82,0.4);
}
.chat-fab.active{background:linear-gradient(135deg,#145f3f,#1a7a52);}

/* ── Bottom nav: pill indicator for active item ── */
@media(max-width:768px){
  .bn-item{position:relative;border-radius:10px;transition:color 0.15s;}
  .bn-item.active::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:28px;height:3px;
    background:var(--accent-g);border-radius:0 0 4px 4px;
  }
  .bn-item.active svg{
    transform:translateY(-2px);
    filter:drop-shadow(0 2px 4px rgba(26,122,82,0.3));
  }
}

/* ── Person block: thicker colored border ── */
.person-block{border-left-width:3px;}

/* ── Section color dot: slight depth ── */
.sec-dot{box-shadow:0 1px 3px rgba(0,0,0,0.18);}

/* ── Pro plan badge: richer gold ── */
.plan-badge.pro{
  background:linear-gradient(135deg,#fff8e6,#fef3c7);
  border-color:#e8c96e;
  color:#92600a;
}

/* ── User dropdown: deeper shadow ── */
.user-dropdown{
  box-shadow:0 12px 40px rgba(0,0,0,0.14),0 4px 12px rgba(0,0,0,0.08);
}
.user-avatar-btn{border-width:1.5px;}

/* ── Toast: gradient ── */
.toast.success{background:var(--accent-g);}

/* ── Bottom sheet primary button: gradient ── */
.sheet-btn-primary{
  background:var(--accent-g);
  box-shadow:var(--accent-glow);
}
.sheet-btn-primary:hover{opacity:.92;box-shadow:var(--accent-glow-lg);}

/* ── Onboarding done step: green checkmark ring ── */
.onboarding-step.done .step-num{
  background:var(--accent-light);
  color:var(--accent);
  border-color:var(--accent);
}

/* ── RC + savings cards: slightly rounder ── */
.rc-card,.sav-rc{border-radius:12px;}

/* ── Recur toggle on: subtle glow ── */
.rc-card .recur-toggle.on,.sav-rc .recur-toggle.on{
  box-shadow:0 0 0 2px rgba(26,122,82,0.2);
}

/* ── Featured pricing card: green glow ── */
.plan-card.featured{
  box-shadow:0 8px 32px rgba(26,122,82,0.18),0 2px 8px rgba(0,0,0,0.06);
}

/* ── Add section button hover tint ── */
.add-section-btn:hover{background:rgba(26,122,82,0.03);}

/* ── Upcoming item: rounder corners ── */
.upcoming-item{border-radius:8px;}

/* ── Mobile summary strip: slightly bigger numbers ── */
@media(max-width:768px){
  .bsm-val{font-size:16px;letter-spacing:-0.02em;}
  .bsm-label{font-size:8px;}
}

/* ── Mobile header: slightly more opaque ── */
@media(max-width:768px){
  header{
    background:rgba(255,255,255,0.94);
    box-shadow:0 1px 0 var(--border),0 4px 12px rgba(0,0,0,0.06);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERIOR APP POLISH — dashboard, profile, chat, calendar, budget sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Profile hero: gradient top strip ── */
.profile-hero{
  background:var(--accent-g);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:28px 20px 20px;
}
.profile-hero .profile-name{color:#fff;font-size:18px;font-weight:700;}
.profile-hero .profile-email{color:rgba(255,255,255,0.78);font-size:13px;}
.profile-avatar{
  border:3px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
.profile-badge{
  background:linear-gradient(135deg,#fff8e6,#fef3c7);
  border:1px solid #e8c96e;
  color:#92600a;
  font-weight:600;
}

/* ── Profile tabs: gradient active state ── */
.profile-tab.active{
  background:var(--accent-g);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--accent-glow);
}

/* ── Profile save/action buttons: gradient ── */
.profile-save{
  background:var(--accent-g);
  box-shadow:var(--accent-glow);
  transition:opacity 0.15s,transform 0.12s,box-shadow 0.15s;
  border:none;
}
.profile-save:hover:not(:disabled){
  opacity:.92;
  box-shadow:var(--accent-glow-lg);
  transform:translateY(-1px);
}
.profile-save:active:not(:disabled){transform:scale(0.97) translateY(0);}

/* ── Profile section cards: richer shadow ── */
.profile-section{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  border:1px solid var(--border);
}
.profile-section + .profile-section{margin-top:16px;}

/* ── Stat cells (pstat): hover lift ── */
.pstat{
  border-radius:14px;
  transition:transform 0.15s,box-shadow 0.15s;
  cursor:default;
}
.pstat:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* ── Total bar: first item income tint + taller ── */
.tbar-item{padding:16px 18px;}
.tbar-label{font-weight:600;font-size:10px;letter-spacing:0.08em;}

/* ── Section headers in budget tab ── */
.sec-header{padding:14px 18px;}
.sec-title{font-size:14px;font-weight:600;}

/* ── Chat panel: depth ── */
.chat-panel{
  box-shadow:-4px 0 32px rgba(0,0,0,0.12),0 8px 40px rgba(0,0,0,0.08);
  border-left:1px solid var(--border);
}
.chat-header{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:14px 18px;
}
.chat-send{
  background:var(--accent-g);
  box-shadow:var(--accent-glow);
  transition:opacity 0.15s,box-shadow 0.15s;
}
.chat-send:hover{opacity:.9;box-shadow:var(--accent-glow-lg);}
.chat-input-wrap{
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
}

/* ── Chat messages: softer bubbles ── */
.msg.me .msg-bubble{
  background:var(--accent-g);
  box-shadow:0 2px 8px rgba(26,122,82,0.22);
}
.msg.them .msg-bubble{
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* ── Calendar today cell: green tint ── */
.cal-cell.today{
  background:rgba(26,122,82,0.04);
  border-radius:8px;
}
.cal-cell.today .cal-day{
  background:var(--accent-g);
  color:#fff;
  border-radius:50%;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(26,122,82,0.3);
}

/* ── Dashboard section containers ── */
.dash-section{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  overflow:hidden;
}
.dash-section-title{font-size:15px;font-weight:600;letter-spacing:-0.01em;}

/* ── Dashboard collapsible headers ── */
.dash-coll-hdr{
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border-radius:12px;
  padding:14px 18px;
  transition:background 0.15s;
}
.dash-coll-hdr:hover{background:rgba(255,255,255,0.96);}
.dash-coll-title{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--text);}
.dash-collapsible{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  margin-bottom:14px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
}

/* ── Dashboard person cards ── */
.dash-person-card{
  border-radius:14px;
  border:1.5px solid var(--border);
  padding:18px 16px;
  border-left-width:3px;
  transition:box-shadow 0.15s,transform 0.15s;
}
.dash-person-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
.dash-person-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:14px;}
.dash-stat-label{font-weight:500;color:var(--text3);}
.dash-stat-val{font-weight:700;font-family:'DM Mono',monospace;}

/* ── Spending bars: rounded fills ── */
.spend-bar-fill{border-radius:99px;}
.spend-bar-track{border-radius:99px;background:var(--surface2);}
.spend-bar-row{margin-bottom:6px;}
.spend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;}

/* ── Dashboard savings pots ── */
.dash-pot-card{
  border-radius:14px;
  border:1px solid var(--border);
  padding:18px 16px;
  background:var(--surface);
  box-shadow:var(--shadow-md);
  transition:transform 0.15s,box-shadow 0.15s;
}
.dash-pot-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.10);}
.dash-pot-fill{border-radius:99px;height:8px;}
.dash-pot-bar{border-radius:99px;background:var(--surface2);overflow:hidden;height:8px;margin:10px 0 6px;}
.dash-pot-name{font-size:13px;font-weight:600;margin-bottom:6px;}
.dash-pot-amount{font-family:'DM Mono',monospace;font-size:18px;font-weight:700;letter-spacing:-0.02em;}
.dash-pot-meta{font-size:11px;color:var(--text3);}

/* ── Upcoming bills: left border + rounded ── */
.upcoming-item{
  border-left-width:3px;
  padding:12px 14px;
  border-radius:8px;
  margin-bottom:8px;
  background:var(--bg);
  border:1px solid var(--border);
  border-left-width:3px;
  transition:box-shadow 0.15s;
}
.upcoming-item:hover{box-shadow:var(--shadow-md);}
.upcoming-day{font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);font-weight:600;margin-bottom:3px;}
.upcoming-name{font-size:13px;font-weight:600;margin-bottom:2px;}
.upcoming-person{font-size:11px;color:var(--text3);}
.upcoming-amount{font-family:'DM Mono',monospace;font-size:13px;font-weight:700;margin-top:4px;}

/* ── Onboarding card: richer treatment ── */
.onboarding-card{
  border-radius:var(--radius-lg);
  border:1.5px solid rgba(26,122,82,0.18);
  background:linear-gradient(145deg,rgba(26,122,82,0.03),rgba(26,122,82,0.01));
  box-shadow:0 4px 20px rgba(26,122,82,0.08);
  padding:20px;
  margin-bottom:18px;
}
.onboarding-title{font-size:16px;font-weight:700;letter-spacing:-0.01em;}
.onboarding-sub{font-size:13px;color:var(--text2);margin-bottom:16px;margin-top:4px;}
.step-num{
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  flex-shrink:0;transition:background 0.2s,border-color 0.2s;
}
.onboarding-step.done .step-num{
  background:var(--accent-g);
  border-color:transparent;
  color:#fff;
  box-shadow:0 2px 8px rgba(26,122,82,0.3);
}

/* ── Mobile menu: richer shadow + items ── */
.mob-menu{
  box-shadow:-8px 0 40px rgba(0,0,0,0.14);
  border-left:1px solid var(--border);
}
.mob-item{
  font-weight:500;
  border-radius:10px;
  margin:2px 0;
  transition:background 0.12s,color 0.12s;
}
.mob-item:hover{background:rgba(26,122,82,0.05);color:var(--accent);}
.mob-item.active{
  background:rgba(26,122,82,0.08);
  color:var(--accent);
  font-weight:600;
}

/* ── Header avatar ring ── */
.hdr-avatar-left,.user-avatar-btn img{
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px rgba(26,122,82,0.35);
}

/* ── Savings progress: taller bars ── */
.savings-progress{height:10px;border-radius:99px;}
.savings-progress-fill{border-radius:99px;}

/* ── Scenario table: cleaner rows ── */
.scenario-table{border-radius:var(--radius-lg);overflow:hidden;}
.scenario-table thead tr{background:var(--surface2);}
.scenario-table tr.highlight{background:rgba(26,122,82,0.03);}
.scenario-table tr.highlight:last-child{border-bottom:none;}

/* ── Override inputs in scenario editor ── */
.override-input{
  border-radius:8px;
  font-size:13px;
  padding:7px 10px;
  transition:border-color 0.15s,box-shadow 0.15s;
}
.override-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(26,122,82,0.12);
  outline:none;
}

/* ── Trend range buttons: pill style ── */
.trend-range-btn{
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  padding:5px 10px;
  transition:all 0.15s;
}
.trend-range-btn:not(.active){opacity:0.7;}
.trend-range-btn:hover:not(.active){opacity:1;}

/* ── Dash chart wrap: give canvas room to breathe ── */
.dash-chart-wrap{padding:8px 4px 4px;}
.dash-trend-hdr{padding:16px 18px 12px;border-bottom:1px solid var(--border);}

/* ── Mobile: tighter interior cards ── */
@media(max-width:768px){
  .dash-pot-card{padding:14px 12px;}
  .onboarding-card{padding:16px;}
  .profile-hero{padding:22px 16px 16px;}
  .tbar-item{padding:12px 14px;}
  .dash-coll-hdr{padding:12px 14px;border-radius:0;}
  .upcoming-item{padding:10px 12px;}
  .dash-section-title{font-size:14px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUDGET PAGE: FULL VISUAL REDESIGN
   Sections feel like category cards, not list rows. Rich at every breakpoint.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Person blocks: colored top accent (desktop) ── */
#block-ma{border-top:3px solid var(--ma-color);}
#block-mb{border-top:3px solid var(--mb-color);}
.person-block{padding-top:22px;}
.person-block-name{font-weight:700;color:var(--text);}

/* ── Summary strip ── */
.budget-summary-mobile{box-shadow:var(--shadow-md);margin-bottom:16px;}

/* ── Section card: thicker colored accent ── */
.section{border-left-width:4px!important;margin-bottom:14px;}

/* ── Section header: feels like a category card ── */
.sec-header{
  padding:18px 20px;
  background:linear-gradient(135deg,var(--surface) 55%,var(--surface2));
  min-height:68px;
}

/* ── Color dot → square category icon tile ── */
.sec-color-btn{
  width:38px;height:38px;border-radius:11px;
  box-shadow:0 3px 10px rgba(0,0,0,0.22);
  flex-shrink:0;transition:transform 0.15s,box-shadow 0.15s;
}
.sec-header:hover .sec-color-btn{transform:scale(1.06);box-shadow:0 4px 14px rgba(0,0,0,0.3);}

/* ── Section title spacing ── */
.sec-title{gap:14px;}
.sec-label-input{font-size:16px;font-weight:700;letter-spacing:-0.01em;width:auto;max-width:240px;}

/* ── Section total: the key number ── */
.sec-total{
  font-size:22px;font-weight:700;
  font-family:'DM Mono',monospace;
  letter-spacing:-0.025em;
}
.sec-right{gap:14px;}

/* ── Chevron: pill button that rotates ── */
.chevron{
  width:30px;height:30px;background:var(--surface2);
  border-radius:8px;display:inline-flex;
  align-items:center;justify-content:center;
  font-size:10px;flex-shrink:0;
  transition:background 0.15s,color 0.15s,transform 0.2s;
}
.chevron.open{
  background:rgba(26,122,82,0.12);
  color:var(--accent);
  transform:rotate(90deg);
}

/* ── Row cards: item names bolder ── */
.rc-name-inp{font-weight:600;}
.sav-name-inp{font-weight:600;}

/* ── Rows open: padded flex container ── */
.rows.open{
  padding:10px;
  display:flex;flex-direction:column;gap:8px;
  overflow-x:visible;
}
.rows.open .rc-card{margin-bottom:0!important;}
.rows.open .sav-rc{margin-bottom:0!important;}
.rows.open .add-row-btn{padding:5px 4px;border-top:1px solid var(--border);margin-top:2px;}

/* ── RC card: edit-active highlight ── */
.rc-card{border:1.5px solid var(--border);transition:box-shadow 0.15s,border-color 0.15s;}
.rc-card:focus-within{border-color:rgba(26,122,82,0.35);box-shadow:0 2px 12px rgba(26,122,82,0.08);}
.sav-rc{border:1.5px solid var(--border);transition:box-shadow 0.15s,border-color 0.15s;}
.sav-rc:focus-within{border-color:rgba(26,122,82,0.35);box-shadow:0 2px 12px rgba(26,122,82,0.08);}

/* ── Savings bar height ── */
.sav-bar-track{height:9px;}
.sav-bar-fill{height:9px;}

/* ── Split panel ── */
.split-panel{box-shadow:var(--shadow-md);}
.split-apply{
  background:var(--accent-g);box-shadow:var(--accent-glow);
  border-radius:9px;padding:8px 18px;font-size:13px;
  transition:opacity 0.15s,box-shadow 0.15s;
}
.split-apply:hover{opacity:1;box-shadow:var(--accent-glow-lg);}

/* ── Add row/section ── */
.add-row-btn button{font-weight:600;color:var(--accent);font-size:13px;}
.add-section-btn{font-size:14px;font-weight:500;}

/* ── Announcement bar ── */
.announcement-bar{padding:13px 18px;}

/* ─────────────── MOBILE ─────────────── */
@media(max-width:768px){

  /* Summary strip */
  .budget-summary-mobile{border-radius:14px;}
  .bsm-item:first-child{background:linear-gradient(160deg,rgba(26,122,82,0.07),rgba(26,122,82,0.02));}
  .bsm-label{font-size:9px;letter-spacing:0.09em;}
  .bsm-val{font-size:18px;font-weight:700;letter-spacing:-0.03em;}

  /* Section header */
  .sec-header{padding:15px 16px;min-height:60px;}
  .sec-color-btn{width:32px;height:32px;border-radius:9px;}
  .sec-label-input{font-size:15px;max-width:140px;}
  .sec-total{font-size:19px;}
  .chevron{width:28px;height:28px;border-radius:7px;}

  /* Row container tighter on mobile */
  .rows.open{padding:8px;gap:7px;}

  /* RC card: vertical stacked */
  .rc-card{border-radius:14px;}
  .rc-name-wrap{padding:14px 16px;}
  .rc-name-inp{font-size:15px;font-weight:700;}
  .rc-total{font-size:14px;font-weight:700;}
  .rc-badge{width:32px;height:32px;font-size:11px;}
  .rc-person-cell{padding:14px 16px;min-height:62px;}
  .rc-person-cell input[type=number]{font-size:24px;font-weight:700;letter-spacing:-0.02em;}
  .rc-person-cell .sym{font-size:18px;font-weight:600;}
  .rc-vsep{height:26px;}
  .rc-due-lbl{font-size:9px;text-transform:uppercase;letter-spacing:0.07em;font-weight:700;}

  /* Savings card */
  .sav-rc{border-radius:14px;}
  .sav-top{padding:14px 16px;}
  .sav-name-inp{font-size:15px;font-weight:700;}
  .sav-bar-track{height:10px;}
  .sav-bar-fill{height:10px;}
  .sav-progress{padding:0 16px 12px;}
  .sav-meta{font-size:11px;margin-top:5px;}
  .sav-field{padding:12px 14px;}
  .sav-field-lbl{font-size:9px;text-transform:uppercase;letter-spacing:0.07em;font-weight:700;margin-bottom:6px;}
  .sav-field input{font-size:18px;font-weight:700;letter-spacing:-0.01em;}

  /* Add row: bigger touch target */
  .add-row-btn{padding:12px 16px;}
  .add-row-btn button{font-size:14px;padding:4px 0;}
}

/* ─────────────── DESKTOP ─────────────── */
@media(min-width:769px){

  /* Person blocks */
  .person-block-name{font-size:14px;font-weight:700;margin-bottom:20px;}
  .pstat{padding:16px 18px;}
  .pstat-label{font-size:10px;font-weight:600;margin-bottom:8px;}

  /* Total bar */
  .tbar-val{font-size:26px;font-weight:700;letter-spacing:-0.04em;}
  .tbar-label{font-size:10px;font-weight:600;letter-spacing:0.09em;}
  .tbar-item{padding:20px 24px;}

  /* Section header */
  .sec-header{padding:18px 22px;}
  .sec-color-btn{width:40px;height:40px;border-radius:12px;}
  .sec-label-input{font-size:16px;max-width:260px;}
  .sec-total{font-size:24px;}
  .chevron{width:32px;height:32px;border-radius:9px;}

  /* RC card */
  .rc-name-wrap{padding:13px 16px;flex:0 0 36%;}
  .rc-name-inp{font-size:14px;font-weight:600;}
  .rc-person-cell{padding:13px 16px;}
  .rc-badge{width:28px;height:28px;}
  .rc-person-cell input[type=number]{font-size:16px;font-weight:600;}

  /* Savings card */
  .sav-top{padding:13px 16px;}
  .sav-field{padding:12px 14px;}
  .sav-field-lbl{font-size:10px;font-weight:600;letter-spacing:0.07em;}
  .sav-field input{font-size:15px;font-weight:600;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX FIXES — mobile overflow, badges, profile tabs, menu restructure
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stop chevron being pushed off-screen on narrow titles ── */
.sec-title{min-width:0;overflow:hidden;}
.sec-right{flex-shrink:0;}
.sec-label-input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Profile tab strip: distinct from green hero so active tab pops ── */
.profile-tab-strip{background:var(--surface2);}
.profile-tab.active{
  background:var(--surface);
  color:var(--accent);
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,0.10);
  border-color:transparent;
}

/* ── Chat FAB badge: centred inside button ── */
.chat-fab-badge{
  min-width:20px;height:20px;
  font-size:10px;padding:0 4px;
  top:4px;right:4px;
}

/* ── Mobile menu: header row + danger sign-out ── */
.mob-menu-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:4px;padding-bottom:4px;
}
.mob-menu-header .mob-user{padding:0;}
.mob-item.danger{color:var(--red);}
.mob-item.danger:hover{background:rgba(184,48,48,0.05);color:#b83030;}

/* ── Dashboard cockpit card ── */
.cockpit-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px 22px 18px;margin-bottom:16px;box-shadow:var(--shadow-md);
}
.cockpit-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3);margin-bottom:6px;}
.cockpit-hero{font-family:'DM Mono',monospace;font-size:48px;font-weight:700;letter-spacing:-0.04em;line-height:1;margin-bottom:16px;}
.cockpit-row{display:flex;align-items:stretch;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:0;}
.cockpit-stat{flex:1;padding:12px 14px;}
.cockpit-stat-lbl{font-size:9px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);font-weight:700;margin-bottom:4px;}
.cockpit-stat-val{font-family:'DM Mono',monospace;font-size:18px;font-weight:700;letter-spacing:-0.03em;}
.cockpit-sep{width:1px;background:var(--border);flex-shrink:0;}
.cockpit-bills-hdr{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);margin:16px 0 8px;}
.cockpit-bill{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);}
.cockpit-bill:last-child{border-bottom:none;}
.cockpit-bill-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cockpit-bill-name{font-size:13px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cockpit-bill-when{font-size:11px;color:var(--text3);white-space:nowrap;}
.cockpit-bill-amt{font-size:13px;font-weight:700;font-family:'DM Mono',monospace;color:var(--text);white-space:nowrap;}
.cockpit-bill-empty{font-size:13px;color:var(--text3);padding:10px 0;margin-top:12px;}
@media(max-width:768px){
  .cockpit-hero{font-size:38px;}
  .cockpit-stat{padding:10px 12px;}
  .cockpit-stat-val{font-size:15px;}
}

.sec-move-btn{width:24px;height:24px;background:none;border:1px solid var(--border);border-radius:5px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--text3);padding:0;transition:all 0.12s;}
.sec-move-btn:hover{background:var(--surface2);color:var(--text);}
@media(max-width:768px){.sec-move-btn{display:none;}}

/* Fix: locked section name visible on mobile */
@media(max-width:768px){
  .sec-header{min-width:0;}
  .sec-right{gap:2px;}
  .sec-color-btn{width:22px;height:22px;}
  .sec-priv-btn,.sec-del-btn{width:26px;height:26px;font-size:13px;padding:0;}
}

/* Fix: line item amounts fully visible on mobile */
@media(max-width:768px){
  .rc-person-cell{min-width:0;}
  .row-amount{min-width:0;}
  .row-amount input{width:60px!important;font-size:13px;}
  .row-currency{flex-shrink:0;}
}