:root {
  --bg: #0d0d0d;
  --card: #141414;
  --border: #2a2a2a;
  --gold: #F5C518;
  --closed-bg: #0f0f0f;
  --muted: #555;
  --pending: #F5A623;
  --surplus: #27C96F;
  --invested: #4FC3F7;
  --deficit: #E5484D;
  --target: #888;
  --white: #fff;
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px calc(120px + env(safe-area-inset-bottom));
  letter-spacing: -0.01em;
}

/* ---------- header ---------- */
.app-header { padding: 26px 0 16px; }
.header-row { display: flex; align-items: center; justify-content: space-between; }
.app-name { font-size: 24px; font-weight: 600; color: var(--white); }
.tagline { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* compact module header: on Leogo/Ikaa the personal title block is replaced by
   the module name + one live number; tagline + pending badge are hidden there */
.module-num { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.module-num:empty { display: none; }
body.leogo-mode .tagline, body.ikaa-mode .tagline,
body.leogo-mode .pending-badge, body.ikaa-mode .pending-badge { display: none; }
body.leogo-mode .app-header, body.ikaa-mode .app-header { padding: 20px 0 12px; }

.history-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.history-btn:active { transform: scale(0.92); }
.history-btn svg { width: 19px; height: 19px; stroke: currentColor; }

/* ---------- surplus banner ---------- */
.surplus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(39, 201, 111, 0.14), rgba(39, 201, 111, 0.04));
  border: 1px solid rgba(39, 201, 111, 0.3);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sb-left { display: flex; flex-direction: column; gap: 3px; }
.sb-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--surplus);
  font-weight: 600;
}
.sb-hint { font-size: 11px; color: var(--muted); }
.sb-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--surplus);
  letter-spacing: -0.02em;
}
/* same banner, deficit skin — an unpaid withdrawal sits where surplus normally does */
.surplus-banner.deficit {
  background: linear-gradient(135deg, rgba(229, 72, 77, 0.14), rgba(229, 72, 77, 0.04));
  border-color: rgba(229, 72, 77, 0.34);
}
.surplus-banner.deficit .sb-label,
.surplus-banner.deficit .sb-value { color: var(--deficit); }

/* ---------- summary ---------- */
.summary {
  /* wrap into a grid so every card is visible on a phone (was a flex row with
     overflow-x that pushed the last cards off the screen edge, looking clipped) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding-bottom: 14px;
}

.stat-card {
  /* grow to fit the number instead of clipping it (fixed 120px cut off
     values like "₹1,23,220.50"); the row scrolls horizontally if needed */
  flex: 0 0 auto;
  min-width: 116px;
  max-width: 78vw;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.stat-value { font-size: 20px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-spent { color: var(--white); }
.c-target { color: var(--target); }
.c-invested { color: var(--invested); }
.c-pending { color: var(--pending); }
.c-surplus { color: var(--surplus); }
.c-deficit { color: var(--deficit); }
.stat-sub { font-size: 10px; color: var(--muted); margin-top: -4px; }

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 8px 0 14px;
  z-index: 20;
}
.tab {
  /* size to content + share leftover space, and never wrap the label to a
     second line (flex:1 basis-0 forced equal 82px slots → "Daily Expenses" wrapped) */
  flex: 1 1 auto;
  white-space: nowrap;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 4px 12px;
  min-height: 44px;
  position: relative;
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: -0.01em;
}
.tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.25s ease;
  border-radius: 2px;
}
.tab.active { color: var(--gold); }
.tab.active::after { width: 70%; }

/* ---------- entries ---------- */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.entries { display: flex; flex-direction: column; gap: 12px; }

.section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 10px 2px 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  border-left: 3px solid var(--gold);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.card.closed {
  background: var(--closed-bg);
  border-left-color: var(--border);
  color: var(--muted);
}

/* head */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.card.closed .card-head { cursor: pointer; }

.card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.card.closed .card-name { color: var(--muted); font-weight: 500; }

