@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

:root {
  --font:    -apple-system, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
  --label:   #000000;
  --label-2: #8E8E93;
  --label-3: #C7C7CC;
  --sep:     #F2F2F7;
  --blue:    #007AFF;
  --green:   #34C759;
  --red:     #FF3B30;
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --smooth:  cubic-bezier(.25,.46,.45,.94);
}

body {
  font-family: var(--font);
  background: #fff;
  color: var(--label);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ═══════════════════════════════════
   APP SHELL
═══════════════════════════════════ */
.app {
  max-width: 480px;
  margin: 0 auto;
  height: 100svh;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Scrollable content area */
.app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-content::-webkit-scrollbar { display: none; }

/* ── HEADER ── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top,14px) + 10px) 22px 12px;
  background: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 38px; height: 38px;
  max-width: 38px; max-height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-icon svg { color: #fff; }

.brand-logo-img {
  display: block;
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  object-fit: cover;
  border-radius: 9px;
}

.brand-logo-img.logo-dark { display: none; }
html.dark .brand-logo-img.logo-light { display: none; }
html.dark .brand-logo-img.logo-dark  { display: block; }

.brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
}

.profile-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sep);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--label-2);
  transition: background 150ms;
}

.profile-btn:active { background: #E5E5EA; }

/* ── BALANCE ── */
.balance-section {
  padding: 20px 24px 0;
}

.balance-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--label-2);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.balance-num {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -2.5px;
  line-height: 1.05;
  color: var(--label);
  transition: color 300ms;
}

.balance-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.balance-eye-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--label-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 140ms, opacity 120ms;
}

.balance-eye-btn:active { opacity: .5; }

/* ── TABS ── */
.tabs {
  display: flex;
  padding: 20px 24px 0;
  border-bottom: 1.5px solid var(--sep);
  gap: 4px;
}

.tab-btn {
  padding: 10px 4px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -.02em;
  color: var(--label-2);
  border: none;
  background: none;
  cursor: pointer;
  margin-right: 20px;
  position: relative;
  transition: color 180ms;
}

.tab-btn.on { color: var(--label); }

.tab-btn.on::after {
  content: '';
  position: absolute;
  bottom: -1.5px; left: 0; right: 0;
  height: 2.5px;
  background: var(--blue);
  border-radius: 2px;
}

/* ── SECTION HEADER ── */
.section-lbl {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  padding: 20px 24px 6px;
}

/* ── TRANSACTION LIST ── */
.tx-list { padding: 0 0 calc(env(safe-area-inset-bottom,20px) + 100px); }

.tx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background 100ms;
  -webkit-tap-highlight-color: transparent;
}

.tx-row:active { background: #FAFAFA; }

/* Circle gradient icon */
.tx-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.tx-icon svg {
  width: 22px; height: 22px;
  color: #fff;
  display: block;
}

.tx-icon i.fi {
  font-size: 22px;
  color: #fff;
  line-height: 1;
  display: block;
}

/* Brand logo variant — fills circle natively */
.tx-icon-brand {
  background: #EBEBF0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s;
  display: block;
}

.tx-body { flex: 1; min-width: 0; }

.tx-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.tx-cat-lbl {
  font-size: 14px;
  color: var(--label-2);
  margin-top: 2px;
  font-weight: 400;
}

.tx-right { text-align: right; flex-shrink: 0; }

.tx-amt {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--label);
}

.tx-amt.income { color: var(--green); }

.tx-date {
  font-size: 13px;
  color: var(--label-2);
  margin-top: 2px;
}

/* slide-in animation */
@keyframes txSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tx-row.new { animation: txSlide 320ms var(--spring) both; }

/* ── EMPTY ── */
.empty-state {
  text-align: center;
  padding: 28px 24px;
}

.empty-icon {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.empty-icon svg { width: 26px; height: 26px; color: var(--label-3); }
.empty-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--label-2); }
.empty-body  { font-size: 15px; color: var(--label-2); line-height: 1.55; margin-top: 6px; }

/* ── PAYMENTS VIEW ── */
.pay-view { padding: 0 0 calc(env(safe-area-inset-bottom,20px) + 100px); }
.pay-view .tx-list { padding-bottom: 0; }
.pay-view #pay-debts-view { margin-top: 24px; }

.pay-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 6px;
}

.pay-summary-lbl {
  font-size: 14px;
  color: var(--label-2);
}

