:root{--ink:#17211d;--muted:#69736e;--line:#deddd6;--paper:#f5f3ee;--card:#fff;--green:#1d654f;--mint:#dcebe2;--orange:#d97941;--orange-soft:#fae8dc;--red:#a84b42;--shadow:0 14px 40px rgba(31,43,37,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}.app-shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh}.sidebar{padding:30px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;font:700 20px Manrope;margin:0 8px 42px}.brand-mark{width:35px;height:35px;border-radius:12px;background:var(--green);color:white;display:grid;place-items:center;transform:rotate(-7deg)}.nav{display:grid;gap:7px}.nav button{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:11px;color:var(--muted);font:600 14px inherit;display:flex;gap:12px;align-items:center;cursor:pointer}.nav button.active{background:#e7e5de;color:var(--ink)}.nav .icon{width:19px;font-size:17px}.sidebar-foot{margin-top:auto}.user-card{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;cursor:pointer}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:700;font-size:13px;background:var(--green)}.user-meta strong,.user-meta span{display:block}.user-meta strong{font-size:13px}.user-meta span{font-size:11px;color:var(--muted)}.main{padding:32px 46px 60px;max-width:1500px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{font-size:12px;color:var(--muted);font-weight:600}.title{font:700 28px Manrope;margin:4px 0 0}.top-actions{display:flex;gap:10px;align-items:center}.btn{border:1px solid var(--line);background:white;border-radius:10px;padding:10px 15px;font:600 13px inherit;cursor:pointer;color:var(--ink)}.btn.primary{border-color:var(--green);background:var(--green);color:white}.icon-btn{width:39px;height:39px;padding:0}.stats{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;margin-bottom:18px}.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;min-height:144px}.stat-label{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}.stat-value{font:700 30px Manrope;margin:17px 0 7px}.stat-note{font-size:12px;color:var(--muted)}.pill{font-size:11px;padding:5px 8px;border-radius:20px;background:var(--mint);color:var(--green)}.pill.warm{background:var(--orange-soft);color:#9b522d}.progress{height:6px;background:#e7e7e2;border-radius:6px;margin:17px 0 9px;overflow:hidden}.progress span{display:block;height:100%;background:var(--orange);border-radius:6px}.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr);gap:18px}.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.panel-head h2{font:700 16px Manrope;margin:0}.select,.input{border:1px solid var(--line);border-radius:9px;background:white;padding:8px 10px;font:500 12px inherit;color:var(--ink)}.chart{height:190px;display:flex;align-items:end;gap:12px;padding-top:15px;border-bottom:1px solid var(--line)}.bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}.bar{width:min(32px,75%);min-height:3px;background:#afc9ba;border-radius:7px 7px 2px 2px;transition:.3s}.bar.today{background:var(--green)}.bar-label{font-size:10px;color:var(--muted);height:18px}.section-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 12px}.section-head h2{font:700 16px Manrope;margin:0}.filters{display:flex;gap:7px}.transaction{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #ecebe7}.transaction:last-child{border:0}.cat-icon{width:39px;height:39px;border-radius:12px;background:#edf0ec;display:grid;place-items:center}.tx-main strong,.tx-main span{display:block}.tx-main strong{font-size:13px}.tx-main span{font-size:11px;color:var(--muted);margin-top:3px}.amount{text-align:right;font-weight:700;font-size:13px}.amount small{display:block;color:var(--muted);font-weight:400;margin-top:3px}.empty{text-align:center;color:var(--muted);padding:35px 10px}.category{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;margin:17px 0}.category .mini-progress{height:4px;background:#eee;border-radius:4px;margin-top:7px}.category .mini-progress span{height:100%;display:block;border-radius:4px}.category strong{font-size:12px}.category small{color:var(--muted);font-size:10px}.category-amount{font:700 12px Manrope}.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,20,.38);display:grid;place-items:center;padding:20px;z-index:10}.modal{background:white;border-radius:18px;padding:26px;width:min(510px,100%);box-shadow:var(--shadow)}.modal h2{font:700 20px Manrope;margin:0}.modal-sub{color:var(--muted);font-size:12px;margin:7px 0 22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:700;color:var(--muted)}.field input,.field select{padding:11px;border:1px solid var(--line);border-radius:9px;font:500 13px inherit;width:100%}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.users-list{display:grid;gap:8px;margin:16px 0}.user-option{padding:12px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;cursor:pointer}.user-option.active{border-color:var(--green);background:#f0f7f3}.delete-btn{margin-left:auto;border:0;background:transparent;color:var(--red);cursor:pointer}.toast{position:fixed;right:28px;bottom:28px;background:var(--ink);color:white;padding:12px 17px;border-radius:10px;font-size:12px;z-index:20}.mobile-nav{display:none}
@media(max-width:900px){.app-shell{display:block}.sidebar{display:none}.main{padding:24px 18px 90px}.stats{grid-template-columns:1fr 1fr}.stats .stat:first-child{grid-column:1/-1}.content-grid{grid-template-columns:1fr}.mobile-nav{display:flex;position:fixed;z-index:5;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--line);justify-content:space-around;padding:10px 6px}.mobile-nav button{border:0;background:none;color:var(--muted);font-size:18px}.logout-btn{width:40px;height:40px;padding:0;display:grid;place-items:center}.logout-label{display:none}.logout-icon{display:inline;font-size:20px;line-height:1}}
@media(max-width:560px){.topbar{align-items:flex-start}.title{font-size:23px}.stats{grid-template-columns:1fr}.stats .stat:first-child{grid-column:auto}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.panel{padding:17px}.chart{gap:5px}.main{padding-left:12px;padding-right:12px}}
.page-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.page-tools .input{min-width:280px}.settings-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.settings-grid h2{font:700 16px Manrope;margin:0 0 18px}.progress.big{height:10px}.save-budget{margin-top:20px;width:100%}.row-delete{display:block;margin:5px 0 0 auto;border:0;background:transparent;color:var(--red);font:600 10px inherit;cursor:pointer}.mobile-nav button.active{color:var(--green)}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}}
@media(max-width:560px){.page-tools{align-items:stretch;flex-direction:column}.page-tools .input{min-width:0;width:100%}.page-tools .filters{width:100%}.page-tools .filters .input{min-width:0}}

