:root {
  --bg: #121212;
  --phone: #16171a;
  --card: #1d1f23;
  --text: #f0f2f6;
  --muted: #a3a8b4;
  --orange: #ff5722;
  --orange-soft: #2a1f1a;
  --radius: 16px;
  --line: #2a2d33;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "SF Pro Text", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 10% -15%, #22242a 0%, #17191d 42%, #121212 100%);
  overflow: hidden;
}

.build-badge {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 11000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(16, 18, 23, 0.9);
  color: #f4f7fc;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
}

.global-loading {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(23, 24, 28, 0.9);
  color: #fff;
  font-size: 0.74rem;
}

.global-loading-bar {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: sift-spin 0.8s linear infinite;
}

@keyframes sift-spin {
  to {
    transform: rotate(360deg);
  }
}

.global-loading-bar.done {
  animation: none;
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: rgba(255, 255, 255, 0.4);
  background: radial-gradient(circle at center, #7ef3b2 30%, transparent 31%);
}

.scan-processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 12020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 10, 18, 0.58);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.scan-processing-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.scan-processing-panel {
  width: min(320px, 92vw);
  border-radius: 18px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(23, 28, 38, 0.96), rgba(16, 20, 29, 0.96));
  box-shadow: 0 16px 38px rgba(2, 6, 16, 0.5);
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.scan-processing-spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ff6f3b;
  animation: sift-spin 0.9s linear infinite;
}

.scan-processing-title {
  margin: 1px 0 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.scan-processing-message {
  margin: 0;
  color: #d7dfef;
  font-size: 0.84rem;
  line-height: 1.35;
}

.app-shell {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.phone-frame {
  width: min(430px, 100%);
  max-width: 100%;
  height: min(790px, calc(100dvh - 24px));
  background: var(--phone);
  border-radius: 30px;
  box-shadow: 0 28px 56px rgba(18, 20, 30, 0.2);
  padding: calc(12px + env(safe-area-inset-top)) 10px calc(84px + env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;
  border: 1px solid #2c3038;
}

.screen {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 8px 6px calc(116px + env(safe-area-inset-bottom));
}

.screen.active {
  display: block;
}

header h2 {
  margin: 2px 0 6px;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
}

.eyebrow {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  margin: 0 0 2px;
  text-transform: uppercase;
}

h3 {
  margin: 12px 0 6px;
  font-size: 0.92rem;
}

.muted {
  color: var(--muted);
  margin-top: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.splash-panel {
  height: 100%;
  border-radius: 0;
  background: linear-gradient(180deg, #ff5a1f, #ff6122);
  color: #fff;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px 16px 28px;
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  animation: splash-enter 900ms cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
  overflow: hidden;
}

.sift-logo {
  display: block;
  max-width: 170px;
  height: auto;
}

.auth-logo {
  max-width: 132px;
  margin: 0 0 8px;
}

.splash-title {
  margin: 0;
  position: relative;
  z-index: 3;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.splash-title-wrap {
  position: relative;
  z-index: 3;
  display: inline-block;
}

.splash-loupe {
  position: absolute;
  left: -88px;
  top: -20px;
  width: 84px;
  height: 84px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120px) rotate(-24deg) scale(0.62);
  animation: splash-loupe-in 1150ms cubic-bezier(0.2, 0.88, 0.24, 1) 260ms forwards;
}

.splash-loupe-lens {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 7px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.24),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.splash-loupe-handle {
  position: absolute;
  width: 54px;
  height: 10px;
  border-radius: 10px;
  right: -35px;
  bottom: 8px;
  background: rgba(255, 255, 255, 0.96);
  transform: rotate(40deg);
  transform-origin: left center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.splash-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  pointer-events: none;
}

.splash-orbit.orbit-a {
  width: 360px;
  height: 360px;
  left: -290px;
  bottom: -130px;
}

.splash-orbit.orbit-b {
  width: 460px;
  height: 460px;
  left: -338px;
  bottom: -188px;
  opacity: 0.55;
}

.splash-art {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 268px;
  height: 132px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 52%, #a5651d 0 22%, transparent 23%),
    radial-gradient(ellipse at 34% 38%, rgba(255, 182, 84, 0.65) 0 16%, transparent 17%),
    radial-gradient(ellipse at 66% 64%, rgba(158, 95, 31, 0.52) 0 13%, transparent 14%),
    radial-gradient(ellipse at center, #ffac48 0 58%, #f58a27 59% 82%, transparent 83%);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.2));
}

.splash-auth {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 8px;
}

.splash-auth-btn {
  width: 100%;
  border-radius: 12px;
  border: 0;
  background: #fff;
  color: #111;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
}

.splash-auth-btn .auth-icon {
  display: inline-block;
  width: 16px;
  text-align: center;
  font-size: 0.95rem;
}

.splash-panel.exiting {
  animation: splash-exit 420ms ease forwards;
}

@keyframes splash-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splash-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}

@keyframes splash-logo-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes splash-loupe-in {
  0% {
    opacity: 0;
    transform: translateX(-120px) rotate(-24deg) scale(0.62);
  }
  65% {
    opacity: 1;
    transform: translateX(20px) rotate(8deg) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(8px) rotate(2deg) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-panel {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .splash-panel.exiting {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .splash-loupe {
    animation: none;
    opacity: 1;
    transform: translateX(8px) rotate(2deg) scale(0.96);
  }
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.chip {
  border: 1px solid #3a4354;
  border-radius: 10px;
  padding: 6px 8px;
  background: #1f2531;
  color: #edf2fb;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}

.chip.active {
  background: linear-gradient(180deg, #ff6a35, #ff5a1f);
  color: #fff;
  border-color: #ff7a4c;
  box-shadow: 0 4px 12px rgba(255, 90, 31, 0.26);
}

.chip.custom-chip {
  border-style: dashed;
}

.onboarding-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 0 0 10px;
}

.onboarding-add-row input {
  min-width: 0;
}

.onboarding-add-row button {
  white-space: nowrap;
}

.onboarding-score-wrap {
  margin: 2px 0 10px;
}

.onboarding-score-wrap input[type="range"] {
  width: 100%;
}

.profile-hero-card {
  background:
    radial-gradient(160% 120% at -10% -30%, rgba(255, 95, 42, 0.26), transparent 52%),
    linear-gradient(180deg, #232936, #1b202b);
  border: 1px solid rgba(255, 137, 98, 0.35);
  box-shadow: 0 10px 24px rgba(12, 15, 25, 0.25);
}

.profile-hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #ff6a35, #ff5a1f);
  box-shadow: 0 10px 16px rgba(255, 90, 31, 0.3);
}

.profile-hero-name {
  margin: 0 0 2px;
  color: #f5f8fe;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.profile-section-card h3 {
  margin-top: 2px;
}

.profile-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#screen-onboarding label {
  display: block;
  margin: 0 0 4px;
  color: #626c81;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(22, 25, 35, 0.05);
}

.card-focus-ring {
  animation: card-focus-pulse 1.2s ease;
}

@keyframes card-focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.52);
    border-color: rgba(255, 131, 87, 0.8);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(255, 90, 31, 0);
    border-color: var(--line);
  }
}

.card-highlight {
  background: linear-gradient(165deg, #2a201c, #241b18);
  border: 1px solid rgba(255, 122, 74, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 74, 0.12);
  color: #f6f8fc;
  border-left: 4px solid var(--orange);
}

.card-highlight strong {
  color: #fff;
}

.card-highlight .muted {
  color: #d9dde6;
}

.stack {
  display: grid;
  gap: 8px;
}

.task {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button,
.primary {
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.82rem;
}

button,
textarea,
input {
  font: inherit;
}

button {
  background: #eff1f6;
  color: #2a2d35;
  border: 1px solid #e4e7ef;
}

.primary,
#analyze-ingredients {
  background: linear-gradient(180deg, #ff6a35, #ff5a1f);
  color: #fff;
  width: 100%;
  border: 0;
  box-shadow: 0 6px 14px rgba(255, 90, 31, 0.28);
}

input,
textarea {
  width: 100%;
  border: 1px solid #dfe3ec;
  border-radius: 8px;
  padding: 10px;
  margin: 4px 0 8px;
  background: #fff;
  font-size: 0.82rem;
}

select {
  width: 100%;
  border: 1px solid #dfe3ec;
  border-radius: 8px;
  padding: 10px;
  margin: 4px 0 8px;
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
}

#analyze-voice-text {
  margin-top: 4px;
}

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

.scan-retry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0 10px;
}

.scan-retry-row button {
  min-height: 36px;
}

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

.row input {
  margin: 0;
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-row .primary,
.auth-row button {
  width: 100%;
}

.nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.nutrition-card {
  margin-bottom: 0;
}

.nutrition-card strong {
  font-size: 0.98rem;
}

.meal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.meal-card {
  border-left: 4px solid var(--orange);
}

.meal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meal-add-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #ff6a35, #ff5a1f);
  box-shadow: 0 4px 10px rgba(255, 90, 31, 0.3);
}

.food-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  margin-top: 8px;
}

.food-item-row .meta {
  display: flex;
  gap: 6px;
  color: #666;
  font-size: 0.72rem;
}

.history-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ece99a;
  background: #fffef2;
  color: #1f2532;
}

.history-card strong {
  color: #1a2130;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.history-card .muted {
  color: #5e6574;
}

#use-scan-history {
  min-width: 76px;
  border-radius: 10px;
  background: #ff5a1f;
  border: 1px solid #ff5a1f;
  color: #ffffff;
  font-weight: 800;
}

#history-scan-list {
  display: none;
}

#history-scan-list.open {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
}

.history-empty {
  border: 1px dashed #e6e6ee;
  background: #fff;
}

.history-scan-item {
  border: 1px solid #ebeaf3;
  background: #fff;
  padding: 8px 10px;
  color: #1f2532;
}

.history-scan-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  text-align: left;
}

.history-scan-toggle strong {
  display: block;
  font-size: 0.88rem;
  color: #1c2330;
  line-height: 1.25;
}

