/* Kaliper Mini App - Premium Monochrome + Dense Red Accent Design System */

:root {
  --bg-base: #09090b;
  --bg-surface: #121216;
  --bg-surface-elevated: #18181f;
  --bg-surface-hover: #22222a;
  --bg-input: #0e0e12;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-dim: #52525b;

  /* Red Accent - Aggressive, dense, premium red */
  --accent-red-dense: #e11d48;
  --premium-blood: #a30b2a;
  --premium-blood-glow: rgba(163, 11, 42, 0.3);
  --accent-primary: #e11d48;
  --accent-primary-hover: #f43f5e;
  --accent-primary-muted: rgba(225, 29, 72, 0.12);
  --accent-primary-glow: rgba(225, 29, 72, 0.35);
  --border-accent: rgba(225, 29, 72, 0.45);
  --shadow-accent: 0 0 24px rgba(225, 29, 72, 0.2);

  /* Keep macro indicators neutral; red is reserved for the selected metric. */
  --macro-p: var(--text-secondary);
  --macro-p-bg: var(--badge-bg);
  --macro-p-border: var(--badge-border);
  --macro-f: var(--text-secondary);
  --macro-f-bg: var(--badge-bg);
  --macro-f-border: var(--badge-border);
  --macro-c: var(--text-secondary);
  --macro-c-bg: var(--badge-bg);
  --macro-c-border: var(--badge-border);

  --accent-white: #ffffff;
  --accent-black: #000000;
  --badge-bg: rgba(255, 255, 255, 0.06);
  --badge-border: rgba(255, 255, 255, 0.12);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.85);

  --nav-bg: rgba(9, 9, 11, 0.94);
  --header-bg: rgba(9, 9, 11, 0.88);
}

[data-theme="light"] {
  --bg-base: #f4f4f5;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f1f4;
  --bg-surface-hover: #e4e4e7;
  --bg-input: #fafafa;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.16);
  --border-strong: rgba(0, 0, 0, 0.32);
  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --text-dim: #a1a1aa;

  --accent-red-dense: #dc2626;
  --accent-primary: #dc2626;
  --accent-primary-hover: #ef4444;
  --accent-primary-muted: rgba(220, 38, 38, 0.1);
  --accent-primary-glow: rgba(220, 38, 38, 0.25);
  --border-accent: rgba(220, 38, 38, 0.38);
  --shadow-accent: 0 0 24px rgba(220, 38, 38, 0.16);

  --accent-white: #09090b;
  --accent-black: #ffffff;
  --badge-bg: rgba(0, 0, 0, 0.05);
  --badge-border: rgba(0, 0, 0, 0.12);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.18);

  --nav-bg: rgba(244, 244, 245, 0.94);
  --header-bg: rgba(244, 244, 245, 0.92);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.app-container {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 84px;
}

/* Header */
.app-header {
  padding: 14px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: border-color var(--transition-fast), background var(--transition-smooth);
}

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

.brand-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.brand-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--text-secondary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.brand-tag.tariff-free {
  background: var(--badge-bg);
  border-color: var(--badge-border);
  color: var(--text-muted);
}

/* Premium Badge - Red brand highlight */
.brand-tag.tariff-premium {
  background: transparent;
  border: 1px solid var(--premium-blood);
  color: var(--premium-blood);
  font-weight: 800;
  box-shadow: 0 0 7px var(--premium-blood-glow);
  letter-spacing: 0.9px;
  text-shadow: none;
}

/* Theme Toggle Button */
.btn-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-bounce);
  flex-shrink: 0;
}

.btn-theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  transform: scale(1.06);
}

.btn-theme-toggle:active {
  transform: scale(0.92);
}

[data-theme="light"] .theme-icon-moon {
  display: none;
}

[data-theme="light"] .theme-icon-sun {
  display: block;
  color: #d97706;
}

.theme-icon-sun {
  display: none;
}

.theme-icon-moon {
  display: block;
}

/* Screens */
.screen {
  display: none;
  padding: 16px 20px 30px;
  animation: screenFadeIn 0.22s var(--ease-out) forwards;
}

.screen.active {
  display: block;
}

@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.section-title {
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: normal;
}

/* Restaurant Chips */
.restaurant-search {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-muted);
}