/* 2026 visual refresh */
:root{--ink:#17251f;--muted:#697970;--line:#dce4dd;--paper:#f4f1e9;--card:#fffdf8;--green:#174f3d;--mint:#dcece2;--orange:#db7650;--orange-soft:#fae5d9;--shadow:0 18px 50px rgba(33,65,51,.09)}
body{background:
 radial-gradient(circle at 92% 4%,rgba(219,118,80,.12),transparent 22rem),
 radial-gradient(circle at 8% 85%,rgba(93,138,112,.10),transparent 24rem),
 var(--paper)}
.sidebar{background:rgba(248,247,241,.82);backdrop-filter:blur(18px);border-color:rgba(23,79,61,.1)}
.brand{color:var(--green);letter-spacing:-.6px}.brand-mark{background:linear-gradient(145deg,#256f57,#113d2f);box-shadow:0 8px 18px rgba(23,79,61,.25)}
.nav button{transition:background .2s,color .2s,transform .2s}.nav button:hover{background:rgba(220,236,226,.68);color:var(--green);transform:translateX(2px)}.nav button.active{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(23,79,61,.18)}
.main:has(#range)::before{content:"";display:block;height:205px;margin-bottom:22px;border-radius:22px;background-image:linear-gradient(90deg,rgba(23,79,61,.04),transparent 46%),url("assets/daybook-hero.png");background-position:center;background-size:cover;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7)}
.panel,.stat{border-color:rgba(23,79,61,.11);box-shadow:0 8px 26px rgba(33,65,51,.045);transition:transform .2s,box-shadow .2s}.panel:hover,.stat:hover{box-shadow:var(--shadow)}
.stat:first-child{background:linear-gradient(135deg,#174f3d,#2c7059);color:white;border:0}.stat:first-child .stat-label,.stat:first-child .stat-note{color:rgba(255,255,255,.72)}.stat:first-child .pill{background:rgba(255,255,255,.16);color:#fff}
.btn{transition:transform .18s,box-shadow .18s,background .18s}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(23,79,61,.12)}.btn.primary{background:linear-gradient(135deg,#256f57,#174f3d);box-shadow:0 8px 18px rgba(23,79,61,.18)}
.select,.input,.field input,.field select{background:#fffefa;border-color:#d8e0da;transition:border-color .2s,box-shadow .2s}.select:focus,.input:focus,.field input:focus,.field select:focus{outline:0;border-color:#5c957a;box-shadow:0 0 0 3px rgba(92,149,122,.14)}
.cat-icon{background:linear-gradient(145deg,#eef4ef,#e3ebe5);box-shadow:inset 0 0 0 1px rgba(23,79,61,.05)}.transaction{transition:background .18s,padding .18s}.transaction:hover{background:#f7f9f5;padding-left:7px;padding-right:7px;border-radius:10px}
.avatar{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 5px 14px rgba(23,79,61,.18)}.user-card:hover{background:rgba(220,236,226,.55)}
.modal{border:1px solid rgba(255,255,255,.75);background:linear-gradient(160deg,#fff,#fbfaf5)}.chart{background:linear-gradient(180deg,rgba(220,236,226,.24),transparent);border-radius:12px 12px 0 0;padding-left:10px;padding-right:10px}.bar{background:linear-gradient(180deg,#9ec4ae,#bdd4c6)}.bar.today{background:linear-gradient(180deg,#2f8062,#174f3d)}
@media(max-width:900px){.main:has(#range)::before{height:170px;border-radius:17px;background-position:60% center}}
@media(max-width:560px){.main:has(#range)::before{height:130px;margin-bottom:14px}.stat:first-child{min-height:150px}}

/* Custom navigation icon system */
.nav-icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px}.nav-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-icon svg path:first-child:last-child[fill]{stroke:none;fill:currentColor}.nav-label{line-height:1}
@media(max-width:900px){
  .mobile-nav{height:74px;padding:8px 10px 9px;align-items:end;border-top:0;background:rgba(255,253,248,.94);backdrop-filter:blur(18px);box-shadow:0 -10px 32px rgba(25,57,43,.10)}
  .mobile-nav button{position:relative;min-width:60px;height:54px;padding:5px 5px 3px;border-radius:15px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-family:"DM Sans",sans-serif!important;color:#7a8880!important;transition:color .2s,background .2s,transform .2s}
  .mobile-nav button .nav-icon{width:23px;height:23px}
  .mobile-nav button .nav-label{display:block;font-size:9px;font-weight:700;letter-spacing:.15px}
  .mobile-nav button.active{color:var(--green)!important;background:var(--mint)!important}
  .mobile-nav button.active::after{content:"";position:absolute;bottom:1px;width:16px;height:3px;border-radius:3px;background:var(--green)}
  .mobile-nav button:active{transform:scale(.92)}
  .mobile-nav button[data-action="expense"]{align-self:flex-start;transform:translateY(-20px);width:56px;min-width:56px;height:56px;padding:0;border-radius:50%!important;background:linear-gradient(145deg,#e9865f,#ce6441)!important;color:#fff!important;font-size:0!important;box-shadow:0 9px 22px rgba(206,100,65,.34),0 0 0 6px var(--paper)}
  .mobile-nav button[data-action="expense"]::before,.mobile-nav button[data-action="expense"]::after{content:"";position:absolute;width:20px;height:2px;border-radius:2px;background:#fff}
  .mobile-nav button[data-action="expense"]::after{transform:rotate(90deg)}
  .mobile-nav button[data-action="expense"]:active{transform:translateY(-20px) scale(.92)}
}
@media(max-width:410px){.mobile-nav{padding-left:4px;padding-right:4px}.mobile-nav button{min-width:51px}.mobile-nav button .nav-label{font-size:8px}}
@media(min-width:901px){.logout-icon{display:none}}
.category-chart{padding:4px 0 18px}.category-chart+.category-chart{border-top:1px solid var(--line);padding-top:18px}.category-chart-currency{font:700 12px Manrope;color:var(--green);letter-spacing:.08em;margin-bottom:14px}.category-chart-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;margin:14px 0}.category-chart-icon{width:40px;height:40px;border:1px solid #dce7e1;border-radius:12px;background:#edf4f0;display:grid;place-items:center;font-size:17px}.category-chart-main{min-width:0}.category-chart-name{font-size:11px;font-weight:700;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-chart-amount{font-size:11px;white-space:nowrap}.category-chart-track{height:5px;background:#e9e9e6;border-radius:8px;overflow:hidden}.category-chart-track span{display:block;height:100%;min-width:3px;border-radius:8px;transition:width .3s ease}
.category-trends{display:grid;gap:24px}.trend-group+.trend-group{border-top:1px solid var(--line);padding-top:22px}.trend-title,.trend-labels{display:flex;justify-content:space-between;align-items:center}.trend-title strong{font:700 12px Manrope;color:var(--green)}.trend-title span,.trend-labels{font-size:10px;color:var(--muted)}.trend-svg{display:block;width:100%;height:180px;margin-top:8px;overflow:visible}.trend-axis{stroke:#c8c8c1;stroke-width:1}.trend-grid{stroke:#e9e8e2;stroke-width:1;stroke-dasharray:4 5}.trend-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px}.trend-legend span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}.trend-legend i{display:inline-block;width:9px;height:9px;border-radius:50%}