.history-time {
  margin: 3px 0 0;
  font-size: 0.74rem;
  color: #5d6574;
}

.history-ingredient-text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.42;
  color: #4f5768;
}

.history-scan-chevron {
  font-size: 1.2rem;
  line-height: 1;
  color: #7a7e88;
}

.history-scan-body {
  display: none;
  margin-top: 8px;
  border-top: 1px solid #f0f0f5;
  padding-top: 8px;
}

.history-scan-body.open {
  display: block;
}

.history-scan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.history-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid #e2e4ed;
  background: #f8f9fd;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #273044;
}

.history-pill-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #56607a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.history-pill-meal {
  background: #eef4ff;
  border-color: #cfddff;
  color: #1f3f81;
}

.history-pill-source {
  background: #fff3ec;
  border-color: #ffd9ca;
  color: #8d3816;
}

.history-scan-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.history-use-btn {
  background: #fff2eb;
  color: #ff5a1f;
  border: 1px solid #ffd9c8;
  border-radius: 9px;
  padding: 7px 10px;
}

.history-load-more {
  width: 100%;
  background: #f5f6fa;
  color: #454a56;
  border: 1px dashed #d8dbe5;
}

.scan-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.scan-option {
  background: #ffffff;
  border: 1px solid #ece8f2;
  min-height: 108px;
  border-radius: 18px;
  text-align: center;
  padding: 14px 8px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #2f2f36;
  box-shadow: 0 3px 12px rgba(27, 23, 35, 0.05);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.scan-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(27, 23, 35, 0.08);
}

.scan-option.active {
  border-color: #ffd2c2;
  box-shadow: inset 0 0 0 1px #ffd2c2;
}

.quick-log-card p {
  margin: 0 0 8px;
}

.quick-log-card .row {
  margin-bottom: 8px;
}

.quick-log-card .row input {
  margin: 0;
}

.severity-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0 10px;
}

.severity-row input {
  margin: 0;
}

.axis-row {
  grid-template-columns: auto 1fr auto auto;
}

.severity-anchor {
  font-size: 0.7rem;
  color: #8c94a3;
  font-weight: 700;
}

.recent-symptom-chip {
  border: 1px solid #d8d8de;
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 0.74rem;
}

.symptom-panel .chip-grid {
  margin-bottom: 8px;
}

.symptom-panel {
  display: grid;
  gap: 10px;
}

.symptom-panel label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
}

.symptom-section-title {
  margin: 2px 0 4px;
}

.symptom-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff8f4, #fffdfb);
  border: 1px solid #f2ddd2;
}

.symptom-hero h3 {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  line-height: 1.2;
}

.symptom-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b65a2e;
}

.symptom-selected-pill {
  min-width: 110px;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff1e9;
  border: 1px solid #ffc3ac;
  color: #7a3315;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.symptom-search-wrap input {
  background: #fff;
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  min-height: 48px;
  padding: 0 14px;
}

.symptom-category-grid {
  margin-top: 4px;
}

.symptom-category-btn {
  min-height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6e9f0;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 10px;
}

.symptom-category-btn.active {
  border-color: #ffb599;
  background: #fff4ef;
  color: #7d3318;
}

.symptom-severity-card {
  border-radius: 16px;
  border: 1px solid #e9ebf0;
  background: #fbfcff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.symptom-severity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.symptom-severity-head strong {
  font-size: 1rem;
  color: #1f2430;
}

.symptom-severity-row {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin: 0;
}

.symptom-severity-presets {
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
}

.segmented-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 6px 0 10px;
}

.seg-btn {
  border-radius: 10px;
  border: 1px solid #e2e5ed;
  background: #fff;
  color: #3d4450;
  font-size: 0.72rem;
  padding: 8px 6px;
}

.seg-btn.active {
  background: #fff4ef;
  border-color: #ffb599;
  color: #7d3318;
}

.emoji-cloud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 6px 0 10px;
}

.emoji-btn {
  border-radius: 10px;
  border: 1px solid #e2e5ed;
  background: #fff;
  padding: 8px 0;
  font-size: 1rem;
}

.emoji-btn.active {
  border-color: #ffb599;
  background: #fff4ef;
}

.symptom-tag-btn {
  border: 1px solid #d8d8de;
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 0.74rem;
}

.symptom-tag-btn.active {
  border-color: #ffb599;
  background: #fff4ef;
  color: #7d3318;
}

.symptom-time-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.symptom-time-row input {
  margin: 0;
}

#symptom-time-now,
#symptom-advanced-toggle {
  border: 1px solid #d8d8de;
  background: #fff;
  border-radius: 10px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #444f61;
}

.symptom-advanced {
  border: 1px dashed #d9dce6;
  border-radius: 12px;
  background: #fafbfe;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.scan-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
}

.scan-sheet.open {
  display: block;
}

.scan-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.scan-sheet.open .scan-sheet-backdrop {
  opacity: 1;
}

.scan-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 58%;
  overflow-y: auto;
  background: #fbfbfd;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 14px 12px 96px;
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.scan-sheet.open .scan-sheet-panel {
  transform: translateY(0);
}

.scan-sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 4px 2px 0;
}

.scan-sheet-head::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 42px;
  height: 4px;
  margin-left: -21px;
  border-radius: 99px;
  background: #f0dff5;
}

.scan-sheet-head strong {
  color: #151c2a;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#close-scan-sheet {
  border-radius: 10px;
  border: 1px solid #d8dce8;
  background: #ffffff;
  color: #273046;
  font-weight: 800;
  padding: 8px 12px;
}

#add-log-suggestion {
  color: #505b72;
  font-size: 0.82rem;
  font-weight: 700;
  margin: -4px 0 10px !important;
}

.scan-launcher {
  display: none;
}

.scan-launcher.active {
  display: block;
}

.scan-page {
  display: none;
}

.scan-page.active {
  display: block;
}

.scan-page-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.scan-page-head strong {
  justify-self: center;
  font-size: 0.98rem;
  font-weight: 800;
  text-align: center;
}

.scan-back,
.scan-close {
  background: #fff;
  border: 1px solid #d7dae2;
  border-radius: 10px;
  padding: 8px 12px;
  color: #273046;
  font-weight: 800;
  min-width: 68px;
}

.scan-close {
  justify-self: end;
}

.scan-panel-content {
  min-height: auto;
  box-shadow: 0 4px 16px rgba(20, 20, 20, 0.08);
  border: 1px solid #eceff5;
}

.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.tone-blue {
  background: linear-gradient(145deg, #dbe9ff, #edf3ff);
}

.tone-pink {
  background: linear-gradient(145deg, #ffd9ee, #ffedf7);
}

.tone-purple {
  background: linear-gradient(145deg, #e9dbff, #f4edff);
}

.tone-teal {
  background: linear-gradient(145deg, #d9f7f0, #ebfcf8);
}

.scan-option-list {
  background: #fff;
  border: 1px solid #eee8f3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(27, 23, 35, 0.04);
}

.scan-option-list-priority {
  margin: 10px 0;
  border-color: #ffd8ca;
  box-shadow: 0 4px 14px rgba(255, 90, 31, 0.1);
}

.scan-list-btn-priority {
  background: linear-gradient(180deg, #fff6f1, #fff1ea);
  color: #7e3214;
  font-weight: 800;
}

.scan-list-btn {
  width: 100%;
  background: #fff;
  border-radius: 0;
  border: 0;
  border-top: 1px solid #f5f1f8;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #34323b;
}

.scan-list-btn:first-child {
  border-top: 0;
}

.water-panel-content {
  background: linear-gradient(180deg, #fbfdff, #f6f9ff);
  border: 1px solid #e6edf9;
  display: grid;
  gap: 10px;
}

.water-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, #edf4ff, #f7fbff);
  border: 1px solid #dbe6fb;
}

.water-summary-hero {
  align-items: center;
}

.water-summary-copy {
  display: grid;
  gap: 4px;
}

.water-kicker {
  margin: 0 0 2px;
  color: #476090;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.water-total {
  margin: 0;
  font-size: 1.5rem;
  color: #1a2949;
  font-weight: 800;
}

.water-summary-line {
  margin: 0;
  color: #4c5a75;
  font-size: 0.8rem;
}

.water-progress-badge {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(160deg, #ffffff, #eff5ff);
  border: 1px solid #d8e5fb;
  display: grid;
  place-items: center;
  text-align: center;
  color: #33588f;
}

.water-progress-badge strong {
  display: block;
  font-size: 1rem;
  line-height: 1;
}

.water-progress-badge span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.water-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #dde8f9;
  overflow: hidden;
  margin-top: 10px;
}

.water-progress-track span {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, #57a9ff, #3f87ff);
  transition: width 180ms ease;
}

.water-progress-text {
  margin: 0;
  color: #50627f;
  font-weight: 700;
}

.water-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.water-quick-btn {
  border: 1px solid #d8e6fc;
  background: #ffffff;
  color: #2a467a;
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  display: grid;
  gap: 4px;
}

.water-quick-btn span {
  font-size: 0.7rem;
  font-weight: 600;
  color: #60789f;
}

.water-inline-toggle {
  justify-self: start;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.74rem;
  font-weight: 800;
}

.water-custom-panel,
.water-goal-panel,
.water-recent-card {
  border-radius: 14px;
  border: 1px solid #e6edf9;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.water-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.water-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #38537f;
}

.water-recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.water-recent-chip {
  border: 1px solid #d8e6fc;
  background: #f9fbff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.72rem;
  color: #365887;
  font-weight: 700;
}

.water-time-row,
.water-goal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  margin-top: 4px;
}

@media (max-width: 430px) {
  .symptom-hero,
  .water-summary-hero {
    grid-template-columns: 1fr;
  }

  .symptom-selected-pill,
  .water-progress-badge {
    justify-self: start;
  }

  .symptom-severity-presets {
    grid-template-columns: repeat(3, 1fr);
  }
}

.water-time-row label,
.water-goal-row label {
  font-size: 0.75rem;
  color: #516182;
  margin-bottom: 2px;
}

.water-time-row button,
.water-goal-row button {
  border: 1px solid #d7ddea;
  background: #fff;
  border-radius: 10px;
  color: #304166;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

.camera-capture-modal {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: #0b0c0f;
  display: none;
  color: #fff;
}

.camera-capture-modal.open {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.camera-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0));
  z-index: 2;
}

.camera-head strong {
  text-align: left;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

#camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.camera-overlay {
  position: absolute;
  inset: 62px 0 110px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  pointer-events: none;
  z-index: 1;
}

.scan-frame {
  width: min(78vw, 300px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.02);
}

.scan-frame.barcode-frame {
  width: min(84vw, 330px);
  aspect-ratio: 3.2 / 1;
  border-radius: 16px;
}

.scan-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid #ffffff;
}

.scan-corner.tl {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 12px 0 0 0;
}

.scan-corner.tr {
  top: 10px;
  right: 10px;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 12px 0 0;
}

.scan-corner.bl {
  bottom: 10px;
  left: 10px;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 12px;
}

.scan-corner.br {
  bottom: 10px;
  right: 10px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 12px 0;
}

.camera-overlay p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.86);
}