.restaurant-search:focus-within {
  border-color: var(--accent-primary);
}

.restaurant-search svg {
  flex-shrink: 0;
}

.restaurant-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
}

.restaurant-search input::placeholder {
  color: var(--text-muted);
}

.restaurant-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.restaurant-search-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
}

.restaurant-search-status,
.restaurant-request-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.restaurant-search-status {
  margin: 0 0 8px;
}

.restaurant-request-hint {
  margin: 0 0 20px;
}

.restaurant-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.restaurant-scroll::-webkit-scrollbar {
  display: none;
}

.restaurant-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: transform var(--transition-bounce), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.restaurant-chip:hover {
  border-color: var(--border-medium);
  background: var(--bg-surface-hover);
}

.restaurant-chip:active {
  transform: scale(0.97);
}

.restaurant-chip.active {
  background: var(--bg-surface-elevated);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary-muted), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.restaurant-chip.coming-soon {
  opacity: 0.5;
  cursor: default;
}

.restaurant-chip-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.restaurant-chip-logo-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
}

.chain-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface-elevated);
  color: var(--accent-primary);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
}

.restaurant-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.chip-tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.2px;
}

[data-theme="light"] .chip-tag {
  background: rgba(0, 0, 0, 0.06);
}

.restaurant-chip.active .chip-tag {
  background: var(--accent-primary-muted);
  color: var(--accent-primary);
}

/* Segmented Control */
.segmented-control {
  display: flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 22px;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.segment-btn {
  flex: 1;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  position: relative;
  z-index: 2;
}

.segment-btn:hover {
  color: var(--text-primary);
}

.segment-btn.active {
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-medium);
}

/* Card Block */
.card-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}

.calorie-target-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 6px 0 16px;
  gap: 4px;
}

.calorie-number-input {
  background: transparent;
  border: 1px solid transparent;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  width: 140px;
  text-align: center;
  outline: none;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  -moz-appearance: textfield;
  appearance: textfield;
}

.calorie-number-input::-webkit-outer-spin-button,
.calorie-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calorie-number-input:focus {
  background: var(--bg-surface-elevated);
  border-color: var(--border-strong);
}

.calorie-unit {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

.slider-container {
  margin-bottom: 16px;
}

.custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-elevated);
  outline: none;
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-white);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  border: 2px solid var(--accent-black);
  transition: transform var(--transition-bounce), box-shadow var(--transition-fast);
}

[data-theme="light"] .custom-range::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(0, 0, 0, 0.15);
}

.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.custom-range::-webkit-slider-thumb:active {
  transform: scale(1.18);
}

.presets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.preset-chip {
  padding: 8px 4px;
  text-align: center;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.preset-chip:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.preset-chip:active {
  transform: scale(0.96);
}

.preset-chip.active {
  background: var(--accent-primary-muted);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary-glow);
}

/* Macros Rows */
.macro-sliders-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.macro-slider-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.macro-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.macro-label-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.macro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.macro-dot.cal { background: var(--text-primary); }
.macro-dot.p,
.macro-dot.f,
.macro-dot.c {
  background: var(--text-muted);
  box-shadow: none;
}

.macro-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  transition: var(--transition-fast);
}

.macro-input-wrapper:focus-within {
  border-color: var(--border-strong);
  background: var(--bg-surface-hover);
}

.macro-num-input {
  width: 48px;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.macro-num-input::-webkit-outer-spin-button,
.macro-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.unit-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 3px;
  font-weight: 500;
}

