:root{--bg:#f7f9f8;--surface:#fff;--surface-2:#f1f5f3;--text:#16211d;--muted:#708078;--line:#e4ebe7;--green:#18b979;--green-2:#7cf0bf;--coral:#ff6f61;--gold:#f3b33d;--teal:#21c7b7;--shadow:0 18px 45px rgba(24,49,39,.10);--soft:0 8px 24px rgba(24,49,39,.08);--radius:24px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);transition:background .5s,color .5s}button,input,select{font:inherit}button{cursor:pointer;border:0}body{overflow-x:hidden}.is-hidden{display:none!important}
/* Premium welcome + auth */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:#f8faf9}.auth-art{position:relative;overflow:hidden;padding:58px 7vw;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 20% 20%,#d9fff0 0,#f7fbf9 34%,#fff 75%);}.auth-brand,.topbar-brand,.sidebar-brand,.auth-mobile-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#18b979,#0d8f68);color:white;box-shadow:0 10px 25px rgba(24,185,121,.25)}.auth-copy{max-width:590px;margin-top:70px}.eyebrow{letter-spacing:.14em;font-size:11px;font-weight:800;color:#0e9d70;margin:0 0 14px}.auth-copy h1{font-size:clamp(42px,5vw,72px);line-height:1.02;margin:0 0 20px;letter-spacing:-.05em}.auth-copy h1 strong{color:#12a873}.auth-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:var(--muted);max-width:520px}.wallet-art{height:260px;position:relative;margin-top:35px}.wallet{position:absolute;width:310px;height:185px;border-radius:28px;background:linear-gradient(145deg,#1f2e29,#0c1713);left:28%;top:30px;transform:rotate(-8deg);box-shadow:0 35px 45px rgba(16,40,31,.25)}.wallet:after{content:"";position:absolute;right:22px;top:78px;width:75px;height:48px;border-radius:14px;background:#1cba7b}.wallet-flap{position:absolute;inset:0 0 auto;height:80px;border-radius:28px 28px 12px 12px;background:linear-gradient(145deg,#31443d,#15221d)}.wallet-dot{position:absolute;right:45px;top:98px;width:9px;height:9px;border-radius:50%;background:#fff}.coin{position:absolute;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#f6c45b,#e79722);box-shadow:0 14px 25px rgba(222,151,34,.25)}.coin-1{width:72px;height:72px;left:20%;top:25px}.coin-2{width:52px;height:52px;left:72%;top:12px}.trend-badge{position:absolute;right:17%;bottom:5px;width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:#e9fff6;color:#0da571;font-size:25px;box-shadow:var(--soft)}.auth-benefits{display:flex;gap:25px;color:#54655e;font-size:13px;font-weight:700}.auth-benefits span{display:flex;align-items:center;gap:7px}.auth-benefits i{color:#13a974}.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px;background:white}.auth-card{width:min(440px,100%);padding:38px;border:1px solid #e7eeea;border-radius:30px;background:rgba(255,255,255,.92);box-shadow:0 25px 70px rgba(23,55,43,.10)}.auth-mobile-brand{display:none}.auth-heading{text-align:center;margin-bottom:24px}.mini-icon,.modal-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;margin:0 auto 13px;background:#e8fff5;color:#0da571}.auth-heading h2{margin:0;font-size:28px}.auth-heading p,.modal-heading p{color:var(--muted);margin:8px 0 0;font-size:14px}.field{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#f8fbf9;border-radius:15px;padding:0 14px;margin:12px 0;height:54px}.field>span{color:#6f8178}.field input{border:0;outline:0;background:transparent;width:100%;color:var(--text)}.field-action{background:none;color:#83918b}.btn-primary{width:100%;height:54px;border-radius:15px;background:linear-gradient(135deg,#18b979,#0ca66f);color:#fff;font-weight:800;box-shadow:0 12px 24px rgba(18,174,117,.24);transition:.25s}.btn-primary:hover{transform:translateY(-2px)}.btn-google{width:100%;height:52px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--text);font-weight:700}.google-g{margin-right:8px}.divider{display:flex;align-items:center;gap:12px;color:#9aa69f;margin:20px 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.auth-switch{text-align:center;color:var(--muted);font-size:13px}.auth-switch button,.text-btn{color:#0da571;background:none;font-weight:800}.date-chip{background:var(--surface);border:1px solid var(--line);padding:11px 15px;border-radius:14px;color:var(--muted);box-shadow:var(--soft)}
/* App */
.app-shell{min-height:100vh;background:var(--bg);transition:background .5s}.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-right:1px solid var(--line);padding:26px 18px;z-index:30}.sidebar-brand{padding:0 10px 28px}.side-user{display:flex;gap:11px;align-items:center;padding:14px;background:#f4f8f6;border-radius:18px;margin-bottom:18px}.side-user strong,.side-user span{display:block}.side-user span{font-size:11px;color:var(--muted);margin-top:3px}.avatar{width:42px;height:42px;border-radius:14px;background:#e9f5f0;color:#129f70;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.large{width:44px;height:44px}.side-nav{display:grid;gap:6px}.side-item{display:flex;align-items:center;gap:12px;width:100%;height:48px;border-radius:14px;padding:0 14px;background:transparent;color:#68766f;text-align:left;font-weight:700;transition:.2s}.side-item:hover,.side-item.active{background:#eafff5;color:#0b9d6c}.sidebar-bottom{position:absolute;bottom:22px;left:18px;right:18px;display:grid;gap:6px}.side-item.danger{color:#e06157}.app-main{margin-left:260px}.topbar{height:78px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:20}.topbar-actions{display:flex;gap:10px;align-items:center}.round-btn,.icon-btn{width:42px;height:42px;border-radius:13px;background:var(--surface-2);color:#62726a}.main-content{max-width:1220px;margin:auto;padding:34px}.welcome-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px}.welcome-row h1{margin:3px 0;font-size:30px;letter-spacing:-.04em}.muted{color:var(--muted);margin:0;font-size:13px}.balance-card{min-height:220px;border-radius:28px;padding:28px 30px;background:linear-gradient(135deg,#132d24 0%,#1b5c47 52%,#16b77a 100%);color:#fff;display:grid;grid-template-columns:34% 66%;align-items:center;box-shadow:0 25px 50px rgba(19,77,57,.20);overflow:hidden;position:relative}.balance-card:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-80px;top:-100px;background:rgba(255,255,255,.12)}.balance-copy span{display:block;color:#d5f8e9;font-size:13px}.balance-copy strong{display:block;font-size:36px;margin:10px 0}.balance-copy small{color:#bdebd9}.chart-wrap{height:150px;position:relative;z-index:1}.chart-wrap svg{width:100%;height:115px}.chart-line{fill:none;stroke:#b8ffe2;stroke-width:3}.chart-area{fill:url(#chartFill)}.chart-labels{display:flex;justify-content:space-between;color:#bdebd9;font-size:10px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.metric-card{min-height:125px;border-radius:22px;padding:20px;display:flex;gap:15px;align-items:center;border:1px solid rgba(255,255,255,.7);box-shadow:var(--soft);transition:transform .2s,box-shadow .2s}.metric-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(25,50,41,.12)}.metric-card.income{background:linear-gradient(145deg,#eafff5,#c7f8e2)}.metric-card.expense{background:linear-gradient(145deg,#fff1ed,#ffd8d0)}.metric-card.savings{background:linear-gradient(145deg,#fff8df,#ffe7a8)}.metric-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:18px}.income .metric-icon{background:#18b979;color:#fff}.expense .metric-icon{background:#ff6f61;color:#fff}.savings .metric-icon{background:#e6a62e;color:#fff}.metric-card span,.metric-card small{display:block;color:#65756d;font-size:12px}.metric-card strong{display:block;font-size:19px;margin:5px 0}.content-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--soft)}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel h2{margin:0;font-size:18px}.panel-head p{margin:6px 0 0;color:var(--muted);font-size:12px}.transaction-list{list-style:none;padding:0;margin:18px 0 0}.transaction-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.trans-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center}.trans-icon.income{background:#e6fff4;color:#0fa56f}.trans-icon.expense{background:#fff0ed;color:#e95f52}.trans-icon.savings{background:#fff5da;color:#c68a20}.trans-info{flex:1}.trans-info h4{margin:0;font-size:13px}.trans-info span{color:var(--muted);font-size:11px}.trans-amount{font-size:13px;font-weight:800}.trans-amount.income,.trans-amount.savings{color:#0eaa73}.trans-amount.expense{color:#e45f53}.goal-amount{margin-top:25px}.goal-amount strong{display:block;font-size:18px}.goal-amount span{color:#0eaa73;font-weight:800}.progress-track{height:10px;border-radius:99px;background:#eaf0ed;overflow:hidden;margin:15px 0}.progress-fill{height:100%;background:linear-gradient(90deg,#19b979,#7cf0bf);border-radius:99px}.empty-state{text-align:center;padding:35px 10px;color:var(--muted)}.empty-state i{font-size:28px;color:#b1c0b9}.page-view{max-width:1100px;margin:auto}.page-title{margin-bottom:18px}.page-title h1{font-size:32px;margin:4px 0}.budget-hero{margin-bottom:18px}.budget-hero>div:first-child{display:flex;justify-content:space-between;align-items:center}.budget-hero strong{font-size:24px}.budget-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.budget-grid>div{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:8px;box-shadow:var(--soft)}.budget-grid i{color:#0fae77}.profile-card{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}.profile-links{display:grid;gap:10px;margin-top:18px}.profile-links button{padding:14px;border-radius:14px;background:var(--surface-2);text-align:left;color:var(--text)}.bottom-nav{display:none}.modal-overlay{position:fixed;inset:0;background:rgba(18,29,25,.48);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;z-index:100}.modal-card{width:min(480px,100%);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.2);position:relative}.modal-close{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:12px;background:var(--surface-2);color:var(--muted)}.modal-heading{display:flex;gap:13px;align-items:center;margin-bottom:18px}.modal-heading .mini-icon{margin:0}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.action-option{min-height:125px;border-radius:19px;padding:17px;text-align:left;display:grid;align-content:center;gap:5px;border:1px solid transparent}.action-option i{font-size:21px}.action-option span{font-weight:800}.action-option small{color:#697871}.action-option.income{background:#e8fff5;color:#0c9f6d}.action-option.expense{background:#fff0ed;color:#df6052}.action-option.savings{background:#fff6dc;color:#bd861f}.form-label{display:grid;gap:7px;font-size:12px;font-weight:800;margin:14px 0}.form-label input,.form-label select{height:52px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:0 14px;outline:0;color:var(--text)}.full-btn{margin-top:8px}.goal-deposit{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.notification-list{display:grid;gap:10px;margin-top:15px}.notification-list div{padding:13px;border-radius:14px;background:var(--surface-2);font-size:13px}.toast-container{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:8px}.toast{background:#16211d;color:#fff;padding:13px 16px;border-radius:13px;box-shadow:var(--shadow);font-size:13px}.mobile-only{display:none}
/* Dark mode with transition */
body.dark{--bg:#101815;--surface:#17211e;--surface-2:#1d2925;--text:#f1f8f4;--muted:#9aaea5;--line:#293831}body.dark .auth-shell,body.dark .auth-panel{background:#101815}body.dark .auth-art{background:radial-gradient(circle at 20% 20%,#183d31,#101815 65%)}body.dark .auth-card{background:#17211e;border-color:#293831}body.dark .field,body.dark .btn-google{background:#1d2925;color:#f1f8f4;border-color:#31423a}body.dark .sidebar,body.dark .topbar{background:rgba(23,33,30,.9)}body.dark .side-user{background:#1d2925}body.dark .auth-copy h1 strong{color:#54e0ad}body.dark .budget-grid>div{background:#17211e}
.theme-transition:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at var(--tx,50%) var(--ty,10%),rgba(124,240,191,.30),transparent 0);transform:scale(0);opacity:0;z-index:999;pointer-events:none;animation:themeRipple .7s ease-out}.theme-transition.run:before{animation:themeRipple .7s ease-out}@keyframes themeRipple{0%{transform:scale(0);opacity:.8}100%{transform:scale(2.8);opacity:0}}
@media(max-width:900px){.auth-shell{display:block}.auth-art{display:none}.auth-panel{min-height:100vh;padding:24px 18px;align-items:flex-start}.auth-mobile-brand{display:flex;margin:6px 0 24px}.auth-mobile-brand:after{content:"Smart money management";font-size:11px;color:var(--muted);font-weight:600;margin-left:auto}.auth-card{padding:26px 20px}.sidebar{transform:translateX(-105%);transition:transform .3s;width:280px}.sidebar.open{transform:translateX(0)}.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25;display:none}.sidebar-backdrop.show{display:block}.app-main{margin-left:0}.mobile-only{display:grid;place-items:center}.topbar{padding:0 16px}.topbar-brand{font-size:16px}.main-content{padding:20px 15px 100px}.balance-card{grid-template-columns:1fr;min-height:250px}.chart-wrap{height:125px;margin-top:5px}.metric-row{grid-template-columns:repeat(3,minmax(170px,1fr));overflow-x:auto;padding-bottom:5px}.metric-card{min-width:170px}.content-grid{grid-template-columns:1fr}.bottom-nav{display:grid;position:fixed;bottom:12px;left:12px;right:12px;height:66px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:22px;grid-template-columns:1fr 1fr 1fr 1fr 1fr;z-index:40;box-shadow:0 15px 35px rgba(20,40,31,.16);align-items:center}.dark .bottom-nav{background:rgba(23,33,30,.94)}.nav-item{background:none;color:#718078;display:grid;place-items:center;gap:3px;font-size:10px;font-weight:700}.nav-item i{font-size:17px}.nav-item.active{color:#0da571}.add-nav{width:52px;height:52px;border-radius:18px;justify-self:center;background:linear-gradient(145deg,#18b979,#0b9d69);color:#fff;font-size:21px;box-shadow:0 10px 22px rgba(24,185,121,.32)}.welcome-row{align-items:flex-start}.welcome-row h1{font-size:26px}.date-chip{font-size:11px}.budget-grid{grid-template-columns:1fr}.action-grid{grid-template-columns:1fr}.action-option{min-height:78px;grid-template-columns:auto 1fr auto;align-items:center}.action-option small{grid-column:2}.profile-card{grid-template-columns:1fr}.page-title h1{font-size:28px}}
@media(max-width:560px){.balance-card{padding:23px}.balance-copy strong{font-size:30px}.metric-card{padding:15px}.metric-icon{width:42px;height:42px}.metric-card strong{font-size:16px}.welcome-row{display:block}.date-chip{margin-top:12px}.auth-mobile-brand .brand-mark{width:38px;height:38px}.auth-mobile-brand{font-size:16px}.auth-mobile-brand:after{display:none}}
/* First-screen welcome */
.welcome-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 22px;background:radial-gradient(circle at 50% 15%,#ddfff1 0,#f8fbf9 42%,#fff 80%);position:relative;z-index:500}.welcome-brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;position:absolute;top:28px;left:32px}.welcome-screen h1{font-size:clamp(38px,7vw,68px);line-height:1.02;letter-spacing:-.05em;margin:18px 0 15px}.welcome-screen h1 strong{color:#10a873}.welcome-screen>p:not(.eyebrow){max-width:570px;color:#6d7c75;line-height:1.7}.welcome-screen>.btn-primary{max-width:260px;margin-top:20px}.welcome-visual{width:240px;height:150px;position:relative;margin-top:40px}.welcome-ring{position:absolute;inset:0 25px;border-radius:50%;background:linear-gradient(145deg,#d9fff0,#fff);box-shadow:inset 0 0 35px rgba(24,185,121,.16)}.welcome-wallet{position:absolute;left:54px;top:40px;width:130px;height:76px;border-radius:20px;background:linear-gradient(145deg,#22332c,#0d1713);display:grid;place-items:center;color:#7cf0bf;font-size:30px;transform:rotate(-7deg);box-shadow:0 20px 30px rgba(20,48,37,.2)}.welcome-chart{position:absolute;right:18px;bottom:15px;width:55px;height:55px;border-radius:17px;background:#e8fff5;color:#0da571;display:grid;place-items:center;box-shadow:var(--soft)}.welcome-benefits{display:flex;gap:25px;margin-top:26px;color:#617069;font-size:12px;font-weight:700}.welcome-benefits span{display:flex;align-items:center;gap:7px}.welcome-benefits i{color:#10a873}.budget-form{margin-top:14px;display:flex;gap:10px;align-items:flex-end}.budget-form .form-label{flex:1;margin:0}.budget-form .btn-primary{width:auto;padding:0 18px}.theme-transition{overflow:hidden}
@media(max-width:900px){.welcome-screen{padding-top:70px}.welcome-brand{position:static;align-self:flex-start}.welcome-visual{margin-top:42px}.welcome-screen h1{font-size:42px}.welcome-benefits{gap:14px;flex-wrap:wrap;justify-content:center}.welcome-screen>.btn-primary{max-width:none;width:100%;height:56px}.budget-form{display:grid}.budget-form .btn-primary{width:100%}}
body.dark .welcome-screen{background:radial-gradient(circle at 50% 15%,#183e31,#101815 70%);color:#f1f8f4}body.dark .welcome-screen>p:not(.eyebrow),body.dark .welcome-benefits{color:#9aada5}

/* =========================================================
   Theme system — Design 2 is the default
   ========================================================= */
:root{--theme-accent:#19e6a0;--theme-accent-2:#64f7ca;--theme-warm:#8df7df;--theme-bg:#06110f;--theme-surface:#0c1916;--theme-surface-2:#10221d;--theme-text:#f4fffb;--theme-muted:#93aaa1;--theme-line:rgba(151,224,202,.14);--theme-shadow:0 24px 70px rgba(0,0,0,.32)}
body{background:var(--theme-bg);color:var(--theme-text)}
.auth-shell,.app-shell{background:var(--theme-bg)}
.auth-art{background:radial-gradient(circle at 18% 18%,rgba(25,230,160,.18),transparent 35%),radial-gradient(circle at 82% 75%,rgba(100,247,202,.10),transparent 30%),var(--theme-bg)}
.auth-panel{background:var(--theme-bg)}
.auth-card,.panel{background:var(--theme-surface);border-color:var(--theme-line);box-shadow:var(--theme-shadow)}
.auth-card{border-radius:28px}
.auth-heading h2,.panel h2,.page-title h1,.welcome-row h1,.modal-card h3{color:var(--theme-text)}
.auth-heading p,.modal-heading p,.auth-copy>p:not(.eyebrow),.panel-head p,.muted{color:var(--theme-muted)}
.auth-copy h1 strong,.welcome-screen h1 strong,.eyebrow,.auth-switch button,.text-btn{color:var(--theme-accent)}
.field{background:var(--theme-surface-2);border-color:var(--theme-line);color:var(--theme-text)}
.field input{color:var(--theme-text)}
.field input::placeholder{color:#6f8880}
.btn-primary{background:linear-gradient(135deg,var(--theme-accent),#0dbf87);box-shadow:0 14px 32px rgba(25,230,160,.18)}
.btn-google{background:var(--theme-surface-2);color:var(--theme-text);border-color:var(--theme-line)}
.date-chip,.round-btn,.icon-btn{background:var(--theme-surface-2);color:var(--theme-muted);border:1px solid var(--theme-line)}
.sidebar{background:rgba(7,19,16,.94);border-color:var(--theme-line)}
.topbar{background:rgba(7,19,16,.86);border-color:var(--theme-line)}
.side-user{background:var(--theme-surface-2)}
.side-item{color:#8ca49b}.side-item:hover,.side-item.active{background:rgba(25,230,160,.12);color:var(--theme-accent)}
.avatar{background:rgba(25,230,160,.12);color:var(--theme-accent)}
.balance-card{background:linear-gradient(135deg,#071511 0%,#0b2a21 55%,#0f5f49 100%);box-shadow:0 25px 60px rgba(0,0,0,.35)}
.metric-card{border-color:var(--theme-line)}
.metric-card.income{background:linear-gradient(145deg,#08291f,#0d6048);color:#effff9}.metric-card.expense{background:linear-gradient(145deg,#3a1615,#873d31);color:#fff8f6}.metric-card.savings{background:linear-gradient(145deg,#33250c,#8a641d);color:#fffaf0}
.metric-card span,.metric-card small{color:rgba(255,255,255,.72)}
.metric-card strong{color:#fff}
.transactions-panel,.goal-panel{background:var(--theme-surface)}
.transaction-item{border-color:var(--theme-line)}
.trans-info h4,.trans-amount{color:var(--theme-text)}
.trans-info span{color:var(--theme-muted)}
.modal-overlay{background:rgba(0,0,0,.68);backdrop-filter:blur(10px)}
.modal-card{background:var(--theme-surface);border-color:var(--theme-line);box-shadow:0 30px 90px rgba(0,0,0,.45);color:var(--theme-text)}
.form-label{color:var(--theme-muted)}
.form-label input,.form-label select{background:var(--theme-surface-2);border-color:var(--theme-line);color:var(--theme-text)}
.bottom-nav{background:rgba(9,24,20,.92);border-color:var(--theme-line)}
.nav-item{color:#779188}.nav-item.active{color:var(--theme-accent)}
.add-nav{background:linear-gradient(145deg,var(--theme-accent),#0caf7c);box-shadow:0 12px 28px rgba(25,230,160,.28)}
.theme-top-btn{height:42px;padding:0 14px;border-radius:13px;display:flex;align-items:center;gap:8px;background:var(--theme-surface-2);border:1px solid var(--theme-line);color:var(--theme-text);font-weight:800;font-size:12px}.theme-top-btn i{color:var(--theme-accent)}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.theme-option{position:relative;text-align:left;padding:12px;border:1px solid var(--theme-line);border-radius:18px;background:var(--theme-surface-2);color:var(--theme-text);transition:transform .2s,border-color .2s,box-shadow .2s}.theme-option:hover{transform:translateY(-2px);border-color:var(--theme-accent);box-shadow:0 12px 28px rgba(0,0,0,.18)}.theme-option.selected{border-color:var(--theme-accent);box-shadow:0 0 0 2px rgba(25,230,160,.15)}.theme-option strong,.theme-option small{display:block}.theme-option strong{font-size:12px;margin-top:9px}.theme-option small{font-size:10px;color:var(--theme-muted);margin-top:4px}.theme-preview{height:62px;border-radius:13px;display:grid;grid-template-columns:1.4fr .8fr;gap:7px;padding:8px;overflow:hidden;background:#071511}.theme-preview b,.theme-preview i,.theme-preview em{display:block;border-radius:9px}.theme-preview b{grid-row:span 2;background:linear-gradient(145deg,#10261f,#16c892)}.theme-preview i{background:#1d3d33}.theme-preview em{background:#19e6a0}.theme-glass .theme-preview{background:linear-gradient(135deg,#dcecff,#f5fbff);border:1px solid rgba(255,255,255,.65)}.theme-glass .theme-preview b{background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.8)}.theme-glass .theme-preview i{background:rgba(93,163,255,.3)}.theme-glass .theme-preview em{background:rgba(255,255,255,.72)}.theme-1 .theme-preview{background:#f7f8f6}.theme-1 .theme-preview b{background:#fff;border:1px solid #e4e8e4}.theme-1 .theme-preview i{background:#edf2ee}.theme-1 .theme-preview em{background:#0f9f72}.theme-3 .theme-preview{background:#fff1f4}.theme-3 .theme-preview b{background:linear-gradient(145deg,#ffdbe4,#ff8d9e)}.theme-3 .theme-preview i{background:#ffe4c7}.theme-3 .theme-preview em{background:#ff6f61}.theme-4 .theme-preview{background:#071728}.theme-4 .theme-preview b{background:linear-gradient(145deg,#0a3154,#0bc7e6)}.theme-4 .theme-preview i{background:#173c61}.theme-4 .theme-preview em{background:#51e5f4}.theme-5 .theme-preview{background:#0d0d0c}.theme-5 .theme-preview b{background:linear-gradient(145deg,#161514,#6f5320)}.theme-5 .theme-preview i{background:#302719}.theme-5 .theme-preview em{background:#f2c96b}.theme-6 .theme-preview{background:#eef1e9}.theme-6 .theme-preview b{background:#dbe5d3}.theme-6 .theme-preview i{background:#c8d5bf}.theme-6 .theme-preview em{background:#52745d}.theme-7 .theme-preview{background:#fff0e8}.theme-7 .theme-preview b{background:linear-gradient(145deg,#f7c2a9,#d66c58)}.theme-7 .theme-preview i{background:#f3d4c0}.theme-7 .theme-preview em{background:#c95543}

/* Theme 1 — Clean minimal */
body[data-theme="theme-1"]{--theme-bg:#f6f8f7;--theme-surface:#ffffff;--theme-surface-2:#eef3f0;--theme-text:#18211d;--theme-muted:#6f7d76;--theme-line:#dfe8e3;--theme-accent:#0e9f72;--theme-accent-2:#45d3a6;--theme-shadow:0 20px 55px rgba(31,58,47,.10)}
/* Theme 2 — Design 2 default */
body[data-theme="theme-2"]{--theme-bg:#06110f;--theme-surface:#0c1916;--theme-surface-2:#10221d;--theme-text:#f4fffb;--theme-muted:#93aaa1;--theme-line:rgba(151,224,202,.14);--theme-accent:#19e6a0;--theme-accent-2:#64f7ca}
/* Glassmorphism */
body[data-theme="glass"]{--theme-bg:#dce8f3;--theme-surface:rgba(255,255,255,.48);--theme-surface-2:rgba(255,255,255,.34);--theme-text:#193047;--theme-muted:#62778a;--theme-line:rgba(255,255,255,.72);--theme-accent:#3d8cff;--theme-accent-2:#78d9ff;--theme-shadow:0 24px 70px rgba(61,96,130,.16)}
body[data-theme="glass"] .sidebar,body[data-theme="glass"] .topbar{background:rgba(255,255,255,.36);border-color:rgba(255,255,255,.65)}
body[data-theme="glass"] .auth-shell,body[data-theme="glass"] .app-shell{background:linear-gradient(135deg,#dce8f3,#f8fbff)}
body[data-theme="glass"] .auth-art{background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.9),transparent 32%),linear-gradient(135deg,#b9ddff,#f3eaff)}
body[data-theme="glass"] .auth-card,body[data-theme="glass"] .panel,body[data-theme="glass"] .modal-card{backdrop-filter:blur(24px);background:rgba(255,255,255,.46)}
body[data-theme="glass"] .balance-card{background:linear-gradient(135deg,rgba(35,105,165,.86),rgba(89,190,220,.78));}
body[data-theme="glass"] .metric-card.income{background:rgba(91,219,170,.38)}body[data-theme="glass"] .metric-card.expense{background:rgba(255,132,132,.34)}body[data-theme="glass"] .metric-card.savings{background:rgba(255,208,95,.38)}
/* Theme 3 */
body[data-theme="theme-3"]{--theme-bg:#fff4f6;--theme-surface:#fffafb;--theme-surface-2:#fff0f3;--theme-text:#3a2228;--theme-muted:#8a6e76;--theme-line:#f0d9df;--theme-accent:#e65c73;--theme-accent-2:#ff9d72;--theme-shadow:0 20px 55px rgba(153,67,84,.12)}
body[data-theme="theme-3"] .auth-art{background:radial-gradient(circle at 20% 20%,#ffe0e7,transparent 38%),linear-gradient(135deg,#fff8fa,#fff0f4)}body[data-theme="theme-3"] .balance-card{background:linear-gradient(135deg,#8d3448,#e65c73)}body[data-theme="theme-3"] .metric-card.income{background:linear-gradient(145deg,#fff0f4,#ffd4df)}body[data-theme="theme-3"] .metric-card.expense{background:linear-gradient(145deg,#fff1e9,#ffc9b9)}body[data-theme="theme-3"] .metric-card.savings{background:linear-gradient(145deg,#fff8dd,#ffe7a2)}
/* Theme 4 */
body[data-theme="theme-4"]{--theme-bg:#eef8ff;--theme-surface:#fff;--theme-surface-2:#e5f3ff;--theme-text:#11283d;--theme-muted:#60798d;--theme-line:#d1e7f5;--theme-accent:#09a7d1;--theme-accent-2:#55e2ff;--theme-shadow:0 20px 55px rgba(33,102,135,.12)}body[data-theme="theme-4"] .auth-art{background:radial-gradient(circle at 78% 20%,#c8f6ff,transparent 35%),linear-gradient(135deg,#f8fcff,#e4f7ff)}body[data-theme="theme-4"] .balance-card{background:linear-gradient(135deg,#082b45,#0c7392,#11b9d7)}
/* Theme 5 */
body[data-theme="theme-5"]{--theme-bg:#0b0b0a;--theme-surface:#151412;--theme-surface-2:#201e1a;--theme-text:#fff8e7;--theme-muted:#b9ad96;--theme-line:rgba(242,201,107,.16);--theme-accent:#f2c96b;--theme-accent-2:#ffe7a4;--theme-shadow:0 25px 70px rgba(0,0,0,.45)}body[data-theme="theme-5"] .auth-art{background:radial-gradient(circle at 30% 20%,rgba(242,201,107,.18),transparent 36%),#0b0b0a}body[data-theme="theme-5"] .balance-card{background:linear-gradient(135deg,#17130b,#604a1a,#a47822)}body[data-theme="theme-5"] .btn-primary{color:#201807}
/* Theme 6 */
body[data-theme="theme-6"]{--theme-bg:#f0f3ec;--theme-surface:#fbfcf8;--theme-surface-2:#e7eee1;--theme-text:#24352b;--theme-muted:#6f7f73;--theme-line:#d7e1d2;--theme-accent:#557d61;--theme-accent-2:#8eb79a;--theme-shadow:0 20px 55px rgba(61,85,67,.12)}body[data-theme="theme-6"] .auth-art{background:radial-gradient(circle at 18% 18%,#dfeadb,transparent 38%),#f5f7f1}body[data-theme="theme-6"] .balance-card{background:linear-gradient(135deg,#233a2b,#52745d,#769b7f)}
/* Theme 7 */
body[data-theme="theme-7"]{--theme-bg:#fff4ed;--theme-surface:#fffaf6;--theme-surface-2:#fceddf;--theme-text:#3d2821;--theme-muted:#876e62;--theme-line:#efd8c8;--theme-accent:#c95543;--theme-accent-2:#f18a67;--theme-shadow:0 20px 55px rgba(137,70,53,.12)}body[data-theme="theme-7"] .auth-art{background:radial-gradient(circle at 20% 20%,#ffd9c9,transparent 38%),#fff7f2}body[data-theme="theme-7"] .balance-card{background:linear-gradient(135deg,#713629,#c95543,#e27b5e)}

body[data-theme="theme-1"] .sidebar,body[data-theme="theme-1"] .topbar,body[data-theme="theme-3"] .sidebar,body[data-theme="theme-3"] .topbar,body[data-theme="theme-4"] .sidebar,body[data-theme="theme-4"] .topbar,body[data-theme="theme-6"] .sidebar,body[data-theme="theme-6"] .topbar,body[data-theme="theme-7"] .sidebar,body[data-theme="theme-7"] .topbar{background:rgba(255,255,255,.82)}
body[data-theme="theme-1"] .side-item,body[data-theme="theme-3"] .side-item,body[data-theme="theme-4"] .side-item,body[data-theme="theme-6"] .side-item,body[data-theme="theme-7"] .side-item{color:var(--theme-muted)}
body[data-theme="theme-1"] .side-item:hover,body[data-theme="theme-1"] .side-item.active,body[data-theme="theme-3"] .side-item:hover,body[data-theme="theme-3"] .side-item.active,body[data-theme="theme-4"] .side-item:hover,body[data-theme="theme-4"] .side-item.active,body[data-theme="theme-6"] .side-item:hover,body[data-theme="theme-6"] .side-item.active,body[data-theme="theme-7"] .side-item:hover,body[data-theme="theme-7"] .side-item.active{background:color-mix(in srgb,var(--theme-accent) 12%,transparent);color:var(--theme-accent)}
body[data-theme="theme-1"] .auth-panel,body[data-theme="theme-3"] .auth-panel,body[data-theme="theme-4"] .auth-panel,body[data-theme="theme-6"] .auth-panel,body[data-theme="theme-7"] .auth-panel{background:var(--theme-bg)}
body[data-theme="theme-1"] .auth-card,body[data-theme="theme-3"] .auth-card,body[data-theme="theme-4"] .auth-card,body[data-theme="theme-6"] .auth-card,body[data-theme="theme-7"] .auth-card{background:var(--theme-surface)}

/* Straight, orderly login/card alignment */
.auth-shell{align-items:stretch}.auth-art,.auth-panel{min-width:0}.auth-panel{padding:clamp(24px,5vw,60px)}.auth-card{margin:0 auto}.wallet-art{max-width:620px;width:100%;margin-left:auto;margin-right:auto}.metric-row{align-items:stretch}.metric-card{min-width:0;overflow:hidden}.content-grid{align-items:stretch}.panel{min-width:0}.theme-transition::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at var(--tx,50%) var(--ty,50%),rgba(255,255,255,.18),transparent 20%);opacity:0;z-index:9999}.theme-transition.run::after{animation:themeRipple .7s ease-out forwards}@keyframes themeRipple{0%{opacity:.8;transform:scale(.15)}100%{opacity:0;transform:scale(6)}}
@media(max-width:720px){.theme-top-btn span{display:none}.theme-top-btn{width:42px;padding:0;justify-content:center}.theme-grid{grid-template-columns:1fr}.auth-card{width:100%;padding:28px 22px}.auth-panel{padding:22px}.auth-shell{grid-template-columns:1fr}.auth-art{display:none}}

/* Light appearance of Design 2 when the user explicitly toggles Light Mode */
body[data-theme="theme-2"]:not(.dark){--theme-bg:#eef6f2;--theme-surface:#ffffff;--theme-surface-2:#f2f7f4;--theme-text:#173027;--theme-muted:#6e8078;--theme-line:#dce8e2;--theme-accent:#0fa879;--theme-accent-2:#48d8ad;--theme-shadow:0 20px 55px rgba(30,74,57,.12)}
body[data-theme="theme-2"]:not(.dark) .auth-art{background:radial-gradient(circle at 18% 18%,#c8f5e2,transparent 38%),linear-gradient(135deg,#f5fbf8,#eaf6f0)}
body[data-theme="theme-2"]:not(.dark) .auth-panel,body[data-theme="theme-2"]:not(.dark) .app-shell{background:var(--theme-bg)}
body[data-theme="theme-2"]:not(.dark) .sidebar,body[data-theme="theme-2"]:not(.dark) .topbar{background:rgba(255,255,255,.84)}
body[data-theme="theme-2"]:not(.dark) .side-item{color:var(--theme-muted)}
body[data-theme="theme-2"]:not(.dark) .side-item:hover,body[data-theme="theme-2"]:not(.dark) .side-item.active{background:rgba(15,168,121,.10);color:var(--theme-accent)}

@media(max-width:900px){.topbar-actions{gap:7px}.theme-top-btn{flex:0 0 auto}.auth-shell{min-height:100dvh}.auth-panel{min-height:100dvh}.auth-card{max-width:500px}.theme-grid{max-height:62vh;overflow:auto;padding-right:2px}}

/* Ocean Luxe is the default theme */
body[data-theme="theme-4"] .welcome-screen{background:radial-gradient(circle at 50% 8%,#dff8ff 0,#f5fbff 42%,#ffffff 82%)}
body[data-theme="theme-4"] .welcome-screen h1 strong,body[data-theme="theme-4"] .auth-copy h1 strong{color:#0aa9d6}
body[data-theme="theme-4"] .welcome-benefits i,body[data-theme="theme-4"] .auth-benefits i{color:#08a9d1}
body[data-theme="theme-4"] .welcome-ring{background:linear-gradient(145deg,#d5f5ff,#ffffff);box-shadow:inset 0 0 35px rgba(9,167,209,.16)}
body[data-theme="theme-4"] .welcome-wallet{background:linear-gradient(145deg,#092f4a,#071d31);color:#55e5f4}
body[data-theme="theme-4"] .welcome-chart{background:#e3faff;color:#079ac1}
body[data-theme="theme-4"] .btn-primary{background:linear-gradient(135deg,#078eb5,#16c9e4);box-shadow:0 14px 32px rgba(9,167,209,.24)}
body[data-theme="theme-4"] .brand-mark{background:linear-gradient(145deg,#078eb5,#16c9e4);box-shadow:0 10px 25px rgba(9,167,209,.24)}
body[data-theme="theme-4"] .mini-icon{background:#e3faff;color:#079ac1}
body.dark[data-theme="theme-4"]{--theme-bg:#061522;--theme-surface:#0b2030;--theme-surface-2:#102b3c;--theme-text:#eefaff;--theme-muted:#8faab8;--theme-line:rgba(124,219,241,.16);--theme-accent:#27d7ef;--theme-accent-2:#72ecff;--theme-shadow:0 25px 70px rgba(0,0,0,.42)}
body.dark[data-theme="theme-4"] .welcome-screen{background:radial-gradient(circle at 50% 8%,#103d55 0,#071b2a 46%,#04111c 88%);color:#eefaff}
body.dark[data-theme="theme-4"] .welcome-screen>p:not(.eyebrow),body.dark[data-theme="theme-4"] .welcome-benefits{color:#9cb5c2}
body.dark[data-theme="theme-4"] .auth-art{background:radial-gradient(circle at 20% 20%,rgba(17,137,177,.28),transparent 35%),#061522}
body.dark[data-theme="theme-4"] .auth-panel{background:#061522}
body.dark[data-theme="theme-4"] .auth-card{background:#0b2030;border-color:rgba(124,219,241,.16);box-shadow:0 25px 70px rgba(0,0,0,.34)}
body.dark[data-theme="theme-4"] .field,body.dark[data-theme="theme-4"] .btn-google{background:#102b3c;color:#eefaff;border-color:rgba(124,219,241,.16)}
body.dark[data-theme="theme-4"] .sidebar,body.dark[data-theme="theme-4"] .topbar{background:rgba(8,27,42,.92)}
body.dark[data-theme="theme-4"] .side-user{background:#102b3c}
body.dark[data-theme="theme-4"] .bottom-nav{background:rgba(8,27,42,.94)}
/* Straight login alignment on every viewport */
.auth-panel{align-items:center}.auth-card{box-sizing:border-box}.auth-heading{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.auth-card form{display:grid;gap:12px}.auth-card .field{margin:0}.auth-card .btn-primary{margin-top:2px}.auth-card .divider{margin:18px 0}.auth-mobile-brand{justify-content:center}
@media(max-width:900px){.welcome-screen{min-height:100dvh}.auth-shell{min-height:100dvh}.auth-panel{justify-content:center;align-items:center}.auth-card{max-width:460px}.auth-mobile-brand{margin:0 0 18px}.auth-heading{min-height:auto}}

/* Final UX polish: welcome gate, navigation, profile and clean alignment */
.welcome-screen{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
.welcome-screen .welcome-benefits{margin-top:28px}
.welcome-screen .btn-primary{flex:0 0 auto}
.auth-shell{min-height:100dvh}
.auth-panel{min-height:100dvh}
.auth-card{width:min(430px,100%);max-height:calc(100dvh - 48px);overflow:auto;scrollbar-width:thin}
.auth-heading h2,.auth-heading p{width:100%}
.auth-card form{width:100%}
.auth-card .field{width:100%}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-back{flex:0 0 auto}
.topbar-brand{white-space:nowrap}
.sidebar-backdrop{transition:opacity .22s ease}
.sidebar{will-change:transform}
.profile-panel{padding:0;overflow:hidden}
.profile-hero{display:flex;align-items:center;gap:16px;padding:26px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--theme-accent) 10%,var(--surface)),var(--surface))}
.profile-hero>div{min-width:0;flex:1}
.profile-hero h2{margin:0;font-size:22px;letter-spacing:-.02em}
.profile-hero p{margin:5px 0 0;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.profile-avatar{width:64px;height:64px;border-radius:20px;border:0;background:var(--surface-2);color:var(--theme-accent);display:grid;place-items:center;font-size:24px;overflow:hidden;box-shadow:var(--soft)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-links{display:grid;gap:0;margin:0;padding:10px 14px}
.profile-links button{min-height:64px;padding:12px 14px;border-radius:16px;background:transparent;display:flex;align-items:center;gap:13px;text-align:left;color:var(--text);border:0;transition:background .18s ease,transform .18s ease}
.profile-links button:hover{background:var(--surface-2);transform:translateX(2px)}
.profile-links button>i:first-child{width:22px;text-align:center;color:var(--theme-accent)}
.profile-links button>i:last-child{margin-left:auto;color:var(--muted);font-size:12px}
.profile-links .link-value{margin-left:auto;color:var(--muted);font-size:12px}
.profile-links .danger{color:#d85c55}
.profile-links .danger>i:first-child{color:#d85c55}
.date-chip{margin-left:auto;white-space:nowrap}
.welcome-row>div{min-width:0}
.welcome-row h1{margin:0 0 5px}
@media(max-width:900px){
  .topbar{height:72px;padding:0 14px}
  .sidebar{top:72px;bottom:0;padding-top:18px;z-index:50;border-right:1px solid var(--line);box-shadow:20px 0 50px rgba(0,0,0,.14)}
  .sidebar-backdrop{z-index:45}
  .topbar-brand{font-size:15px}
  .topbar-brand .brand-mark{width:36px;height:36px;border-radius:12px}
  .topbar-back{display:grid!important}
  .welcome-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .welcome-row h1{font-size:25px}
  .date-chip{margin-left:0;flex:0 0 auto}
  .auth-panel{min-height:100dvh;padding:18px 14px 28px}
  .auth-mobile-brand{margin:0 auto 14px}
  .auth-card{max-height:none;overflow:visible}
  .profile-panel{margin-bottom:20px}
}
@media(max-width:520px){
  .welcome-screen{padding:28px 18px}
  .welcome-brand{font-size:18px}
  .welcome-visual{margin-top:28px;transform:scale(.92)}
  .welcome-screen h1{font-size:38px}
  .welcome-screen>p:not(.eyebrow){font-size:14px}
  .welcome-benefits{gap:13px!important;flex-wrap:wrap;justify-content:center}
  .welcome-benefits span{font-size:11px}
  .auth-card{padding:26px 20px;border-radius:24px}
  .auth-heading h2{font-size:26px}
  .auth-mobile-brand{font-size:17px}
  .welcome-row{align-items:flex-start}
  .welcome-row .date-chip{padding:9px 10px;font-size:10px}
  .profile-hero{padding:22px}
}

/* Mobile-first auth layout: one clean column on phones and narrow previews */
@media (max-width: 900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .auth-shell{display:block;width:100%;min-height:100dvh}
  .auth-art{display:none!important}
  .auth-panel{width:100%;min-height:100dvh;min-height:100svh;padding:24px 16px 32px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:var(--theme-bg,#fff)}
  .auth-card{width:min(430px,100%);margin:0 auto;padding:30px 24px;border-radius:26px;box-sizing:border-box;overflow:visible;max-height:none}
  .auth-mobile-brand{display:flex;justify-content:center;margin:0 auto 18px}
  .auth-heading{margin-bottom:20px}
  .auth-heading h2{font-size:28px;line-height:1.15}
  .auth-heading p{font-size:14px;line-height:1.45}
  .auth-card form{gap:11px}
  .auth-card .field{height:54px;margin:0;border-radius:15px;padding:0 14px}
  .auth-card .btn-primary{height:54px;border-radius:15px}
  .auth-card .divider{margin:16px 0}
  .auth-card .btn-google{height:52px;border-radius:15px}
  .auth-switch{margin-top:2px;line-height:1.5}
}

@media (max-width:600px){
  .auth-panel{padding:18px 12px 26px}
  .auth-card{padding:26px 18px;border-radius:24px}
  .auth-heading h2{font-size:25px}
  .auth-heading p{font-size:13px}
  .mini-icon{width:44px;height:44px;border-radius:14px;margin-bottom:11px}
  .auth-mobile-brand{font-size:17px;margin-bottom:14px}
  .auth-mobile-brand .brand-mark{width:38px;height:38px;border-radius:12px}
}

@media (max-width:380px){
  .auth-panel{padding:12px 10px 20px}
  .auth-card{padding:22px 16px;border-radius:22px}
  .auth-heading{margin-bottom:16px}
  .auth-heading h2{font-size:23px}
  .auth-heading p{font-size:12px}
  .auth-card .field{height:50px;font-size:14px}
  .auth-card .btn-primary{height:50px}
  .auth-card .btn-google{height:49px;font-size:13px}
  .auth-card .divider{margin:13px 0}
}

/* Narrow-screen / phone presentation fix
   Keep the full desktop split layout on wide screens, but switch to a true
   single-column mobile auth layout early enough for narrow browser previews. */
@media (max-width:1100px){
  .auth-shell{display:block;width:100%;min-height:100dvh;background:var(--theme-bg,#fff)}
  .auth-art{display:none!important}
  .auth-panel{
    width:100%;min-height:100dvh;min-height:100svh;
    padding:28px 18px 36px;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    box-sizing:border-box;background:var(--theme-bg,#fff);
  }
  .auth-mobile-brand{
    display:flex!important;
    width:min(430px,100%);
    justify-content:flex-start;
    align-items:center;
    margin:4px auto 22px;
    padding:0 4px;
    font-size:18px;
    color:var(--text);
  }
  .auth-mobile-brand .brand-mark{width:42px;height:42px;border-radius:13px}
  .auth-card{
    width:min(430px,100%);
    margin:0 auto;
    padding:30px 24px;
    border-radius:26px;
    box-sizing:border-box;
  }
}

@media (max-width:560px){
  .auth-panel{padding:20px 12px 28px}
  .auth-mobile-brand{width:min(430px,100%);margin:2px auto 16px;font-size:17px;padding:0 3px}
  .auth-mobile-brand .brand-mark{width:38px;height:38px;border-radius:12px}
  .auth-card{padding:26px 18px;border-radius:24px}
}

/* Dashboard mobile polish: keep header clean, metrics visible together, sidebar crisp. */
.notification-dot{display:none!important}
.topbar-brand{flex:1;min-width:0;overflow:visible}
.topbar-brand>span:last-child{overflow:visible;text-overflow:clip;white-space:nowrap}
.topbar-actions{flex:0 0 auto}

@media(max-width:900px){
  .topbar{padding:0 12px;gap:8px}
  .topbar-left{flex:1;min-width:0}
  .topbar-brand{font-size:14px;gap:8px}
  .topbar-brand .brand-mark{width:34px;height:34px;min-width:34px;border-radius:11px}
  .topbar-actions{gap:6px}
  .topbar-actions .round-btn,.topbar-actions .avatar,.topbar-actions .theme-top-btn{width:36px;height:36px;min-width:36px;border-radius:11px}
  .sidebar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--theme-surface,#fff);color:var(--theme-text,#16211d);box-shadow:18px 0 42px rgba(0,0,0,.16)}
  .sidebar *{filter:none!important;text-shadow:none!important;opacity:1}
  .side-item{color:var(--theme-text,#16211d);-webkit-font-smoothing:antialiased}
  .side-user{background:var(--theme-surface-2,#f1f5f3)}
}

@media(max-width:600px){
  .main-content{padding:20px 12px 92px}
  .welcome-row{gap:8px;margin-bottom:16px}
  .welcome-row h1{font-size:23px}
  .welcome-row .muted{font-size:12px}
  .date-chip{padding:8px 9px;font-size:9px}
  .metric-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
  .metric-card{min-height:112px;padding:11px 8px;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}
  .metric-icon{width:34px;height:34px;min-width:34px;border-radius:11px;font-size:13px}
  .metric-card span{font-size:10px;line-height:1.1}
  .metric-card strong{font-size:12px;line-height:1.15;margin:3px 0}
  .metric-card small{font-size:8px;line-height:1.1;white-space:nowrap}
  .metric-card small i{font-size:7px}
}

@media(max-width:390px){
  .topbar{padding:0 9px}
  .topbar-brand{font-size:13px;gap:6px}
  .topbar-brand .brand-mark{width:31px;height:31px;min-width:31px;border-radius:10px}
  .topbar-actions{gap:4px}
  .topbar-actions .round-btn,.topbar-actions .avatar,.topbar-actions .theme-top-btn{width:33px;height:33px;min-width:33px;border-radius:10px}
  .metric-row{gap:6px}
  .metric-card{padding:9px 6px;min-height:106px}
  .metric-card strong{font-size:11px}
  .metric-card small{font-size:7px}
}

/* Sidebar clarity fix */
.sidebar {
  display:flex;
  flex-direction:column;
  background:var(--surface) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  isolation:isolate;
  box-shadow:18px 0 48px rgba(10,24,19,.14);
}
.sidebar::before,.sidebar::after { display:none !important; }
.side-nav { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:2px; }
.sidebar-bottom {
  position:static;
  left:auto; right:auto; bottom:auto;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:grid;
  gap:5px;
  flex:none;
}
.sidebar .side-item { flex:none; opacity:1 !important; filter:none !important; text-shadow:none !important; }
.sidebar-backdrop { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* Keep theme/profile controls visually separated */
.sidebar-bottom .side-item { min-height:46px; }
.sidebar-bottom .side-item + .side-item { margin-top:1px; }

@media (max-width:900px) {
  .sidebar {
    top:72px;
    bottom:0;
    height:calc(100vh - 72px);
    width:min(290px,88vw);
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    border-right:1px solid var(--line);
    border-top:1px solid var(--line);
    box-shadow:18px 0 48px rgba(10,24,19,.20);
    transform:translateX(-110%);
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-brand { padding:0 8px 18px; }
  .side-user { margin-bottom:12px; }
  .side-nav { gap:4px; }
  .sidebar-bottom { margin-top:10px; padding-top:10px; }
  .sidebar-backdrop.show { background:rgba(8,16,13,.28); }
}

body.dark .sidebar { background:var(--surface) !important; box-shadow:18px 0 48px rgba(0,0,0,.34); }
body[data-theme="glass"] .sidebar { background:var(--surface) !important; }

.btn-google:disabled{opacity:.72;cursor:wait;transform:none}