.camera-controls {
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 0 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.camera-capture-modal.barcode-auto .camera-shutter {
  display: none;
}

.camera-capture-modal.barcode-auto .camera-controls {
  padding: 12px 0 20px;
  gap: 4px;
}

.camera-capture-modal.barcode-auto #camera-modal-tap {
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

.camera-capture-modal.barcode-auto .scan-frame::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 90, 31, 0.2), #ff5a1f 55%, rgba(255, 90, 31, 0.2));
  box-shadow: 0 0 10px rgba(255, 90, 31, 0.4);
  animation: barcode-sweep 1.7s ease-in-out infinite;
}

@keyframes barcode-sweep {
  0% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(calc(100% - 16px));
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
}

#meal-analysis-result {
  border: 1px solid #e8e8ef;
}

.meal-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.meal-ingredients {
  margin-top: 8px;
  border-top: 1px solid #efeff4;
  padding-top: 8px;
}

.meal-analysis-panel {
  min-height: 114px;
}

.meal-loading-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 8px;
  text-align: center;
}

.meal-loading-state p {
  margin: 0;
}

.meal-loading-spinner {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 3px solid #ffd6c7;
  border-top-color: #ff5a1f;
  animation: sift-spin 0.8s linear infinite;
}

.scan-review {
  margin-top: 10px;
  border: 1px solid #e3e8f1;
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  box-shadow: 0 8px 18px rgba(11, 18, 31, 0.06);
}

.scan-review-head {
  margin-bottom: 10px;
}

.scan-review-kicker {
  margin: 0 0 4px;
  color: #ff5a1f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scan-review-head strong {
  display: block;
  color: #131a27;
  font-size: 1rem;
}

.scan-review-copy {
  margin: 4px 0 0;
}

.scan-review .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
}

.scan-review .row button {
  white-space: nowrap;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 700;
}

.scan-review select {
  margin: 0;
}

.review-category-field {
  min-width: 0;
}

.review-category-field label {
  display: block;
  margin: 0 0 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa2b3;
}

.review-category-select-wrap {
  position: relative;
}

.review-category-select {
  width: 100%;
  margin: 0;
  padding: 11px 34px 11px 12px;
  border-radius: 12px;
  border: 1px solid #2f3442;
  background: linear-gradient(180deg, #171b22, #13171d);
  color: #f4f7fb;
  font-size: 0.84rem;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.review-category-select:focus {
  outline: none;
  border-color: #ff8158;
  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.2);
}

.review-category-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa2b3;
  font-size: 0.72rem;
  line-height: 1;
  pointer-events: none;
}

.scan-review input,
.scan-review textarea {
  width: 100%;
  margin: 0 0 8px;
}

.scan-review textarea {
  min-height: 92px;
  resize: vertical;
}

.scan-candidate-wrap {
  margin: 6px 0 10px;
}

.scan-candidate-wrap .muted {
  margin: 0 0 6px;
}

.scan-candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scan-candidate-btn {
  border: 1px solid #ffd2c0;
  background: #fff6f0;
  color: #7a4319;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.scan-candidate-btn:active {
  transform: translateY(1px);
}

.meal-warning {
  color: #aa510f;
  background: #fff1e7;
  border: 1px solid #ffd7c2;
  border-radius: 10px;
  padding: 7px 9px;
}

.scan-flag-banner {
  margin-top: 8px;
  border: 1px solid #ffd6bf;
  background: #fff5ee;
  border-radius: 12px;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
}

.scan-flag-title {
  margin: 0 0 4px;
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 800;
}

.scan-flag-banner-critical {
  border-color: #ffb4c0;
  background: #fff1f3;
}

.scan-flag-banner-critical .scan-flag-title,
.scan-flag-banner-critical p {
  color: #8f1f34;
}

.scan-flag-banner-warning {
  border-color: #ffd6bf;
  background: #fff5ee;
}

.scan-flag-banner-warning .scan-flag-title,
.scan-flag-banner-warning p {
  color: #7a4319;
}

.scan-flag-banner p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.scan-flag-banner p + p {
  margin-top: 4px;
}

.scan-flag-alert-modal .plan-alert-panel {
  border: 1px solid #ffccd6;
}

.scan-flag-alert-modal .plan-alert-kicker {
  color: #b42b48;
}

.scan-flag-alert-modal #scan-flag-alert-message {
  color: #6c2133;
  font-weight: 700;
}

#review-retake-meal {
  background: #f3f4f8;
  color: #4b505d;
  border: 1px solid #dfe3ec;
}

.scan-alt-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.scan-alt-list button {
  width: 100%;
}

.scan-review .primary.saving {
  opacity: 0.85;
}

.scan-review .primary.saved {
  background: linear-gradient(180deg, #3fc788, #2ca66f);
  box-shadow: 0 6px 14px rgba(50, 190, 124, 0.24);
}

.voice-capture-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.voice-hold-btn {
  width: 100%;
  min-height: 60px;
  border-radius: 14px;
  border: 1px solid #ffd2c2;
  background: #fff5f0;
  color: #3a2b25;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  touch-action: none;
}

.voice-hold-btn .voice-hold-icon {
  font-size: 1.12rem;
}

.voice-hold-btn.recording {
  background: #ff5a1f;
  color: #fff;
  border-color: #ff5a1f;
  box-shadow: 0 10px 20px rgba(255, 90, 31, 0.32);
  animation: voice-pulse 1s ease-in-out infinite;
}

.voice-hold-btn.pending {
  background: #fff0ea;
  border-color: #ffb79d;
  color: #8c4123;
  box-shadow: 0 8px 18px rgba(255, 140, 94, 0.18);
}

.voice-hold-btn:disabled {
  opacity: 1;
  cursor: wait;
}

.voice-hold-btn:active {
  transform: scale(0.985);
}

#voice-status {
  margin: 0;
  text-align: center;
}

@keyframes voice-pulse {
  0% {
    box-shadow: 0 10px 20px rgba(255, 90, 31, 0.24);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 90, 31, 0.16), 0 12px 24px rgba(255, 90, 31, 0.24);
  }
  100% {
    box-shadow: 0 10px 20px rgba(255, 90, 31, 0.24);
  }
}

.camera-shutter {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(0, 0, 0, 0.25);
}

.camera-shutter:active {
  transform: scale(0.97);
}

.camera-controls p {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.84);
}

.bottom-nav {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 7px 6px;
  border: 1px solid #e6e8ef;
  box-shadow: 0 10px 20px rgba(28, 34, 50, 0.12);
}

.nav-btn {
  background: transparent;
  color: #7d8290;
  font-size: 0.7rem;
  padding: 7px 4px;
  border: 0;
}

.nav-btn.active {
  color: var(--orange);
  font-weight: 800;
  background: #fff1e9;
  border-radius: 10px;
}

.nav-main {
  background: linear-gradient(180deg, #ff6a35, #ff5a1f);
  color: #fff;
  border-radius: 12px;
  font-size: 1rem;
}

.calendar-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 8px;
}