.macro-ratio-bar {
  height: 8px;
  border-radius: var(--radius-full);
  display: flex;
  overflow: hidden;
  margin-top: 16px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.macro-segment-p { background: var(--macro-p); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.macro-segment-f { background: var(--macro-f); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.macro-segment-c { background: var(--macro-c); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.macro-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.macro-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.legend-dot.p { background: var(--macro-p); }
.legend-dot.f { background: var(--macro-f); }
.legend-dot.c { background: var(--macro-c); }

.macro-cal-b-range {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 4px;
}

/* Budget Section */
.budget-section {
  margin-bottom: 20px;
}

.btn-budget-toggle {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.btn-budget-toggle:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-medium);
}

.btn-budget-toggle.open {
  background: var(--bg-surface-elevated);
  border-color: var(--border-medium);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.budget-toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.budget-toggle-svg {
  stroke: var(--text-secondary);
  transition: stroke var(--transition-fast), transform var(--transition-bounce);
}

.btn-budget-toggle:hover .budget-toggle-svg,
.btn-budget-toggle.open .budget-toggle-svg {
  stroke: var(--accent-primary);
  transform: scale(1.08);
}

.budget-toggle-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--badge-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.btn-budget-toggle.open .budget-toggle-badge {
  color: var(--accent-primary);
  border-color: var(--border-accent);
  background: var(--accent-primary-muted);
}

.budget-drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.budget-drawer.open {
  max-height: 280px;
  opacity: 1;
}

.budget-drawer-inner {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-top: none;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  padding: 14px 16px;
}

.budget-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.budget-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.budget-quick-pills {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.budget-pill {
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.budget-pill:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.budget-pill.active {
  background: var(--accent-primary-muted);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary-glow);
}

.budget-pill-reset {
  padding: 6px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: auto;
  transition: all var(--transition-fast);
}

.budget-pill-reset:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
  border-color: var(--border-medium);
}

/* Primary Button */
.btn-primary {
  width: 100%;
  padding: 14px 20px;
  min-height: 52px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f1f4 100%);
  color: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition-bounce), box-shadow var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.14), var(--shadow-sm);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #09090b 0%, #27272a 100%);
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), var(--shadow-sm);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e8e8ed 100%);
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.2), var(--shadow-md);
}

[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #18181b 0%, #3f3f46 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25), var(--shadow-md);
}

.btn-primary:active {
  transform: scale(0.975);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
}

.cta-arrow-svg {
  transition: transform var(--transition-smooth);
}

.btn-primary:hover .cta-arrow-svg {
  transform: translateX(3px);
}

.btn-primary.loading {
  pointer-events: none;
  opacity: 0.88;
  cursor: wait;
}

.btn-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(0, 0, 0, 0.18);
  border-top-color: #000;
  border-radius: 50%;
  animation: btnSpin 0.65s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

[data-theme="light"] .btn-spinner {
  border: 2.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

.btn-secondary {
  width: 100%;
  padding: 12px 18px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--border-medium);
}

/* Results Section */
.combo-results-section {
  display: none;
}

.combo-results-section.visible {
  display: block;
}

.combo-results-section.results-revealing {
  animation: resultsReveal 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes resultsReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .combo-results-section.results-revealing {
    animation: none;
  }
}

.variants-comparison-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 6px 14px;
  margin-top: 0;
  margin-bottom: 16px;
  position: relative;
  z-index: 5;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.variants-comparison-strip::-webkit-scrollbar {
  display: none;
}

.variant-card {
  flex: 0 0 205px;
  width: 205px;
  min-height: 158px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .variant-card:hover {
    border-color: var(--border-medium);
    transform: translateY(-2px);
    z-index: 3;
  }
}

.variant-card:active {
  transform: scale(0.98);
}

.variant-card.active {
  background: var(--bg-surface-elevated);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary), 0 6px 22px var(--accent-primary-glow);
  transform: translateY(-2px);
  position: relative;
  z-index: 10;
}

.variant-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.variant-role-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.variant-active-badge {
  font-size: 9px !important;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--accent-primary);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  flex-shrink: 0;
}

.variant-cal-num {
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: var(--font-mono) !important;
  color: var(--text-primary);
  line-height: 1.1;
}

