:root{
  --app-bg:#ffffff;
  --app-surface:#ffffff;
  --app-surface-2:#f8f9fa;
  --app-border:rgba(15,23,42,.08);
  --app-text:#333333;
  --app-muted:#666666;
  --app-nav-text:#6b7280;
  --app-nav-active:#2563eb;
  --app-shadow:0 10px 30px rgba(15,23,42,.08);
  --app-shadow-soft:0 8px 18px rgba(15,23,42,.06);
  --app-radius:18px;
  --app-radius-sm:14px;
  --app-green:#16a34a;
  --app-red:#ef4444;
  --app-blue:#2563eb;
  --app-fab-size:58px;
  --app-bottom-nav-h:74px;
}
html,body{height:100%}
body{
  background:var(--app-surface-2);
  color:var(--app-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.1px;
}
.app-wrap{padding-bottom:calc(var(--app-bottom-nav-h) + 18px)}
.app-title{font-weight:750; letter-spacing:-.3px}
.app-subtitle{color:var(--app-muted)}
.app-card{
  background:var(--app-surface);
  border:1px solid var(--app-border);
  border-radius:var(--app-radius);
  box-shadow:var(--app-shadow-soft);
  transition: box-shadow .15s ease, transform .15s ease;
}
.app-card .card-body{padding:16px}
.app-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--app-border);
  background:rgba(255,255,255,.6);
  color:var(--app-text);
}
.app-metric{font-size:1.5rem; font-weight:800; letter-spacing:-.3px}
.app-metric-lg{font-size:2rem; font-weight:850; letter-spacing:-.4px}
.app-metric-label{font-size:.8rem; color:var(--app-muted)}
.app-income{color:var(--app-green)}
.app-expense{color:var(--app-red)}
.app-badge{
  border:1px solid var(--app-border);
  background:rgba(255,255,255,.7);
  color:var(--app-text);
  border-radius:999px;
  padding:6px 10px;
  font-size:.78rem;
}
.app-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
}
.app-list .list-group-item{
  border:0;
  border-top:1px solid var(--app-border);
  background:transparent;
  padding:14px 16px;
}
.app-list .list-group-item:first-child{border-top:0}
.app-bottom-nav{
  height:var(--app-bottom-nav-h);
  background:var(--app-surface);
  border-top:1px solid var(--app-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}
.app-bottom-nav .nav-link{
  color:var(--app-nav-text);
  text-decoration:none;
  font-weight:600;
  padding:4px 0;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width: 64px;
  height: 100%;
  gap:4px;
  transition: all 0.2s ease;
}
.app-bottom-nav .nav-link i{font-size:1.25rem; line-height:1; margin-bottom: 2px;}
.app-bottom-nav .nav-link .app-nav-label{font-size:.7rem; line-height:1; font-weight: 500;}
.app-bottom-nav .nav-link.active{
  color:var(--app-blue);
  background:transparent;
}
.app-bottom-nav .nav-link.active i {
  transform: translateY(-2px);
}
.nav-item-fab {
  width: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.app-fab{
  width: 52px;
  height: 52px;
  border-radius:50%;
  background:var(--app-blue);
  color:#fff;
  border:0;
  box-shadow:0 8px 20px rgba(37,99,235,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform 0.1s;
}
.app-fab:active{transform:scale(0.95)}
.offcanvas.app-sheet{
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  border:1px solid var(--app-border);
  box-shadow:var(--app-shadow);
}
.modal-content.app-card{background:var(--app-surface); opacity: 1;}
.modal-backdrop.show{opacity:.5}
.app-theme-dark .modal-backdrop.show{opacity:.75}
.offcanvas.app-sheet .offcanvas-header{padding:14px 16px}
.offcanvas.app-sheet .offcanvas-body{padding:0 16px 16px}
.btn.app-seg{
  border-radius:14px;
  font-weight:700;
}
.form-control,.form-select{
  border-radius:14px;
  border:1px solid var(--app-border);
  padding:12px 12px;
}
.form-control:focus,.form-select:focus{
  box-shadow:0 0 0 .25rem rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.45);
}
.btn-primary{
  border-radius:14px;
  font-weight:750;
  padding:12px 14px;
}
.btn-outline-secondary,.btn-outline-danger,.btn-outline-success{
  border-radius:14px;
  font-weight:700;
}
.app-theme-dark{
  --app-bg:#0b1220;
  --app-surface:#0f172a;
  --app-surface-2:#0b1220;
  --app-border:rgba(148,163,184,.12);
  --app-text:#e2e8f0;
  --app-muted:#94a3b8;
  --app-nav-text:#94a3b8;
  --app-nav-active:#60a5fa;
  --app-shadow:0 18px 46px rgba(0,0,0,.35);
  --app-shadow-soft:0 10px 24px rgba(0,0,0,.28);
}
.app-theme-dark .app-bottom-nav{
  background:var(--app-surface);
  border-top-color: var(--app-border);
}
.app-theme-dark .app-bottom-nav .nav-link.active{
  background:transparent;
  color: var(--app-blue);
}
.app-theme-dark .app-chip,.app-theme-dark .app-badge{
  background:rgba(15,23,42,.6);
}
.app-theme-dark .app-icon{background:rgba(148,163,184,.08); border-color:rgba(148,163,184,.12)}
.app-theme-dark .list-group-item{color:var(--app-text)}