.calendar-row .calendar-day {
  text-align: center;
  background: #ffffff;
  border-radius: 16px;
  padding: 7px 0 8px;
  color: #1f2430;
  border: 1px solid #e5e9f1;
  width: 100%;
  display: grid;
  gap: 3px;
  justify-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.calendar-row .calendar-day .cal-week {
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  opacity: 0.72;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar-row .calendar-day .cal-num {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.calendar-row .calendar-day .cal-markers {
  min-height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.calendar-row .calendar-day .cal-marker {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #cad1df;
}

.calendar-row .calendar-day .cal-marker.plan-complete-marker {
  background: #2dbb83;
  box-shadow: 0 0 0 1px rgba(45, 187, 131, 0.2);
}

.calendar-row .calendar-day.weekend .cal-week {
  opacity: 0.5;
}

.calendar-row .calendar-day:hover {
  transform: translateY(-1px);
}

.calendar-row .calendar-day.active {
  background: linear-gradient(180deg, #ff6b39 0%, #ff5722 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 14px rgba(255, 92, 33, 0.28);
}

.calendar-row .calendar-day.today:not(.active) {
  border-color: #ffb39d;
  background: #fff7f3;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, 0.25);
}

.calendar-row .calendar-day.plan-complete:not(.active) {
  border-color: #8cd9bb;
  box-shadow: inset 0 0 0 1px rgba(45, 187, 131, 0.22);
}

.calendar-row .calendar-day.active .cal-marker.plan-complete-marker {
  background: #ffffff;
  box-shadow: none;
}

.journal-calendar-card,
.journal-plan-card,
.journal-day-card {
  background: #f4f4f5;
  border-color: #efeff1;
}

.progress-calendar-card {
  background: #f4f4f5;
  border-color: #efeff1;
}

.progress-calendar-card .calendar-row .calendar-day {
  background: #ffffff;
  color: #121316;
  font-weight: 700;
  border-radius: 16px;
}

.progress-calendar-card .calendar-row .calendar-day.active {
  background: linear-gradient(180deg, #ff6b39 0%, #ff5722 100%);
  color: #fff;
}

.progress-block h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.progress-plan-card {
  border-radius: 12px;
  padding: 10px 12px;
}

.journal-plan-stack {
  display: grid;
  gap: 8px;
}

.journal-plan-card-line {
  margin: 4px 0 0;
}

.journal-plan-card-meta {
  font-size: 0.74rem;
}

.journal-plan-secondary {
  background: #d8cc8d;
  color: #2b2513;
}

.journal-plan-stack .progress-plan-active .muted,
.journal-plan-stack .journal-plan-secondary .muted,
.journal-plan-stack .progress-plan-done .muted {
  color: inherit;
  opacity: 0.9;
}

.progress-plan-active {
  background: #ece55b;
  color: #161612;
}

.progress-plan-done {
  background: #45c58f;
  color: #fff;
}

.progress-plan-card.progress-plan-done.progress-plan-warning-data {
  background: #bf7728;
  color: #fff9ef;
  border-color: rgba(143, 89, 29, 0.45);
}

.progress-plan-card.progress-plan-done.progress-plan-invalid-data {
  background: #a83b43;
  color: #fff4f4;
  border-color: rgba(129, 39, 48, 0.5);
}

.progress-open-btn {
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
}

.progress-restart-btn {
  margin-top: 8px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  background: var(--orange);
  color: #ffffff;
}

.progress-restart-btn:disabled {
  opacity: 0.72;
}

.progress-detail {
  border-radius: 16px;
}

.progress-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.progress-detail-head button {
  border: 0;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  background: var(--orange);
  color: #fff;
}

.progress-target {
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 10px;
}

.progress-phase {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  margin: 10px 0;
}

.progress-phase .dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #b8bcc5;
  background: transparent;
  margin-top: 2px;
}

.progress-phase.done .dot {
  border-color: #39b97e;
  background: #39b97e;
}

.progress-conclusion {
  margin-top: 12px;
  border-radius: 12px;
  background: #45c58f;
  color: #fff;
  padding: 10px;
}

.progress-conclusion.progress-conclusion-warning {
  background: #bf7728;
}

.progress-conclusion.progress-conclusion-invalid {
  background: #a83b43;
}

.progress-conclusion .muted {
  color: rgba(255, 255, 255, 0.88);
}

.journal-month-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 0 0 10px;
}

.journal-month-row .cal-month {
  border: 1px solid #e5e9f1;
  background: #ffffff;
  border-radius: 999px;
  padding: 5px 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #7e8696;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.journal-month-row .cal-month.active,
.journal-month-row span.active {
  color: #171a21;
  background: #fff1e8;
  border-color: #ffc7b3;
}

.journal-calendar-card .calendar-row .calendar-day {
  background: #ffffff;
  color: #121316;
  font-weight: 700;
  border-radius: 16px;
  padding: 7px 0 8px;
}

.journal-calendar-card .calendar-row .calendar-day.active {
  background: linear-gradient(180deg, #ff6b39 0%, #ff5722 100%);
  color: #fff;
}

.journal-plan-card h2,
.journal-day-card h2 {
  margin: 2px 0 10px;
  font-size: 1.05rem;
}

#screen-journal.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#screen-journal .journal-calendar-card {
  order: 1;
  background: linear-gradient(180deg, #f7f8fb, #f2f4f8);
  border-color: #e7ebf3;
}

#screen-journal .journal-day-card {
  order: 2;
  background: linear-gradient(180deg, #ffffff, #fafbfd);
  border-color: #e7ebf3;
  box-shadow: 0 10px 22px rgba(15, 22, 35, 0.07);
}

#screen-journal .journal-plan-card {
  order: 3;
  background: linear-gradient(180deg, #f8f3ec, #f4eee5);
  border-color: #eadfce;
}

#screen-journal .journal-plan-card h2 {
  font-size: 0.98rem;
  margin-bottom: 8px;
}

#screen-journal #flow-status-card {
  border-color: rgba(128, 98, 57, 0.14);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

.journal-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.journal-fab {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--orange);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}

.journal-cat-card {
  border-radius: 14px;
  background: #cdb5f0;
  color: #191522;
  border: 0;
  padding: 0;
  overflow: hidden;
}

.journal-cat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.journal-cat-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 0;
  color: inherit;
}

.journal-cat-chevron {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.92;
}

.journal-cat-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.2);
}

.journal-cat-toggle-text {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: uppercase;
}

.journal-cat-main strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.journal-cat-main p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.journal-cat-plus {
  min-width: 68px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.28);
  color: #5f3398;
  font-size: 0.88rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
}

.journal-cat-plus-icon {
  font-size: 1rem;
  line-height: 1;
}

.journal-cat-plus-label {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.journal-cat-list {
  display: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 10px 10px;
  background: rgba(255, 255, 255, 0.28);
}

.journal-cat-list.open {
  display: block;
}

.journal-entry-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  padding: 8px 9px;
  margin-top: 6px;
}

.journal-entry-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.journal-entry-actions button {
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #3a2458;
}

.entry-ingredients-btn {
  font-weight: 700;
}

.journal-entry-ingredients {
  display: none;
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 6px;
}

.journal-entry-ingredients.open {
  display: block;
}

.journal-entry-ingredients p {
  margin: 0;
  font-size: 0.77rem;
  line-height: 1.35;
}

.journal-entry-alert {
  margin: 3px 0 0;
  color: #8a4108;
  font-size: 0.74rem;
  font-weight: 700;
}

.entry-edit-modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
}

.entry-edit-modal.open {
  display: block;
}

.entry-edit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.entry-edit-panel {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
}

.entry-edit-panel h3 {
  margin: 0 0 8px;
}

.entry-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.plan-alert-modal {
  position: absolute;
  inset: 0;
  z-index: 82;
  display: none;
}

.plan-alert-modal.open {
  display: block;
}

.plan-alert-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.46);
}

.plan-alert-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  background: #fff;
  border: 1px solid #f3c9bc;
  border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow: 0 16px 34px rgba(10, 13, 20, 0.28);
}

.plan-alert-kicker {
  margin: 0 0 4px;
  color: #bf3914;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-alert-panel h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  line-height: 1.25;
}

#plan-alert-message {
  margin: 0 0 6px;
  line-height: 1.35;
  color: #252b37;
}

#plan-alert-meta {
  margin: 0 0 10px;
  font-size: 0.8rem;
}

#plan-alert-actions,
.plan-alert-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#plan-alert-cancel,
#plan-alert-confirm,
#plan-alert-ok {
  width: 100%;
}

#plan-alert-ok {
  grid-column: 1 / -1;
}

.paywall-modal {
  position: absolute;
  inset: 0;
  z-index: 84;
  display: none;
}

.paywall-modal.open {
  display: block;
}

.paywall-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 14, 0.56);
}

.paywall-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  border-radius: 20px;
  border: 1px solid #ffd9c9;
  background: #fffaf7;
  color: #15161a;
  padding: 14px 14px 16px;
  box-shadow: 0 18px 34px rgba(8, 12, 18, 0.26);
}

.paywall-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: rgba(17, 21, 27, 0.08);
  color: #1f2430;
}

.paywall-kicker {
  margin: 0 0 4px;
  color: #bf3914;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#paywall-title {
  margin: 0 0 6px;
}

#paywall-subtitle {
  margin: 0 0 10px;
  color: #434a57;
}

.paywall-cycle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.paywall-cycle-btn {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid #e8c8bb;
  background: #ffffff;
  color: #252b37;
  font-size: 0.8rem;
  font-weight: 700;
}

.paywall-cycle-btn.active {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.18);
  background: #fff2eb;
  color: #1f232b;
}

#paywall-start-trial-btn {
  width: 100%;
  min-height: 44px;
  margin-bottom: 8px;
}

#paywall-note {
  margin: 0;
  font-size: 0.77rem;
  color: #5a6070;
}

.paywall-legal {
  margin: 8px 0 0;
  font-size: 0.73rem;
  color: #4d5564;
}

.paywall-legal a {
  color: #d84d1b;
  font-weight: 700;
}

.confidence-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin: 8px 0 6px;
}

.confidence-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #11161d;
}

.calendar-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

.calendar-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e5e9f1;
  border-radius: 999px;
  padding: 3px;
}

.calendar-label {
  color: #5a6272;
  font-size: 0.72rem;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #e5e9f1;
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

.calendar-picker {
  border-radius: 999px;
  border: 1px solid #e5e9f1;
  background: #ffffff;
  color: #3d4350;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 8px;
  min-width: 116px;
  height: 32px;
}

.calendar-nav {
  border-radius: 999px;
  border: 0;
  padding: 6px 10px;
  font-size: 0.78rem;
  line-height: 1;
  min-width: 32px;
  background: transparent;
  color: #3d4350;
}

.calendar-nav[data-cal-nav="today"] {
  background: #fff1e9;
  color: #d84d1b;
  font-weight: 700;
}

.more-list {
  padding: 4px 10px;
}

.more-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2px;
  font-size: 0.82rem;
}

.more-row-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  pointer-events: auto;
  border: 1px solid transparent;
  background: transparent;
  color: #ecf2fc;
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.more-row-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

#screen-more .more-row-btn span:last-child {
  color: #ff8a63;
  font-weight: 800;
}

#screen-more .more-row-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

#screen-more .account-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#screen-more #logout-btn,
#screen-more #export-data-btn,
#screen-more #delete-account-btn {
  width: 100%;
  border-radius: 12px;
  min-height: 40px;
}

#screen-more #logout-btn {
  background: linear-gradient(180deg, #ff6a35, #ff5a1f);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 16px rgba(255, 90, 31, 0.24);
}

#screen-more #export-data-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: #f4f8ff;
}

#screen-more #delete-account-btn {
  border: 0;
  color: #fff;
  background: linear-gradient(180deg, #d44747, #bf2f2f);
  box-shadow: 0 8px 16px rgba(191, 47, 47, 0.24);
}

#screen-onboarding #save-profile {
  margin-top: 6px;
  box-shadow: 0 8px 16px rgba(255, 90, 31, 0.28);
}