.variant-cal-diff {
  font-size: 10px !important;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.variant-macros-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px !important;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  padding: 6px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.variant-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.minimum-price,
.minimum-price.num-accent-dot {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  white-space: nowrap;
}

.variant-items-brief {
  font-size: 10px !important;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.combo-role-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 4px;
}

.combo-fallback-alert {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 14px 18px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fallback-icon-svg {
  color: #fbbf24;
  flex-shrink: 0;
  margin-top: 2px;
}

.fallback-content {
  flex: 1;
}

.fallback-title {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  line-height: 1.3;
}

.fallback-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.35;
}

/* Master Card */
.combo-master-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 0 24px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.combo-disclaimers {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.disclaimer-price {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.disclaimer-sources {
  font-size: 9.5px;
  color: var(--text-dim);
  line-height: 1.3;
  letter-spacing: 0.1px;
}

.combo-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Small blood-red marker for the currently highlighted value. */
.num-accent-dot {
  display: inline-block;
  position: relative;
  font-weight: 800;
}

.num-accent-dot::after,
.macro-badge-cell.red-highlighted::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--premium-blood);
  box-shadow: 0 0 7px var(--premium-blood-glow);
  pointer-events: none;
}

.num-accent-dot::after {
  top: 0;
  right: -8px;
}

.variant-card .num-accent-dot::after {
  width: 3px;
  height: 3px;
  top: -2px;
  right: -2px;
}

.combo-summary-cal {
  font-size: 36px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -1px;
  color: var(--text-primary);
  line-height: 1;
}

.combo-summary-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.combo-summary-price {
  text-align: right;
}

.combo-price-val {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.combo-weight-val {
  font-size: 11px;
  color: var(--text-muted);
}

/* Macro Pills Grid */
.macro-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.macro-badge-cell {
  position: relative;
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-subtle);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

[data-theme="light"] .macro-badge-cell {
  background: rgba(0, 0, 0, 0.04);
}

.macro-badge-cell:hover {
  border-color: var(--border-medium);
}

.macro-badge-cell.red-highlighted {
  background: var(--accent-primary-muted) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 12px var(--accent-primary-glow) !important;
}

.macro-badge-cell:nth-child(1) { background: var(--macro-p-bg); border-color: var(--macro-p-border); }
.macro-badge-cell:nth-child(1) .macro-badge-val { color: var(--macro-p); }

.macro-badge-cell:nth-child(2) { background: var(--macro-f-bg); border-color: var(--macro-f-border); }
.macro-badge-cell:nth-child(2) .macro-badge-val { color: var(--macro-f); }

.macro-badge-cell:nth-child(3) { background: var(--macro-c-bg); border-color: var(--macro-c-border); }
.macro-badge-cell:nth-child(3) .macro-badge-val { color: var(--macro-c); }

/* Mark the highlighted macro at the corner of its value rectangle. */
.macro-badge-cell.red-highlighted::after {
  width: 6px;
  height: 6px;
  top: 6px;
  right: 6px;
}

.macro-badge-title {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.macro-badge-val {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  margin-top: 1px;
  position: relative;
  display: inline-block;
}

/* Dishes List */
.combo-items-list {
  padding: 8px 14px;
}

.combo-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

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

.combo-item-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .combo-item-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.item-icon-box {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

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

.item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.item-subtext {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
}

.btn-swap-item {
  padding: 6px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-swap-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-swap-item:active {
  transform: scale(0.96);
}

/* Favorite Toggle Button in Card */
.combo-card-footer {
  padding: 12px 18px 16px;
  display: flex;
  gap: 10px;
}

.btn-fav-toggle {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-bounce);
}

.btn-fav-toggle:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

.btn-fav-toggle:active {
  transform: scale(0.97);
}

.fav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-bounce);
}

.btn-fav-toggle.saved {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.18) 0%, rgba(190, 18, 60, 0.12) 100%);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px var(--accent-primary-glow);
}

.btn-fav-toggle.saved .fav-svg {
  fill: var(--accent-primary);
  stroke: var(--accent-primary);
  transform: scale(1.1);
}

/* Bottom Sheet Modal */
.sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sheet-backdrop.open {
  display: block;
  opacity: 1;
}

.bottom-sheet {
  visibility: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-medium);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-sheet);
  z-index: 101;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 80vh;
  max-height: 80dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bottom-sheet.open {
  visibility: visible;
  transform: translateY(0);
}

.sheet-handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  margin: 10px auto 4px;
}

.sheet-header {
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 1;
  padding-right: 12px;
}

.btn-close-sheet {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sheet-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 14px 20px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.replacement-option-card {
  flex-shrink: 0;
  padding: 12px 14px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: var(--transition-fast);
}

.replacement-hint {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.replacement-category-filter {
  flex-shrink: 0;
  min-height: 44px;
  width: 100%;
  padding: 10px 46px 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24' fill='none' stroke='%23a30b2a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4-4 4 4M6 16l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 24px;
}

.replacement-options-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.replacement-option-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-surface-hover);
}