.pay-summary-amt {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--label);
}

.pay-summary-amt.owe  { color: var(--red); }
.pay-summary-amt.owed { color: var(--green); }

/* ── CHARTS VIEW ── */
.chart-view { padding: 0 0 calc(env(safe-area-inset-bottom,20px) + 100px); }

/* Month nav */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 20px 10px;
}

.month-nav-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
  min-width: 130px;
  text-align: center;
}

.month-nav-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sep);
  border: none;
  font-size: 18px;
  color: var(--label);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms;
  line-height: 1;
}

.month-nav-btn:disabled { opacity: .3; pointer-events: none; }
.month-nav-btn:active { background: #E5E5EA; }

/* Section divider inside chart-view */
.chart-section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--label-2);
  padding: 16px 22px 8px;
}

/* Line chart */
.line-chart-wrap {
  padding: 0 16px 4px;
  overflow: hidden;
}

.line-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 6px 10px;
}

.line-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--label-2);
}

.line-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.line-legend-dash {
  width: 18px; height: 2px;
  flex-shrink: 0;
  background: repeating-linear-gradient(90deg, #8E8E93 0 4px, transparent 4px 8px);
}

.donut-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 0 20px;
}

.donut {
  width: 200px; height: 200px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-hole {
  width: 120px; height: 120px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.donut-hole-amt  { font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.donut-hole-lbl  { font-size: 11px; font-weight: 500; color: var(--label-2); letter-spacing: .02em; text-transform: uppercase; }

.cat-legend { padding: 0 20px; }

.legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--sep);
}

.legend-row:last-child { border-bottom: none; }

.legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-name { flex: 1; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }

.legend-bar-wrap {
  width: 80px;
  height: 4px;
  background: var(--sep);
  border-radius: 4px;
  overflow: hidden;
}

.legend-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 600ms var(--smooth);
}

.legend-amt { font-size: 15px; font-weight: 700; letter-spacing: -.3px; min-width: 64px; text-align: right; }

/* Empty chart */
.chart-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--label-2);
  font-size: 15px;
}

/* ── FILTER CHIPS (inside History) ── */
.chips-wrap {
  display: flex;
  gap: 8px;
  padding: 14px 24px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-wrap::-webkit-scrollbar { display: none; }

.chip {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  letter-spacing: -.01em;
  border: 1.5px solid var(--sep);
  background: none;
  color: var(--label-2);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 140ms var(--smooth);
}

.chip.on {
  background: var(--label);
  border-color: var(--label);
  color: #fff;
}

.chip:active { transform: scale(.94); }

/* ══════════════════════════════════
   AI INPUT — FLOATING PANEL
══════════════════════════════════ */
.ai-bar {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom,0px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  justify-content: center;
  width: min(380px, 92vw);
  pointer-events: none;
}

/* Collapsed "Hablar con FinAI" pill */
.ai-collapsed {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 72px;
  padding: 0 24px;
  width: auto;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 36px;
  background: #0A0A0A;
  color: #fff;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  transition: transform 150ms, opacity 200ms;
  -webkit-tap-highlight-color: transparent;
}
.ai-collapsed:active { transform: scale(.98); }
.ai-bar.open .ai-collapsed { display: none; }

/* Animated orb (video) */
.ai-orb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #0A0A0A;
}

/* Backdrop blur overlay behind the open panel — swallows outside clicks */
.ai-bar-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  display: none;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(0,0,0,.35);
}
.ai-bar-overlay.open { display: block; }

/* Expanded panel */
.ai-panel {
  display: none;
  pointer-events: auto;
  flex-direction: column;
  width: 100%;
  background: #0A0A0A;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.ai-bar.open .ai-panel { display: flex; }

.ai-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 8px;
  flex-shrink: 0;
}

.ai-panel-title {
  flex: 1;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}

.ai-panel-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.06);
  color: #8E8E93;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 150ms, background 150ms, transform 150ms;
  -webkit-tap-highlight-color: transparent;
}
.ai-panel-close:active { transform: scale(.9); }
.ai-panel-close:hover { color: #fff; background: rgba(255,255,255,.12); }

.ai-panel-textarea {
  flex: 1;
  width: 100%;
  min-height: 90px;
  border: none;
  outline: none;
  resize: none;
  background: none;
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: -.01em;
  color: #fff;
  padding: 0 14px 8px;
}
.ai-panel-textarea::placeholder { color: #6E6E73; }

/* Footer with mic + send icon buttons, bottom-right */
.ai-panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 14px 14px;
}

.ai-icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms, opacity 150ms;
}
.ai-icon-btn:active { transform: scale(.92); }

