/* touch-action:manipulation removes the double-tap-to-zoom gesture (and the ~300ms tap delay)
   on every element; combined with the viewport meta's user-scalable=no this stops accidental
   zooming from double-taps or pinch gestures anywhere in the app. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

:root {
  --bg: #ffffff;
  --card: #f2f2f0;
  --inset: #ffffff;
  --inset-on-page: #f2f2f0;
  --line: #ebebe8;
  --line-strong: #dedcd8;
  --text: #111111;
  --text-secondary: #6b6b68;
  --text-muted: #9a9a96;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(20,20,18,0.04), 0 4px 14px rgba(20,20,18,0.045);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom));
  min-height: 100vh;
}

.hidden { display: none !important; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.topbar h1 { font-size: 28px; font-weight: 700; margin: 2px 0 0; letter-spacing: -0.02em; }
.muted { color: var(--text-secondary); }
.small { font-size: 12px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); border: none; color: var(--text);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.tabs button {
  flex: 1;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 12px;
  border: none;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.tabs button.active {
  background: var(--text);
  color: var(--bg);
}

.card {
  background: var(--card);
  border: none;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.section-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 4px 0 8px 4px;
}

.workout-progress-card {
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.wp-bar { display: flex; gap: 4px; margin-bottom: 8px; }
.progress-seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.progress-seg.filled { background: #fff; }
.wp-label { font-size: 11.5px; margin: 0; opacity: 0.75; }

.exercise-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  margin-bottom: 8px;
  cursor: pointer;
}
.exercise-row:active { transform: scale(0.99); }
.exercise-row .er-name { font-size: 13.5px; font-weight: 600; margin: 0; }
.exercise-row .er-value { font-size: 11.5px; color: var(--text-muted); }
.exercise-row.done .er-name { text-decoration: line-through; opacity: 0.55; }
.exercise-row.done .er-value { color: var(--text-secondary); }

.exercise-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.exercise-card-footer .add-set-btn { width: auto; margin: 0; padding: 9px 14px; }
.primary-btn.small { padding: 9px 16px; font-size: 12.5px; }

.nutrition-hero .wp-label { font-size: 20px; font-weight: 700; opacity: 1; margin: 0 0 10px; }
.nutrition-hero .wp-bar { margin-bottom: 0; }

.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.macro-block { padding: 12px; margin-bottom: 0; cursor: pointer; }
.macro-block:active { transform: scale(0.98); }
.macro-num { font-size: 15px; font-weight: 700; margin: 6px 0 0; }
.macro-num .muted { font-weight: 400; }

.date-strip { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.date-strip-day {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: none; background: transparent; color: var(--text-secondary);
  padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.date-strip-day .dsd-weekday { font-size: 10.5px; text-transform: uppercase; opacity: 0.8; }
.date-strip-day .dsd-num { font-size: 14px; font-weight: 600; }
.date-strip-day.active { background: var(--text); color: var(--bg); }

.calorie-ring-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px;
}
.calorie-ring-card .hero-num { font-size: 34px; margin-bottom: 2px; }

.ring-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ring-wrap-lg { width: 96px; height: 96px; }
.ring-wrap-sm { width: 56px; height: 56px; margin: 8px auto 0; }
.ring-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text); display: flex;
}
.ring-wrap-lg .ring-icon svg { width: 26px; height: 26px; }
.ring-wrap-sm .ring-icon svg { width: 17px; height: 17px; }

.macro-ring-num { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.recent-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.recent-row:last-child { border-bottom: none; }
.recent-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--card); display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.recent-icon svg { width: 17px; height: 17px; }
.recent-main { flex: 1; min-width: 0; }
.recent-top-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.recent-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-time { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }
.recent-cal { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.recent-cal svg { width: 13px; height: 13px; }
.recent-macros { display: flex; gap: 12px; margin-top: 4px; }
.recent-macros span { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); }
.recent-macros svg { width: 12px; height: 12px; }
.recent-delete { flex-shrink: 0; width: 26px; height: 26px; font-size: 12px; }


.food-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-strong);
  cursor: pointer;
}
.food-result-row:first-child { border-top: none; }
.food-result-name { font-size: 13px; font-weight: 600; margin: 0; }

.exercise-card { margin-bottom: 14px; }
.exercise-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.exercise-head .name-block { display: flex; align-items: center; gap: 10px; }
.exercise-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--inset);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 500;
}
.exercise-title { font-size: 15px; font-weight: 600; }
.exercise-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.trend-pill {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--inset);
  color: var(--text-secondary);
  font-weight: 500;
}
.trend-pill.up { background: var(--text); color: var(--bg); }

.set-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-top: 0.5px solid var(--line-strong);
}
.set-row .idx { width: 16px; font-size: 11.5px; color: var(--text-muted); }
.set-row input.num {
  width: 52px;
  border: none;
  background: var(--inset);
  border-radius: var(--radius-sm);
  padding: 8px 2px;
  font-size: 16px; /* iOS zooms the whole page in on focus if an input's font-size is below 16px */
  text-align: center;
  color: var(--text);
  cursor: pointer;
  caret-color: transparent;
}
.set-row input.note {
  flex: 1;
  min-width: 0;
  border: none;
  background: var(--inset);
  border-radius: var(--radius-sm);
  padding: 8px 8px;
  font-size: 16px; /* iOS zooms the whole page in on focus if an input's font-size is below 16px */
  color: var(--text);
}
.set-row .unit { font-size: 11px; color: var(--text-muted); }
.picker-wheel-wrap {
  position: relative; height: 220px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.picker-wheel {
  height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.picker-item {
  height: 44px; display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; font-size: 18px; color: var(--text-muted);
  transition: font-size 0.15s, color 0.15s, font-weight 0.15s;
}
.picker-item.active { color: var(--text); font-weight: 700; font-size: 23px; }
.picker-highlight {
  position: absolute; top: 50%; left: 0; right: 0; height: 44px;
  transform: translateY(-50%);
  border-top: 1.4px solid var(--line-strong); border-bottom: 1.4px solid var(--line-strong);
  pointer-events: none;
}
.set-row button.mic {
  border: none; background: transparent; font-size: 15px; color: var(--text-secondary);
  cursor: pointer; padding: 4px;
  display: flex; align-items: center;
}
.set-row button.del {
  border: none; background: transparent; font-size: 14px; color: var(--text-muted);
  cursor: pointer; padding: 4px;
}

.ghost-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--card);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.ghost-btn.full { width: 100%; }
.ghost-btn.small { padding: 8px; font-size: 12px; }
.ghost-btn:active { transform: scale(0.98); }

.oneRM {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
}

.analysis-card { }
.live-dot {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text-secondary); margin-bottom: 8px;
}
.live-dot span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text);
  display: inline-block; animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
