:root {
  --bg:       #050505;
  --surface:  #0a0a0a;
  --card:     #121212;
  --card2:    #1a1a1a;
  --border:   #222;
  --border2:  #2e2e2e;
  --primary:  #6366f1;
  --primary-dim: rgba(99,102,241,.12);
  --secondary:#ec4899;
  --secondary-dim: rgba(236,72,153,.12);
  --text:     #f8fafc;
  --text2:    #cbd5e1;
  --muted:    #64748b;
  --danger:   #ef4444;
  --success:  #10b981;
  --r:        12px;
  --r-lg:     20px;
  --nav:      64px;
  --tab:      70px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family:'Outfit', sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  padding-bottom:calc(var(--tab) + 20px);
  overflow-x:hidden;
}

.top-nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav);
  background:rgba(5,5,5,.90);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; z-index:200;
  backdrop-filter:blur(16px);
}

.logo {
  font-family:'Syne', sans-serif;
  font-size:18px; font-weight:800;
  letter-spacing:0.02em;
  color:var(--text);
  display:flex; align-items:center; gap:8px;
}

.logo-icon {
  width:32px; height:32px;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px;
}

.logo span { color:var(--primary); }

.user-chip {
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-radius:24px; padding:4px 14px 4px 6px;
  font-size:12px; font-weight:600; color:var(--text2);
}

.user-avatar {
  width:26px; height:26px; border-radius:50%;
  background:var(--primary-dim); border:1px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--primary); font-weight:700;
}

.tab-bar {
  position:fixed; bottom:0; left:0; right:0;
  height:var(--tab);
  background:rgba(10,10,10,.95);
  border-top:1px solid var(--border);
  display:flex; z-index:200;
  backdrop-filter:blur(16px);
}

.tab-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background:none; border:none; color:var(--muted);
  font-size:10px; font-weight:700; font-family:'Outfit',sans-serif;
  text-transform:uppercase; letter-spacing:.05em;
  transition:all .2s; cursor:pointer; position:relative;
}

.tab-item i { font-size:20px; margin-bottom:2px; transition:transform 0.2s; }
.tab-item.active { color:var(--primary); }
.tab-item.active i { transform:translateY(-2px); }
.tab-item.active::before {
  content:''; position:absolute; top:0; left:30%; right:30%; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--secondary)); 
  border-radius:0 0 4px 4px;
}

.main {
  padding:calc(var(--nav) + 20px) 16px 16px;
  max-width:680px; margin:0 auto;
}

.page { display:none; }
.page.active { display:block; animation:pageIn .3s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.s-head { margin-bottom:20px; }
.s-title {
  font-family:'Syne', sans-serif;
  font-size:24px; font-weight:800; 
  line-height:1.2; letter-spacing: -0.02em;
}
.s-title span { color:var(--primary); }
.s-sub { font-size:13px; color:var(--muted); margin-top:4px; font-weight:500; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px; margin-bottom:16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.card-title {
  font-size:13px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.card-title i { color:var(--primary); font-size:14px; }

.input-control {
  width:100%; background:var(--surface);
  border:1px solid var(--border2); color:var(--text);
  padding:14px 16px; border-radius:var(--r); margin-bottom:16px;
  font-size:14px; font-family:'Outfit',sans-serif; 
  transition:border-color .2s, box-shadow .2s;
  outline:none;
}
.input-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-dim);
}
.input-control::placeholder { color:var(--muted); }

label.field-label {
  display:block; font-size:11px; font-weight:700; 
  color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:6px; 
}

.btn {
  width:100%; padding:14px 16px; border-radius:var(--r);
  border:none; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-family:'Outfit',sans-serif;
  transition:all .15s;
}
.btn:active { transform:scale(.97); }
.btn-primary {
  background:var(--primary); color:#fff;
  box-shadow:0 4px 16px rgba(99,102,241,.25);
}
.btn-secondary {
  background:var(--card2); color:var(--text);
  border:1px solid var(--border2);
}
.btn-success { background:rgba(16,185,129,.15); color:var(--success); border:1px solid rgba(16,185,129,.3); }
.btn-danger { background:rgba(239,68,68,.12); color:var(--danger); border:1px solid rgba(239,68,68,.25); }
.btn-sm { padding:8px 16px; font-size:12px; }

.stats-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px;
}
.stat-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.stat-value { font-family:'Space Mono',monospace; font-size:22px; font-weight:700; line-height:1; }
.stat-value.income { color:var(--success); }
.stat-value.expense { color:var(--danger); }
.stat-sub { font-size:11px; color:var(--muted); margin-top:6px; }

.list-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 16px; margin-bottom:10px;
}
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.fw-bold { font-weight:700; font-size:14px; color:var(--text); }
.fw-mono { font-family:'Space Mono', monospace; font-weight:700; font-size:14px; }
.text-mini { font-size:11px; color:var(--muted); margin-top:2px; }
.income { color:var(--success); }
.expense { color:var(--danger); }

.progress-track {
  width:100%; height:6px; background:var(--border2);
  border-radius:3px; overflow:hidden;
}
.progress-fill {
  height:100%; border-radius:3px; transition:width .5s ease;
}

.check-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--border);
  cursor:pointer; font-size:14px; font-weight:500;
}
.check-item:last-child { border-bottom:none; padding-bottom:0; }
.check-item input[type="checkbox"] {
  width:18px; height:18px; accent-color:var(--primary);
}

.overlay-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.85); z-index:9999;
  align-items:flex-end; justify-content:center;
  padding:0; backdrop-filter:blur(8px);
}
.modal-sheet {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:24px 24px 0 0;
  padding:24px 24px 40px;
  width:100%; max-width:480px;
  animation:sheetUp .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes sheetUp { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-handle {
  width:48px; height:5px; background:var(--border2);
  border-radius:3px; margin:0 auto 24px;
}
.modal-title {
  font-family:'Syne',sans-serif; font-size:22px; font-weight:800;
  margin-bottom:6px; display:flex; align-items:center; gap:10px;
}
.modal-sub { font-size:13px; color:var(--text2); margin-bottom:24px; }