.ai-mic-btn {
  background: rgba(255,255,255,.06);
  color: #8E8E93;
  font-size: 17px;
}
.ai-mic-btn:active { opacity: .7; }

@keyframes mic-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(255,59,48,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,59,48,.0); }
}

.ai-mic-btn.listening {
  color: var(--red);
  background: rgba(255,59,48,.12);
  animation: mic-pulse 1.4s ease-out infinite;
}

.ai-send {
  color: #fff;
}
.ai-send:disabled {
  opacity: .35;
  pointer-events: none;
}

@media (max-width: 480px) {
  .ai-bar { width: calc(100% - 24px); }
}

/* ── LIQUID GLASS CTA ── */
.cta-liquid {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 1px 1px 1px -.5px rgba(255,255,255,.7),
    inset -1px -1px 1px -.5px rgba(255,255,255,.3),
    inset 0 0 6px 6px rgba(255,255,255,.05),
    0 4px 16px rgba(0,0,0,.3),
    0 0 18px rgba(255,255,255,.08) !important;
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease !important;
}
.cta-liquid:hover {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.12);
}
.cta-liquid:active { transform: scale(.97); }
.cta-liquid:disabled,
.cta-liquid.disabled {
  opacity: .35 !important;
  filter: none !important;
  pointer-events: none;
}

.ai-status {
  min-height: 18px;
  padding: 4px 4px 0;
  font-size: 12px;
  letter-spacing: -.01em;
}

/* dots */
@keyframes blink {
  0%,80%,100% { opacity:.2; transform:scale(.75); }
  40%          { opacity:1;  transform:scale(1); }
}

.dots { display:inline-flex; gap:3px; align-items:center; }
.dot  { width:5px; height:5px; border-radius:50%; background:var(--label-3); animation:blink 1.2s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay:.2s; }
.dot:nth-child(3) { animation-delay:.4s; }

/* ══════════════════════════════════
   TOAST
══════════════════════════════════ */
.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom,20px) + 90px);
  left: 50%;
  transform: translateX(-50%) translateY(14px) scale(.92);
  background: rgba(20,20,22,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  padding: 11px 18px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  opacity: 0;
  pointer-events: none;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 260ms var(--spring);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.toast-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ══════════════════════════════════
   ACTION SHEET
══════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
}
.overlay.open { opacity: 1; pointer-events: all; }

.asheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(110%);
  width: 100%;
  max-width: 480px;
  padding: 0 10px calc(env(safe-area-inset-bottom,20px) + 10px);
  z-index: 210;
  transition: transform 360ms var(--spring);
}
.asheet.open { transform: translateX(-50%) translateY(0); }

.asheet-card {
  background: #161616;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Detail section */
.asheet-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  gap: 3px;
  border-bottom: 0.5px solid rgba(255,255,255,.08);
}

.ash-icon-wrap { margin-bottom: 12px; }

.ash-icon-wrap .tx-icon,
.ash-icon-wrap .tx-icon-brand {
  width: 68px;
  height: 68px;
}

.ash-icon-wrap .tx-icon svg { width: 26px; height: 26px; }
.ash-icon-wrap .tx-icon i.fi { font-size: 26px; }

.asheet-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  text-align: center;
  color: #fff;
}

.asheet-amt {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1.2px;
  margin-top: 6px;
  color: #fff;
}

.asheet-meta {
  font-size: 14px;
  color: #8E8E93;
  margin-top: 4px;
  text-align: center;
}

.asheet-meta-sep { opacity: .35; margin: 0 4px; }

.asheet-btn {
  display: block;
  width: 100%;
  padding: 17px;
  font-size: 20px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -.02em;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  color: #fff;
  transition: background 120ms;
}
.asheet-btn:active { background: rgba(255,255,255,.06); }
.asheet-btn.del    { color: var(--red); }

.amount-input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -.01em;
  color: var(--label);
  background: transparent;
  border: 1.5px solid var(--sep);
  border-radius: 12px;
  outline: none;
  text-align: center;
  transition: border-color 140ms;
}