#analysis-text { font-size: 14px; line-height: 1.55; margin: 0 0 12px; }

.overview-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.overview-stats span { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.overview-stats .muted { font-weight: 400; letter-spacing: normal; margin-left: 3px; }

.details-toggle-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.segmented {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.seg-btn {
  flex: 1;
  border: none;
  padding: 9px 0;
  border-radius: 9px;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.seg-btn.active { background: var(--text); color: var(--bg); }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 2px;
}
.stat-card { margin-bottom: 12px; }
.stat-head { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
.stat-num { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }

.heatmap {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
}
.heatmap .day {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--inset);
}
.heatmap .day.trained { background: var(--text); }

.list-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 14px 0 2px;
}
.list-group-label:first-child { margin-top: 0; }

.trend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 0.5px solid var(--line-strong);
  font-size: 13.5px;
}
.trend-row:first-child, .list-group-label + .trend-row { border-top: none; }
.trend-value { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 12.5px; }

.pr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-strong);
  font-size: 13.5px;
}
.pr-row:first-child, .list-group-label + .pr-row { border-top: none; }
.pr-badge { font-size: 11.5px; color: var(--text-muted); }

select {
  width: 100%;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--inset);
  color: var(--text);
  font-size: 16px; /* iOS zooms the whole page in on focus if an input's font-size is below 16px */
  margin-bottom: 10px;
}

canvas { display: block; width: 100%; }
#weight-input {
  border: none;
  background: var(--inset);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px; /* iOS zooms the whole page in on focus if an input's font-size is below 16px */
}
#nutrition-ring { width: 72px; height: 72px; flex-shrink: 0; }

.hero-chart-card { padding-bottom: 6px; }
.hero-select {
  width: auto;
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 12px;
  font-size: 16px; /* iOS zooms the whole page in on focus if an input's font-size is below 16px */
  font-weight: 500;
  background: var(--inset);
  border-radius: 20px;
  color: var(--text-secondary);
}
.hero-num { font-size: 32px; font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
#volume-trend { margin: 2px 0 4px; }

.show-more-btn {
  background: transparent;
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 12.5px;
}

.protein-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.big-num { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }

.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
.ghost-btn.light { background: var(--inset); margin-bottom: 0; }

.protein-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 0.5px solid var(--line-strong);
  font-size: 13px;
}
.protein-entry:first-child { border-top: none; }

