.app-body{margin:0;background:#0b1020;color:#edf2ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:238px;padding:25px 16px;background:#0e1528;border-right:1px solid #202a40;display:flex;flex-direction:column;box-sizing:border-box}
.brand,.mobile-brand{display:flex;align-items:center;gap:8px;color:#f5f7ff;text-decoration:none;font-size:25px;font-weight:800}
.brand-icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#173e36;color:#4de0a4}
.brand-dot{color:#45d9a0}
.nav-label{margin:38px 10px 12px;color:#7886a3;font-size:10px;letter-spacing:1px}
.side-nav{display:grid;gap:6px}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;text-decoration:none;color:#a8b4cc}
.nav-item>span{width:20px;text-align:center;font-size:18px}
.nav-item.active,.nav-item:hover{background:#172b35;color:#58e2ac}
.sidebar-bottom{margin-top:auto}
.help-card{padding:16px;margin-bottom:16px;background:#152b33;border:1px solid #25434a;border-radius:12px}
.help-card>span{color:#50dfa6;font-size:20px}
.help-card strong{display:block;line-height:1.5}
.help-card p{color:#91a3b8;font-size:11px;line-height:1.5}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#26483f;color:#71edba;font-weight:bold}
.profile-mini{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid #222c41}
.profile-mini small,.profile-mini strong{display:block}
.profile-mini small{margin-top:4px;color:#7e8ba5;font-size:10px}
.profile-more{margin-left:auto}
.main-content{max-width:1600px;margin-left:238px;padding:0 32px 24px}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1d273b}
.breadcrumb{color:#8492ac;font-size:12px}
.breadcrumb span{padding:0 8px}
.top-actions{display:flex;align-items:center;gap:12px}
.demo-pill{padding:7px 10px;border:1px solid #344054;border-radius:20px;color:#a9b7ca;font-size:10px}
.demo-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f1bf65}
.icon-button{background:#111a2c;border:1px solid #273249;border-radius:9px;color:#b6c4d9;padding:8px}
.mobile-brand{display:none}
.welcome-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 0 22px}
.eyebrow{color:#7f91aa;font-size:10px;letter-spacing:1px}
.welcome-row h1{margin:8px 0;font-size:clamp(26px,2.5vw,35px);letter-spacing:-1px}
.welcome-row h1 span{color:#4be0a5}
.subheading,.panel-heading p{color:#8e9bb2;font-size:12px}
.primary-button{padding:12px 16px;border:0;border-radius:10px;background:#40d69b;color:#06271d;font-weight:bold}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.summary-card,.panel{background:#111a2d;border:1px solid #202c42;border-radius:14px}
.summary-card{position:relative;overflow:hidden;min-height:140px;padding:19px;box-sizing:border-box}
.balance-card{background:linear-gradient(120deg,#153b35,#142b32,#19243b);border-color:#285147}
.card-heading{display:flex;align-items:center;justify-content:space-between;color:#a6b4ca;font-size:12px}
.card-icon,.metric-icon{padding:7px;border-radius:8px;background:#254a42;color:#63e7b1}
.metric-icon.coral{background:#402b37;color:#ff9c9c}
.money{margin:17px 0 10px;font-size:clamp(20px,2vw,27px);font-weight:750}
.card-foot{display:flex;flex-wrap:wrap;gap:5px;color:#8594ad;font-size:10px}
.positive{color:#4ce0a5}.expense-tag{color:#ffb18f}
.balance-orb{position:absolute;border:1px solid #2a6654;border-radius:50%;opacity:.45}
.orb-one{width:140px;height:140px;right:-45px;bottom:-85px}.orb-two{width:95px;height:95px;right:-22px;bottom:-60px}
.mini-bars{position:absolute;right:15px;bottom:15px;display:flex;align-items:end;gap:4px;height:28px}
.mini-bars i{display:block;width:5px;border-radius:4px 4px 0 0;background:#3bd59a}
.progress-track{height:5px;margin-top:17px;border-radius:10px;background:#283249}
.progress-track span{display:block;height:100%;border-radius:10px;background:#f18a87}
.content-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:15px;margin-top:17px}
.panel{padding:20px;overflow:hidden}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-heading h2{margin:0;font-size:14px}.panel-heading p{margin:6px 0 0}
.panel-heading select{max-width:145px;padding:8px;background:#151f33;border:1px solid #2a354c;border-radius:8px;color:#aab8ce}
.chart-legend{display:flex;gap:16px;margin:20px 0 10px 35px;color:#a5b2c8;font-size:10px}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-legend i{width:7px;height:7px;border-radius:2px}.legend-income{background:#48dca2}.legend-expense{background:#f18a87}
.chart-area{display:grid;grid-template-columns:30px 1fr;height:180px}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:24px;color:#65738d;font-size:9px}
.chart-plot{position:relative;min-width:0}
.chart-grid-lines{position:absolute;inset:0 0 24px;display:flex;flex-direction:column;justify-content:space-between}
.chart-grid-lines i{border-top:1px dashed #29334a}
.bar-groups{position:absolute;inset:0;display:flex;justify-content:space-around;gap:5px}
.bar-group{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
.bar-pair{height:calc(100% - 24px);width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.bar-pair i{display:block;width:min(22px,35%);border-radius:4px 4px 0 0;background:#43d69d}
.bar-pair i+i{background:#ef8987}.bar-group small{height:15px;color:#7d8ba4;font-size:10px}
.category-feature{display:grid;place-items:center;padding:20px 0}
.donut{display:grid;place-items:center;width:135px;height:135px;border-radius:50%;background:conic-gradient(#4bdda5 0 40%,#6888df 40% 64%,#f2b967 64% 84%,#ed8b91 84%);position:relative}
.donut:before{content:"";position:absolute;inset:13px;border-radius:50%;background:#111a2d}
.donut>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}
.donut strong{font-size:15px}.donut small{color:#8795ae;font-size:10px}
.category-list{display:grid;gap:13px}
.category-list>div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:9px;color:#a5b2c7;font-size:11px}
.category-list strong{color:#e1e8f5;font-size:11px}
.cat-dot{width:8px;height:8px;border-radius:3px}
.cat-home{background:#4bdda5}.cat-food{background:#6888df}.cat-transport{background:#f2b967}.cat-other{background:#ed8b91}
.transactions-panel{margin-top:17px}
.text-link{color:#54dfa8;text-decoration:none;font-size:11px;font-weight:bold}
.transaction-list{margin-top:14px}
.transaction{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #202a3f}
.transaction:last-child{border:0}
.transaction-symbol{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:10px;font-size:19px}
.food-symbol{background:#3b2d28;color:#efb27b}.work-symbol{background:#183b35;color:#53dda5}.car-symbol{background:#282f49;color:#9eafff}
.transaction-name{min-width:0;flex:1}.transaction-name strong,.transaction-name small{display:block}
.transaction-name strong{font-size:12px}.transaction-name small{margin-top:5px;color:#7f8da6;font-size:10px}
.transaction-type{padding:5px 8px;border-radius:7px;background:#302b32;color:#d8a3a4;font-size:9px}
.income-type{background:#1b3632;color:#62d8a7}
.amount{min-width:100px;text-align:right;font-size:12px;white-space:nowrap}.negative{color:#f29b9a}
.demo-note,.app-footer{color:#64738e;font-size:10px}.app-footer{padding:22px 0}.app-footer span{color:#41d59b}
.bottom-nav{display:none}
@media(max-width:1100px){.sidebar{width:210px}.main-content{margin-left:210px;padding:0 20px 20px}.summary-grid{gap:10px}.summary-card{padding:15px}.content-grid{grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr);gap:10px}.panel{padding:16px}.transaction-type{display:none}.amount{min-width:90px}}
@media(max-width:760px){.sidebar{display:none}.main-content{margin:0;padding:0 15px 90px}.topbar{height:60px;margin:0 -15px;padding:0 15px}.mobile-brand{display:flex;font-size:22px}.mobile-brand .brand-icon{width:28px;height:28px}.breadcrumb{display:none}.top-actions{gap:8px}.demo-pill{font-size:9px;padding:6px}.icon-button{padding:6px}.welcome-row{align-items:flex-start;padding:23px 0 18px;gap:10px}.welcome-row h1{font-size:26px}.eyebrow{font-size:9px}.subheading{font-size:11px;line-height:1.5}.primary-button{width:42px;height:42px;flex:0 0 42px;padding:0;font-size:0}.primary-button span{font-size:22px}.summary-grid{grid-template-columns:1fr 1fr;gap:9px}.summary-card{min-height:125px;padding:13px;border-radius:12px}.balance-card{grid-column:1/-1;min-height:135px}.card-heading{font-size:10px}.money{font-size:21px;margin:14px 0 8px}.card-foot{font-size:9px}.content-grid{grid-template-columns:1fr;gap:11px;margin-top:11px}.panel{padding:16px;border-radius:12px}.chart-area{height:170px}.chart-legend{margin-top:17px}.donut{width:128px;height:128px}.transactions-panel{margin-top:11px}.transaction{gap:8px;padding:12px 0}.transaction-symbol{flex-basis:33px;height:33px}.transaction-name strong{font-size:11px}.transaction-name small{font-size:9px}.amount{min-width:0;font-size:10px}.app-footer{text-align:center}.bottom-nav{position:fixed;z-index:10;inset:auto 0 0;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(13,21,38,.97);border-top:1px solid #273249;backdrop-filter:blur(18px)}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:42px;color:#7f8da6;text-decoration:none}.bottom-nav a>span{font-size:20px}.bottom-nav a small{font-size:9px}.bottom-nav a.bottom-active{color:#4be0a5}.bottom-nav a.bottom-add>span{display:grid;place-items:center;width:30px;height:28px;margin-top:-12px;border-radius:10px;background:#42d99d;color:#06271d;font-size:22px}.bottom-nav a.bottom-add small{color:#52dda6}}
@media(max-width:390px){.main-content{padding-left:11px;padding-right:11px}.welcome-row h1{font-size:23px}.summary-card{padding:11px}.money{font-size:19px}.panel{padding:13px}.amount{font-size:9px}}

.logout-form { margin: 12px 0; }
.logout-button {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.logout-button:hover { background: rgba(255,255,255,.06); }