.amount-input:focus { border-color: var(--label); }
.amount-input::placeholder { color: var(--label-3); }

/* Edit transaction form */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 16px;
}

.edit-type-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 2px;
}

.edit-type-btn {
  flex: 1;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -.01em;
  color: var(--label);
  background: transparent;
  border: 1.5px solid var(--sep);
  border-radius: 12px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}

.edit-type-btn.on { background: var(--label); color: #fff; border-color: var(--label); }

.edit-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 500;
  font-family: var(--font);
  letter-spacing: -.01em;
  color: var(--label);
  background: transparent;
  border: 1.5px solid var(--sep);
  border-radius: 12px;
  outline: none;
  transition: border-color 140ms;
}

.edit-input:focus { border-color: var(--label); }
.edit-input::placeholder { color: var(--label-3); }

.edit-select {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
}

.asheet-cancel {
  display: block;
  width: 100%;
  padding: 17px;
  font-size: 20px;
  font-weight: 600;
  font-family: var(--font);
  border: none;
  background: #161616;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  transition: background 120ms;
}
.asheet-cancel:active { background: #232323; }

/* ══════════════════════════════════
   AUTH PAGE
══════════════════════════════════ */
.auth-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 32px 24px calc(env(safe-area-inset-bottom,24px) + 24px);
}

.auth-card {
  width: 100%;
  max-width: 380px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 40px;
}

.auth-app-icon {
  width: 72px; height: 72px;
  background: var(--label);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.auth-app-icon svg { color: #fff; }

.auth-name   { font-size: 28px; font-weight: 800; letter-spacing: -.8px; }
.auth-tagline { font-size: 15px; color: var(--label-2); margin-top: 4px; }

/* Segment */
.seg {
  display: flex;
  background: var(--sep);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
  margin-bottom: 24px;
}

.seg-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -.01em;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--label-2);
  transition: all 180ms var(--smooth);
}

.seg-btn.on {
  background: #fff;
  color: var(--label);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Fields */
.field-group {
  background: var(--sep);
  border-radius: 13px;
  overflow: hidden;
  margin-bottom: 12px;
}

.field-row {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 52px;
}

.field-row + .field-row { border-top: 0.5px solid rgba(60,60,67,.12); }

.field-lbl {
  font-size: 16px;
  color: var(--label);
  width: 96px;
  flex-shrink: 0;
}

.field-row input {
  flex: 1;
  border: none;
  background: none;
  font-size: 16px;
  font-family: var(--font);
  letter-spacing: -.01em;
  color: var(--label);
  outline: none;
  padding: 15px 0;
  min-width: 0;
}

.field-row input::placeholder { color: var(--label-3); }

.btn-fill {
  width: 100%;
  padding: 16px;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: -.02em;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: var(--label);
  color: #fff;
  transition: transform 100ms, opacity 120ms;
  margin-bottom: 10px;
}

.btn-fill:active  { transform: scale(.97); opacity: .88; }
.btn-fill:disabled { opacity: .45; pointer-events: none; }

.alert {
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  display: none;
}

.alert-err { background: rgba(255,59,48,.10); color: #CC1B10; }
.alert-ok  { background: rgba(52,199,89,.10); color: #1A8A36; }

/* ══════════════════════════════════
   SPINNER
══════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }

.spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2.5px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

/* ══════════════════════════════════
   PROFILE OVERLAY
══════════════════════════════════ */
.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
}

.profile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.profile-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(105%);
  width: 100%;
  max-width: 480px;
  height: 100svh;
  background: #fff;
  border-radius: 0;
  padding: 0 24px calc(env(safe-area-inset-bottom, 24px) + 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: transform 400ms cubic-bezier(.34,1.15,.64,1);
}

.profile-panel::-webkit-scrollbar { display: none; }

.profile-overlay.open .profile-panel {
  transform: translateX(-50%) translateY(0);
}

.profile-header {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top,14px) + 10px) 0 14px;
  margin-bottom: 6px;
}

.profile-header-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.profile-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sep);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--label-2);
  transition: background 150ms;
  flex-shrink: 0;
}

