@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--bg:#f4f7f4;--surface:#fff;--surface2:#f8faf8;--ink:#10251d;--muted:#718078;--green:#0d5945;--green2:#19866a;--mint:#dff2eb;--line:#e4ebe7;--red:#d95d5d;--gold:#e7ae43}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.brand{font:800 22px Manrope;color:var(--green)}.brand span{color:var(--green2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;padding:11px 16px;background:var(--green);color:white;font-weight:800;cursor:pointer}.btn.light{background:var(--surface);color:var(--green);border:1px solid var(--line)}.btn:hover{transform:translateY(-1px)}
.container{max-width:1240px;margin:auto;padding:0 24px}.navbar{height:76px;background:rgba(255,255,255,.9);backdrop-filter:blur(15px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.navbar .container{height:100%;display:flex;align-items:center;justify-content:space-between}.navlinks{display:flex;gap:24px;align-items:center}.navlinks a{font-size:13px;font-weight:700;color:#65736c}
.hero{padding:90px 0 70px;background:radial-gradient(circle at 80% 20%,#dff2eb 0,transparent 32%)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.eyebrow{display:inline-block;padding:8px 12px;border-radius:99px;background:var(--mint);color:var(--green);font-size:11px;font-weight:800}.hero h1{font:800 56px/1.03 Manrope;letter-spacing:-2px;margin:18px 0}.hero h1 span{color:var(--green2)}.hero p{color:var(--muted);font-size:17px;line-height:1.7}.actions{display:flex;gap:10px;margin-top:25px}.mock{background:#fff;border:1px solid var(--line);border-radius:24px;padding:15px;box-shadow:0 20px 60px #10251d12}.mock-inner{background:#f4f7f4;border-radius:17px;padding:18px}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mini{background:#fff;border-radius:12px;padding:13px}.mini small{color:var(--muted);font-size:9px}.mini b{display:block;margin-top:6px;font:800 17px Manrope}.mock-chart{height:150px;background:linear-gradient(180deg,#e1f2eb,#fff);border-radius:12px;margin-top:12px}
.section{padding:70px 0}.center{text-align:center}.section h2{font:800 35px Manrope}.intro{max-width:650px;margin:0 auto 30px;color:var(--muted);line-height:1.7}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.feature{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:22px}.feature:hover{box-shadow:0 15px 40px #10251d0b;transform:translateY(-3px)}.icon{width:42px;height:42px;border-radius:12px;background:var(--mint);display:grid;place-items:center}.feature h3{font:700 17px Manrope;margin:15px 0 7px}.feature p{color:var(--muted);font-size:13px;line-height:1.6}.cta{background:var(--green);border-radius:22px;color:white;padding:35px;display:flex;align-items:center;justify-content:space-between}.cta h2{font:800 29px Manrope;margin:0 0 7px}.cta p{color:#cbe0d8}.footer{padding:25px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;justify-content:space-between}

.app{display:flex;min-height:100vh}.sidebar{width:240px;position:fixed;inset:0 auto 0 0;background:#fbfcfa;border-right:1px solid var(--line);padding:25px 15px;z-index:5}.sidebar .brand{display:block;padding:0 14px 28px}.side-title{font-size:10px;color:#9aa49f;letter-spacing:1px;text-transform:uppercase;padding:0 14px 8px}.side-nav{display:grid;gap:4px;margin-bottom:20px}.side-nav a{padding:11px 13px;border-radius:11px;color:#64736b;font-size:13px;font-weight:800}.side-nav a:hover,.side-nav a.active{background:var(--mint);color:var(--green)}.main{margin-left:240px;width:calc(100% - 240px);padding:28px;max-width:1500px}.topbar,.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.topbar h1,.page-head h1{font:800 27px Manrope;margin:0}.topbar p,.page-head p{margin:6px 0 0;color:var(--muted);font-size:13px}.user-pill{padding:10px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-weight:800;font-size:13px}.clock{font-size:11px;color:var(--muted);font-weight:800}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 5px 22px #10251d05}.stat-label{font-size:12px;color:var(--muted)}.stat-value{font:800 25px Manrope;margin-top:9px}.green-text{color:var(--green2)}.two{display:grid;grid-template-columns:1.45fr 1fr;gap:17px;margin-top:17px}.chart-box{height:300px}.card-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.card-title h2{font:700 17px Manrope;margin:0}.muted{color:var(--muted)}.small{font-size:12px}.progress{height:9px;background:#edf1ee;border-radius:99px;overflow:hidden}.progress div{height:100%;background:var(--green2);border-radius:99px}.budget-num{font:800 42px Manrope;margin:25px 0 8px}.row{display:flex;justify-content:space-between}.insight{background:var(--mint);color:var(--green);padding:12px;border-radius:11px;font-size:12px;line-height:1.5;margin-top:16px}.badge{display:inline-block;padding:6px 9px;border-radius:99px;background:var(--mint);color:var(--green);font-size:10px;font-weight:800}
.expense-row{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line)}.expense-row:last-child{border:0}.expense-left{display:flex;align-items:center;gap:11px}.expense-icon{width:42px;height:42px;border-radius:12px;background:var(--mint);display:grid;place-items:center}.expense-name{font-weight:800;font-size:13px}.expense-meta{font-size:11px;color:var(--muted);margin-top:3px}.amount{font-weight:800}.delete{border:0;background:none;color:var(--red);cursor:pointer;margin-left:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:6px}.field input,.field select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);outline:0}.analytics{display:grid;grid-template-columns:1fr 1fr;gap:17px}.bars{display:grid;gap:16px}.bar-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.forecast-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}.big{font:800 28px Manrope;margin:8px 0}.goals{display:grid;grid-template-columns:1.1fr .9fr;gap:17px}.goal-big{font:800 38px Manrope}.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.months{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.month{padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--surface2)}.month b{display:block;font:800 20px Manrope;margin:6px 0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.limit-row{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.limit-row:last-child{border:0}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:25px;background:#f4f7f4}.auth-shell{width:min(950px,100%);display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:25px;overflow:hidden;box-shadow:0 20px 60px #10251d15}.auth-brand{padding:48px;background:linear-gradient(145deg,#0d5945,#19866a);color:#fff}.auth-brand h1{font:800 40px/1.06 Manrope;margin:30px 0 12px}.auth-brand p{color:#cce2da;line-height:1.7}.auth-form{padding:42px}.auth-tabs{display:flex;background:#f5f7f5;padding:4px;border-radius:10px;margin-bottom:24px}.auth-tabs button{flex:1;border:0;background:none;padding:10px;border-radius:8px;font-weight:800;cursor:pointer}.auth-tabs button.active{background:#fff;color:var(--green);box-shadow:0 2px 8px #00000008}.auth-field{margin-bottom:13px}.auth-field label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:6px}.auth-field input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px}.auth-msg{font-size:12px;color:var(--red);margin-top:10px;min-height:17px}
body[data-theme=dark]{--bg:#09110e;--surface:#101a16;--surface2:#14211b;--ink:#edf7f2;--muted:#92a59c;--line:#26362f;--mint:#143b30}body[data-theme=dark] .sidebar,body[data-theme=dark] .navbar{background:#0c1511}
body[data-theme=ocean]{--bg:#f2f7fb;--green:#155b78;--green2:#2087ad;--mint:#dff1f8;--ink:#122a3b}
body[data-theme=purple]{--bg:#f7f5fb;--green:#5b3c91;--green2:#8161c4;--mint:#eee7fa;--ink:#251d38}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.stats,.report-summary{grid-template-columns:1fr 1fr}.two,.analytics,.goals,.settings-grid{grid-template-columns:1fr}.forecast{grid-template-columns:1fr}}
@media(max-width:720px){.navlinks{display:none}.hero h1{font-size:42px}.features{grid-template-columns:1fr}.sidebar{position:static;width:100%;border-right:0;border-bottom:1px solid var(--line)}.app{display:block}.main{margin-left:0;width:100%;padding:16px}.side-nav{grid-template-columns:repeat(3,1fr)}.side-title{display:none}.form-grid,.months{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.page-head{align-items:flex-start}.topbar{align-items:flex-start}}

/* Profile + first-time workspace */
.profile-pill{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);cursor:pointer;text-align:left}.profile-pill small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green);font-weight:800}.big-avatar{width:54px;height:54px;font-size:18px}.profile-card{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.profile-main{display:flex;align-items:center;gap:15px}.profile-main h2{font:800 23px Manrope;margin:7px 0 3px}.profile-main p{margin:0;color:var(--muted);font-size:13px}.setup-card{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:17px;border:1px solid #b9ddd1;background:linear-gradient(135deg,var(--surface),var(--mint))}.setup-card h2{font:800 20px Manrope;margin:8px 0 5px}.setup-card p{max-width:680px;margin:0;line-height:1.6}.setup-form{min-width:280px;display:grid;grid-template-columns:1fr auto;gap:8px}.setup-form input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);outline:0}.setup-form .auth-msg{grid-column:1/-1;margin:0}.empty-state{padding:28px 12px;text-align:center;color:var(--muted)}.empty-state b{color:var(--ink);display:block;font-size:14px}.empty-state p{margin:6px 0 0;font-size:12px}.empty-icon{width:45px;height:45px;border-radius:14px;background:var(--mint);color:var(--green);display:grid;place-items:center;margin:0 auto 10px;font-weight:800}.modal{position:fixed;inset:0;background:rgba(16,37,29,.35);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px;z-index:30}.modal.show{display:flex}.modal-card{width:min(520px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 25px 80px rgba(0,0,0,.18)}.modal-close{border:0;background:var(--surface2);color:var(--ink);width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer}.modal-card .card-title h2{margin:7px 0 0}.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.account-card{display:flex;align-items:center;justify-content:space-between}.limit-input{width:150px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
@media(max-width:720px){.setup-card,.profile-card,.account-card{display:block}.setup-form{margin-top:15px;min-width:0}.profile-card .btn{margin-top:15px}.profile-pill{display:none}.modal-actions{flex-direction:column}.limit-input{width:100%}}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.stat{font-size:30px;font-weight:800;margin-top:8px}.plan-list{display:grid;gap:10px;margin-top:14px}.plan-item{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}.plan-item b{font-size:15px}.plan-item .plan-amount{font-weight:800;color:var(--green)}.advice-item{padding:12px 0;border-bottom:1px solid var(--line)}.advice-item:last-child{border-bottom:0}.advice-title{font-weight:800;margin-bottom:4px}.warning{background:#fff7e6;border:1px solid #f1d79a;padding:12px 14px;border-radius:12px;margin-top:10px}.success{background:var(--mint);padding:12px 14px;border-radius:12px;margin-top:10px}@media(max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}.plan-item{align-items:flex-start;flex-direction:column}}

.report-actions{display:flex;align-items:center;gap:10px}.year-select{padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);font-weight:700;outline:0}.month{display:flex;flex-direction:column;gap:2px}.future-month{background:var(--mint)}@media(max-width:720px){.report-actions{flex-wrap:wrap}.year-select{width:100%}}

.theme-switcher{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 12px;font:inherit;font-weight:700;cursor:pointer;outline:none;box-shadow:0 2px 8px rgba(16,37,29,.04)}
.theme-switcher:focus{border-color:var(--green2);box-shadow:0 0 0 3px var(--mint)}


/* Colorful SmartSpend Dashboard */
.dashboard-main{background:radial-gradient(circle at 80% 4%,rgba(57,211,180,.13),transparent 24%),radial-gradient(circle at 55% 35%,rgba(99,102,241,.07),transparent 22%);min-height:100vh}
.dashboard-main .topbar{padding:18px 20px;border-radius:22px;background:linear-gradient(100deg,#effaf5 0%,#f5fbff 52%,#fff3fb 100%);border:1px solid #dcebe6;box-shadow:0 12px 35px rgba(16,37,29,.06)}
.dashboard-main .topbar h1{font-size:30px}.dashboard-main .topbar h1 span{background:linear-gradient(90deg,#087f65,#2c8eea,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.dashboard-main .profile-card{background:linear-gradient(120deg,#ffffff 0%,#eefcf6 55%,#f3efff 100%);border-color:#cfe8df;box-shadow:0 12px 35px rgba(16,37,29,.07)}
.dashboard-main .profile-card .badge{background:#d9f7ec;color:#08705a}
.dashboard-main .dashboard-stats .card{position:relative;overflow:hidden;border:0;color:#fff;box-shadow:0 14px 35px rgba(16,37,29,.12);min-height:126px}
.dashboard-main .dashboard-stats .card:nth-child(1){background:linear-gradient(135deg,#0eb77a,#19c879)}
.dashboard-main .dashboard-stats .card:nth-child(2){background:linear-gradient(135deg,#2587ef,#37b9f2)}
.dashboard-main .dashboard-stats .card:nth-child(3){background:linear-gradient(135deg,#7656e8,#a36cf2)}
.dashboard-main .dashboard-stats .card:nth-child(4){background:linear-gradient(135deg,#f3a41b,#ffc52f)}
.dashboard-main .dashboard-stats .card:after{content:'';position:absolute;width:110px;height:110px;border-radius:50%;right:-30px;top:-35px;background:rgba(255,255,255,.13);box-shadow:-45px 60px 0 rgba(255,255,255,.07)}
.dashboard-main .dashboard-stats .stat-label{color:rgba(255,255,255,.86);font-weight:700}.dashboard-main .dashboard-stats .stat-value{font-size:28px;color:#fff}.dashboard-main .dashboard-stats .green-text{color:#fff}
.dashboard-main .card{transition:transform .2s ease,box-shadow .2s ease}.dashboard-main .card:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(16,37,29,.09)}
.dashboard-main .two:first-of-type .card:first-child{background:linear-gradient(180deg,#fff,#f4fbff);border-color:#d7eaf4}
.dashboard-main .two:first-of-type .card:nth-child(2){background:linear-gradient(180deg,#fff,#f4fff8);border-color:#d5eee4}
.dashboard-main .two:nth-of-type(2) .card:first-child{background:linear-gradient(135deg,#f4efff,#fff);border-color:#e1d8fa}
.dashboard-main .two:nth-of-type(2) .card:nth-child(2){background:linear-gradient(135deg,#fff8e9,#fff);border-color:#f1dfb5}
.dashboard-main .insight{background:linear-gradient(90deg,#dff8ed,#e8f5ff);color:#116b59}
.dashboard-main .expense-row:hover{background:#f6fbf9;border-radius:10px;padding-left:8px;padding-right:8px}
.dashboard-main .setup-card{background:linear-gradient(120deg,#eafaf3,#edf6ff,#f6efff);border-color:#cfe5df}
.dashboard-main .theme-switcher{background:linear-gradient(135deg,#fff,#f4f8ff);border-color:#cfe1ed}
.dashboard-main .budget-num{color:#08745b}
.dashboard-main .progress{background:#e9eff4}.dashboard-main .progress div{background:linear-gradient(90deg,#16b982,#3b9bea,#8b5cf6)}
body.dashboard-colorful .sidebar{background:linear-gradient(180deg,#063e3a 0%,#07564d 55%,#073a3b 100%);border-right:0;color:#fff}
body.dashboard-colorful .sidebar .brand{color:#fff}body.dashboard-colorful .sidebar .brand span{color:#50e0bd}body.dashboard-colorful .side-title{color:#a9d5cc}body.dashboard-colorful .side-nav a{color:#d3e9e5}body.dashboard-colorful .side-nav a:hover,body.dashboard-colorful .side-nav a.active{background:linear-gradient(90deg,#16b890,#1fb7a0);color:#fff;box-shadow:0 8px 20px rgba(20,191,151,.18)}
body.dashboard-colorful .sidebar:after{content:'Smart money.\A Better habits.\A Bigger future.';white-space:pre;position:absolute;left:24px;right:24px;bottom:28px;padding:18px;border:1px solid rgba(255,255,255,.17);border-radius:18px;background:linear-gradient(135deg,rgba(14,183,122,.2),rgba(97,78,207,.2));color:#e8fff8;font-weight:800;font-size:12px;line-height:1.65}
@media(max-width:1000px){.dashboard-main .dashboard-stats{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.dashboard-main .topbar{padding:14px}.dashboard-main .dashboard-stats{grid-template-columns:1fr}.dashboard-main .topbar{display:block}.dashboard-main .theme-switcher{margin-top:12px}}
.spending-chart{width:100%;height:100%;min-height:300px}.spending-chart svg{display:block;width:100%;height:100%}

/* ===== Dashboard theme support ===== */
body.dashboard-colorful[data-theme="dark"]{
  --bg:#07131a;--surface:#0e1c25;--surface2:#132633;--ink:#eef8ff;--muted:#9db0bb;--line:#29404d;--mint:#163c4b;
  background:var(--bg);color:var(--ink);
}
body.dashboard-colorful[data-theme="dark"] .dashboard-main{
  background:radial-gradient(circle at 80% 4%,rgba(42,180,220,.16),transparent 25%),radial-gradient(circle at 55% 35%,rgba(139,92,246,.14),transparent 25%);
}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .topbar{
  background:linear-gradient(100deg,#102c34 0%,#11283b 52%,#2a1935 100%);border-color:#294653;color:var(--ink);
}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .profile-card,
body.dashboard-colorful[data-theme="dark"] .dashboard-main .two .card,
body.dashboard-colorful[data-theme="dark"] .dashboard-main > .card:not(.setup-card){
  background:linear-gradient(120deg,#0f2029 0%,#122a32 55%,#211b35 100%);border-color:#294653;color:var(--ink);
}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .two:first-of-type .card:first-child{background:linear-gradient(180deg,#0f2029,#102733);border-color:#294b5b}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .two:first-of-type .card:nth-child(2){background:linear-gradient(180deg,#10242b,#102e28);border-color:#285047}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .two:nth-of-type(2) .card:first-child{background:linear-gradient(135deg,#1c1730,#142331);border-color:#443b68}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .two:nth-of-type(2) .card:nth-child(2){background:linear-gradient(135deg,#2a2415,#17242d);border-color:#55451e}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .profile-card .badge{background:#183f4a;color:#78e1c5}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .theme-switcher{background:#10232e;color:#eef8ff;border-color:#3b5967}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .btn.light{background:#122633;color:#eef8ff;border-color:#3b5967}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .insight{background:linear-gradient(90deg,#153d37,#17364a);color:#a9f1dd}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .progress{background:#263944}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .expense-row:hover{background:#152a33}

body.dashboard-colorful[data-theme="ocean"]{
  --bg:#edf7fc;--surface:#fff;--surface2:#f4fbff;--ink:#102b3d;--muted:#617b8a;--line:#d5e8f2;--mint:#dff3fb;
  background:var(--bg);color:var(--ink);
}
body.dashboard-colorful[data-theme="ocean"] .dashboard-main{
  background:radial-gradient(circle at 80% 4%,rgba(32,135,173,.16),transparent 25%),radial-gradient(circle at 55% 35%,rgba(59,130,246,.09),transparent 25%);
}
body.dashboard-colorful[data-theme="ocean"] .dashboard-main .topbar{background:linear-gradient(100deg,#e9f9ff,#edf6ff 52%,#f2efff);border-color:#cfe4ee}
body.dashboard-colorful[data-theme="ocean"] .dashboard-main .profile-card{background:linear-gradient(120deg,#fff,#eaf9ff 55%,#eef2ff);border-color:#c9e4f0}
body.dashboard-colorful[data-theme="ocean"] .dashboard-main .two:first-of-type .card:first-child{background:linear-gradient(180deg,#fff,#effaff);border-color:#cfe6f2}
body.dashboard-colorful[data-theme="ocean"] .dashboard-main .two:first-of-type .card:nth-child(2){background:linear-gradient(180deg,#fff,#effbf8);border-color:#ccebe5}
body.dashboard-colorful[data-theme="ocean"] .dashboard-main .theme-switcher{background:#f7fcff;border-color:#c5deea;color:#12384c}
body.dashboard-colorful[data-theme="ocean"] .dashboard-main .progress div{background:linear-gradient(90deg,#16b9a1,#2587ef,#6366f1)}

body.dashboard-colorful[data-theme="purple"]{
  --bg:#f5f1fb;--surface:#fff;--surface2:#faf7ff;--ink:#271b3d;--muted:#756984;--line:#e4daf3;--mint:#eee5fb;
  background:var(--bg);color:var(--ink);
}
body.dashboard-colorful[data-theme="purple"] .dashboard-main{
  background:radial-gradient(circle at 80% 4%,rgba(139,92,246,.17),transparent 25%),radial-gradient(circle at 55% 35%,rgba(236,72,153,.08),transparent 25%);
}
body.dashboard-colorful[data-theme="purple"] .dashboard-main .topbar{background:linear-gradient(100deg,#f7efff,#f2edff 52%,#fff0f7);border-color:#e2d4f2}
body.dashboard-colorful[data-theme="purple"] .dashboard-main .profile-card{background:linear-gradient(120deg,#fff,#f5efff 55%,#fff0f7);border-color:#dfd0f1}
body.dashboard-colorful[data-theme="purple"] .dashboard-main .two:first-of-type .card:first-child{background:linear-gradient(180deg,#fff,#f7f2ff);border-color:#e2d7f3}
body.dashboard-colorful[data-theme="purple"] .dashboard-main .two:first-of-type .card:nth-child(2){background:linear-gradient(180deg,#fff,#f7f4ff);border-color:#dfd7ef}
body.dashboard-colorful[data-theme="purple"] .dashboard-main .theme-switcher{background:#fff9ff;border-color:#d8c8ed;color:#382052}
body.dashboard-colorful[data-theme="purple"] .dashboard-main .progress div{background:linear-gradient(90deg,#14b89a,#7c3aed,#ec4899)}

/* Keep text and controls readable in every theme. */
body.dashboard-colorful[data-theme] .dashboard-main .muted,
body.dashboard-colorful[data-theme] .dashboard-main .topbar p{color:var(--muted)}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .clock{color:#a7bbc5}
body.dashboard-colorful[data-theme="dark"] .dashboard-main .profile-pill{background:#10232e;color:#eef8ff;border-color:#3b5967}

/* ===== Premium dashboard interactions (visual only) ===== */
.dashboard-main{position:relative;isolation:isolate;overflow:hidden}
.dashboard-main::before{content:"";position:fixed;z-index:-1;width:520px;height:520px;left:calc(var(--cursor-x, 50vw) - 260px);top:calc(var(--cursor-y, 50vh) - 260px);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(35,211,170,.11) 0%,rgba(73,122,255,.055) 35%,transparent 70%);filter:blur(8px);transition:left .12s ease-out,top .12s ease-out}
.dashboard-main .topbar{position:relative;overflow:hidden;background:linear-gradient(120deg,#ffffff,#f1fbf7 42%,#f5f0ff 72%,#fff2f7);background-size:220% 220%;animation:premiumGradient 12s ease infinite;box-shadow:0 14px 40px rgba(16,37,29,.07)}
.dashboard-main .topbar::after{content:"";position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);transform:translateX(-45%);animation:topbarShine 8s ease-in-out infinite;pointer-events:none}
.dashboard-main .topbar>*{position:relative;z-index:1}
.dashboard-main .card{position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease}
.dashboard-main .card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%),rgba(255,255,255,.24),transparent 30%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.dashboard-main .card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(17,37,61,.13);border-color:rgba(45,185,155,.35)}
.dashboard-main .card:hover::before{opacity:1}
.dashboard-main .dashboard-stats .card{cursor:default;transform-style:preserve-3d}
.dashboard-main .dashboard-stats .card:hover{transform:translateY(-8px) scale(1.018)}
.dashboard-main .dashboard-stats .card:nth-child(1){background:linear-gradient(135deg,#09b978,#20d68d,#0cae8a);background-size:200% 200%;animation:statGreen 8s ease infinite}
.dashboard-main .dashboard-stats .card:nth-child(2){background:linear-gradient(135deg,#2385ef,#37c3ef,#2563eb);background-size:200% 200%;animation:statBlue 8s ease infinite}
.dashboard-main .dashboard-stats .card:nth-child(3){background:linear-gradient(135deg,#7352e9,#a35df3,#7c3aed);background-size:200% 200%;animation:statPurple 8s ease infinite}
.dashboard-main .dashboard-stats .card:nth-child(4){background:linear-gradient(135deg,#f39b17,#ffd03b,#f59e0b);background-size:200% 200%;animation:statGold 8s ease infinite}
.dashboard-main .dashboard-stats .card::after{width:140px;height:140px;right:-35px;top:-45px;animation:floatBlob 5s ease-in-out infinite}
.dashboard-main .dashboard-stats .card:nth-child(2)::after{animation-delay:-1.2s}.dashboard-main .dashboard-stats .card:nth-child(3)::after{animation-delay:-2.2s}.dashboard-main .dashboard-stats .card:nth-child(4)::after{animation-delay:-3.2s}
.dashboard-main .side-nav a{position:relative;overflow:hidden;transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease}
.dashboard-main .side-nav a::after{content:"";position:absolute;left:-110%;top:0;width:80%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transition:left .45s ease}
.dashboard-main .side-nav a:hover{transform:translateX(5px) scale(1.01)}
.dashboard-main .side-nav a:hover::after,.dashboard-main .side-nav a.active::after{left:125%}
.dashboard-main .btn,.dashboard-main .theme-switcher,.dashboard-main .profile-pill{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.dashboard-main .btn:hover,.dashboard-main .theme-switcher:hover,.dashboard-main .profile-pill:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(20,120,100,.14)}
.dashboard-main .badge{box-shadow:0 4px 14px rgba(20,120,100,.08)}
.dashboard-main .chart-box{position:relative}
.dashboard-main .chart-box::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(120deg,transparent 0%,rgba(88,170,255,.045) 48%,transparent 72%);background-size:220% 100%;animation:chartSweep 7s linear infinite}
.dashboard-main .insight{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

@keyframes premiumGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes topbarShine{0%,62%,100%{transform:translateX(-45%)}78%{transform:translateX(45%)}}
@keyframes statGreen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes statBlue{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@keyframes statPurple{0%,100%{background-position:0% 100%}50%{background-position:100% 0%}}
@keyframes statGold{0%,100%{background-position:100% 0%}50%{background-position:0% 100%}}
@keyframes floatBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12px,12px) scale(1.08)}}
@keyframes chartSweep{0%{background-position:-120% 0}100%{background-position:120% 0}}
@media (prefers-reduced-motion:reduce){.dashboard-main *,.dashboard-main::before{animation:none!important;transition:none!important}}

/* SmartSpend complete-upgrade additions */
.expense-tools{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:10px;margin:0 0 12px}
.expense-tools input,.expense-tools select{width:100%;min-width:0;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface2);color:var(--ink);outline:0}
.expense-tools input:focus,.expense-tools select:focus,.field input:focus,.field select:focus{border-color:var(--green2);box-shadow:0 0 0 3px color-mix(in srgb,var(--green2) 14%,transparent)}
.goal-contribution{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.goal-contribution h2{font:700 17px Manrope;margin:0 0 7px}
.backup-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.backup-actions label{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--green2) 45%,transparent);outline-offset:2px}
@media(max-width:720px){.expense-tools{grid-template-columns:1fr}.expense-row{gap:10px;align-items:flex-start}.expense-row>div:last-child{white-space:nowrap}.backup-actions{align-items:stretch;flex-direction:column}.backup-actions .btn,.backup-actions label{width:100%}}

/* Clickable year calendar and month-specific expense view */
.month{cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;position:relative}.month:hover,.month:focus-visible{transform:translateY(-2px);border-color:var(--green2);box-shadow:0 8px 22px rgba(30,40,70,.08);outline:none}.month-open-hint{font-size:11px;font-weight:800;color:var(--green2);margin-top:7px}.month-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.month-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.month-stat{padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--surface2);display:flex;flex-direction:column;gap:6px}.month-stat b{font:800 21px Manrope;color:var(--ink)}@media(max-width:720px){.month-detail-stats{grid-template-columns:1fr}.month-detail-head{display:block}.month-detail-head>.btn{margin-top:12px}}

/* Monthly and yearly spending comparisons (no daily graph) */
.comparison-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
.comparison-card{padding:20px;margin-top:0}
.comparison-kicker{font-size:10px;letter-spacing:1.2px;font-weight:900;color:var(--muted);margin-bottom:8px}
.comparison-card h2,.comparison-card h3{font:800 16px Manrope;margin:0 0 10px;color:var(--ink)}
.comparison-value{font:800 25px Manrope;margin:7px 0 8px;color:var(--ink)}
.comparison-value.increase{color:#dc4b4b}
.comparison-value.decrease{color:#15966a}
.comparison-value.neutral{color:var(--muted)}
.comparison-card p{margin:0;line-height:1.6}
.month-comparison{margin:0 0 18px;background:var(--surface2)}
@media(max-width:720px){.comparison-card{padding:16px}.comparison-value{font-size:21px}}

/* Five dashboard metrics: current-month spend, lifetime spend, monthly budget, safe-to-spend and score */
.dashboard-main .dashboard-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.dashboard-main .dashboard-stats .card:nth-child(5){background:linear-gradient(135deg,#0f9f91,#20c7b1);background-size:200% 200%;animation:statGreen 8s ease infinite}
.dashboard-main .dashboard-stats .card:nth-child(5)::after{animation-delay:-3.8s}
@media(max-width:1200px){.dashboard-main .dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.dashboard-main .dashboard-stats{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.dashboard-main .dashboard-stats{grid-template-columns:1fr}}

/* ===== SmartSpend landing page refresh ===== */
.landing-page{overflow-x:hidden;background:#f5f8f6;color:#10271f}
.landing-nav{height:78px;background:rgba(255,255,255,.88);box-shadow:0 1px 0 rgba(18,60,45,.04)}
.landing-nav .brand{font-size:24px;letter-spacing:-.8px}.brand-dot{display:inline-block;width:7px;height:7px;margin-left:3px;border-radius:50%;background:#20b58b;vertical-align:top;box-shadow:0 0 0 4px #20b58b18}
.landing-nav .navlinks{gap:27px}.landing-nav .navlinks a:not(.btn){transition:color .2s}.landing-nav .navlinks a:not(.btn):hover{color:var(--green2)}
.nav-cta{padding:12px 18px;border-radius:12px;box-shadow:0 8px 18px #0d59451c}.nav-cta span,.hero-primary span,.cta-button span{font-size:17px;transition:transform .2s}.nav-cta:hover span,.hero-primary:hover span,.cta-button:hover span{transform:translate(3px,-2px)}.mobile-cta{display:none}
.landing-hero{position:relative;isolation:isolate;overflow:hidden;padding:78px 0 35px;background:radial-gradient(ellipse at 80% 24%,rgba(189,237,220,.65),transparent 34%),linear-gradient(120deg,#f5f9f6 0%,#f2f8f5 58%,#f7fbf8 100%)}
.landing-hero::before{content:"";position:absolute;z-index:-1;inset:0;opacity:.24;background-image:radial-gradient(#9bc9b6 .7px,transparent .7px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,black 80%)}
.hero-grid.landing-hero-grid{grid-template-columns:1.02fr .98fr;gap:55px;min-height:500px}
.hero-copy{position:relative;z-index:2;padding:15px 0 28px}.hero-eyebrow{background:#e1f4ec;color:#087457;padding:9px 14px;font-size:10px;letter-spacing:1.05px}.eyebrow-spark{font-size:13px;margin-right:4px}
.landing-hero h1{font-size:clamp(48px,5.1vw,70px);line-height:1.04;letter-spacing:-3.5px;margin:23px 0 19px;max-width:650px;color:#10271f}.landing-hero h1 span{display:block;background:linear-gradient(95deg,#0c785c 5%,#20a783 55%,#3c9c83 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{max-width:570px;font-size:16px!important;line-height:1.8!important;color:#718078!important}.hero-actions{gap:12px;margin-top:28px}.hero-primary{padding:15px 20px;border-radius:13px;background:linear-gradient(120deg,#075d47,#128565);box-shadow:0 12px 24px #0d76551f}.hero-secondary{padding:14px 18px;border-radius:13px;background:#ffffffc9}.play-icon{font-size:10px;color:#148266}.hero-trust{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:27px;color:#75847c;font-size:11px;font-weight:600}.trust-check{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#d9f3e8;color:#087455;font-size:10px}.trust-separator{color:#b3c1ba}
.hero-visual{position:relative;min-height:470px;display:grid;place-items:center;perspective:1100px}.visual-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#c9f1e1 0%,rgba(212,244,231,.55) 42%,transparent 70%);filter:blur(8px);animation:glowPulse 7s ease-in-out infinite}.dashboard-preview{position:relative;z-index:2;width:min(100%,510px);padding:25px;border:1px solid rgba(255,255,255,.9);border-radius:25px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(26,76,57,.13),0 5px 18px rgba(26,76,57,.05);transition:transform .25s ease;transform-style:preserve-3d}.preview-top,.preview-month,.budget-line,.budget-foot{display:flex;align-items:center;justify-content:space-between}.preview-label{font-size:9px;letter-spacing:1.3px;font-weight:900;color:#91a49a}.preview-top h2{font:800 21px Manrope;margin:7px 0 0;letter-spacing:-.5px}.live-dot{font-size:10px;font-weight:800;color:#0a8664;background:#e2f7ed;padding:7px 10px;border-radius:30px}.preview-month{margin:25px 0 11px;color:#7b8982;font-size:11px;font-weight:700}.month-pill{padding:7px 10px;border:1px solid #e7efea;border-radius:9px;background:#fff;color:#53665c;font-size:10px}.preview-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-metric{padding:15px;border:1px solid #edf2ef;border-radius:14px;background:linear-gradient(145deg,#fff,#fbfdfb)}.preview-metric>span,.preview-metric small{display:block;color:#819088;font-size:10px}.preview-metric b{display:block;font:800 24px Manrope;letter-spacing:-.7px;margin:7px 0 4px;color:#142b22}.preview-metric small.metric-down{color:#138466;font-weight:700}.budget-preview{padding:17px 16px 14px;margin-top:11px;border-radius:15px;background:linear-gradient(135deg,#f0faf5,#f8fcf9);border:1px solid #e6f2eb}.budget-line{font-size:11px;color:#66776e}.budget-line b{font:800 13px Manrope;color:#087858}.budget-track{height:9px;border-radius:20px;background:#dcebe3;overflow:hidden;margin:11px 0 8px}.budget-track i{display:block;width:85%;height:100%;border-radius:20px;background:linear-gradient(90deg,#16a77d,#52c99c);animation:budgetFill 1.5s ease-out both}.budget-foot{font-size:9px;color:#83928a}.budget-foot span:first-child{font-weight:800;color:#128363}.preview-bottom{display:flex;align-items:center;gap:12px;margin-top:15px;padding:13px 3px 0}.preview-ring{width:43px;height:43px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1aa77e 0 85%,#e4f1e9 85%);position:relative}.preview-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}.preview-ring span{position:relative;font:800 11px Manrope;color:#0d7255}.preview-ring small{font-size:7px;color:#8b9b92}.preview-bottom>div:nth-child(2){display:grid;gap:4px}.preview-bottom b{font:800 11px Manrope;color:#244137}.preview-bottom small{font-size:9px;line-height:1.5;color:#87948d}.preview-arrow{margin-left:auto;color:#179775;font-size:20px}.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid #ffffffd9;border-radius:15px;background:rgba(255,255,255,.9);box-shadow:0 14px 35px rgba(25,77,56,.12);backdrop-filter:blur(12px);animation:chipFloat 5s ease-in-out infinite}.float-chip b,.float-chip small{display:block}.float-chip b{font:800 10px Manrope;color:#244137}.float-chip small{font-size:9px;color:#84938b;margin-top:3px}.chip-icon,.saving-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:10px;background:#e3f6ed;color:#118263;font-weight:900}.chip-top{top:47px;right:-8px}.chip-bottom{bottom:38px;left:-22px;animation-delay:-2.5s}.saving-icon{background:#e8edff;color:#526fd0;font-size:17px}.visual-spark{position:absolute;color:#36b88f;animation:sparkFloat 4s ease-in-out infinite}.spark-a{top:18%;left:8%;font-size:24px}.spark-b{right:7%;bottom:18%;font-size:17px;animation-delay:-2s}.hero-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);pointer-events:none}.orb-one{width:160px;height:160px;left:-90px;top:20%;background:#dff3e9}.orb-two{width:110px;height:110px;right:-50px;bottom:8%;background:#e4f5ed}.hero-bottom{display:flex;align-items:center;justify-content:center;gap:12px;color:#94a39b;font-size:10px;font-weight:700;letter-spacing:.2px;margin-top:22px}.scroll-line,.hero-bottom-line{height:1px;width:45px;background:#d5e5dc}
.landing-features{padding:90px 0 96px;background:#fff}.section-heading{text-align:center;max-width:700px;margin:0 auto 38px}.section-heading .eyebrow,.how-copy .eyebrow{font-size:9px;letter-spacing:1.3px}.section-heading h2,.how-copy h2{font:800 clamp(30px,4vw,43px)/1.15 Manrope;letter-spacing:-1.8px;margin:17px 0 12px;color:#152e24}.section-heading h2 span,.how-copy h2 span{color:#168568}.section-heading .intro{font-size:14px;max-width:590px;margin-bottom:0}.landing-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.landing-feature{position:relative;min-height:225px;padding:23px;border-radius:18px;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.landing-feature::after{content:"";position:absolute;width:130px;height:130px;right:-75px;bottom:-75px;border-radius:50%;background:#e6f5ee;transition:transform .35s ease}.landing-feature:hover{transform:translateY(-6px);border-color:#c9e7d9;box-shadow:0 18px 40px rgba(26,74,54,.09)}.landing-feature:hover::after{transform:scale(1.7)}.feature-top{display:flex;justify-content:space-between;align-items:center}.feature-icon{width:43px;height:43px;font-size:21px;font-weight:800}.mint-icon{background:#e2f6ed;color:#0e8966}.blue-icon{background:#e8f2ff;color:#3977c9}.purple-icon{background:#f0eaff;color:#8059c6}.gold-icon{background:#fff3dc;color:#c58a21}.coral-icon{background:#ffebe7;color:#d76a54}.feature-index{font:800 10px Manrope;color:#b1c0b8}.landing-feature h3{font:800 16px Manrope;margin:17px 0 7px;color:#20382e}.landing-feature p{font-size:12px;line-height:1.7;color:#7b8982;max-width:290px;margin:0 0 17px}.feature-link{position:relative;z-index:1;font-size:10px;font-weight:800;color:#138365}.feature-link b{font-size:15px;margin-left:4px;transition:margin .2s}.landing-feature:hover .feature-link b{margin-left:9px}
.how-section{padding:85px 0;background:linear-gradient(120deg,#f1f8f4,#f7faf8)}.how-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}.how-copy h2{max-width:400px}.how-copy p{max-width:390px;color:#78877f;font-size:14px;line-height:1.8;margin:0 0 23px}.how-copy .btn{padding:13px 17px}.steps-list{border-top:1px solid #dfeae3}.step-item{display:grid;grid-template-columns:45px 1fr 35px;gap:16px;align-items:center;padding:22px 5px;border-bottom:1px solid #dfeae3}.step-number{font:800 11px Manrope;color:#15916e}.step-item h3{font:800 14px Manrope;margin:0 0 5px;color:#20382e}.step-item p{font-size:11px;line-height:1.6;color:#829087;margin:0}.step-symbol{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#e1f3e9;color:#168366;font-size:17px}
.landing-cta-section{padding:75px 0;background:#fff}.landing-cta{position:relative;overflow:hidden;padding:43px 48px;border-radius:24px;background:radial-gradient(circle at 90% 10%,#1c8968 0,transparent 32%),linear-gradient(120deg,#0b4e3d,#0e7054 65%,#0c604a);box-shadow:0 22px 50px rgba(9,85,62,.16)}.landing-cta h2{position:relative;z-index:1;font:800 clamp(24px,3.5vw,34px) Manrope;letter-spacing:-1px;margin:10px 0}.landing-cta p{position:relative;z-index:1;color:#c3e2d6;font-size:13px;margin:0}.cta-kicker{position:relative;z-index:1;font-size:9px;font-weight:900;letter-spacing:1.4px;color:#9de4c9}.cta-button{position:relative;z-index:1;padding:14px 19px;border-radius:12px;white-space:nowrap}.cta-decoration{position:absolute;right:23%;top:-100px;font-size:280px;line-height:1;color:#ffffff0b;transform:rotate(15deg)}.landing-footer{background:#fff}.landing-footer .footer{padding:24px 0;gap:20px;flex-wrap:wrap}.landing-footer .brand{font-size:19px}.landing-footer .footer>span{font-size:10px}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes sparkFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(18deg)}}@keyframes glowPulse{0%,100%{transform:scale(.95);opacity:.75}50%{transform:scale(1.08);opacity:1}}@keyframes budgetFill{from{width:0}to{width:85%}}
@media(max-width:1000px){.hero-grid.landing-hero-grid{gap:25px}.landing-hero h1{font-size:54px}.chip-top{right:0}.chip-bottom{left:0}.how-grid{gap:35px}.landing-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.landing-nav{height:66px}.landing-nav .container{padding:0 18px}.landing-nav .navlinks{display:none}.mobile-cta{display:inline-flex;padding:10px 13px;border-radius:10px;background:#0d5945;color:#fff;font-size:11px;font-weight:800}.landing-hero{padding:54px 0 27px}.hero-grid.landing-hero-grid{grid-template-columns:1fr;gap:10px}.landing-hero h1{font-size:clamp(43px,12vw,57px);letter-spacing:-2.6px}.hero-lead{font-size:14px!important}.hero-actions{flex-wrap:wrap}.hero-primary,.hero-secondary{padding:13px 14px;font-size:12px}.hero-visual{min-height:390px;margin:8px 0 0}.dashboard-preview{padding:18px;border-radius:20px;width:calc(100% - 22px)}.preview-top h2{font-size:18px}.preview-metric b{font-size:21px}.chip-top{top:12px;right:-1px}.chip-bottom{bottom:7px;left:-1px}.float-chip{padding:9px 11px}.hero-bottom{font-size:9px;margin-top:15px}.landing-features,.how-section{padding:65px 0}.section-heading h2,.how-copy h2{font-size:32px}.landing-feature-grid{grid-template-columns:1fr}.landing-feature{min-height:0;padding:20px}.landing-feature p{max-width:100%}.how-grid{grid-template-columns:1fr;gap:30px}.step-item{grid-template-columns:35px 1fr 30px;gap:10px}.landing-cta-section{padding:55px 0}.landing-cta{padding:30px 24px;display:block}.cta-button{margin-top:22px}.landing-footer .footer{align-items:flex-start;flex-direction:column;gap:9px}}
@media(prefers-reduced-motion:reduce){.landing-page *{animation:none!important;scroll-behavior:auto!important;transition:none!important}.tilt-card{transform:none!important}}


/* Stable sidebar navigation: active page stays selected; hover motion is separate. */
.side-nav a{position:relative;display:flex;align-items:center;min-height:42px;transform:none;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease;will-change:background-color}
.side-nav a.active,.side-nav a[aria-current="page"]{background:var(--mint);color:var(--green);box-shadow:inset 3px 0 0 var(--green2);transform:none}
.side-nav a:hover:not(.active){background:color-mix(in srgb,var(--mint) 62%,transparent);color:var(--green);transform:translateX(3px)}
.side-nav a:focus-visible{outline:3px solid color-mix(in srgb,var(--green2) 35%,transparent);outline-offset:2px}
/* The shine is a hover-only effect. It must never sweep repeatedly on the selected item. */
.dashboard-main .side-nav a::after{left:-110%;transition:left .35s ease}
.dashboard-main .side-nav a:hover:not(.active)::after{left:125%}
.dashboard-main .side-nav a.active::after{display:none}
.dashboard-main .side-nav a:hover:not(.active){transform:translateX(4px)}
body.dashboard-colorful .side-nav a.active,body.dashboard-colorful .side-nav a[aria-current="page"]{background:linear-gradient(90deg,#16b890,#1fb7a0);color:#fff;box-shadow:inset 3px 0 0 rgba(255,255,255,.8),0 7px 18px rgba(20,191,151,.14)}
@media(prefers-reduced-motion:reduce){.side-nav a{transition:none!important}.side-nav a:hover:not(.active){transform:none}}

/* Consistent SmartSpend sidebar: same emerald active state on every page/theme. */
.sidebar .side-nav a {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
  will-change: transform;
}
.sidebar .side-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #10b981;
  opacity: 0;
  transform: scaleY(.55);
  transition: opacity .16s ease, transform .16s ease;
}
.sidebar .side-nav a.active,
.sidebar .side-nav a[aria-current="page"],
body.dashboard-colorful .sidebar .side-nav a.active,
body.dashboard-colorful .sidebar .side-nav a[aria-current="page"] {
  background: #e5f7ef !important;
  color: #087653 !important;
  border-color: #c5ebda !important;
  box-shadow: inset 3px 0 0 #10b981, 0 5px 14px rgba(16,185,129,.09) !important;
  transform: none;
}
.sidebar .side-nav a.active::before,
.sidebar .side-nav a[aria-current="page"]::before { opacity: 0; transform: scaleY(1); }
.sidebar .side-nav a:hover:not(.active) {
  background: #f0faf5 !important;
  color: #087653 !important;
  border-color: #d8f0e4 !important;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(16,185,129,.07);
}
.sidebar .side-nav a:hover:not(.active)::before { opacity: 1; transform: scaleY(1); }
.sidebar .side-nav a:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sidebar .side-nav a, .sidebar .side-nav a::before { transition: none !important; }
  .sidebar .side-nav a:hover:not(.active) { transform: none; }
}


/* FINAL NAV ACTIVE STATE FIX
   Emerald-filled active item on every app page and theme.
   This small override preserves the existing layout and scripts. */
.sidebar .side-nav a.active,
.sidebar .side-nav a[aria-current="page"] {
  background: linear-gradient(105deg, #10b981 0%, #0fae91 100%) !important;
  color: #ffffff !important;
  border: 1px solid #0fae91 !important;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.9),
              0 7px 18px rgba(16,185,129,.20) !important;
  transform: none !important;
  font-weight: 800;
}
.sidebar .side-nav a.active::before,
.sidebar .side-nav a[aria-current="page"]::before {
  opacity: 0 !important;
}
.sidebar .side-nav a:hover:not(.active) {
  background: #e5f7ef !important;
  color: #087653 !important;
  border-color: #c5ebda !important;
  box-shadow: 0 5px 14px rgba(16,185,129,.10) !important;
  transform: translateX(4px);
}
.sidebar .side-nav a.active:hover,
.sidebar .side-nav a[aria-current="page"]:hover {
  background: linear-gradient(105deg, #0da979 0%, #0b9d83 100%) !important;
  color: #ffffff !important;
  transform: none !important;
}


/* SMARTSPEND GLOBAL SIDEBAR THEME
   Keep the complete workspace sidebar identical on every internal page.
   This intentionally overrides light/dark/ocean/purple page-level sidebar colors. */
body:not(.landing-page) .sidebar {
  background: linear-gradient(180deg, #063e3a 0%, #07564d 55%, #073a3b 100%) !important;
  border-right: 0 !important;
  color: #ffffff !important;
  box-shadow: 5px 0 24px rgba(4, 54, 48, .08);
}
body:not(.landing-page) .sidebar .brand {
  color: #ffffff !important;
}
body:not(.landing-page) .sidebar .brand span {
  color: #50e0bd !important;
}
body:not(.landing-page) .sidebar .side-title {
  color: #a9d5cc !important;
}
body:not(.landing-page) .sidebar .side-nav a {
  color: #d3e9e5 !important;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body:not(.landing-page) .sidebar .side-nav a.active,
body:not(.landing-page) .sidebar .side-nav a[aria-current="page"] {
  background: linear-gradient(90deg, #16b890, #1fb7a0) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.85), 0 7px 18px rgba(20,191,151,.18) !important;
  transform: none !important;
}
body:not(.landing-page) .sidebar .side-nav a:hover:not(.active) {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.12) !important;
  transform: translateX(4px);
  box-shadow: none !important;
}
body:not(.landing-page) .sidebar:after {
  content: 'Smart money.\A Better habits.\A Bigger future.';
  white-space: pre;
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14,183,122,.2), rgba(97,78,207,.2));
  color: #e8fff8;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.65;
  pointer-events: none;
}
@media (max-width: 720px) {
  body:not(.landing-page) .sidebar:after { display: none; }
}


/* SMARTSPEND ACTIVE NAV: WHITE PILL + DARK LABEL */
body:not(.landing-page) .sidebar .side-nav a.active,
body:not(.landing-page) .sidebar .side-nav a[aria-current="page"] {
  background: #ffffff !important;
  color: #073f39 !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: inset 4px 0 0 #10b981,
              0 7px 20px rgba(0,0,0,.12) !important;
  font-weight: 800 !important;
  transform: none !important;
}
body:not(.landing-page) .sidebar .side-nav a.active *,
body:not(.landing-page) .sidebar .side-nav a[aria-current="page"] * {
  color: #073f39 !important;
}
body:not(.landing-page) .sidebar .side-nav a.active:hover,
body:not(.landing-page) .sidebar .side-nav a[aria-current="page"]:hover {
  background: #ffffff !important;
  color: #073f39 !important;
  transform: none !important;
}


/* SMARTSPEND SECONDARY PAGES — VISUAL POLISH
   Shared presentation layer for Expenses, Analytics, Forecast, Goals,
   Advisor, Yearly Report and Settings. Keeps existing page structure/logic. */
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) {
  background:
    radial-gradient(circle at 92% 0%, rgba(16,185,129,.075), transparent 24rem),
    var(--bg);
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .main {
  padding-top: 32px;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .page-head {
  position: relative;
  padding: 5px 0 17px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .page-head h1 {
  font-size: clamp(25px, 2.2vw, 32px);
  letter-spacing: -.7px;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .page-head p {
  font-size: 14px;
  line-height: 1.6;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .card,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .forecast-card {
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--line) 78%, var(--green2) 22%);
  box-shadow: 0 8px 26px rgba(18, 55, 43, .045);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .card:hover,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .forecast-card:hover {
  border-color: color-mix(in srgb, var(--line) 35%, var(--green2) 65%);
  box-shadow: 0 13px 32px rgba(18, 55, 43, .075);
  transform: translateY(-2px);
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .card-title h2 {
  font-size: 18px;
  letter-spacing: -.25px;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .btn {
  border-radius: 12px;
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 17px rgba(16, 125, 91, .14);
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) input,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) select,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) textarea,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .year-select {
  border-radius: 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) input:focus,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) select:focus,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) textarea:focus,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .year-select:focus {
  border-color: var(--green2);
  box-shadow: 0 0 0 3px var(--mint);
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .insight,
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .success {
  border: 1px solid color-mix(in srgb, var(--green2) 18%, transparent);
  background: linear-gradient(110deg, var(--mint), color-mix(in srgb, var(--surface) 65%, #dff5ee));
  border-radius: 14px;
  line-height: 1.65;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .badge {
  padding: 7px 11px;
  letter-spacing: .2px;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .expense-row {
  padding: 16px 10px;
  border-radius: 13px;
  transition: background .16s ease, padding .16s ease;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .expense-row:hover {
  background: var(--surface2);
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .expense-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .forecast-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--surface), var(--surface2));
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .forecast-card::after {
  content: "";
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  right: -38px;
  top: -42px;
  background: color-mix(in srgb, var(--mint) 75%, transparent);
  pointer-events: none;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .forecast-card > * {
  position: relative;
  z-index: 1;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .month {
  border-radius: 15px;
  padding: 17px;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .month:hover {
  border-color: var(--green2);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16,125,91,.08);
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .comparison-card {
  background: linear-gradient(135deg, var(--surface), var(--surface2));
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .plan-item {
  border-radius: 15px;
  transition: border-color .16s ease, background .16s ease;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .plan-item:hover {
  border-color: var(--green2);
  background: var(--mint);
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .settings-grid .card {
  padding: 23px;
}
body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .limit-row {
  padding: 14px 0;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .card,
  body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .forecast-card,
  body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .btn,
  body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .month {
    transition: none !important;
  }
}
@media (max-width: 720px) {
  body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .main { padding: 20px 15px; }
  body:not(.dashboard-colorful):not(.landing-page):not(.auth-page) .page-head { margin-bottom: 18px; }
}


/* Feature update: colourful details while preserving existing SmartSpend layout */
.card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(65,48,110,.10);border-color:#c6b5e9}
.btn{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 22px rgba(91,58,145,.22)}.btn:active{transform:translateY(0) scale(.985)}
.side-nav a{transition:transform .2s ease,background .2s ease,color .2s ease}.side-nav a:hover{transform:translateX(4px)}
input,select{transition:border-color .2s ease,box-shadow .2s ease}input:focus,select:focus{outline:none;box-shadow:0 0 0 3px rgba(101,65,165,.13);border-color:#9674cb!important}
#add{background:linear-gradient(135deg,#fff 0%,#fbf8ff 100%);border-top:3px solid #8b68c2}#add .card-title h2:before{content:"✦";color:#8a64c3;margin-right:9px}#expenseForm .btn{background:linear-gradient(110deg,#6742a7,#8560c5)}
#expenseList .expense-row{border-radius:14px;transition:background .2s ease,transform .2s ease}#expenseList .expense-row:hover{background:#f5f0ff;transform:translateX(4px)}
.monthly-donut-card{margin-top:17px;border-top:3px solid #58a7d8}.monthly-donut-card .chart-box{max-width:650px;margin:auto;height:300px}
.forecast-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:17px}.forecast-mini{padding:22px;border:1px solid #d9ccef;border-radius:18px;background:linear-gradient(145deg,#fff,#f5f0ff);box-shadow:0 8px 24px rgba(87,60,140,.06)}.forecast-mini:nth-child(2){background:linear-gradient(145deg,#fff,#eef8ff);border-color:#cfe5f3}.forecast-mini:nth-child(3){background:linear-gradient(145deg,#fff,#effaf5);border-color:#cfe9dc}.forecast-mini b{display:block;font-size:25px;color:#33234f;margin:10px 0 5px}.forecast-mini small{color:#7d7b8c;line-height:1.5}
.forecast-meter-card,.forecast-advice-card{margin-top:15px}.forecast-meter-head,.forecast-meter-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}.forecast-meter-head h2{margin:6px 0 15px}.forecast-meter{height:13px;background:#eeeaf5;border-radius:20px;overflow:hidden}.forecast-meter div{height:100%;width:0;background:linear-gradient(90deg,#7652b3,#52b69a);border-radius:20px;transition:width .7s ease}.forecast-meter-foot{font-size:12px;color:#888;margin-top:8px}
.forecast-advice-card{display:flex;gap:16px;align-items:center;background:linear-gradient(110deg,#f4edff,#effaf6);border-color:#ddd0f4}.forecast-advice-icon{width:48px;height:48px;flex:none;border-radius:15px;display:grid;place-items:center;background:#e2d5fb;color:#6842a4;font-size:25px}#forecastAdvice b,#forecastAdvice span{display:block}#forecastAdvice b{font-size:17px;color:#39285a;margin:5px 0}#forecastAdvice span{font-size:13px;color:#737386;line-height:1.55}
.goal-empty{padding:22px 8px;text-align:center;max-width:580px;margin:auto}.goal-empty-icon{font-size:48px;margin-bottom:10px}.goal-empty h3{font-size:23px;color:#30234c;margin:8px 0}.goal-empty p{font-size:14px;color:#7d7a89;line-height:1.7}.goal-steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:20px}.goal-steps span{background:#f0eaff;color:#6845a4;border-radius:30px;padding:8px 12px;font-size:11px;font-weight:700}
.goal-progress-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.goal-kicker{font-size:10px;letter-spacing:1.5px;color:#8b7aab;font-weight:800}.goal-big{font-size:60px!important;line-height:1;margin:12px 0!important;color:#6541a5!important}.goal-big small{font-size:25px}.goal-copy{font-size:14px;color:#777487}.goal-ring{--goal-progress:0%;width:122px;height:122px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#7853b6 var(--goal-progress),#eee8f7 0);position:relative;flex:none}.goal-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:white}.goal-ring>div{z-index:1;text-align:center}.goal-ring b,.goal-ring span{display:block}.goal-ring b{font-size:23px;color:#4e347b}.goal-ring span{font-size:10px;color:#888}.goal-numbers{display:flex;gap:12px;margin-top:19px}.goal-numbers span{flex:1;padding:13px;background:#f8f5ff;border-radius:12px}.goal-numbers b,.goal-numbers small{display:block}.goal-numbers b{font-size:17px;color:#4b3475}.goal-numbers small{font-size:11px;color:#8b8797;margin-top:3px}.goal-hint{margin-top:16px;padding:12px 14px;border-radius:10px;background:#eef9f3;color:#42745c;font-size:13px}
.report-summary .card{position:relative;overflow:hidden;border:0;color:#fff}.report-summary .card:nth-child(1){background:linear-gradient(135deg,#6541a5,#9270cb)}.report-summary .card:nth-child(2){background:linear-gradient(135deg,#258b83,#58b6a1)}.report-summary .card:nth-child(3){background:linear-gradient(135deg,#347fb1,#69b2d4)}.report-summary .card:nth-child(4){background:linear-gradient(135deg,#d27b43,#efad64)}.report-summary .card .stat-label{color:rgba(255,255,255,.82)}.report-summary .card .stat-value{color:#fff;font-size:29px}
.months .month{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.months .month:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(45,45,75,.12)}.months .month:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--month-color,#8b75c2)}
.months .month:nth-child(12n+1){--month-color:#6c63c7;background:#f3f0ff}.months .month:nth-child(12n+2){--month-color:#d96f9a;background:#fff0f5}.months .month:nth-child(12n+3){--month-color:#4ba58b;background:#eefaf5}.months .month:nth-child(12n+4){--month-color:#e3a447;background:#fff8e9}.months .month:nth-child(12n+5){--month-color:#4f98c8;background:#eef7fd}.months .month:nth-child(12n+6){--month-color:#8d79c4;background:#f5f0ff}.months .month:nth-child(12n+7){--month-color:#d47d54;background:#fff2eb}.months .month:nth-child(12n+8){--month-color:#5aa6a3;background:#edf9f8}.months .month:nth-child(12n+9){--month-color:#a57aaf;background:#f8f0fa}.months .month:nth-child(12n+10){--month-color:#6f9b57;background:#f1f8ed}.months .month:nth-child(12n+11){--month-color:#c36f65;background:#fff1ef}.months .month:nth-child(12n){--month-color:#7289b8;background:#f0f4fc}.months .month b{color:#2e2545}.months .month-open-hint{color:var(--month-color);font-weight:800}
.settings-grid>.card:first-child{background:linear-gradient(135deg,#fff,#f6f1ff);border-top:3px solid #8b68c2}
@media(max-width:850px){.forecast-extra{grid-template-columns:1fr}.goal-progress-top{align-items:flex-start}.goal-ring{width:96px;height:96px}}



/* Dedicated selected-month category doughnut */
.month-category-card{margin-top:17px;border-top:3px solid #e3a447}
.month-category-card .chart-box{height:320px;max-width:760px;margin:0 auto}
.monthly-donut-card{margin-top:17px}
@media(max-width:700px){.month-category-card .chart-box{height:360px}}

/* Monthly category doughnut and matching spend bars share one row */
.monthly-category-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:17px;align-items:stretch}
.monthly-category-row .month-category-card,.monthly-category-row .month-category-bars-card{margin-top:0;min-width:0}
.monthly-category-row .month-category-card .chart-box{height:320px;max-width:100%;margin:0 auto}
.month-category-bars-card .bars{display:flex;flex-direction:column;gap:17px;padding-top:12px}
.monthly-category-bar-item .row{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.monthly-category-bar-item .progress{height:9px;border-radius:20px;background:#edf1ef;overflow:hidden}
.monthly-category-bar-item .progress>div{height:100%;border-radius:20px;background:linear-gradient(90deg,#8060c2,#49ad91);transition:width .5s ease}
@media(max-width:850px){.monthly-category-row{grid-template-columns:1fr}.monthly-category-row .month-category-card .chart-box{height:300px}}