@media (max-width: 420px) {
  .profile-identity-grid {
    grid-template-columns: 1fr;
  }
}

.more-row + .more-row {
  border-top: 1px solid #efeff3;
}

.insight-card {
  border-radius: 16px;
  border: 1px solid #eceff5;
  box-shadow: 0 4px 12px rgba(25, 25, 30, 0.08);
  padding: 14px;
}

.insight-high-card {
  background: #fff2ee;
}

.insight-medium-card {
  background: #f6efff;
}

.insight-low-card {
  background: #eaf8f0;
}

.insight-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.insight-low {
  background: #d3f4dd;
  color: #177a3c;
}

.insight-medium {
  background: #fff0cf;
  color: #916602;
}

.insight-high {
  background: #ffd8d8;
  color: #a21313;
}

#screen-insight {
  background: linear-gradient(180deg, #e7f2ea 0%, #f6f6fa 12%, #f6f6fa 100%);
  border-radius: 14px;
  padding-top: 8px;
}

.insight-streak {
  background: linear-gradient(115deg, #a9e4ce, #c5ccff);
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(45, 45, 55, 0.1);
  margin-bottom: 10px;
}

.insight-header h2 {
  font-size: 1.45rem;
  margin: 2px 0 8px;
}

.insight-disclaimer {
  margin: 4px 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #6d7482;
}

.insight-control {
  border-radius: 16px;
  border: 1px solid #e8e8ef;
  box-shadow: 0 3px 10px rgba(26, 26, 36, 0.05);
}

.insight-filter-card {
  border-radius: 16px;
  border: 1px solid #e8e8ef;
  background: #fff;
  box-shadow: 0 3px 10px rgba(26, 26, 36, 0.05);
}

.profile-section-card #profile-primary-symptom {
  margin-top: 6px;
}

.insight-deck {
  border-radius: 16px;
  border: 1px solid #e8e8ef;
  background: #fff;
  padding: 10px;
}

.insight-tile {
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.insight-tile:last-child {
  margin-bottom: 0;
}

.insight-tile-orange {
  background: #ff6d45;
  color: #fff;
}

.insight-tile-purple {
  background: #cfb2f0;
  color: #1e1728;
}

.insight-tile-mint {
  background: #b8efda;
  color: #16342a;
}

.insight-tile .muted {
  color: inherit;
  opacity: 0.92;
  margin: 6px 0 10px;
}

.insight-test-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #1e232b;
  font-weight: 700;
  padding: 10px 12px;
}

.insight-plan-sheet {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
}

.insight-plan-sheet.open {
  display: block;
}

.insight-plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.26);
}

.insight-plan-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 14px 14px 18px;
}

.insight-plan-handle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: #dbdce4;
  margin: 0 auto 12px;
}

.insight-plan-panel .insight-plan-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dde2ee;
  border-radius: 10px;
  background: #f8faff !important;
  color: #25314a !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 7px 11px;
  margin: 0 0 10px;
}

.insight-plan-panel .insight-plan-back-btn:active {
  transform: translateY(1px);
}

.insight-plan-panel h3 {
  margin: 0 0 6px;
  font-size: 1.45rem;
}

.insight-plan-panel p {
  margin: 8px 0;
  line-height: 1.35;
}

.insight-plan-panel .insight-plan-error {
  color: #b93d14;
  font-weight: 700;
}

.insight-plan-status-banner {
  border: 1px solid #ffd6c9;
  border-left: 4px solid #ff5a1f;
  border-radius: 12px;
  background: #fff7f4;
  color: #5b3b30;
  padding: 10px 12px;
  margin: 8px 0 10px;
  font-size: 0.84rem;
  line-height: 1.4;
}

.insight-plan-loading {
  border: 1px solid #eceef5;
  border-radius: 12px;
  padding: 12px;
  background: #f8faff;
  text-align: left;
}

.insight-plan-loading p {
  margin: 4px 0;
}

.insight-plan-restriction {
  border: 1px solid #ffd6c9;
  border-left: 4px solid #ff5a1f;
  border-radius: 12px;
  background: #fff7f4;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.insight-plan-restriction strong {
  color: #b93d14;
  display: block;
}

.insight-plan-restriction p {
  margin: 5px 0 0;
  color: #5b3b30;
}

.insight-plan-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.insight-plan-actions .primary {
  width: 100%;
}

.insight-plan-actions .primary.is-unavailable {
  background: #ffd9cc;
  border: 1px solid #ffb89e;
  color: #8a2e0e;
  box-shadow: none;
}

.insight-plan-actions .insight-plan-cancel {
  width: 100%;
  background: #f4f6fb;
  border: 1px solid #d8deeb;
  color: #2a344a;
  font-weight: 700;
}

.insight-plan-actions .insight-plan-cancel:active {
  transform: translateY(1px);
}

.insight-target-hero {
  border: 1px solid #eceef5;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(160deg, #f7f9ff, #fdf6f3);
  margin: 4px 0 10px;
}

.insight-target-label {
  margin: 0;
  color: #5e6879;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insight-target-hero h4 {
  margin: 4px 0 4px;
  font-family: "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 1.42rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #1b1f2a;
}

.insight-target-hero .muted {
  margin: 0;
  font-size: 0.82rem;
  color: #60697a;
}

.insight-connection-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.insight-connection-count {
  border: 1px solid #eceef5;
  border-radius: 12px;
  background: #fbfcff;
  padding: 8px 8px 7px;
  text-align: center;
}

.insight-connection-count strong {
  display: block;
  font-size: 1.2rem;
  color: #1f2532;
  line-height: 1.05;
}

.insight-connection-count span {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6f7685;
  font-weight: 700;
}

.insight-trend-chart {
  border: 1px solid #eceef5;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px 10px 6px;
  margin: 8px 0 12px;
}

.trend-row {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trend-row:last-child {
  margin-bottom: 2px;
}

.trend-row span {
  font-size: 0.72rem;
  color: #515968;
  font-weight: 700;
}

.trend-row strong {
  font-size: 0.74rem;
  color: #1f2532;
  min-width: 40px;
  text-align: right;
}

.trend-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #eef1f7;
  overflow: hidden;
}

.trend-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.trend-exp {
  background: #8f97a8;
}

.trend-hit {
  background: #37b77d;
}

.trend-miss {
  background: #ff9a7b;
}

.trend-rate {
  background: #ff6a35;
}

.insight-inline-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.insight-results {
  margin-top: 8px;
}

.completed-correlation-card {
  border: 1px solid #eceef5;
  border-radius: 14px;
  background: #ffffff;
  padding: 10px;
  margin: 8px 0 10px;
}

.progress-completed-inline-chart {
  margin-top: 8px;
}

.completed-result-dropdown {
  margin-top: 8px;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  background: #f9fbff;
  overflow: hidden;
}

.completed-result-dropdown summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #364052;
}

.completed-result-dropdown .result-summary-close {
  display: none;
}

.completed-result-dropdown[open] .result-summary-open {
  display: none;
}

.completed-result-dropdown[open] .result-summary-close {
  display: inline;
}

.completed-result-dropdown summary::-webkit-details-marker {
  display: none;
}

.completed-result-dropdown[open] summary {
  border-bottom: 1px solid #e5e9f2;
}

.completed-result-dropdown .progress-completed-inline-chart {
  margin-top: 0;
  padding: 8px;
}

.completed-result-collapse {
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #eef2fa;
  color: #1d2432;
}

.completed-correlation-title {
  margin: 0 0 4px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #606a7a;
  font-weight: 800;
}

.completed-correlation-pair {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #1c2230;
}

.completed-correlation-summary {
  margin: 4px 0 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #4f5a6c;
}

.completed-result-status {
  border-radius: 10px;
  padding: 7px 9px;
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.completed-result-status.invalid {
  color: #862630;
  background: rgba(255, 91, 98, 0.12);
  border-color: rgba(233, 82, 93, 0.42);
}

.completed-data-flag {
  margin: 7px 0 8px;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 700;
  border: 1px solid transparent;
}

.completed-data-flag.warning {
  color: #6f470f;
  background: rgba(255, 179, 87, 0.2);
  border-color: rgba(199, 126, 35, 0.4);
}

.completed-data-flag.invalid {
  color: #862630;
  background: rgba(255, 91, 98, 0.12);
  border-color: rgba(233, 82, 93, 0.42);
}

.phase-effect-chart {
  margin-top: 8px;
  border: 1px solid #eceef5;
  border-radius: 12px;
  background: #fbfcff;
  padding: 8px;
}

.phase-effect-title {
  margin: 0 0 8px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b6474;
  font-weight: 800;
}

.phase-signal-pill {
  border-radius: 10px;
  border: 1px solid #e3e8f2;
  background: #f8fbff;
  padding: 8px 10px;
  margin: 0 0 8px;
  display: grid;
  gap: 2px;
}

.phase-signal-pill strong {
  font-size: 0.76rem;
  color: #202733;
}

.phase-signal-pill span {
  font-size: 0.7rem;
  color: #5c6678;
}

.phase-signal-up {
  border-color: rgba(69, 190, 121, 0.35);
  background: rgba(69, 190, 121, 0.12);
}

.phase-signal-down {
  border-color: rgba(84, 164, 255, 0.35);
  background: rgba(84, 164, 255, 0.12);
}

.phase-signal-mixed {
  border-color: rgba(255, 167, 92, 0.4);
  background: rgba(255, 167, 92, 0.12);
}

.phase-signal-invalid {
  border-color: rgba(255, 91, 98, 0.45);
  background: rgba(255, 91, 98, 0.14);
}

.phase-invalid-alert {
  border: 1px solid rgba(233, 82, 93, 0.45);
  border-left: 4px solid #e9525d;
  background: rgba(255, 91, 98, 0.12);
  border-radius: 10px;
  padding: 10px;
  margin: 0 0 10px;
}

.phase-invalid-alert strong {
  display: block;
  color: #862630;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.phase-invalid-alert p {
  margin: 0;
  font-size: 0.72rem;
  color: #5f2630;
}

.phase-invalid-details {
  margin-top: 8px;
  border-top: 1px dashed rgba(143, 53, 61, 0.28);
  padding-top: 8px;
}

.phase-invalid-details summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8f353d;
}