.profile-close:active { background: #E5E5EA; }

.profile-avatar {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: linear-gradient(145deg, #007AFF, #5856D6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
}

.profile-name {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin-bottom: 4px;
}

.profile-email-lbl {
  text-align: center;
  font-size: 14px;
  color: var(--label-2);
  margin-bottom: 6px;
}

.profile-member {
  text-align: center;
  font-size: 13px;
  color: var(--label-3);
  margin-bottom: 24px;
}

/* ── Plan banner ── */
.plan-banner {
  background: linear-gradient(135deg, rgba(0,122,255,.1), rgba(88,86,214,.06));
  border: 1px solid rgba(0,122,255,.16);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 20px;
}

.plan-banner-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-banner-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: #fff;
  font-size: 19px;
}

.plan-banner-info { flex: 1; min-width: 0; }

.plan-banner-label {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.2px;
}

.plan-banner-sub {
  font-size: 12.5px;
  color: var(--label-2);
  margin-top: 2px;
}

.plan-banner-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--label);
  color: #fff;
}

.plan-banner-cta {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: none;
  border-radius: 100px;
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: #fff;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  cursor: pointer;
  transition: transform 120ms, opacity 150ms;
}
.plan-banner-cta:active { transform: scale(.98); }

.plan-banner.is-paid {
  background: linear-gradient(135deg, rgba(52,199,89,.12), rgba(0,199,190,.06));
  border-color: rgba(52,199,89,.2);
}

.plan-banner.is-paid .plan-banner-icon {
  background: linear-gradient(135deg, #34C759, #00C7BE);
}

.plan-banner.is-paid .plan-banner-badge {
  background: linear-gradient(135deg, #34C759, #00C7BE);
  color: #fff;
}

.plan-banner.is-paid .plan-banner-cta { display: none; }

/* ── Preference rows ── */
.pref-group {
  background: #000;
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
}

.pref-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: transparent;
}

.pref-row-tap { cursor: pointer; }
.pref-row-tap:active { background: rgba(0,0,0,.05); }

.pref-icon {
  font-size: 18px;
  color: #8E8E93;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.pref-label {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fff;
}

.pref-select {
  font-size: 14px;
  font-weight: 500;
  color: #8E8E93;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font);
  max-width: 160px;
  cursor: pointer;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}

.pref-select option { background: #1C1C1E; color: #fff; }

.pref-value {
  font-size: 14px;
  font-weight: 500;
  color: #8E8E93;
  margin-right: 4px;
  white-space: nowrap;
}

.pref-arrow {
  font-size: 14px;
  color: #8E8E93;
}

.pref-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin-left: 49px;
}

/* Toggle switch */
.toggle-sw {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-sw input { display: none; }

.toggle-track {
  width: 50px; height: 30px;
  background: var(--label-3);
  border-radius: 15px;
  transition: background 240ms;
  position: relative;
  display: block;
}

.toggle-sw input:checked + .toggle-track { background: var(--green); }

.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1);
}

.toggle-sw input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
}

/* Change password modal */
.chpw-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
  padding: 24px;
}

.chpw-overlay.open { opacity: 1; pointer-events: all; }

.chpw-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

.chpw-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 20px;
  text-align: center;
}

.chpw-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  background: #F2F2F7;
  font-size: 15px;
  font-family: var(--font);
  margin-bottom: 10px;
  outline: none;
}