.replacement-option-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.replacement-more {
  flex-shrink: 0;
  padding: 13px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  color: var(--accent-primary);
  font: inherit;
  cursor: pointer;
}
.replacement-more[hidden] { display: none; }
.replacement-empty { color: var(--text-secondary); padding: 16px 0; font-size: 13px; line-height: 1.5; }

/* Visible feedback for boot, requests and the existing skeleton placeholders. */
.startup-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 28px;
  background: #000;
  color: #fff;
  text-align: center;
}
.startup-logo { display: block; width: min(100%, 400px); height: auto; overflow: hidden; }
.startup-dot { animation: startupDotPulse 2.8s ease-in-out infinite; }
.startup-failed .startup-dot { animation: none; }
.startup-screen p { max-width: 320px; color: #a1a1aa; font-size: 14px; line-height: 1.6; }
.startup-message { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.startup-failed .startup-message { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; }
@keyframes startupDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.startup-screen [hidden] { display: none; }
.startup-screen .btn-primary { max-width: 240px; }
.loading-state { min-height: 130px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--text-secondary); font-size: 13px; }
.loading-spinner, .btn-swap-item.is-loading::before {
  display: inline-block;
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid var(--border-accent);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
.is-loading { cursor: wait; }
.sheet-skeleton-wrap { display: grid; gap: 12px; width: 100%; }
.skeleton { background: linear-gradient(100deg, var(--bg-surface-elevated) 20%, var(--border-medium) 45%, var(--bg-surface-elevated) 70%); background-size: 220% 100%; animation: skeletonShimmer 1.2s linear infinite; }
.skeleton-sheet-card { height: 76px; border-radius: var(--radius-md); }
@keyframes skeletonShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .startup-dot, .loading-spinner, .btn-swap-item.is-loading::before, .skeleton { animation: none; }
}

.rep-left {
  flex: 1;
  min-width: 0;
}

.rep-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.rep-item-details {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.rep-deltas {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.rep-delta-macros {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 6px;
  font-size: 10px;
  line-height: 1.5;
}

.rep-delta-price {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.delta-plus { color: var(--text-primary); }
.delta-minus { color: var(--text-secondary); }

/* Favorites Screen */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.favorite-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.favorite-card:hover {
  border-color: var(--border-medium);
}

.fav-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fav-restaurant-badge {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--accent-primary);
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.fav-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.fav-macros-line {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  margin-top: 2px;
}

.variant-macro-p {
  color: var(--text-secondary);
}

.fav-items-bullets {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.fav-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.btn-sm-del {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.btn-sm-del:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

/* Empty State - Centered Perfectly */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 20px 40px;
  width: 100%;
  box-sizing: border-box;
}

.empty-state-symbol {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--text-muted);
}

.empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.empty-state-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 280px;
  line-height: 1.5;
  margin: 0 auto;
}

.btn-empty-calc {
  width: auto !important;
  max-width: 260px !important;
  margin: 20px auto 0 !important;
  padding: 12px 24px !important;
  align-self: center !important;
  display: inline-flex !important;
}

/* Profile Screen */
.profile-hero {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bg-surface-elevated);
  border: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.profile-avatar-circle.premium-avatar {
  border-color: var(--premium-blood);
  box-shadow: 0 0 8px var(--premium-blood-glow);
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.profile-meta-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.profile-meta-tier {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.stat-cell {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.stat-cell-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.stat-cell-icon {
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.stat-cell-label {
  font-size: 11px;
  color: var(--text-muted);
}

.stat-cell-val {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* Referral Block */
.referral-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 20px;
}

.referral-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.referral-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.55;
}

.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.referral-stats > div { min-width: 0; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.referral-stats span { display: block; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.referral-stats strong { display: block; margin-top: 4px; font-size: 22px; }
.referral-pending { margin-top: 8px; color: var(--text-muted); font-size: 11px; }
.referral-pending[hidden] { display: none; }
.referral-next { margin-top: 12px; padding: 10px 12px; background: var(--accent-primary-muted); border: 1px solid var(--border-accent); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12px; }
.referral-conditions { margin-top: 14px; border-top: 1px solid var(--border-subtle); }
.referral-conditions summary { cursor: pointer; padding-top: 12px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.referral-conditions summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; }
.referral-conditions-body { padding-top: 12px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.referral-conditions ol { padding-left: 20px; }
.referral-conditions li + li { margin-top: 6px; }
.referral-conditions p { margin-top: 12px; }
.referral-rewards { margin-top: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.referral-rewards > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; }
.referral-rewards > div + div { border-top: 1px solid var(--border-subtle); }
.referral-rewards strong { color: var(--accent-primary); white-space: nowrap; }
.subscription-support { display: block; margin: 12px 0; text-align: center; font-size: 13px; color: var(--text-primary); text-underline-offset: 3px; }
.subscription-support[hidden] { display: none; }

.referral-link-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ref-link-field {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-mono);
  outline: none;
}

.btn-copy-ref {
  padding: 8px 14px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-copy-ref:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-medium);
}

.btn-share-ref {
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-share-ref:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-medium);
}

/* Info Accordions */
.info-accordion-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}

.info-accordion-header {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.accordion-chevron {
  transition: transform var(--transition-fast);
}

.info-accordion-item.open .accordion-chevron {
  transform: rotate(180deg);
}

.info-accordion-body {
  display: none;
  padding: 0 16px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

.info-accordion-item.open .info-accordion-body {
  display: block;
}

/* Bottom Navigation Bar (3 items) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  height: 64px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.25s ease;
  will-change: transform, opacity;
}

body.keyboard-open .bottom-nav,
body:has(input:not([type="range"]):focus) .bottom-nav,
body:has(textarea:focus) .bottom-nav,
.bottom-nav.keyboard-hidden {
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  height: 100%;
  padding-top: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.nav-item.active {
  color: var(--text-primary);
}

.nav-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-svg {
  transition: transform var(--transition-bounce), color var(--transition-fast);
}

.nav-item.active .nav-svg {
  transform: translateY(-1px);
}

.nav-dot {
  position: absolute;
  bottom: -4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0;
  transform: scale(0);
  transition: all var(--transition-fast);
}

.nav-item.active .nav-dot {
  opacity: 1;
  transform: scale(1);
}

.nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
}

.toast {
  background: var(--text-primary);
  color: var(--accent-black);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: toastAnim 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastAnim {
  0% { opacity: 0; transform: translateY(-10px); }
  15% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Security Lock Screen Overlay */
.lock-screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg-base);
  background-image: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lock-screen-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 36px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lock-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.lock-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.lock-description {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.lock-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.lock-status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.lock-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-white);
  color: var(--accent-black);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.lock-action-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* Subscription surfaces share the app's light/dark design tokens. */
[hidden] { display: none !important; }
#headerTariffBadge { cursor: pointer; font-family: inherit; }
.premium-lock { font-size: 11px; margin-left: 4px; }
.subscription-entry, .premium-teaser {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 18px; border: 1px solid var(--border-accent); border-radius: 18px;
  background: linear-gradient(120deg, var(--accent-primary-muted), var(--bg-surface));
  color: var(--text-primary); cursor: pointer; font: inherit; margin-bottom: 20px;
}
.subscription-entry > span:first-child, .premium-teaser > span:nth-child(2) { flex: 1; min-width: 0; }
.subscription-entry strong, .premium-teaser strong { display: block; font-size: 14px; line-height: 1.5; }
.subscription-entry small, .premium-teaser small { display: block; color: var(--text-secondary); font-size: 12px; line-height: 1.6; margin-top: 4px; }
.subscription-eyebrow { display: block; font: 600 10px var(--font-mono); letter-spacing: 1.8px; color: var(--accent-primary); margin-bottom: 9px; }
.teaser-lock { display: grid; place-items: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; width: 38px; height: 38px; flex-shrink: 0; }
.subscription-dialog {
  box-sizing: border-box; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  padding: 30px 24px 22px; margin: auto; overflow-y: auto; color: var(--text-primary);
  border: 1px solid var(--border-medium); border-radius: 26px; background: var(--bg-surface);
  box-shadow: var(--shadow-md); font-family: var(--font-sans);
}
.subscription-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.subscription-close { position: absolute; right: 15px; top: 13px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--bg-surface-elevated); color: var(--text-secondary); font-size: 24px; cursor: pointer; }
.subscription-dialog h2 { font-size: 30px; line-height: 1.13; letter-spacing: -1.2px; margin: 20px 0 12px; }
.subscription-lead { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; }
.subscription-status { padding: 11px 12px; background: var(--bg-surface-elevated); border-radius: 10px; font-size: 12px; line-height: 1.6; margin-bottom: 18px; }
.subscription-plan { padding: 16px; border: 1px solid var(--border-subtle); border-radius: 14px; margin-bottom: 12px; }
.plan-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 9px; }
.plan-heading strong { font-size: 16px; }
.plan-heading span { font-size: 10px; color: var(--text-secondary); }
.subscription-plan p, .subscription-plan li { font-size: 12px; line-height: 1.7; color: var(--text-secondary); margin: 4px 0; }
.premium-plan { border-color: var(--border-accent); background: var(--accent-primary-muted); }
.premium-plan ul { list-style: none; padding: 0; margin: 0; }
.premium-plan li::before { content: '✓'; color: var(--accent-primary); margin-right: 8px; }
.trial-button { width: 100%; margin-top: 8px; font-size: 14px; }
.subscription-footnote, .subscription-payment-note { font-size: 11px; line-height: 1.6; color: var(--text-secondary); text-align: center; margin-top: 12px; }
.subscription-payment-note { padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.subscription-prices { border: 0; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.subscription-prices legend { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.price-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 14px 5px; border: 1px solid var(--border-subtle); border-radius: 14px; cursor: pointer; font-size: 11px; text-align: center; }
.price-option:has(input:checked) { border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary); background: var(--bg-surface-elevated); }
.price-option:has(input:focus-visible) { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.price-option input, .payment-consent input { accent-color: var(--accent-primary); flex-shrink: 0; }
.price-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; z-index: 1; }
.plan-check { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--bg-base); pointer-events: none; }
.plan-check::before { content: '✓'; opacity: 0; font-size: 12px; font-weight: 800; line-height: 1; }
.price-option:has(input:checked) .plan-check { background: var(--text-primary); border-color: var(--text-primary); }
.price-option:has(input:checked) .plan-check::before { opacity: 1; }
.price-option strong { display: block; font-size: 19px; margin-top: 4px; color: var(--text-primary); white-space: nowrap; }
.price-option-lifetime { grid-column: 1 / -1; flex-direction: row; gap: 12px; padding: 18px 14px; text-align: left; border-color: var(--border-accent); background: linear-gradient(120deg, var(--accent-primary-muted), var(--bg-surface-elevated)); }
.price-option-lifetime:has(input:checked) { background: linear-gradient(120deg, var(--accent-primary-muted), var(--bg-surface-elevated)); border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }
.price-option-lifetime:has(input:checked) .plan-check { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.lifetime-copy { flex: 1; font-size: 16px; font-weight: 700; min-width: 0; }
.lifetime-copy small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 10px; font-weight: 400; }
.price-option-lifetime strong { font-size: 23px; margin: 0; }
.payment-consent { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; font-size: 11px; line-height: 1.6; color: var(--text-secondary); }
.payment-consent[hidden] { display: none; }
.payment-consent a { color: var(--accent-primary); text-decoration: underline; }
.payment-button { width: 100%; margin-top: 12px; }
.subscription-dismiss { width: 100%; padding: 13px 0 0; border: 0; background: none; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.favorites-access-note, .favorite-selection p { color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.favorite-locked { width: 100%; text-align: left; font: inherit; color: var(--text-secondary); cursor: pointer; }
.favorite-selection { padding: 20px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--bg-surface); }
.favorite-selection h3 { font-size: 19px; line-height: 1.4; margin-bottom: 10px; }
.favorite-selection label { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; line-height: 1.6; cursor: pointer; }
.favorite-selection input { accent-color: var(--accent-primary); width: 18px; height: 18px; flex-shrink: 0; }
.favorite-selection .btn-primary { margin-top: 18px; width: 100%; }
.subscription-dialog button:focus-visible, .subscription-entry:focus-visible, .premium-teaser:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; }
.subscription-dialog button:disabled, .favorite-selection button:disabled { opacity: .5; cursor: default; }
@media(max-width: 360px) { .subscription-dialog { padding: 26px 16px 18px; } .subscription-dialog h2 { font-size: 27px; } }