.phase-invalid-details-body {
  margin-top: 6px;
}

.phase-invalid-details-body p {
  margin: 0 0 5px;
  font-size: 0.7rem;
  color: #5f2630;
}

.phase-invalid-details-body ul {
  margin: 0;
  padding-left: 18px;
}

.phase-invalid-details-body li {
  margin: 0 0 4px;
  font-size: 0.7rem;
  color: #5f2630;
}

.phase-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.phase-summary-card {
  border-radius: 10px;
  border: 1px solid #eceef5;
  background: #ffffff;
  padding: 8px;
}

.phase-summary-elim {
  border-color: rgba(88, 199, 135, 0.28);
}

.phase-summary-reintro {
  border-color: rgba(255, 140, 79, 0.3);
}

.phase-summary-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: #293141;
}

.phase-summary-note {
  margin: 2px 0 6px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #687285;
  font-weight: 700;
}

.phase-summary-metric {
  margin: 2px 0;
  font-size: 0.7rem;
  color: #364052;
}

.phase-summary-metric strong {
  color: #1f2735;
}

.phase-summary-check {
  margin: 3px 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: #4f5b6e;
}

.phase-summary-check.ok {
  color: #2d8d5d;
}

.phase-summary-check.warn {
  color: #b57f28;
}

.phase-summary-check.fail {
  color: #be3c48;
}

.phase-effect-group {
  margin-bottom: 8px;
}

.phase-effect-group:last-child {
  margin-bottom: 4px;
}

.phase-effect-label {
  margin: 0 0 6px;
  color: #4d5666;
  font-size: 0.72rem;
  font-weight: 700;
}

.phase-effect-row {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.phase-effect-row span {
  font-size: 0.7rem;
  color: #545d6d;
  font-weight: 700;
}

.phase-effect-row strong {
  min-width: 46px;
  text-align: right;
  color: #1f2532;
  font-size: 0.74rem;
}

.phase-effect-note {
  margin: 4px 0 0;
}

.phase-change-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.phase-change-item {
  border: 1px solid #e8ebf4;
  border-radius: 10px;
  background: #fff;
  padding: 7px 8px;
  text-align: center;
}

.phase-change-item span {
  display: block;
  font-size: 0.66rem;
  color: #667084;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.phase-change-item strong {
  display: block;
  margin-top: 2px;
  color: #1f2532;
  font-size: 0.84rem;
}

.phase-fill-reduce {
  background: #58c787;
}

.phase-fill-increase {
  background: #ff8c4f;
}

.phase-fill-sym-low {
  background: #8dc9ff;
}

.phase-fill-sym-high {
  background: #ff5c7a;
}

.insight-history-item {
  text-align: left;
  border: 1px solid #eceaf3;
  border-radius: 12px;
  background: #fff;
}

.insight-icon {
  font-size: 1.5rem;
  margin-bottom: 2px;
}

/* Dark minimal mode overrides */
button {
  background: #252932;
  color: #f1f4fb;
  border-color: #323744;
}

input,
textarea,
select {
  background: #12151b;
  border-color: #2f3442;
  color: #eef2f9;
}

.history-card,
.scan-option-list,
.scan-review,
.insight-history-item,
.nav-btn.active {
  background: #1b1f27;
  border-color: #2f3440;
}

.scan-option-list-priority {
  border-color: #5a3b34;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}

.scan-list-btn-priority {
  background: linear-gradient(180deg, #2b201b, #241b17);
  color: #ffd5c6;
}

.history-card {
  color: #edf2fa;
}

.history-scan-item,
.history-empty {
  background: #1b1f27;
  border-color: #2f3440;
  color: #edf2fa;
}

.plan-alert-panel {
  background: #171d28;
  border-color: #3a2630;
}

.plan-alert-kicker {
  color: #ff8b65;
}

#plan-alert-message {
  color: #edf2fa;
}

#plan-alert-meta {
  color: #b8c2d7;
}

#plan-alert-cancel {
  background: #242c3a;
  border: 1px solid #3b465b;
  color: #edf2fa;
}

.history-card strong {
  color: #f5f8ff;
}

.history-card .muted,
.history-time,
.history-ingredient-text {
  color: #c5cede;
}

.history-scan-item .history-pill {
  border-color: #3b4358;
  color: #eaf0fb;
  background: #262d3a;
}

.history-scan-item .history-pill-label {
  color: #aebad4;
}

.history-scan-item .history-pill-meal {
  background: #243657;
  border-color: #3e5f99;
  color: #e1ebff;
}

.history-scan-item .history-pill-source {
  background: #422d25;
  border-color: #6a4334;
  color: #ffd9ca;
}

#use-scan-history {
  background: #ff6b39;
  border-color: #ff7b4c;
  color: #fffaf6;
}

.history-scan-toggle strong {
  color: #f5f8ff;
}

.completed-correlation-card,
.phase-effect-chart {
  background: #181d27;
  border-color: #313846;
}

.completed-result-dropdown {
  background: #1b2230;
  border-color: #323b4d;
}

.completed-result-dropdown summary {
  color: #e8eefb;
}

.completed-result-dropdown[open] summary {
  border-bottom-color: #323b4d;
}

.completed-result-collapse {
  background: #273043;
  color: #e9eef9;
}

.completed-correlation-title,
.phase-effect-title,
.phase-effect-label,
.phase-effect-row span {
  color: #c4cedf;
}

.completed-correlation-pair,
.phase-effect-row strong {
  color: #f0f3fa;
}

.phase-signal-pill {
  border-color: #2f3646;
  background: #1f2634;
}

.phase-signal-pill strong {
  color: #eef3ff;
}

.phase-signal-pill span {
  color: #bdc9de;
}

.phase-summary-card,
.phase-change-item {
  background: #1f2634;
  border-color: #323b4c;
}

.phase-summary-title,
.phase-summary-metric strong,
.phase-change-item strong {
  color: #f2f5fc;
}

.phase-summary-note,
.phase-summary-metric,
.phase-change-item span {
  color: #c2cce0;
}

.phase-summary-check {
  color: #c8d1e2;
}

.phase-summary-check.ok {
  color: #7dd7a8;
}

.phase-summary-check.warn {
  color: #f2c774;
}

.phase-summary-check.fail {
  color: #ff9aa4;
}

.completed-correlation-summary {
  color: #c5cee0;
}

.completed-result-status.invalid {
  color: #ffd2d8;
  background: rgba(255, 91, 98, 0.16);
  border-color: rgba(255, 123, 132, 0.45);
}

.completed-data-flag.warning {
  color: #ffd9a1;
  background: rgba(199, 126, 35, 0.24);
  border-color: rgba(255, 186, 103, 0.4);
}

.completed-data-flag.invalid {
  color: #ffd2d8;
  background: rgba(255, 91, 98, 0.16);
  border-color: rgba(255, 123, 132, 0.45);
}

.phase-invalid-alert {
  border-color: rgba(255, 123, 132, 0.45);
  border-left-color: #ff8c96;
  background: rgba(255, 91, 98, 0.14);
}

.phase-invalid-alert strong {
  color: #ffdce0;
}

.phase-invalid-alert p,
.phase-invalid-details-body p,
.phase-invalid-details-body li {
  color: #ffd2d8;
}

.phase-invalid-details {
  border-top-color: rgba(255, 147, 154, 0.35);
}

.phase-invalid-details summary {
  color: #ffdce0;
}

.scan-option {
  background: #1f2330;
  border-color: #313749;
  color: #eef2f9;
}

.calendar-row .calendar-day {
  background: #202632;
  color: #d5dceb;
  border-color: #32384a;
}