.chpw-input:focus { background: #E8E8ED; }

.chpw-err {
  font-size: 13px;
  color: var(--red);
  min-height: 18px;
  text-align: center;
  margin-bottom: 4px;
}

.chpw-btns {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.chpw-cancel, .chpw-submit {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 140ms;
}

.chpw-cancel { background: #F2F2F7; color: var(--label); }
.chpw-submit { background: var(--blue); color: #fff; }
.chpw-cancel:active, .chpw-submit:active { opacity: .75; }

.profile-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -.02em;
  border: none;
  border-radius: 14px;
  background: rgba(255,59,48,.09);
  color: var(--red);
  cursor: pointer;
  transition: opacity 140ms;
}

.profile-signout:active { opacity: .7; }

/* ══════════════════════════════════
   DESKTOP
══════════════════════════════════ */
@media (min-width: 520px) {
  .app {
    border-left: 1px solid rgba(0,0,0,.04);
    border-right: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 0 60px rgba(0,0,0,.04);
  }

  body { background: #F9F9FB; }
}

/* ══════════════════════════════════
   DARK MODE
══════════════════════════════════ */
html.dark body                  { background: #000; color: #fff; }
html.dark .app                  { background: #000; }
html.dark .top-bar              { background: #000; }
html.dark .brand-name           { color: #fff; }
html.dark .profile-btn          { color: #fff; background: #1C1C1E; border-color: transparent; }
html.dark .balance-section      { background: #000; }
html.dark .balance-eyebrow      { color: #636366; }
html.dark .balance-num          { color: #fff; }
html.dark .balance-eye-btn      { color: #636366; }
html.dark .tabs                 { background: #000; border-color: #2C2C2E; }
html.dark .tab-btn              { color: #636366; }
html.dark .tab-btn.on           { color: #fff; }
html.dark .section-lbl          { color: #636366; }
html.dark .app-content          { background: #000; }
html.dark .tx-row               { background: #000; }
html.dark .tx-row:active        { background: #1C1C1E; }
html.dark .tx-name              { color: #fff; }
html.dark .tx-amt                { color: #fff; }
html.dark .tx-cat-lbl           { color: #636366; }
html.dark .tx-date              { color: #636366; }
html.dark .tx-sep               { background: #1C1C1E; }
html.dark .empty-icon           { background: none; color: #636366; }
html.dark .empty-title          { color: #636366; }
html.dark .empty-body           { color: #636366; }
html.dark .donut-hole           { background: #000; }
html.dark .donut-hole-amt       { color: #fff; }
html.dark .donut-hole-lbl       { color: #636366; }
html.dark .cat-legend           { background: #000; }
html.dark .legend-row           { border-color: #1C1C1E; }
html.dark .legend-name          { color: #fff; }
html.dark .legend-amt           { color: #fff; }
html.dark .legend-bar-wrap      { background: #1C1C1E; }
html.dark .chart-section-title  { color: #636366; }
html.dark .pay-summary-lbl      { color: #636366; }
html.dark .pay-summary-amt      { color: #fff; }
html.dark .chart-empty          { color: #636366; }
html.dark .month-nav-btn        { background: #1C1C1E; color: #fff; }
html.dark .month-nav-label      { color: #fff; }
html.dark .line-legend-item     { color: #636366; }
html.dark .asheet               { background: #000; }
html.dark .asheet-card          { background: #1C1C1E; border-radius: 20px; }
html.dark .asheet-name          { color: #fff; }
html.dark .asheet-amt           { color: #fff; }
html.dark .asheet-meta          { color: #636366; }
html.dark .asheet-detail        { border-color: #2C2C2E; }
html.dark .asheet-btn           { color: #fff; }
html.dark .asheet-btn:active    { background: rgba(255,255,255,.06); }
html.dark .asheet-btn.del       { background: rgba(255,59,48,.15); }
html.dark .asheet-cancel        { background: #1C1C1E; color: #fff; }
html.dark .asheet-cancel:active { background: #2C2C2E; }
html.dark .amount-input         { color: #fff; border-color: #2C2C2E; }
html.dark .amount-input:focus   { border-color: #fff; }
html.dark .edit-input           { color: #fff; border-color: #2C2C2E; background: #000; }
html.dark .edit-input:focus     { border-color: #fff; }
html.dark .edit-select option   { background: #1C1C1E; color: #fff; }
html.dark .edit-type-btn        { color: #fff; border-color: #2C2C2E; }
html.dark .edit-type-btn.on     { background: #fff; color: #000; border-color: #fff; }

/* ══════════════════════════════════
   AI TOAST (floating AI replies)
══════════════════════════════════ */
.ai-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom,20px) + 84px);
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(10px) scale(.4);
  width: calc(100% - 40px);
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #000;
  border: none;
  color: #fff;
  padding: 10px 18px 10px 10px;
  border-radius: 24px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  z-index: 250;
  transition: transform 480ms cubic-bezier(.2,1.4,.3,1), opacity 280ms ease;
}

.ai-toast.show {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0) scale(1);
}

.ai-toast-orb {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: #000;
}

.ai-toast-txt { flex: 1; min-width: 0; }
.ai-toast.has-reply { cursor: pointer; }

.ai-reply-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
  padding: 24px;
}

.ai-reply-overlay.open { opacity: 1; pointer-events: all; }

.ai-reply-card {
  position: relative;
  background: #000;
  border-radius: 24px;
  padding: 28px 24px 32px;
  width: 100%;
  max-width: 460px;
  max-height: 78vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.ai-reply-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: #1C1C1E;
  color: #9A9AA0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ai-reply-close:active { opacity: .7; }

.ai-reply-orb {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.ai-reply-txt {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.01em;
  color: #fff;
  white-space: pre-wrap;
}

/* ── VOICE OVERLAY ── */
.vo-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top,18px) + 18px) 24px calc(env(safe-area-inset-bottom,24px) + 24px);
}
.vo-overlay.open { opacity: 1; pointer-events: all; }

.vo-top {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #6E6E73;
}

.vo-top-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34C759;
  box-shadow: 0 0 0 0 rgba(52,199,89,.5);
  animation: voDot 1.6s ease-out infinite;
}

@keyframes voDot {
  0%   { box-shadow: 0 0 0 0 rgba(52,199,89,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}

.vo-mid {
  flex: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

.vo-orb-wrap {
  position: relative;
  width: 230px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vo-orb-wrap::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  animation: voPulse 2.4s ease-out infinite;
}

.vo-orb-wrap::after {
  content: '';
  position: absolute;
  inset: -44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  animation: voPulse 2.4s ease-out infinite .5s;
}

@keyframes voPulse {
  0%   { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.18); opacity: 0; }
}

.vo-orb {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 0 60px rgba(255,255,255,.08);
}

.vo-transcript-wrap {
  width: 100%;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.vo-transcript {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.4px;
  line-height: 1.4;
  color: #fff;
}

.vo-transcript.placeholder { color: #48484A; font-weight: 500; }

.vo-transcript-input {
  width: 100%;
  min-height: 84px;
  resize: none;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.4px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  display: none;
}

.vo-transcript-input.show { display: block; }
.vo-transcript-wrap.editing .vo-transcript { display: none; }

.vo-bottom {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.vo-action {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 140ms;
}
.vo-action:active { opacity: .6; }

.vo-action-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1C1C1E;
  border: 1px solid #2C2C2E;
  color: #fff;
  font-size: 20px;
  transition: background 140ms, border-color 140ms;
}

.vo-action.send .vo-action-icon {
  width: 68px; height: 68px;
  background: #fff;
  color: #000;
  font-size: 26px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}

.vo-action.send:disabled,
.vo-action.send.disabled {
  pointer-events: none;
  opacity: .35;
}

/* ── ONBOARDING ── */
.onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms;
}

.onb-overlay.open { opacity: 1; visibility: visible; }

.onb-card {
  width: 100%;
  max-width: 380px;
  background: #000;
  border: 1px solid #2C2C2E;
  border-radius: 26px;
  padding: 28px 24px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  transform: translateY(24px) scale(.98);
  opacity: 0;
  transition: transform 380ms var(--spring), opacity 280ms ease;
}

.onb-overlay.open .onb-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.onb-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
}

.onb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2C2C2E;
  transition: background 200ms, transform 200ms;
}

.onb-dot.on { background: #fff; transform: scale(1.2); }

.onb-step { text-align: center; }

.onb-icon { font-size: 34px; color: #8E8E93; margin-bottom: 14px; }

.onb-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
  margin-bottom: 8px;
}

.onb-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #A8A8AD;
  margin-bottom: 22px;
}

.onb-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onb-opt {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -.01em;
  color: #fff;
  background: #000;
  border: 1.5px solid #2C2C2E;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}

.onb-opt:active { background: #1C1C1E; }

.onb-select {
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #2C2C2E;
  border: 1.5px solid transparent;
  border-radius: 14px;
  text-align: center;
  text-align-last: center;
}

.onb-btn-primary {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -.01em;
  color: #fff;
  background: #2C2C2E;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: opacity 140ms;
}

.onb-btn-primary:active { opacity: .8; }

html.dark .profile-overlay      { background: #000; }
html.dark .profile-panel        { background: #000; }
html.dark .profile-header       { background: #000; }
html.dark .profile-header-title { color: #fff; }
html.dark .profile-close        { background: #1C1C1E; color: #fff; }
html.dark .profile-name         { color: #fff; }
html.dark .profile-email-lbl    { color: #aeaeb2; }
html.dark .profile-member       { color: #636366; }
html.dark .plan-banner          { background: linear-gradient(135deg, rgba(0,122,255,.18), rgba(88,86,214,.1)); border-color: rgba(0,122,255,.28); }
html.dark .plan-banner.is-paid  { background: linear-gradient(135deg, rgba(52,199,89,.18), rgba(0,199,190,.1)); border-color: rgba(52,199,89,.3); }
html.dark .plan-banner-badge    { background: #fff; color: #000; }
html.dark .plan-banner.is-paid .plan-banner-badge { background: linear-gradient(135deg, #34C759, #00C7BE); color: #fff; }
html.dark .plan-banner-label    { color: #fff; }
html.dark .plan-banner-sub      { color: #aeaeb2; }
html.dark .pref-row-tap:active  { background: rgba(255,255,255,.06); }
html.dark .chpw-card            { background: #1C1C1E; }
html.dark .chpw-title           { color: #fff; }
html.dark .chpw-input           { background: #2C2C2E; color: #fff; }
html.dark .chpw-input:focus     { background: #3A3A3C; }
html.dark .chpw-cancel          { background: #2C2C2E; color: #fff; }
html.dark .toast                { background: #1C1C1E; color: #fff; }
html.dark .fab                  { box-shadow: 0 4px 24px rgba(0,122,255,.35); }
@media (min-width: 520px) {
  html.dark body { background: #000; }
}

/* ═══════════════════════════════════
   PLANS PAGE
═══════════════════════════════════ */
.plans-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top,14px) + 10px) 22px 6px;
}

.plans-back {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sep);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--label);
  flex-shrink: 0;
  transition: background 150ms;
}
.plans-back:active { background: #E5E5EA; }

.plans-header-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.plans-content {
  padding: 24px 22px calc(env(safe-area-inset-bottom,24px) + 28px);
  max-width: 460px;
  margin: 0 auto;
}

.plans-intro {
  text-align: center;
  margin-bottom: 24px;
}

.plans-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.6px;
  margin-bottom: 6px;
}

.plans-sub {
  font-size: 14.5px;
  color: var(--label-2);
  line-height: 1.5;
}

/* Toggle */
.plan-toggle {
  display: flex;
  background: var(--sep);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 22px;
}

.plan-toggle button {
  flex: 1;
  padding: 11px;
  border-radius: 11px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--label-2);
  cursor: pointer;
  transition: background 180ms, color 180ms;
}

.plan-toggle button.on {
  background: #fff;
  color: var(--label);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Price card */
.plan-card {
  background: var(--sep);
  border-radius: 22px;
  padding: 26px 24px;
  text-align: center;
  margin-bottom: 22px;
  position: relative;
}

.plan-save-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: linear-gradient(135deg, #34C759, #00C7BE);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 6px 12px;
  border-radius: 100px;
  display: none;
}

.plan-card.is-annual .plan-save-badge { display: inline-block; }

.plan-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.plan-price {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
}

.plan-price-period {
  font-size: 16px;
  font-weight: 600;
  color: var(--label-2);
  padding-bottom: 7px;
}

.plan-price-sub {
  font-size: 13px;
  color: var(--label-2);
  margin-top: 8px;
  font-weight: 600;
}

/* Features */
.plan-features {
  list-style: none;
  background: var(--sep);
  border-radius: 18px;
  padding: 6px 18px;
  margin-bottom: 24px;
}

.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.1px;
}

.plan-feature:last-child { border-bottom: none; }

.plan-feature i {
  color: var(--green);
  font-size: 17px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* CTA */
.plan-cta {
  width: 100%;
  height: 54px;
  border-radius: 100px;
  border: none;
  background: var(--label);
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  cursor: pointer;
  transition: transform 120ms, opacity 150ms;
}
.plan-cta:active { transform: scale(.98); }

.plans-footnote {
  text-align: center;
  font-size: 12.5px;
  color: var(--label-3);
  margin-top: 16px;
  line-height: 1.5;
}

/* Dark mode */
html.dark .plans-back        { background: #1C1C1E; color: #fff; }
html.dark .plans-header-title { color: #fff; }
html.dark .plans-sub         { color: #aeaeb2; }
html.dark .plan-toggle       { background: #1C1C1E; }
html.dark .plan-toggle button { color: #636366; }
html.dark .plan-toggle button.on { background: #2C2C2E; color: #fff; }
html.dark .plan-card         { background: #1C1C1E; }
html.dark .plan-price-sub    { color: #aeaeb2; }
html.dark .plan-features     { background: #1C1C1E; }
html.dark .plan-feature      { color: #fff; border-color: rgba(255,255,255,.08); }
html.dark .plan-cta          { background: #fff; color: #000; }
html.dark .plans-footnote    { color: #636366; }