@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101312;--panel:#1a1f1d;--panel2:#151917;--line:#2b322e;--text:#f2f5f0;--muted:#8e9991;--accent:#b5fa42;--accent-ink:#132009;--accent-text:var(--accent);--red:#ef9b8d;--orange:#e9c483}*{box-sizing:border-box}body{margin:0;background:#121612;color:var(--text);font:14px 'DM Sans',system-ui,sans-serif;background-image:radial-gradient(ellipse at 55% -35%,#43551c55,transparent 60%);min-height:100vh}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button,a{transition:background .18s,color .18s,transform .18s}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent-text)}button{border:0;color:inherit}h1,h2,h3,h4,p{margin:0}h1,h2,h3,.metric strong{font-family:Manrope,system-ui,sans-serif}h1{font-size:27px;letter-spacing:-1px;font-weight:700}h2{font-size:16px;font-weight:650}h3{font-size:15px}small{font-size:11px}.muted{color:var(--muted)}.positive{color:var(--accent-text)}.negative{color:var(--red)}.icon{width:19px;height:19px;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.app-shell{max-width:1660px;margin:28px auto;display:grid;grid-template-columns:205px minmax(0,1fr) 268px;background:var(--bg);border:1px solid var(--line);border-radius:24px;min-height:calc(100vh - 56px);overflow:hidden;box-shadow:0 20px 100px #0004}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:25px 17px;gap:26px}.brand{display:flex;align-items:center;gap:9px;font:800 28px Manrope,sans-serif;letter-spacing:-1.3px}.brand img{width:33px;height:33px}.brand span:last-child{font-size:10px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:6px}.family{display:flex;align-items:center;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--line)}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#29381f;color:var(--accent-text);font-weight:700;font-size:12px}.family b{font-size:12px;display:block;margin-bottom:3px}.family small{color:var(--muted);font-size:10px}.nav-label{font-size:9px;letter-spacing:1.2px;color:#748077;text-transform:uppercase;margin:0 10px 9px}.nav{display:grid;gap:5px}.nav button{display:flex;align-items:center;gap:10px;background:none;text-align:left;padding:11px 12px;border-radius:7px;font-size:12px;color:#a4aea7}.nav button:hover{background:#20271e;color:white}.nav button.active{background:var(--accent);color:var(--accent-ink);font-weight:700}.nav .icon{width:17px;height:17px}.sidebar-bottom{margin-top:auto}.local-state{padding:12px;border:1px solid var(--line);border-radius:9px;font-size:10px;line-height:1.6;color:var(--muted)}.dot{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block;margin-right:6px}.main{min-width:0}.topbar{height:65px;border-bottom:1px solid var(--line);padding:0 27px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);gap:10px}.breadcrumb{display:flex;align-items:center;gap:12px}.top-actions{display:flex;align-items:center;gap:12px}.top-actions input{padding:7px 10px;max-width:155px}.content{padding:27px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px}.page-heading p{font-size:12px;color:var(--muted);margin-top:7px}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:10px 14px;border-radius:7px;background:#252c27;border:1px solid #333c35;color:#edf2e9;font-size:12px;font-weight:600;min-height:39px}.button:hover{background:#303b2b}.button.primary{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}.button.primary:hover{background:color-mix(in srgb,var(--accent) 85%,white);transform:translateY(-1px)}.button.danger{color:var(--red);border-color:#61413b;background:#2d211e}.button.sm{padding:7px 10px;min-height:32px;font-size:11px}.button .icon{width:15px;height:15px}.icon-button{background:transparent;color:var(--muted);display:inline-grid;place-items:center;padding:7px;border-radius:6px;min-height:33px;min-width:33px}.icon-button:hover{background:#2b3528;color:var(--accent-text)}.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.panel{background:linear-gradient(120deg,#1b201e,#191e1c);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}.metric{padding:16px 17px}.metric .label{display:flex;justify-content:space-between;gap:5px;color:#a2aca5;font-size:10px;margin-bottom:13px}.metric .label .icon{width:15px;height:15px}.metric strong{display:block;font-size:24px;letter-spacing:-.8px;line-height:1.3;white-space:nowrap}.metric small{display:block;color:#89958d;font-size:10px;margin-top:10px;line-height:1.5}.metric.accent{background:linear-gradient(120deg,#24301d,#1c261b);border-color:#425531}.metric.accent strong{color:var(--accent-text)}.dashboard-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:17px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.panel-head small{color:var(--muted);font-size:10px}.link-button{background:none;color:var(--accent-text);font-size:10px;display:flex;align-items:center;gap:3px;padding:4px}.chart-row{display:flex;align-items:center;gap:22px;min-height:195px}.donut{width:176px;height:176px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;position:relative}.donut:before{content:'';position:absolute;inset:24px;border-radius:50%;background:#1b201e}.donut-inner{position:relative;text-align:center}.donut-inner small{display:block;color:var(--muted);font-size:10px}.donut-inner strong{font:700 24px Manrope,sans-serif;letter-spacing:-1px;display:block;margin:7px 0}.legend{display:grid;gap:15px;flex:1;min-width:0}.legend-item{display:grid;grid-template-columns:7px 1fr;gap:8px;align-items:start}.legend-item i{display:block;width:6px;height:6px;border-radius:50%;margin-top:4px}.legend-item span{display:block;color:var(--muted);font-size:10px}.legend-item b{font-size:12px;font-weight:500;display:block;margin-top:3px}.chart-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;margin-top:18px;color:var(--muted);font-size:10px}.chart-foot b{color:white;display:block;font-size:12px;margin-top:5px}.flow-chart{width:100%;height:153px;margin-top:16px;overflow:visible}.chart-key{display:flex;gap:15px;align-items:center;color:var(--muted);font-size:10px}.chart-key i{height:5px;width:5px;border-radius:50%;display:inline-block;background:var(--accent);margin-right:5px}.flow-value{font:700 27px Manrope;margin:8px 0}.flow-axis{display:flex;justify-content:space-between;color:#78847b;font-size:9px;margin-top:7px}.mini-insight{display:flex;align-items:center;gap:12px;margin-top:19px;border-top:1px solid var(--line);padding-top:15px;font-size:11px;color:var(--muted);line-height:1.5}.mini-insight .icon{color:var(--accent-text)}.lower-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:17px;margin-top:17px}.table-wrap{overflow:auto;max-width:100%}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;color:#7f8c83;font-weight:400;font-size:10px;padding:0 9px 12px}td{padding:14px 9px;border-top:1px solid #2b332d;font-size:11px}th:first-child,td:first-child{padding-left:0}td:last-child,th:last-child{text-align:right;padding-right:0}.transaction-name{display:flex;align-items:center;gap:10px}.transaction-name b{display:block;font-size:11px;font-weight:500}.transaction-name small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.tx-icon{width:30px;height:30px;border-radius:8px;background:#2b3427;display:grid;place-items:center;color:#b5ce95}.tx-icon .icon{width:14px;height:14px}.tag{display:inline-flex;border:1px solid #3b4735;padding:3px 6px;border-radius:5px;color:#b1c49f;font-size:9px;white-space:nowrap}.tag.pending{color:#e1bd7f;border-color:#554a32;background:#2b271e}.goal-row{padding:4px 0 18px}.goal-row+.goal-row{border-top:1px solid var(--line);padding-top:18px}.goal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:11px}.progress{height:5px;border-radius:10px;background:#343d31;overflow:hidden}.progress span{display:block;height:100%;border-radius:10px;background:var(--accent)}.goal-amount{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:9px}.goal-amount b{color:#dfe8d8;font-weight:500}.goal-caption{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.5}.rightbar{padding:25px 19px;border-left:1px solid var(--line);background:#131715}.rightbar h2{font-size:12px}.right-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}.count{background:#28351e;color:var(--accent-text);font-size:9px;padding:3px 6px;border-radius:5px}.rail-section{margin-top:24px}.rail-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:11px}.notification{display:flex;gap:10px;padding-bottom:20px}.notification .n-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:7px;background:#26331c;color:var(--accent-text);flex-shrink:0}.notification .n-icon .icon{width:15px;height:15px}.notification.danger .n-icon{color:var(--red);background:#39241f}.notification b{font-size:10px;display:block;font-weight:500;margin-bottom:5px}.notification p{font-size:10px;line-height:1.6;color:var(--muted)}.rail-divider{border-top:1px solid var(--line);margin:4px 0 22px}.rail-budget{margin:15px 0 24px}.rail-budget .goal-top{font-size:10px}.rail-budget .goal-amount{font-size:9px}.advice-card{border:1px solid #40502a;border-radius:10px;background:linear-gradient(145deg,#26331c,#1b2217);padding:16px}.advice-card .eyebrow{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--accent-text);display:flex;gap:5px;align-items:center}.advice-card h3{font-size:17px;line-height:1.4;margin:12px 0 9px}.advice-card p{color:#a4b397;font-size:10px;line-height:1.65}.advice-card .button{width:100%;margin-top:15px}.rail-footer{display:flex;gap:7px;color:#6f7e73;font-size:9px;margin-top:28px;line-height:1.5}.rail-footer .icon{width:13px;height:13px}.demo-banner{font-size:10px;color:#acb9a4;background:#1f291b;padding:9px 14px;border:1px solid #35482a;border-radius:8px;margin-bottom:19px;display:flex;gap:10px;align-items:center;justify-content:space-between}.demo-banner button{background:none;color:var(--accent-text);font-size:10px;white-space:nowrap}.filter-row{display:flex;gap:9px;margin-bottom:17px;flex-wrap:wrap}.filter-row input{flex:1;min-width:160px}.filter-row select{max-width:180px}input,select,textarea{color:#e9f1e3;background:#111612;border:1px solid #374032;border-radius:7px;padding:10px 11px;min-width:0;max-width:100%}input::placeholder{color:#69776a}input[type=checkbox]{accent-color:var(--accent-text)}.wide{grid-column:1/-1}.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.bank-card{background:radial-gradient(circle at top right,#789d4233,transparent 60%),#242c20;border:1px solid #465538;border-radius:16px;padding:23px;min-height:190px}.bank-card h3{font-size:18px}.bank-card .card-number{letter-spacing:4px;margin:23px 0 16px;font-size:15px;color:#c9d7ba}.bank-card .card-label{font-size:9px;color:var(--muted)}.bank-card strong{display:block;font-size:24px;margin-top:5px}.empty{text-align:center;color:var(--muted);padding:38px 12px;line-height:1.7}.empty .icon{width:30px;height:30px;color:var(--accent-text);margin-bottom:12px}.empty h3{color:#e5ecdf;margin-bottom:5px}.empty .button{margin-top:15px}.insight{display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--line)}.insight:first-of-type{border-top:0}.insight>.icon{color:var(--accent-text);margin-top:3px}.insight p{font-size:12px;color:var(--muted);line-height:1.7;margin-top:7px}.insight h3{font-size:14px}.info-box{padding:15px;border:1px solid #485334;background:#222a1c;border-radius:8px;color:#b8c6aa;font-size:11px;line-height:1.7;margin:14px 0}.settings-section{margin-bottom:18px}.settings-section p{font-size:12px;color:var(--muted);line-height:1.7;margin:12px 0}.integration{display:flex;gap:15px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line)}.integration .icon{color:var(--accent-text);width:24px;height:24px}.integration p{font-size:11px;color:var(--muted);line-height:1.7;margin:7px 0}.integration .tag{margin-top:2px}.modal-overlay{position:fixed;inset:0;background:#000b;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(8px)}.modal{background:#1a211b;border:1px solid #48553c;border-radius:16px;width:560px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 30px 100px #0009}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px;border-bottom:1px solid #35412f;position:sticky;top:0;background:#1a211b;z-index:1}.modal-header h2{font-size:18px}.modal form{padding:24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#b4c3ac}.field input,.field select{width:100%}.checkbox{display:flex;gap:8px;align-items:center;font-size:11px;color:#b7c5ad;margin-top:15px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.error{font-size:12px;color:var(--red);margin-top:12px;line-height:1.5}.footnote{font-size:10px;line-height:1.65;color:var(--muted);margin-top:14px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(100px);opacity:0;pointer-events:none;transition:.25s;z-index:300;background:#d3ff9b;color:#1a2511;border-radius:10px;padding:13px 20px;font-size:12px;max-width:90%;box-shadow:0 10px 45px #0008}#toast.show{transform:translateX(-50%) translateY(0);opacity:1}.mobile-toggle{display:none}.amount-detail{display:flex;justify-content:space-between;align-items:center;margin:10px 0;font-size:12px;color:var(--muted)}.amount-detail strong{color:white}.budget-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:15px}.section-description{color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:17px}.status-line{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--accent-text);margin:12px 0}.source-links{font-size:11px;line-height:1.8;margin-top:15px}.source-links a{display:block}.hidden-file{display:none}.loading{opacity:.6;pointer-events:none}@media(min-width:1500px){.app-shell{margin:38px 3%;max-width:none}.content{padding:30px}.chart-row{gap:30px}.donut{width:190px;height:190px}}@media(max-width:1250px){.app-shell{grid-template-columns:180px minmax(0,1fr);margin:16px;min-height:calc(100vh - 32px)}.rightbar{display:none}.sidebar{padding:23px 13px}.metric strong{font-size:25px}.content{padding:23px}.chart-row{justify-content:center}}@media(max-width:900px){.app-shell{grid-template-columns:160px minmax(0,1fr)}.sidebar{padding:22px 10px}.nav button{font-size:11px;padding:10px 8px}.family b{font-size:10px}.family small{font-size:9px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.lower-grid{grid-template-columns:1fr}.content{padding:20px}.topbar{padding:0 20px}.page-heading{align-items:flex-start}.page-heading .actions{justify-content:flex-end}.chart-row{justify-content:flex-start}.donut{width:180px;height:180px}.legend{grid-template-columns:1fr 1fr;gap:19px}.cards-grid{grid-template-columns:1fr}}@media(max-width:600px){body{background:#101312}.app-shell{display:block;margin:0;border:0;border-radius:0;min-height:100vh;padding-bottom:70px}.sidebar{position:fixed;bottom:0;left:0;right:0;background:#151b17ef;backdrop-filter:blur(20px);z-index:50;padding:8px 7px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-right:0}.sidebar .brand,.sidebar .family,.sidebar .nav-label,.sidebar-bottom,.sidebar .secondary-nav{display:none}.sidebar .nav{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.nav button{display:flex;flex-direction:column;gap:5px;font-size:9px;padding:7px 3px;border-radius:8px}.nav button .icon{width:18px;height:18px}.nav button:nth-child(n+6){display:none}.topbar{height:57px;padding:0 17px}.breadcrumb .icon{display:none}.breadcrumb span:first-of-type{display:none}.top-actions{gap:6px}.top-actions input{max-width:134px;font-size:11px;padding:6px}.content{padding:23px 16px}.page-heading{gap:8px;margin-bottom:19px}.page-heading h1{font-size:24px}.page-heading p{font-size:10px;max-width:205px;line-height:1.6}.page-heading .actions .button:not(.primary){display:none}.button{padding:9px 11px;font-size:11px}.metrics{gap:10px;margin-bottom:13px}.metric{padding:15px 13px}.metric strong{font-size:25px}.metric .label{font-size:10px;margin-bottom:10px}.metric small{font-size:9px;margin-top:8px}.panel{padding:18px 16px;border-radius:11px}.dashboard-grid{gap:13px}.lower-grid{gap:13px;margin-top:13px}.panel-head{margin-bottom:18px}.panel-head h2{font-size:14px}.chart-row{gap:20px}.donut{width:155px;height:155px}.donut:before{inset:20px}.donut-inner strong{font-size:21px}.legend{grid-template-columns:1fr;gap:12px}.legend-item:nth-child(n+4){display:none}.legend-item b{font-size:11px}.demo-banner{font-size:9px;gap:6px;align-items:flex-start}.demo-banner button{font-size:9px}.filter-row{gap:7px}.filter-row select{flex:1;max-width:none;font-size:11px}.filter-row input{min-width:100%;font-size:12px}.form-grid{gap:13px}.modal-overlay{align-items:flex-end;padding:8px}.modal{border-radius:16px;max-height:92vh}.modal-header{padding:17px}.modal form{padding:17px}.modal-header h2{font-size:16px}.field{font-size:10px}.field input,.field select{font-size:14px;padding:10px}.form-actions{position:sticky;bottom:-17px;background:#1a211b;padding:14px 0 3px}.top-mobile-more{display:inline-grid!important}.goal-caption{line-height:1.6}.amount-detail{font-size:11px}.info-box{font-size:10px}.modal .wide{grid-column:1/-1}.table-wrap{margin-right:-2px}.transaction-table .extra-col{display:none}}@media(min-width:601px){.top-mobile-more{display:none!important}}@media(max-width:360px){.metric strong{font-size:21px}.donut{width:137px;height:137px}.chart-row{gap:13px}.content{padding:20px 12px}.button.primary{font-size:10px}}@media(prefers-reduced-motion:no-preference){.content{animation:appear .4s ease-out}.panel{animation:appear .5s ease-out}.metric:nth-child(2){animation-delay:.03s}.metric:nth-child(3){animation-delay:.06s}@keyframes appear{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* C7 visual system: consistent surfaces and accessible personal accents. */
:root{--surface:#101312;--surface-raised:#1a1f1d;--surface-hover:#27312a;--field-bg:#111612;--tint:color-mix(in srgb,var(--accent) 9%,var(--bg));--accent-soft:color-mix(in srgb,var(--accent) 13%,var(--bg));--shadow:0 24px 100px #0004}
body{background-color:var(--bg);background-image:radial-gradient(ellipse at 55% -35%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%)}
.panel{background:var(--panel)}.rightbar{background:var(--panel2)}.metric.accent,.advice-card,.bank-card{background:linear-gradient(130deg,var(--accent-soft),var(--panel));border-color:color-mix(in srgb,var(--accent) 27%,var(--line))}.donut:before{background:var(--panel)}.avatar,.count,.notification .n-icon,.tx-icon{background:var(--accent-soft);color:var(--accent-text)}.progress{background:color-mix(in srgb,var(--muted) 24%,var(--panel))}.button{background:var(--surface-hover);border-color:var(--line);color:var(--text)}.button:hover,.icon-button:hover,.nav button:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--text)}.button.primary,.nav button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.button.primary:hover{background:color-mix(in srgb,var(--accent) 85%,white);color:var(--accent-ink)}input,select,textarea{color:var(--text);background:var(--field-bg);border-color:var(--line)}input::placeholder{color:var(--muted)}.nav button,.nav-label,.field,.checkbox,.metric .label,.metric small,.flow-axis,th,.rail-footer{color:var(--muted)}.chart-foot b,.goal-amount b,.amount-detail strong,.empty h3{color:var(--text)}td,.modal-header{border-color:var(--line)}.modal,.modal-header,.form-actions{background:var(--panel);border-color:var(--line)}.demo-banner,.info-box{background:var(--tint);border-color:color-mix(in srgb,var(--accent) 24%,var(--line));color:var(--muted)}.advice-card p,.bank-card .card-number{color:var(--muted)}.tag{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}.tag.pending{color:var(--orange);background:color-mix(in srgb,var(--orange) 8%,var(--panel));border-color:color-mix(in srgb,var(--orange) 26%,var(--line))}.button.danger{background:color-mix(in srgb,var(--red) 8%,var(--panel));border-color:color-mix(in srgb,var(--red) 25%,var(--line));color:var(--red)}.notification.danger .n-icon{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}#toast{background:var(--accent);color:var(--accent-ink)}.breadcrumb span:last-child{color:var(--text)!important}.flow-chart path[stroke="#b5fa42"]{stroke:var(--accent-text)}.flow-chart stop[stop-color="#b5fa42"]{stop-color:var(--accent)}
html[data-theme="light"]{color-scheme:light;--bg:#f3f5f0;--panel:#ffffff;--panel2:#f8faf5;--line:#dce2d6;--text:#1d2a20;--muted:#657060;--red:#b34031;--orange:#8c5b13;--field-bg:#f8faf6;--surface-hover:#edf1e8;--accent-text:color-mix(in srgb,var(--accent) 42%,#102009);--shadow:0 24px 80px #24361912}
html[data-theme="light"] body{background-image:radial-gradient(ellipse at 55% -35%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 60%)}html[data-theme="light"] .app-shell{box-shadow:var(--shadow)}html[data-theme="light"] .modal{box-shadow:0 25px 85px #20301935}html[data-theme="light"] .modal-overlay{background:#26302066}html[data-theme="light"] .flow-chart path[stroke="#35412f"]{stroke:var(--line)}
.brand{letter-spacing:-1px}.brand span:last-child{letter-spacing:.07em}.theme-picker,.accent-picker{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.theme-option{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:13px 18px;background:var(--field-bg);color:var(--muted);font-size:12px;min-height:44px}.theme-option.active,.theme-option[aria-pressed="true"]{border-color:var(--accent-text);background:var(--accent-soft);color:var(--text)}.accent-choice{width:40px;height:40px;border:4px solid var(--panel);outline:1px solid var(--line);border-radius:50%;position:relative;min-width:40px}.accent-choice.active,.accent-choice[aria-pressed="true"]{outline:2px solid var(--accent-text)}.accent-choice.active:after,.accent-choice[aria-pressed="true"]:after{content:'✓';color:#142012;font-weight:800;font-size:17px}.accent-choice:hover{transform:scale(1.09)}
.auth-shell{max-width:1160px;min-height:calc(100vh - 80px);margin:40px auto;border:1px solid var(--line);border-radius:26px;background:var(--panel);display:grid;grid-template-columns:1.08fr 1fr;box-shadow:var(--shadow);overflow:hidden}.auth-story{position:relative;padding:52px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 0 90%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),var(--panel2);border-right:1px solid var(--line);overflow:hidden}.auth-story:after{content:'';position:absolute;width:360px;height:360px;right:-215px;bottom:120px;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:50%;box-shadow:0 0 0 42px color-mix(in srgb,var(--accent) 3%,transparent),0 0 0 84px color-mix(in srgb,var(--accent) 2%,transparent);pointer-events:none}.auth-brand{font:800 26px Manrope,system-ui,sans-serif;letter-spacing:-1px;display:flex;align-items:center;gap:11px;position:relative;z-index:1}.auth-brand img{width:40px;height:40px}.auth-brand span{font-size:13px;letter-spacing:.02em;font-weight:500}.auth-kicker{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent-text);margin-top:68px}.auth-story h1{font-size:43px;line-height:1.18;letter-spacing:-1.8px;margin-top:20px;max-width:430px;position:relative;z-index:1}.auth-story h1 em,.auth-story h1 span{color:var(--accent-text);font-style:normal}.auth-story>p{font-size:13px;line-height:1.9;color:var(--muted);margin-top:22px;max-width:360px}.auth-feature{display:flex;align-items:center;gap:13px;margin-top:24px;font-size:12px;line-height:1.6;color:var(--muted)}.auth-feature .icon{color:var(--accent-text);width:20px;height:20px}.auth-feature strong,.auth-feature b{color:var(--text);display:block;font-weight:600}.auth-story .auth-foot{margin-top:auto;padding-top:38px}.auth-panel{padding:54px 48px;display:flex;flex-direction:column;justify-content:center;min-width:0}.auth-panel h2{font-size:27px;letter-spacing:-.8px}.auth-panel>p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:12px}.auth-status{padding:12px 14px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:11px;line-height:1.7;background:var(--panel2);margin:22px 0}.auth-status .dot{vertical-align:middle}.auth-form{display:grid;gap:18px;margin-top:25px}.auth-form .field{font-size:12px;gap:9px}.auth-form input{min-height:47px;font-size:14px}.auth-form>.button{width:100%;min-height:46px;font-size:12px;margin-top:4px}.auth-form .error,.auth-error{color:var(--red);font-size:12px;line-height:1.6}.auth-switch{background:none;padding:12px 0;color:var(--accent-text);font-size:12px;align-self:center}.auth-foot{font-size:10px;line-height:1.8;color:var(--muted);margin-top:20px}.auth-demo{display:flex;align-items:center;justify-content:center;gap:8px;min-height:45px;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);font-size:12px;margin-top:18px}.auth-demo:hover{background:var(--surface-hover)}.auth-panel .theme-picker{justify-content:flex-end;margin:0 0 30px}.auth-panel .theme-option{padding:8px 12px;font-size:10px;min-height:34px}button:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.vehicle-grid,.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.vehicle-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.vehicle-title h3{font-size:18px}.vehicle-title>.icon{width:28px;height:28px;color:var(--accent-text)}.vehicle-meta{font-size:11px;line-height:1.8;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.vehicle-costs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:16px 0;border-top:1px solid var(--line)}.vehicle-costs small{color:var(--muted);display:block;font-size:10px;line-height:1.6}.vehicle-costs strong{display:block;font:700 20px Manrope,sans-serif;margin-top:5px}.vehicle-filter{display:flex;align-items:end;gap:13px;flex-wrap:wrap;margin-bottom:18px}.vehicle-filter .field{flex:1;min-width:150px}.category-tile{display:flex;gap:12px;align-items:center;padding:17px;background:var(--panel);border:1px solid var(--line);border-radius:11px}.category-tile h3{font-size:13px}.category-tile p{font-size:10px;color:var(--muted);margin-top:5px}.category-tile .actions{margin-left:auto;flex-shrink:0;gap:3px}.category-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}.reminder-list{border-top:1px solid var(--line);margin-top:16px;padding-top:6px}.reminder-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.6}.reminder-item:last-child{border-bottom:0}.reminder-item small{display:block;color:var(--muted);font-size:10px}.reminder-item .actions{flex-shrink:0}.reminder-item.done{opacity:.55}.reminder-item.done b{text-decoration:line-through}
@media(max-width:1000px){.auth-shell{margin:25px;min-height:calc(100vh - 50px)}.auth-story{padding:35px}.auth-panel{padding:35px}.auth-story h1{font-size:36px}.auth-kicker{margin-top:48px}}
@media(max-width:750px){.auth-shell{grid-template-columns:1fr;max-width:540px;margin:20px auto;min-height:0}.auth-story{padding:28px 30px;border-right:0;border-bottom:1px solid var(--line)}.auth-kicker{margin-top:24px}.auth-story h1{font-size:31px;max-width:380px}.auth-story>p{margin-top:14px}.auth-story .auth-feature,.auth-story .auth-foot{display:none}.auth-panel{padding:30px}.auth-panel .theme-picker{margin-bottom:24px}.vehicle-grid,.category-grid{grid-template-columns:1fr}}
@media(max-width:600px){body{background:var(--bg)}.sidebar{background:color-mix(in srgb,var(--panel2) 95%,transparent)}.auth-shell{margin:0;min-height:100vh;border:0;border-radius:0;box-shadow:none}.auth-story{padding:26px 24px}.auth-brand{font-size:23px}.auth-brand img{width:34px;height:34px}.auth-story h1{font-size:30px}.auth-panel{padding:28px 24px}.auth-panel h2{font-size:24px}.auth-form{margin-top:19px}.vehicle-costs strong{font-size:19px}.category-tile{padding:15px}.category-tile .button{padding:7px;min-height:36px}.theme-option{flex:1;justify-content:center;padding:12px}.accent-choice{width:38px;height:38px;min-width:38px}.vehicle-filter{gap:10px}.vehicle-filter .field{min-width:120px}}
/* Color picker uses its own palette, independent from panel/button themes. */
.accent-picker .accent-choice{background:var(--swatch)!important;color:#142012;display:inline-grid;place-items:center}
.accent-picker .accent-choice[aria-pressed="true"]:after{content:none}
.accent-picker .accent-choice .icon{width:18px;height:18px;stroke:#142012;stroke-width:3}
.household-gate{max-width:680px;margin:8vh auto;padding:32px}.household-gate h1{margin-top:28px}.household-gate p{line-height:1.7}.household-list{display:grid;gap:12px;margin:24px 0}.household-gate .actions{flex-wrap:wrap}.user-id{font-family:monospace;font-size:12px;overflow-wrap:anywhere;user-select:all}.member-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}.member-row .user-id{flex:1;min-width:180px}[data-sync-status]{overflow-wrap:anywhere}@media(max-width:700px){.household-gate{margin:20px 14px;padding:22px}.member-row{align-items:flex-start}}

/* Identity stays visible on every page, including narrow mobile layouts. */
.account-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 32px;border-bottom:1px solid var(--line);background:var(--panel)}
.account-bar>div{display:flex;align-items:center;gap:10px;min-width:0}.account-bar span{min-width:0}.account-bar small{display:block;font-size:10px;opacity:.7;margin-bottom:3px}.account-bar strong{display:block;font-size:12px;overflow-wrap:anywhere}.account-bar .button{flex-shrink:0;min-height:40px}.account-bar svg{flex-shrink:0;width:19px;height:19px}
@media(max-width:600px){.account-bar{padding:10px 18px}.account-bar strong{font-size:11px}}