.calendar-row .calendar-day.active {
  background: linear-gradient(180deg, #ff6b39 0%, #ff5722 100%);
  box-shadow: 0 8px 14px rgba(255, 92, 33, 0.35);
}

.calendar-row .calendar-day.today:not(.active) {
  border-color: rgba(255, 145, 112, 0.65);
  background: #2a231f;
  box-shadow: inset 0 0 0 1px rgba(255, 145, 112, 0.25);
}

.calendar-row .calendar-day .cal-marker {
  background: #465066;
}

.calendar-row .calendar-day .cal-marker.plan-complete-marker {
  background: #4fd59f;
  box-shadow: 0 0 0 1px rgba(79, 213, 159, 0.25);
}

.calendar-row .calendar-day.plan-complete:not(.active) {
  border-color: rgba(79, 213, 159, 0.65);
  box-shadow: inset 0 0 0 1px rgba(79, 213, 159, 0.22);
}

.calendar-row .calendar-day.active .cal-marker.plan-complete-marker {
  background: #fff;
  box-shadow: none;
}

.journal-calendar-card,
.journal-plan-card,
.journal-day-card {
  background: #1b1f27;
  border-color: #2f3440;
}

.progress-calendar-card,
.progress-detail {
  background: #1b1f27;
  border-color: #2f3440;
}

.progress-calendar-card .calendar-row .calendar-day {
  background: #202632;
  color: #cfd6e3;
}

.progress-calendar-card .calendar-row .calendar-day.active {
  background: linear-gradient(180deg, #ff6b39 0%, #ff5722 100%);
  color: #fff;
}

.progress-plan-active {
  background: #6b641d;
  color: #f2f0d9;
}

.journal-plan-secondary {
  background: #5f5630;
  color: #f2ecd2;
}

.journal-plan-stack .progress-plan-active .muted,
.journal-plan-stack .journal-plan-secondary .muted,
.journal-plan-stack .progress-plan-done .muted {
  color: inherit;
  opacity: 0.9;
}

.progress-plan-done {
  background: #1f8e67;
}

.progress-plan-card.progress-plan-done.progress-plan-warning-data {
  background: #9a6020;
  color: #fff6ea;
  border-color: rgba(235, 171, 92, 0.35);
}

.progress-plan-card.progress-plan-done.progress-plan-invalid-data {
  background: #8b3036;
  color: #ffeef0;
  border-color: rgba(255, 132, 142, 0.35);
}

.progress-open-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.progress-restart-btn {
  background: #ff6f3d;
  color: #fff8f3;
}

.progress-phase .dot {
  border-color: #6f7787;
}

.journal-month-row {
  color: #edf1f8;
}

.journal-calendar-card .calendar-row .calendar-day {
  background: #202632;
  color: #cfd6e3;
}

.journal-calendar-card .calendar-row .calendar-day.active {
  background: linear-gradient(180deg, #ff6b39 0%, #ff5722 100%);
  color: #fff;
}

.journal-cat-card {
  background: #6c4a94;
  color: #f5efff;
}

.journal-cat-plus {
  background: rgba(255, 255, 255, 0.14);
  color: #f4e9ff;
}

.journal-cat-toggle-meta {
  background: rgba(255, 255, 255, 0.14);
}

.journal-cat-list {
  border-top-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.12);
}

.journal-entry-row {
  background: rgba(255, 255, 255, 0.12);
}

.journal-entry-actions button {
  background: rgba(255, 255, 255, 0.2);
  color: #f1e8ff;
}

.journal-entry-ingredients {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.symptom-category-btn,
.seg-btn,
.emoji-btn,
.symptom-tag-btn,
.recent-symptom-chip {
  background: #222835;
  border-color: #2f3847;
  color: #e6ebf6;
}

.symptom-category-btn.active,
.seg-btn.active,
.emoji-btn.active,
.symptom-tag-btn.active {
  background: rgba(255, 106, 53, 0.2);
  border-color: rgba(255, 106, 53, 0.55);
  color: #ffd9c7;
}

#symptom-time-now,
#symptom-advanced-toggle {
  background: #222835;
  border-color: #2f3847;
  color: #e6ebf6;
}

.symptom-advanced {
  background: #171d28;
  border-color: #2d3747;
}

.entry-edit-panel {
  background: #1b1f27;
  color: #eff3fb;
  border: 1px solid #2f3440;
}

.confidence-track {
  background: rgba(255, 255, 255, 0.2);
}

.confidence-track span {
  background: #ffffff;
}

.calendar-nav {
  background: transparent;
  color: #d6dbe6;
}

.calendar-label {
  color: #aeb5c2;
  background: #1f242f;
  border-color: #313749;
}

.calendar-picker {
  background: #1f242f;
  border-color: #313749;
  color: #d6dbe6;
}

.calendar-nav-group {
  background: #1f242f;
  border-color: #313749;
}

.calendar-nav[data-cal-nav="today"] {
  background: #3a261f;
  color: #ffd8cc;
}

.journal-month-row .cal-month {
  background: #20242d;
  border-color: #32384a;
  color: #aeb7c9;
}

.journal-month-row {
  color: #98a2b4;
}

.journal-month-row .cal-month.active,
.journal-month-row span.active {
  background: #3a261f;
  border-color: #ff8c67;
  color: #f0f3fa;
}

.food-item-row {
  border-top-color: #2d323d;
}

.food-item-row .meta {
  color: #aab1be;
}

.bottom-nav {
  background: rgba(25, 28, 35, 0.95);
  border-color: #2e3442;
}

#screen-insight {
  background: linear-gradient(180deg, #151a1f 0%, #14161b 100%);
}

#screen-insight .insight-disclaimer {
  color: #8d95a7;
}

#screen-insight .insight-deck {
  background: #1b1f27;
  border-color: #2f3440;
}

#screen-insight .insight-tile-orange {
  background: #a74a2d;
  color: #fff;
}

#screen-insight .insight-tile-purple {
  background: #6d4b90;
  color: #f2e9ff;
}

#screen-insight .insight-tile-mint {
  background: #2b6654;
  color: #e8fff5;
}

#screen-insight .insight-test-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #16191f;
}

#screen-insight .insight-plan-panel {
  background: #fff;
  color: #12151b;
}

#screen-insight .insight-target-hero {
  border-color: #e4e8f1;
  background: linear-gradient(155deg, #f5f8ff, #fff4ef);
}

/* Visual polish + lightweight gamification */
body {
  background:
    radial-gradient(120% 70% at 8% -10%, rgba(255, 101, 44, 0.14), transparent 55%),
    radial-gradient(100% 60% at 98% -20%, rgba(119, 140, 255, 0.1), transparent 52%),
    #121212;
}

.phone-frame {
  background:
    linear-gradient(180deg, rgba(28, 32, 40, 0.96), rgba(18, 20, 26, 0.98)),
    #15181f;
  border-color: #2f3644;
  box-shadow: 0 26px 56px rgba(8, 10, 14, 0.5);
}

header h2 {
  font-family: "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
}

.card {
  background: linear-gradient(180deg, #1f2430 0%, #1a1f29 100%);
  border: 1px solid #313848;
  box-shadow: 0 8px 20px rgba(8, 11, 18, 0.26);
}

button {
  border-radius: 12px;
  transition: transform 130ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

button:hover {
  box-shadow: 0 6px 14px rgba(8, 11, 18, 0.2);
}

button:active {
  transform: translateY(1px) scale(0.99);
}

.primary,
#analyze-ingredients {
  border-radius: 12px;
  background: linear-gradient(180deg, #ff703d, #ff5722 58%, #ef4f1d);
  box-shadow: 0 12px 24px rgba(255, 88, 34, 0.24);
}

.primary:hover,
#analyze-ingredients:hover {
  box-shadow: 0 14px 26px rgba(255, 88, 34, 0.3);
}

.bottom-nav {
  background: rgba(22, 26, 34, 0.95);
  border-color: #2f3646;
}

.nav-btn {
  color: #aeb6c9;
}

.nav-btn.active {
  color: #fff3ed;
  background: linear-gradient(180deg, rgba(255, 106, 53, 0.28), rgba(255, 87, 34, 0.24));
}

.nav-main {
  box-shadow: 0 10px 18px rgba(255, 90, 31, 0.28);
}

#screen-journal .journal-plan-card,
#screen-journal .journal-day-card,
#screen-journal .journal-calendar-card,
#screen-progress .progress-calendar-card,
#screen-progress .progress-block,
#screen-more .card {
  border-radius: 18px;
}

.journal-cat-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#meal-sections .journal-cat-card:nth-child(1) {
  background: linear-gradient(145deg, #9b8ad7, #8473c8);
}

#meal-sections .journal-cat-card:nth-child(2) {
  background: linear-gradient(145deg, #8b7ed4, #7869c5);
}

#meal-sections .journal-cat-card:nth-child(3) {
  background: linear-gradient(145deg, #7f73cd, #6e60be);
}

#meal-sections .journal-cat-card:nth-child(4) {
  background: linear-gradient(145deg, #7366c5, #6557b6);
}

#meal-sections .journal-cat-card:nth-child(5) {
  background: linear-gradient(145deg, #6dbce7, #53a6d8);
}

#meal-sections .journal-cat-card:nth-child(6) {
  background: linear-gradient(145deg, #5863a8, #4e5895);
}

.journal-cat-toggle-text {
  letter-spacing: 0.03em;
}

.journal-cat-plus {
  border-radius: 12px;
  min-width: 76px;
}

.journal-entry-row {
  border-radius: 12px;
  padding: 9px 10px;
}

.journal-entry-actions button {
  border-radius: 9px;
  font-weight: 700;
}

.scan-sheet-panel {
  background: linear-gradient(180deg, #f5f7fb, #f3f5fa 44%, #f1f4f9);
  border-top: 1px solid #d9deeb;
  box-shadow: 0 -20px 40px rgba(10, 16, 32, 0.2);
}

.scan-option {
  border-radius: 18px;
  min-height: 112px;
}

.scan-option-list {
  border-radius: 16px;
}

.scan-page-head strong {
  color: #101727;
}

.scan-page-head .scan-back,
.scan-page-head .scan-close {
  font-weight: 800;
}

.screen-header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
}

.screen-header > :not(.screen-back-btn) {
  grid-column: 2;
}

.screen-back-btn {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid #d7dae2;
  background: #ffffff;
  color: #232c41;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 7px 11px;
  margin: 0 0 6px;
}

.screen-back-btn[hidden] {
  display: none !important;
}

.insight-header .screen-back-btn {
  background: #f8faff;
  border-color: #d9dfec;
  color: #26334f;
}

.insight-streak {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(11, 31, 24, 0.25);
}

.insight-tile {
  border-radius: 16px;
}

.insight-test-btn {
  border-radius: 12px;
  font-size: 0.92rem;
}

.progress-plan-card {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#screen-more .more-list {
  background: linear-gradient(180deg, #1f2531, #1a1f2a);
}

.more-row-btn {
  min-height: 40px;
  font-weight: 700;
  color: #f4f8ff;
}

#screen-more .more-row-btn span:last-child {
  font-size: 1.05rem;
}

#screen-more #logout-btn {
  border-radius: 12px;
}

#more-recommended {
  display: grid;
  gap: 10px;
}

#more-history-list {
  display: grid;
  gap: 10px;
}

.more-history-item summary {
  list-style: none;
  cursor: pointer;
}

.more-history-item summary::-webkit-details-marker {
  display: none;
}

.more-history-item[open] .history-scan-body {
  display: block;
}

.membership-summary-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 11px;
}

.membership-summary-card p {
  margin: 5px 0;
}

.membership-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #162016;
  background: #bff3d1;
  border: 1px solid #8ad7a8;
}

.membership-pill-warm {
  color: #4a2408;
  background: #ffd6c5;
  border-color: #ffb091;
}

.membership-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.membership-detail-grid div {
  border-radius: 10px;
  padding: 9px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.membership-detail-grid strong {
  display: block;
  font-size: 1rem;
  color: #fff7f1;
}

.membership-detail-grid span {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  color: #c7d0de;
}

.membership-helper-card {
  margin-top: 10px;
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 90, 31, 0.08);
  border: 1px solid rgba(255, 90, 31, 0.2);
}

.membership-helper-card p {
  margin: 0;
}

.membership-helper-card .muted {
  margin-top: 5px;
}

