/* tracker.css — a faithful copy of the Life Tracker interface, static.
   Same tokens, spacing and components as the real app; none of the wiring. */

/* ── Shell ────────────────────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 220px;
  height: 100vh;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform 200ms ease;
}
.sidebar-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1.15rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo { font-size: 1.3rem; line-height: 1; }
.sidebar-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.sidebar-nav { flex: 1; padding: 0.75rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-group-label {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); padding: 0.85rem 0.6rem 0.35rem;
}
.nav-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 0.84rem; font-weight: 600;
  text-align: left; cursor: pointer; width: 100%;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.is-active { background: var(--accent-light); color: var(--accent); }
.nav-icon { font-size: 0.95rem; flex-shrink: 0; }
.sidebar-foot {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem; color: var(--text-muted);
}
.sidebar-foot a { color: var(--accent); text-decoration: none; font-weight: 700; }

.app-main { flex: 1; min-width: 0; margin-left: 220px; display: flex; flex-direction: column; }

.topbar {
  display: none;
  align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 150;
}
.topbar-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font-size: 1.1rem; cursor: pointer;
}
.topbar-title { font-size: 0.92rem; font-weight: 750; }

.app-content { flex: 1; min-width: 0; padding: 1.75rem; overflow-x: clip; }
.page { max-width: 920px; margin: 0 auto; width: 100%; min-width: 0; padding-bottom: 6rem; }
.page[hidden] { display: none !important; }

.scrim { display: none; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1rem;
}
.page-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.025em; }
.page-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.15rem; }
.head-btns { display: flex; gap: 0.35rem; flex-shrink: 0; }
.icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); font-size: 1rem; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); }

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.tool-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; }
.tool-btn {
  flex: 0 0 auto; width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.tool-btn:hover { border-color: var(--accent); }
.tool-search {
  flex: 1; min-width: 0; height: 42px;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-sm);
  font: inherit; font-size: 0.85rem; color: var(--text-muted); text-align: left; cursor: pointer;
}

.fab {
  position: fixed; right: 1.1rem; bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-size: 1.9rem; line-height: 1;
  box-shadow: var(--shadow); cursor: pointer; z-index: 120;
  display: flex; align-items: center; justify-content: center;
}

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.dash-hero {
  background: linear-gradient(150deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
  border-radius: 14px; padding: 0.8rem 0.9rem; margin-bottom: 0.6rem;
  color: #fff; box-shadow: var(--shadow);
}
.dash-hero-head { display: flex; align-items: center; gap: 0.5rem; }
.dash-hero-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-hero-title { font-weight: 800; font-size: 0.95rem; }
.dash-hero-sub { font-size: 0.72rem; opacity: 0.85; }
.dash-hero-cta { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.dash-quick {
  display: flex; gap: 0.4rem; margin-top: 0.8rem;
}
.dash-quick input {
  flex: 1; min-width: 0; padding: 0.6rem 0.8rem; border: none; border-radius: 9px;
  font: inherit; font-size: 0.88rem; background: rgba(255,255,255,0.94); color: var(--text-primary);
}
.dash-quick button {
  flex-shrink: 0; padding: 0.55rem 0.95rem; border: none; border-radius: 9px;
  background: rgba(255,255,255,0.22); color: #fff; font: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
}

.dash-shoprow {
  display: flex; gap: 0.5rem; margin-top: 0.75rem; padding-bottom: 0.2rem;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.dash-shoprow::-webkit-scrollbar { display: none; }
.dash-shopgroup {
  flex: 0 0 9.5rem; scroll-snap-align: start; cursor: pointer;
  background: rgba(255,255,255,0.16); border-radius: 12px; padding: 0.5rem 0.6rem;
}
.dash-shopgroup-head {
  display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem;
  font-size: 0.72rem; font-weight: 800;
}
.dash-shopgroup-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-shopgroup-count {
  background: rgba(255,255,255,0.28); border-radius: 999px; padding: 0.05rem 0.4rem;
}
.dash-shopgroup-items { display: flex; flex-direction: column; gap: 0.15rem; }
.dash-shopgroup-item {
  font-size: 0.72rem; opacity: 0.92;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-shopgroup-more { font-size: 0.72rem; opacity: 0.7; font-weight: 700; }

.dash-tile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 0.8rem; margin-bottom: 0.6rem; box-shadow: var(--shadow-sm); cursor: pointer;
}
.dash-tile-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; }
.dash-tile-title { font-weight: 700; font-size: 0.86rem; }
.dash-tile-cta { margin-left: auto; font-size: 0.7rem; color: var(--accent); font-weight: 700; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg-hover); border-radius: 999px;
  padding: 0.22rem 0.6rem; font-size: 0.74rem; font-weight: 600;
}
.dash-chip--out { background: var(--accent-red-light); }
.dash-chip--out b { color: var(--accent-red); font-size: 0.64rem; }

.dash-mini-grid {
  display: grid; gap: 0.5rem; margin-bottom: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.dash-mini {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.55rem 0.65rem; box-shadow: var(--shadow-sm); cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; gap: 0.05rem;
}
.dash-mini-emoji { font-size: 0.95rem; }
.dash-mini-title {
  font-size: 0.64rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.02em; margin-top: 0.1rem;
}
.dash-mini-val { font-size: 1rem; font-weight: 800; }
.dash-mini-sub { font-size: 0.64rem; color: var(--text-muted); }
.dash-mini--paid .dash-mini-val { color: var(--accent-green); }

/* ── Stocks / shopping ────────────────────────────────────────────────────── */
.divider {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; margin: 1.1rem 0 0.5rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0.35rem;
}
.divider-title { font-size: 0.86rem; font-weight: 750; }
.divider-meta { font-size: 0.72rem; color: var(--text-muted); }
.outpill {
  background: var(--accent-red-light); color: var(--accent-red);
  border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.68rem; font-weight: 800;
}

