:root{
  --green:#059669;--green-2:#10b981;--green-soft:#ecfdf5;
  --ink:#0f172a;--muted:#64748b;--bg:#f6f8f7;--card:#fff;
  --shadow:0 10px 30px rgba(15,23,42,.08);--radius:18px;
  --danger:#ef4444;--warn:#f59e0b;--nav-h:74px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,system-ui,sans-serif}
.tiny{font-size:12px;color:var(--muted)}
.auth-body{min-height:100vh;background:linear-gradient(180deg,#ecfdf5,#f8fafc)}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card,.app-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #e8eee9}
.auth-card{width:100%;max-width:420px;padding:28px}
.brand{display:flex;gap:12px;align-items:center}
.brand-mark{width:44px;height:44px;border-radius:14px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800}
.btn-primary{background:var(--green);border-color:var(--green)}
.btn-primary:hover{background:#047857;border-color:#047857}
.form-control,.form-select{border-radius:12px;min-height:44px}
.input-group .btn{min-width:44px}
.strength{height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden}
.strength span{display:block;height:100%;width:20%;background:var(--danger)}
.strength.fair span{width:45%;background:var(--warn)}
.strength.good span{width:70%;background:#84cc16}
.strength.strong span{width:100%;background:var(--green)}
.app-body{display:flex;min-height:100vh}
.app-body>form{display:flex;flex-wrap:wrap;flex:1 1 auto;width:100%;min-width:0}
.app-body>form>.offline-banner{flex:0 0 100%}
.app-sidebar{width:260px;background:#06281f;color:#ecfdf5;flex-direction:column;padding:20px 16px;position:sticky;top:0;height:100vh}
.app-sidebar .brand{color:#fff;margin-bottom:24px}
.side-nav{display:flex;flex-direction:column;gap:6px;flex:1}
.side-nav a{color:#d1fae5;text-decoration:none;padding:12px 14px;border-radius:12px;display:flex;gap:10px;align-items:center}
.side-nav a.active,.side-nav a:hover{background:rgba(16,185,129,.2);color:#fff}
.app-main{flex:1;min-width:0}
.app-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 8px}
.app-content{padding:8px 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px)}
@media(min-width:992px){.app-content{padding:12px 28px 32px}}
.balance-card{background:linear-gradient(135deg,#059669,#0f766e);color:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);margin-bottom:14px}
.balance-value{font-size:34px;font-weight:800}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi{background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.kpi span{display:block;font-size:12px;color:var(--muted)}
.kpi strong{font-size:18px}
.kpi.income strong{color:#059669}.kpi.expense strong{color:#ef4444}
.kpi.gave strong{color:#2563eb}.kpi.owe strong{color:#d97706}
.chip-tabs{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px}
.chip-tabs .nav-item{flex:0 0 auto}
.chip-tabs .nav-link{border-radius:999px;margin-right:0;padding:8px 18px;background:#fff;color:var(--ink);border:1px solid #e2e8f0;font-weight:600;white-space:nowrap}
.chip-tabs .nav-link.active{background:var(--green);color:#fff;border-color:var(--green)}
.list-stack{display:flex;flex-direction:column;gap:8px}
.row-item{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 6px 16px rgba(15,23,42,.05)}
.row-item .amt.pos{color:#059669}.row-item .amt.neg{color:#ef4444}
.badge-pending{background:#fef3c7;color:#92400e;border-radius:999px;padding:2px 8px;font-size:11px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #e2e8f0;display:flex;justify-content:space-around;align-items:flex-start;z-index:20}
.bottom-nav a{flex:1;text-align:center;color:#64748b;text-decoration:none;font-size:11px;padding-top:10px}
.bottom-nav a.active{color:var(--green)}
.bottom-nav i{display:block;font-size:18px}
.fab-link{position:relative;top:-18px}
.fab-link i{width:56px;height:56px;border-radius:18px;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto;box-shadow:0 10px 20px rgba(5,150,105,.35);font-size:22px}
.sync-pill{font-size:11px;background:#ecfdf5;color:#047857;border-radius:999px;padding:4px 10px}
.sync-pill.off{background:#fee2e2;color:#991b1b}
.offline-banner{background:#111827;color:#fff;text-align:center;padding:6px;font-size:12px}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.list-menu a,.list-menu button{display:flex;width:100%;gap:10px;align-items:center;padding:14px 16px;border:0;background:#fff;text-align:left;border-bottom:1px solid #f1f5f9;text-decoration:none;color:inherit}
.avatar{width:48px;height:48px;border-radius:16px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800}
@media(prefers-color-scheme:dark){
  :root{--bg:#07140f;--ink:#ecfdf5;--card:#0b1f18;--muted:#94a3b8}
  .app-card,.auth-card,.kpi,.row-item,.bottom-nav,.list-menu a,.list-menu button{background:#0b1f18;color:#ecfdf5}
}