.membership-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.membership-actions button {
  min-height: 38px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 8px;
}

.more-legal-links {
  display: grid;
  gap: 8px;
}

#more-legal-open {
  width: 100%;
  min-height: 38px;
  margin: 0 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f8ff;
  font-size: 0.8rem;
  font-weight: 700;
}

.more-legal-links a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #f4f8ff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.recommended-empty strong {
  color: #fff2ec;
}

.recommended-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.recommended-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 106, 53, 0.18);
  color: #ffd8ca;
  border: 1px solid rgba(255, 118, 73, 0.35);
}

.recommended-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 11px;
}

.recommended-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.recommended-item summary::-webkit-details-marker {
  display: none;
}

.recommended-head p {
  margin: 3px 0 0;
}

.recommended-summary-tag {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 106, 53, 0.16);
  color: #ffd3c3;
  border: 1px solid rgba(255, 116, 69, 0.33);
  white-space: nowrap;
}

.legal-modal {
  position: absolute;
  inset: 0;
  z-index: 101;
  display: none;
}

.legal-modal.open {
  display: block;
}

.legal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 17, 0.62);
  backdrop-filter: blur(7px);
}

.legal-modal-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(10px + env(safe-area-inset-top));
  bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #161b25;
  box-shadow: 0 14px 28px rgba(3, 7, 13, 0.45);
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}

.legal-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-modal-head p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #f4f8ff;
}

#legal-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.8rem;
}

.legal-modal-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-modal-tabs button {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: #dce6f6;
  font-size: 0.78rem;
  font-weight: 700;
}

.legal-modal-tabs button.active {
  border-color: rgba(255, 117, 73, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 97, 48, 0.25);
  color: #fff;
  background: rgba(255, 97, 48, 0.16);
}

#legal-modal-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #121212;
}

.recommended-body {
  margin-top: 8px;
}

.recommended-body p {
  margin: 6px 0;
}

.game-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 140, 97, 0.35);
  background:
    radial-gradient(130% 110% at 5% -30%, rgba(255, 116, 69, 0.24), transparent 55%),
    linear-gradient(180deg, #242a38, #1d2330);
  box-shadow: 0 14px 28px rgba(10, 13, 20, 0.28);
  margin-bottom: 12px;
}

.game-card-compact .game-badges {
  display: none;
}

.game-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.game-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffb59c;
}

.game-score {
  margin: 2px 0 0;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff4ef;
}

.game-score span {
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #d4def2;
}

.game-pill {
  border-radius: 999px;
  border: 1px solid rgba(255, 189, 166, 0.4);
  background: rgba(255, 119, 75, 0.14);
  color: #ffd9ca;
  padding: 5px 9px;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.game-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  margin: 10px 0 9px;
  overflow: hidden;
}

.game-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8f68, #ff5e2a 58%, #ffbc72);
}

.game-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.game-row div {
  border-radius: 10px;
  padding: 8px 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
}

.game-row strong {
  display: block;
  font-size: 1rem;
  line-height: 1.05;
  color: #fff7f3;
}

.game-row span {
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #c6d0e7;
  font-weight: 700;
}

.game-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.game-badge {
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid rgba(189, 212, 255, 0.36);
  background: rgba(120, 153, 255, 0.17);
  color: #ebf0ff;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  font-weight: 800;
  text-transform: uppercase;
}

.game-mini .game-progress {
  margin-top: 6px;
}

.game-mini .game-badges {
  margin-top: 7px;
}

.tutorial-modal {
  position: absolute;
  inset: 0;
  z-index: 88;
  display: none;
  pointer-events: none;
}

body.tutorial-open {
  overflow: hidden;
}

.phone-frame.tutorial-lock {
  overflow: hidden;
}

.phone-frame.tutorial-lock > * {
  pointer-events: none !important;
}

.phone-frame.tutorial-lock #tutorial-modal,
.phone-frame.tutorial-lock #tutorial-modal * {
  pointer-events: auto !important;
}

.tutorial-modal.open {
  display: block;
}

.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 19, 0.44);
  pointer-events: auto;
}

.tutorial-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: auto;
  max-height: calc(100% - 24px);
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(14, 22, 34, 0.14);
  box-shadow: 0 14px 28px rgba(8, 14, 24, 0.24);
  padding: 12px;
  color: #121824;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  z-index: 96;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}

.tutorial-focus {
  position: relative !important;
  z-index: 95 !important;
  border-radius: 12px;
  scroll-margin-top: 84px;
  scroll-margin-bottom: 120px;
  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.92), 0 8px 20px rgba(8, 14, 24, 0.22);
}

.tutorial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tutorial-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ff5a1f;
  font-size: 0.7rem;
  font-weight: 800;
}

.tutorial-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(17, 27, 41, 0.22);
  background: #fff;
  color: #1b2432;
  font-size: 0.82rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tutorial-step-label {
  margin: 1px 0 0;
  color: #546277;
  font-size: 0.74rem;
  font-weight: 700;
}

#tutorial-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  color: #111726;
}

#tutorial-subtitle {
  margin: 0;
  color: #4f5f76;
  line-height: 1.32;
  font-size: 0.84rem;
}

.tutorial-action {
  margin: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 90, 31, 0.24);
  background: rgba(255, 90, 31, 0.08);
  color: #7d341b;
  padding: 5px 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

.tutorial-points {
  margin: 2px 0 0;
  padding: 0 0 0 16px;
  display: grid;
  gap: 4px;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 92px;
  overflow: hidden auto;
  color: #223046;
}

.tutorial-points li {
  line-height: 1.3;
  font-size: 0.82rem;
}

.tutorial-progress-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(17, 27, 41, 0.14);
  overflow: hidden;
}

#tutorial-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9b73, #ff5a1f);
  transition: width 220ms ease;
}

.tutorial-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.tutorial-actions button {
  min-height: 36px;
  font-size: 0.8rem;
  padding: 0 8px;
}

.tutorial-cta-btn {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 90, 31, 0.32);
  background: rgba(255, 90, 31, 0.08);
  color: #7d341b;
  font-weight: 700;
  font-size: 0.82rem;
}

.tutorial-pointer {
  position: absolute;
  z-index: 97;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(14, 22, 34, 0.94);
  color: #fff;
  box-shadow: 0 10px 24px rgba(8, 14, 24, 0.34);
}

.tutorial-arrow {
  position: absolute;
  inset: 0;
  z-index: 94;
  width: 100%;
  height: 100%;
}

#tutorial-arrow-line {
  stroke: #ff8b63;
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
  marker-end: url(#tutorial-arrowhead);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.38));
}

.journal-entry-pending {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #5a2d0a;
  background: rgba(255, 196, 147, 0.95);
  border: 1px solid rgba(255, 150, 79, 0.5);
}

.tutorial-pointer-icon {
  font-size: 0.9rem;
  line-height: 1;
  animation: tutorialPointerPulse 1.2s ease-in-out infinite;
}

.tutorial-pointer-label {
  font-size: 0.74rem;
  line-height: 1;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
}

@keyframes tutorialPointerPulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(2px);
    opacity: 0.72;
  }
}

/* Calendar toolbar and progress-calendar fit fixes */
.calendar-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nav label"
    "picker picker";
  align-items: center;
  gap: 6px 8px;
}

.calendar-nav-group {
  grid-area: nav;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.calendar-nav-group::-webkit-scrollbar {
  display: none;
}

.calendar-label {
  grid-area: label;
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.calendar-picker {
  grid-area: picker;
  width: 100%;
  min-width: 0;
  height: 34px;
}

#screen-progress .progress-calendar-card {
  padding: 10px;
}

#screen-progress .progress-calendar-card .journal-month-row {
  margin-bottom: 6px;
}

#screen-progress .progress-calendar-card .calendar-row {
  gap: 6px;
  margin-bottom: 0;
}

#screen-progress .progress-calendar-card .calendar-row .calendar-day {
  min-width: 0;
  padding: 6px 0 7px;
  border-radius: 14px;
}

#screen-progress .calendar-tools {
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "nav"
    "picker";
  gap: 6px;
}

#screen-progress .calendar-label {
  justify-self: start;
  text-align: left;
  max-width: 100%;
  padding: 5px 10px;
}

#screen-progress .calendar-nav-group {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 6px;
  overflow: visible;
}

#screen-progress .calendar-nav-group .calendar-nav {
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
}

#screen-progress .calendar-picker {
  width: 100%;
  min-width: 0;
}

#screen-progress .journal-month-row {
  gap: 4px;
  padding-bottom: 8px;
}

#screen-progress .journal-month-row .cal-month {
  padding: 4px 0;
  border-radius: 10px;
  font-size: 0.64rem;
}

#screen-progress .progress-calendar-card .calendar-row .calendar-day .cal-week {
  font-size: 0.5rem;
}

#screen-progress .progress-calendar-card .calendar-row .calendar-day .cal-num {
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none !important;
  }
}

@media (max-width: 480px) {
  .app-shell {
    padding: 0;
  }

  .phone-frame {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .screen {
    padding: 8px 6px calc(120px + env(safe-area-inset-bottom));
  }

  .build-badge {
    max-width: calc(100vw - 24px);
    font-size: 0.62rem;
    padding: 5px 8px;
  }

  .tutorial-panel {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-height: calc(100% - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 10px;
    gap: 6px;
  }

  .tutorial-actions button,
  .tutorial-cta-btn {
    min-height: 34px;
    font-size: 0.78rem;
  }

  .tutorial-points {
    max-height: 72px;
  }

  .membership-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .calendar-row {
    gap: 5px;
  }

  .calendar-row .calendar-day {
    padding: 6px 0;
  }

  .calendar-row .calendar-day .cal-week {
    font-size: 0.52rem;
  }

  .calendar-row .calendar-day .cal-num {
    font-size: 0.92rem;
  }

  .calendar-tools {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "nav"
      "picker";
  }

  .calendar-label {
    justify-self: start;
    text-align: left;
  }

  .calendar-nav-group {
    width: 100%;
    justify-content: space-between;
  }

  .calendar-nav-group .calendar-nav {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
  }
}