.slider {
  display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.35rem;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider > * { flex: 0 0 8.5rem; scroll-snap-align: start; }

.grid-tiles { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }

.stk {
  position: relative; display: flex;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); overflow: hidden; min-width: 0;
}
.stk--in  { border-color: #a7f3d0; background: var(--accent-green-light); }
.stk--out { border-color: #fca5a5; background: var(--accent-red-light); }
.stk--todo { border-color: #fcd34d; background: var(--accent-yellow-light); }
.stk-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.55rem 0.6rem; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.stk-mark { font-size: 0.95rem; font-weight: 900; line-height: 1; }
.stk--in .stk-mark { color: var(--accent-green); }
.stk--out .stk-mark { color: var(--accent-red); }
.stk--todo .stk-mark { color: var(--accent-yellow); }
.stk-name { font-size: 0.84rem; font-weight: 650; overflow-wrap: anywhere; }
.stk-state { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.stk-notes { font-size: 0.68rem; color: var(--text-secondary); }
.stk-edit {
  position: absolute; top: 0.25rem; right: 0.3rem;
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 0.75rem; cursor: pointer; padding: 0.15rem 0.25rem;
}
.strike { text-decoration: line-through; }

.seeall {
  width: 100%; margin-top: 0.45rem; padding: 0.5rem;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 0.78rem; font-weight: 650; cursor: pointer;
}
.seeall:hover { border-color: var(--accent); color: var(--accent); }

.restock-label { font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.4rem; }
.restock-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.restock-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.75rem; border: 1.5px solid #fca5a5; border-radius: 999px;
  background: var(--accent-red-light); color: var(--accent-red);
  font: inherit; font-size: 0.82rem; font-weight: 650; cursor: pointer;
}
.restock-count { font-weight: 800; }

/* ── The day deck (Food Calendar + Monthly Schedule) ──────────────────────── */
.deck {
  --card-w: min(78%, 19rem);
  display: flex; gap: 0.75rem; overflow-x: auto;
  margin: 0 -0.25rem 0.5rem; padding: 0.4rem calc(50% - (var(--card-w) / 2)) 1.1rem;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.daycard {
  flex: 0 0 var(--card-w); scroll-snap-align: center; min-height: 17rem;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card);
  padding: 0.7rem 0.75rem; box-shadow: var(--shadow-sm);
  filter: blur(2.5px); opacity: 0.55; transform: scale(0.94);
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.daycard.is-active { filter: none; opacity: 1; transform: none; box-shadow: var(--shadow); }
.daycard--today.is-active { border-color: var(--accent); }
.daycard-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  width: 100%; background: none; border: 0; padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
  font: inherit; text-align: left; cursor: pointer;
}
.daycard-dow { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.daycard-date { font-size: 0.74rem; color: var(--text-muted); }
.daycard-body { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem 0; overflow-y: auto; }
.daycard-empty { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin: auto 0; }
.daycard-slot {
  display: flex; flex-direction: column; gap: 0.1rem; width: 100%;
  background: var(--bg-hover); border: 0; border-radius: var(--radius-sm);
  padding: 0.45rem 0.55rem; font: inherit; text-align: left; cursor: pointer;
}
.daycard-slot-label {
  font-size: 0.67rem; font-weight: 750; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.daycard-meal { font-size: 0.86rem; overflow-wrap: anywhere; }
.daycard-add { display: flex; gap: 0.3rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.daycard-addbtn {
  flex: 1; height: 2.1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: transparent; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.daycard-addbtn--wide { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.daycard-addbtn:hover { border-color: var(--accent); border-style: solid; background: var(--accent-light); }

.deck-hint { font-size: 0.74rem; color: var(--text-muted); margin-bottom: 0.6rem; }

/* ── Personal ─────────────────────────────────────────────────────────────── */
.pers-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pers-card {
  display: flex; align-items: stretch; gap: 0.5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: 0.55rem 0.6rem;
}
.pers-order {
  flex: 0 0 2rem; align-self: center; height: 2rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--bg-hover);
  color: var(--text-secondary); font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer;
}
.pers-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem;
  background: none; border: 0; padding: 0; text-align: left; font: inherit; cursor: pointer;
}
.pers-title { font-weight: 650; font-size: 0.9rem; }
.pers-notes { font-size: 0.78rem; color: var(--text-secondary); }
.pers-meta { font-size: 0.7rem; color: var(--text-muted); }
.pers-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.pers-plus {
  min-width: 2.6rem; height: 2.2rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent); background: var(--accent-light); color: var(--accent);
  font: inherit; font-weight: 800; cursor: pointer;
}
.pers-done {
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: 1rem; cursor: pointer;
}

/* ── Watchlist ────────────────────────────────────────────────────────────── */
.wl-statusbar {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  padding: 0.6rem 0.75rem; font: inherit; cursor: pointer; margin-bottom: 0.5rem;
}
.wl-statusbar-label { flex: 1; text-align: left; font-size: 0.9rem; font-weight: 700; }
.wl-statusbar-count {
  font-size: 0.85rem; font-weight: 800; color: var(--accent);
  background: var(--accent-light); border-radius: 999px; padding: 0.15rem 0.6rem;
}
.wl-statusbar-caret { color: var(--text-muted); font-size: 0.75rem; }

.wl-chiprow { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.wl-chip {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 650;
  padding: 0.35rem 0.8rem; cursor: pointer;
}
.wl-chip.is-on { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }

.wl-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.wl-card {
  display: flex; gap: 0.5rem; padding: 0.55rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-sm); cursor: pointer; min-width: 0;
}
.wl-poster {
  flex-shrink: 0; width: 2.6rem; height: 3.6rem; border-radius: var(--radius-sm);
  background: var(--bg-hover); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.wl-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.wl-card-title { font-size: 0.84rem; font-weight: 700; overflow-wrap: anywhere; }
.wl-status-pill {
  align-self: flex-start; color: #fff; border-radius: 999px;
  padding: 0.1rem 0.45rem; font-size: 0.62rem; font-weight: 800;
}
.wl-card-sub { font-size: 0.68rem; color: var(--text-muted); }
.wl-rating { font-size: 0.7rem; font-weight: 700; color: var(--accent-yellow); }

/* ── Small screens: the sidebar slides in, like the real app ──────────────── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .scrim {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 150;
  }
  .app-main { margin-left: 0; }
  .topbar { display: flex; }
  .app-content { padding: 1rem; }
}

@media (max-width: 420px) {
  .deck { --card-w: 84%; }
  .app-content { padding: 0.85rem; }
}

/* ── Deck arrows: for screens with a mouse and no way to swipe ─────────────── */
.deck-wrap { position: relative; }
/* Hidden by default — on a touchscreen the swipe IS the control. */
.deck-arrow { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .deck-arrow {
    position: absolute;
    top: calc(50% - 0.55rem);
    transform: translateY(-50%);
    z-index: 5;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--bg-card); color: var(--text-secondary);
    font: inherit; font-size: 1.4rem; line-height: 1;
    box-shadow: var(--shadow); cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease;
  }
  .deck-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .deck-arrow:disabled { opacity: 0.3; cursor: default; box-shadow: var(--shadow-sm); }
  .deck-arrow--prev { left: 0.15rem; }
  .deck-arrow--next { right: 0.15rem; }
}

/* ── Electricity / Salary / Finance ────────────────────────────────────────── */
.stat-grid {
  display: grid; gap: 0.5rem; margin-bottom: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.stat {
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: 0.6rem 0.7rem; box-shadow: var(--shadow-sm);
}
.stat-label {
  font-size: 0.64rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.stat-val { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.stat-val--green { color: var(--accent-green); }

.bar-label {
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-size: 0.74rem; color: var(--text-secondary); margin-bottom: 0.3rem;
}
.bar { height: 8px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent-yellow); border-radius: 999px; }

.rows {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); overflow: hidden;
}
.row {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}
.row:last-child { border-bottom: 0; }
.row-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.row-sub { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.row-val { font-weight: 750; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.row-val--red { color: var(--accent-red); }
.row--total { background: var(--bg-hover); }
.row--total .row-name, .row--total .row-val { font-weight: 850; }

.paid-banner {
  border: 1px solid #a7f3d0; background: var(--accent-green-light); color: var(--accent-green);
  border-radius: var(--radius); padding: 0.6rem 0.8rem; margin-bottom: 0.9rem;
  font-size: 0.85rem; font-weight: 650;
}
.paid-date { color: var(--text-muted); font-weight: 500; }

.period-nav {
  display: flex; align-items: center; gap: 0.75rem; justify-content: center;
  margin-bottom: 0.6rem;
}
.period-btn {
  width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); font-size: 1.2rem; cursor: pointer;
}
.period-label { font-size: 0.92rem; font-weight: 750; }

.rate-bar {
  display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
  font-size: 0.74rem; color: var(--text-secondary);
  background: var(--bg-hover); border-radius: var(--radius);
  padding: 0.45rem 0.7rem; margin-bottom: 0.5rem;
}

.netpay {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-radius: 14px; padding: 1rem 1.1rem; color: #fff; margin: 0.9rem 0;
  box-shadow: var(--shadow);
}
.netpay-label { font-size: 0.82rem; opacity: 0.9; }
.netpay-val { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; }

.fin-hero {
  display: flex; flex-direction: column; gap: 0.2rem;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-radius: 14px; padding: 1.3rem 1.2rem; color: #fff; margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.fin-hero-label { font-size: 0.78rem; opacity: 0.9; }
.fin-hero-val { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; }
.fin-hero-sub { font-size: 0.76rem; opacity: 0.85; }