.badge-surplus {
  font-size: 11px;
  font-weight: 600;
  color: var(--surplus);
  background: rgba(39, 201, 111, 0.12);
  padding: 2px 7px;
  border-radius: 999px;
}

.pills { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pill {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.5;
}

/* the left block must be allowed to shrink, or a long name/number pushes the
   right-aligned amount off the screen edge */
.card-head-left { flex: 1; min-width: 0; }
.card-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.card-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.chevron {
  font-size: 16px;
  color: var(--muted);
  line-height: 1;
  transition: transform 0.25s ease;
}
.card.expanded .chevron { transform: rotate(180deg); }

/* body (collapsible) */
.card-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
  margin-top: 0;
}
.card-body.show {
  max-height: 360px;
  opacity: 1;
  margin-top: 14px;
}

/* numbers grid */
.num-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.num { display: flex; flex-direction: column; gap: 4px; }
.num-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.num-value { font-size: 14px; font-weight: 500; }
.v-spent { color: var(--white); }
.v-target { color: var(--target); }
.v-invested { color: var(--invested); }
.v-pending { color: var(--pending); }
.card.closed .num-value { color: var(--target); }

/* progress */
.progress {
  height: 5px;
  background: #1f1f1f;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 4px;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.progress > span.full { background: var(--surplus); }

/* actions */
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.invest-input {
  flex: 1;
  min-width: 0;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  padding: 9px 14px;
}
.invest-input:focus { outline: none; border-color: var(--gold); }

.pill-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 44px;                 /* comfortable tap target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.pill-btn.save { background: var(--gold); color: #0d0d0d; border-color: var(--gold); }
.pill-btn.close { color: var(--surplus); border-color: rgba(39, 201, 111, 0.4); }
.pill-btn.reopen { color: var(--gold); border-color: rgba(245, 197, 24, 0.4); }
.pill-btn.del { color: #e05c5c; border-color: rgba(224, 92, 92, 0.35); }
.pill-btn:active { transform: scale(0.95); }

/* empty state */
.empty {
  text-align: center;
  padding: 56px 20px;
  color: #333;
}
.empty svg { width: 40px; height: 40px; margin-bottom: 14px; stroke: #333; }
.empty p { font-size: 14px; color: #333; }

/* ---------- FAB ---------- */
.fab {
  position: fixed;
  right: max(20px, calc(50% - 320px + 20px));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: #0d0d0d;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(245, 197, 24, 0.28);
  z-index: 40;
  transition: transform 0.15s ease;
}
.fab:active { transform: scale(0.92); }

/* ---------- bottom sheet ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 50;
}
.sheet-backdrop.show { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 60;
}
.sheet.show { transform: translateY(0); }

.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  margin: 0 auto 18px;
}
.sheet-title { font-size: 18px; font-weight: 600; margin-bottom: 18px; }

.sheet-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.sheet-form input,
.sheet-form select {
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  width: 100%;
}
.sheet-form input:focus,
.sheet-form select:focus { outline: none; border-color: var(--gold); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }

.submit-btn {
  background: var(--gold);
  color: #0d0d0d;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 14px;
  margin-top: 4px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.submit-btn:active { transform: scale(0.98); }

/* ---------- Invest & Settle panel ---------- */
.settle {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}
.settle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.settle-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}
.settle-target {
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Must wrap. The buttons are white-space:nowrap, so they cannot shrink below their
   own labels and every bit of width pressure lands on the field instead — on a 390px
   phone that squeezed the <input> to its 8px minimum, which is untappable, so a tap
   hit the prefix/suffix text and the keyboard had nothing focused to type into.
   The field takes a full row of its own and the buttons share the row beneath it, at
   every width. A basis tuned to keep desktop on one line lands within a pixel of the
   640px max-width and flips layout if font metrics shift (Inter failing to load is
   enough), and it leaves an awkward middle zone around 430px where one button fits
   beside the field and the other stretches across its own line. One extra row on
   desktop is the cheaper trade for a typing target that is never squeezed. */
.settle-input-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.settle-input-row .settle-btn { flex: 1 1 auto; }
.settle-field {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px;
  min-width: 0;
  cursor: text;
  touch-action: manipulation;   /* no 300ms double-tap delay before focus */
}
.settle-field:focus-within { border-color: var(--gold); }
.settle-prefix, .settle-suffix {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
#settle-amount {
  flex: 1;
  /* a real floor, so the typing target can never collapse to nothing again.
     font-size must stay >= 16px or iOS Safari zooms the page on focus. */
  min-width: 64px;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 4px;
  text-align: center;
  touch-action: manipulation;
}
#settle-amount:focus { outline: none; }
/* hide number spinners */
#settle-amount::-webkit-outer-spin-button,
#settle-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#settle-amount { -moz-appearance: textfield; }

.settle-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.settle-btn:active { transform: scale(0.96); }
.settle-btn.primary { background: var(--gold); color: #0d0d0d; border-color: var(--gold); }
.settle-btn.ghost { background: transparent; color: var(--muted); }
.settle-btn.danger {
  background: transparent;
  color: var(--deficit);
  border-color: rgba(229, 72, 77, 0.4);
}

/* preview */
.settle-preview {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  animation: settleIn 0.25s ease;
}
@keyframes settleIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settle-list { display: flex; flex-direction: column; gap: 2px; }
.settle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #1c1c1c;
}
.settle-item:last-child { border-bottom: none; }
.si-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border-radius: 5px;
  flex-shrink: 0;
  width: 42px;
  text-align: center;
}
.si-tag.big { color: var(--gold); background: rgba(245, 197, 24, 0.12); }
.si-tag.daily { color: var(--invested); background: rgba(79, 195, 247, 0.12); }
.si-tag.repay { color: var(--deficit); background: rgba(229, 72, 77, 0.12); }
/* the repayment is money leaving the top of the amount, before any entry sees it */
.settle-item.repay { border-bottom-color: rgba(229, 72, 77, 0.25); }
.settle-item.repay .si-alloc { color: var(--deficit); }

.si-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-alloc { font-size: 14px; font-weight: 600; color: var(--invested); white-space: nowrap; }
.si-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.si-status.settled { color: var(--surplus); background: rgba(39, 201, 111, 0.12); }
.si-status.partial { color: var(--pending); background: rgba(245, 166, 35, 0.12); }

.settle-foot {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 14px;
  line-height: 1.5;
}
.settle-foot b { color: var(--white); font-weight: 600; }
.settle-foot .leftover { color: var(--pending); }
.settle-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 8px 0 14px;
}
.settle-actions { display: flex; gap: 10px; }
.settle-actions .settle-btn { flex: 1; }

/* ---------- undo toast ---------- */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: 608px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #1c1c1c;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 70;
  animation: toastIn 0.25s ease;
}
.toast[hidden] { display: none; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast-msg {
  font-size: 13px;
  color: var(--white);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast-undo {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.toast-undo:active { transform: scale(0.94); }

/* ---------- undo history modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 80;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 640px;
  margin: 0 auto;
  max-height: 80vh;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.modal.show { transform: translateY(0); }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 17px; font-weight: 600; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.hist-list {
  overflow-y: auto;
  padding: 8px 20px calc(28px + env(safe-area-inset-bottom));
}
.hist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #1c1c1c;
}
.hist-item:last-child { border-bottom: none; }
.hist-main { flex: 1; min-width: 0; }
.hist-desc {
  font-size: 14px;
  color: var(--white);
  line-height: 1.35;
}
.hist-item.undone .hist-desc { color: var(--muted); text-decoration: line-through; }
.hist-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.hist-type {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(245, 197, 24, 0.12);
  padding: 2px 6px;
  border-radius: 5px;
  margin-right: 6px;
}
.hist-undo {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(245, 197, 24, 0.4);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.hist-undo:active { transform: scale(0.95); }
.hist-undone-tag { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.hist-empty { text-align: center; color: #333; padding: 40px 0; font-size: 14px; }

/* ---------- lock screen (PIN) ---------- */
.lock {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lock[hidden] { display: none; }
.lock-inner { width: 100%; max-width: 320px; text-align: center; }
.lock-logo {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border: 2px solid var(--gold); border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: var(--white);
}
.lock-title { font-size: 18px; font-weight: 600; margin-bottom: 22px; color: var(--white); }
.pin-dots { display: flex; gap: 16px; justify-content: center; margin-bottom: 14px; }
.pin-dots span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--muted); transition: background 0.15s, border-color 0.15s;
}
.pin-dots span.filled { background: var(--gold); border-color: var(--gold); }
.pin-dots.shake { animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}
.lock-msg { min-height: 18px; font-size: 13px; color: #f87171; margin-bottom: 18px; }
.lock-msg.info { color: var(--muted); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 280px; margin: 0 auto; }
.key {
  height: 64px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--white);
  font-size: 24px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.key:active { background: #222; transform: scale(0.95); }
.key-empty { background: transparent; border: none; }
.key-del { font-size: 20px; color: var(--muted); }
.keypad.disabled .key { opacity: 0.4; pointer-events: none; }

/* ---------- header actions + pending badge ---------- */
.title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 50%;
  color: var(--muted); cursor: pointer; flex-shrink: 0; transition: color 0.15s, border-color 0.15s;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.pending-badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pending-badge:empty { display: none; }
.pending-badge.red { color: #fff; background: #e0443e; }
.pending-badge.green {
  color: #0d0d0d; background: var(--surplus);
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}

/* ---------- warning banner ---------- */
.warn-banner {
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.4);
  color: var(--pending);
  font-size: 13px; font-weight: 500;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 16px;
}
.warn-banner[hidden] { display: none; }

/* ---------- change PIN modal ---------- */
.cp-modal { max-height: none; }
.cp-body {
  padding: 18px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.cp-note { font-size: 13px; color: var(--muted); line-height: 1.4; }
.cp-input {
  background: #0d0d0d; border: 1px solid var(--border); border-radius: 10px;
  color: var(--white); font-family: inherit; font-size: 18px;
  letter-spacing: 0.3em; text-align: center; padding: 13px;
}
.cp-input:focus { outline: none; border-color: var(--gold); }
.cp-msg { min-height: 16px; font-size: 12px; color: #f87171; }
.cp-save {
  background: var(--gold); color: #0d0d0d; border: none; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 600; padding: 14px; cursor: pointer;
}

/* ---------- add to home screen nudge ---------- */
.a2hs {
  position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: 608px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: #1c1c1c; border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 65;
  animation: toastIn 0.3s ease;
}
.a2hs[hidden] { display: none; }
.a2hs-icon {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--white); flex-shrink: 0;
}
.a2hs-text { flex: 1; min-width: 0; font-size: 13px; color: var(--white); line-height: 1.3; }
.a2hs-add {
  background: var(--gold); color: #0d0d0d; border: none; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; flex-shrink: 0;
}
.a2hs-close { background: transparent; border: none; color: var(--muted); font-size: 15px; cursor: pointer; flex-shrink: 0; }

/* ---- sub-nav "More" grouping (Leogo + Ikaa) ---- */
.lg-pill.occasional, .ik-pill.occasional { display: none; }   /* hidden from the row; live in the More sheet */
.lg-more-btn.on, .ik-more-btn.on { color: var(--white); border-color: var(--muted); }
.nav-more-sheet {
  display: none;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  margin: -6px 0 14px;
}
.nav-more-sheet.open { display: flex; }
.nav-more-item {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
}
.nav-more-item:active { background: rgba(255, 255, 255, 0.06); }
.nav-more-item.active { color: var(--gold); font-weight: 600; }
body.ikaa-mode .nav-more-item.active { color: var(--ik-accent); }