:root{
  --brand:#2563eb;
  --brand2:#16a34a;
  --soft:#f5f7fb;
  --text:#172033;
  --muted:#667085;
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius:22px;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#eef4ff 0%,#f8fafc 45%,#f8fafc 100%);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
a{text-decoration:none}
.app-shell{max-width:580px;margin:0 auto;min-height:100vh;background:#fff;box-shadow:0 0 45px rgba(15,23,42,.08);position:relative}
.app-content{padding-bottom:96px}.guest-content{padding:0;min-height:100vh}.app-topbar{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid #edf1f7;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;z-index:10}.avatar-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}.hero-card,.stat-card,.panel{border:0;border-radius:var(--radius);box-shadow:0 14px 35px rgba(15,23,42,.08);background:#fff}.hero-card{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;overflow:hidden}.hero-card .muted{color:rgba(255,255,255,.75)}.soft-card{background:#f8fafc;border:1px solid #eef2f7;border-radius:18px}.stat-card{padding:16px}.stat-card .label{color:var(--muted);font-size:.86rem}.stat-card .value{font-weight:800;font-size:1.25rem}.bottom-nav{max-width:580px;margin:0 auto;height:72px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid #e5eaf2;display:flex;justify-content:space-around;align-items:center;padding:8px 10px;z-index:20}.bottom-nav a{color:#667085;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;font-weight:600}.bottom-nav a.active{color:var(--brand)}.bottom-nav .fab{width:58px;height:58px;margin-top:-34px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#16a34a);color:#fff;font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(37,99,235,.38)}.chart-wrap{position:relative;height:250px}.chart-wrap.small{height:210px}.btn{border-radius:14px}.form-control,.form-select{border-radius:14px;padding:.78rem .9rem}.money-input{font-size:2rem;font-weight:800}.badge-soft{background:#eef4ff;color:#2563eb;border:1px solid #dbeafe}.txn-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f2f5}.txn-row:last-child{border-bottom:0}.txn-icon{width:42px;height:42px;border-radius:14px;background:#eef4ff;display:flex;align-items:center;justify-content:center;font-size:20px}.amount-income{color:#16a34a;font-weight:800}.amount-expense{color:#ef4444;font-weight:800}.progress{height:11px;border-radius:99px;background:#edf2f7}.progress-bar{border-radius:99px}.progress-bar.ok{background:#16a34a}.progress-bar.warn{background:#f59e0b}.progress-bar.over{background:#ef4444}.section-title{font-size:1rem;font-weight:800;margin:0}.muted{color:var(--muted)}.auth-wrap{min-height:100vh;padding:28px 18px;background:linear-gradient(135deg,#dbeafe,#f0fdf4)}.auth-card{border:0;border-radius:28px;box-shadow:0 20px 50px rgba(15,23,42,.12)}.logo-badge{width:62px;height:62px;border-radius:22px;background:linear-gradient(135deg,#2563eb,#16a34a);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center}.table-mobile td,.table-mobile th{vertical-align:middle}.empty-state{padding:30px 18px;text-align:center;color:#667085}.install-box{max-width:780px;margin:0 auto;padding:22px}.install-card{border:0;border-radius:24px;box-shadow:0 20px 50px rgba(15,23,42,.1)}
.desktop-sidebar{display:none}.desktop-brand,.desktop-nav,.desktop-user-box{display:none}

@media (min-width:768px){
  .app-shell{margin:24px auto;border-radius:28px;overflow:hidden;min-height:calc(100vh - 48px)}
  .bottom-nav{border-radius:0 0 28px 28px}
}

@media (min-width:992px){
  body{background:#f3f6fb}
  .app-shell{max-width:none;width:100%;min-height:100vh;margin:0;border-radius:0;overflow:visible;box-shadow:none;background:#f3f6fb;display:grid;grid-template-columns:278px minmax(0,1fr);grid-template-rows:72px minmax(0,1fr)}
  .desktop-sidebar{display:flex;grid-column:1;grid-row:1/3;position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid #e8edf5;padding:20px;flex-direction:column;z-index:50}
  .desktop-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .desktop-logo{width:48px;height:48px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#16a34a);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 12px 25px rgba(37,99,235,.25)}
  .desktop-title{font-weight:900;line-height:1.2}.desktop-family{font-size:.86rem;color:var(--muted);max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-nav{display:flex;flex-direction:column;gap:6px;flex:1}
  .desktop-nav-item{display:flex;align-items:center;gap:12px;color:#526071;padding:12px 14px;border-radius:16px;transition:.15s ease;background:transparent}
  .desktop-nav-item:hover{background:#f1f5f9;color:#172033}.desktop-nav-item.active{background:linear-gradient(135deg,#eff6ff,#eefdf3);color:#2563eb;box-shadow:inset 0 0 0 1px #dbeafe}.desktop-nav-item span{width:24px;text-align:center}.desktop-nav-item strong{font-size:.94rem}
  .desktop-user-box{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #eef2f7;border-radius:18px;background:#f8fafc}
  .app-topbar{grid-column:2;grid-row:1;height:72px;padding:14px 28px;background:rgba(255,255,255,.88);border-bottom:1px solid #e8edf5}
  .app-content{grid-column:2;grid-row:2;padding:22px 26px 36px;max-width:1220px;width:100%;margin:0 auto}
  .guest-content{grid-column:1/3;max-width:none;padding:0}
  .bottom-nav{display:none!important}
  section.p-3,section.px-3{padding-left:0!important;padding-right:0!important}
  .chart-wrap{height:310px}.chart-wrap.small{height:260px}
  .hero-card,.stat-card,.panel{box-shadow:0 16px 35px rgba(15,23,42,.07)}
  .table-mobile{font-size:.96rem}
}