.bottom-nav {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  max-width: 448px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 0.5px solid rgba(255,255,255,0.7);
  border-radius: 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 8px 28px rgba(20,20,18,0.12),
    0 2px 8px rgba(20,20,18,0.07);
  padding: 8px 6px;
  z-index: 40;
  overflow: hidden;
  isolation: isolate;
}
/* Glass sheen: a soft highlight across the top half, like light catching a curved glass edge. */
.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}
.liquid-blob {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffa15c 0%, #ff5f96 55%, #8b5cf6 100%);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.45) inset,
    0 4px 18px rgba(255, 79, 133, 0.38);
  transform: translateX(0);
  will-change: transform, border-radius, width;
  z-index: 0;
  pointer-events: none;
}
.bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  padding: 7px 4px;
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
.bottom-nav button .nav-icon {
  width: 21px; height: 21px; display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottom-nav button .nav-icon svg { width: 21px; height: 21px; }
.bottom-nav button.active { color: #fff; }
.bottom-nav button.active .nav-icon { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .liquid-blob { transition: none; }
  .bottom-nav button .nav-icon { transition: none; }
}

.rest-timer {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow);
  z-index: 50;
}
.rest-timer button {
  border: none; background: transparent; color: var(--bg); font-size: 14px; cursor: pointer;
}

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100;
}
.modal-sheet {
  background: var(--bg);
  width: 100%;
  max-width: 480px;
  /* .modal-backdrop's height is kept in sync with window.visualViewport via JS (see openModal),
     so this percentage always reflects the space actually visible above an open keyboard. */
  max-height: 85%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 24px 24px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}
.modal-sheet h3 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.modal-sheet input, .modal-sheet select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--card);
  font-size: 16px; /* iOS zooms the whole page in on focus if an input's font-size is below 16px */
  color: var(--text);
}
/* Used by modals with a potentially long, dynamic middle section (e.g. food search results).
   The title/input/actions stay fixed in place; only the middle section scrolls. This also
   keeps the search input out of any scrolling container, so iOS's native "scroll focused
   input into view" behavior has nothing to do and can't cause a jump. */
.modal-sheet.modal-sheet-scroll {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Force (not just cap) the height, so the results list below actually expands to fill all
     available space above the keyboard instead of the sheet shrink-wrapping to its content and
     leaving blank space underneath before the keyboard starts. */
  height: 85%;
}
.modal-sheet.modal-sheet-scroll > h3,
.modal-sheet.modal-sheet-scroll > input,
.modal-sheet.modal-sheet-scroll > select,
.modal-sheet.modal-sheet-scroll > .modal-actions {
  flex-shrink: 0;
}
.modal-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.food-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.food-search-row input { flex: 1; }
.barcode-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--card); border: none; color: var(--text); font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ai-estimate-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.ai-estimate-grid label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary);
}
.ai-estimate-grid input {
  margin-bottom: 0; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: none; background: var(--card); font-size: 16px; color: var(--text);
}
.scanner-viewport {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm); overflow: hidden; background: #000; margin-bottom: 10px;
}
.scanner-viewport video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame {
  position: absolute; inset: 30% 10%; border: 2px solid #fff; border-radius: 12px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.35); pointer-events: none;
}
.scanner-status { text-align: center; }
.qty-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.qty-chip {
  border: none;
  background: var(--card);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.qty-chip.active { background: var(--text); color: var(--bg); }
.qty-slider {
  width: 100%;
  margin: 4px 0 14px;
  accent-color: var(--text);
}
.qty-readout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.qty-readout-row input {
  width: 90px;
  flex: none;
  margin-bottom: 0;
  text-align: center;
}
.qty-readout-row .muted.small { flex: 1; text-align: right; }
.modal-actions { display: flex; gap: 8px; margin-top: 4px; }
.modal-actions button { flex: 1; }
.primary-btn {
  background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-sm);
  padding: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.primary-btn.full { display: block; width: 100%; padding: 12px; font-size: 14px; }
.primary-btn:disabled { opacity: 0.6; }

#auth-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
}
.auth-title { font-size: 30px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; }
.auth-tabs {
  display: flex;
  gap: 6px;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 16px;
}
.auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.auth-tabs button.active { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
#auth-form input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--card);
  font-size: 16px; /* iOS zooms the whole page in on focus if an input's font-size is below 16px */
  color: var(--text);
}
.auth-error { font-size: 12.5px; color: #b3261e; margin: -2px 0 10px; line-height: 1.5; }