:root {
  --color-bg: #f3f2f2;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-700: #006786;
  --color-accent-800: #004961;

  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  --radius-md: 2px;
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--color-bg); }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--color-accent-700); }
input, textarea, button { font-family: inherit; }
button { cursor: pointer; }

.app-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}
.app-frame {
  width: 100%;
  max-width: 1180px;
  display: flex;
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  min-height: 100vh;
}

/* --- Rail (wide layout) --- */
.rail {
  width: 262px;
  flex: none;
  border-right: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  background: var(--color-neutral-100);
}
.rail-header { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.rail-title { font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.rail-sub { font-size: 12px; color: var(--color-neutral-600); margin-top: 3px; }
.rail-list { flex: 1; overflow: auto; padding: var(--space-2) 0; }
.rail-item { padding: 10px 14px; cursor: pointer; border-left: 3px solid transparent; }
.rail-item.active { border-left-color: var(--color-accent); background: var(--color-bg); }
.rail-item-title { font-size: 15px; line-height: 1.3; }
.rail-item-meta { font-size: 12px; color: var(--color-neutral-600); margin-top: 3px; }
.rail-footer { padding: var(--space-3); border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; }
.rail-footer div { padding: 10px 12px; font-size: 14px; cursor: pointer; }

/* --- Main --- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.screen { display: flex; flex-direction: column; flex: 1; }
.top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider);
}
.top-bar h1 { font-family: var(--font-heading); font-size: 24px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.icon-btn {
  min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--color-neutral-700); cursor: pointer; background: none; border: none;
}
.icon-btn.accent { color: var(--color-accent-700); }
.icon-btn.plus { font-size: 22px; }

.search-row { padding: var(--space-3) var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.search-input {
  width: 100%; height: 44px; padding: 0 12px; font-size: 15px; background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); color: var(--color-text);
}
.chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chip {
  font-size: 13px; padding: 8px 13px; border-radius: var(--radius-md); white-space: nowrap; cursor: pointer;
  background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700);
  flex: none;
}
.chip.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.count-line { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-600); margin-top: var(--space-1); }

.recipe-list { flex: 1; padding: var(--space-2) var(--space-4) var(--space-8); display: flex; flex-direction: column; }
.recipe-row {
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); cursor: pointer;
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.recipe-row-title { font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.recipe-row-meta { font-size: 13px; color: var(--color-neutral-600); margin-top: 5px; }
.tag-row { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.tag {
  font-size: 12px; padding: 3px 9px; background: var(--color-accent-100); border: 1px solid var(--color-accent-200);
  color: var(--color-accent-800); border-radius: var(--radius-md); white-space: nowrap;
}
.stars { font-size: 13px; color: var(--color-accent-700); letter-spacing: .06em; padding-top: 3px; }
.empty-state { padding: var(--space-8) 0; text-align: center; color: var(--color-neutral-600); font-size: 15px; }

/* --- Detail --- */
.detail-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.lang-tabs { display: flex; gap: 2px; align-items: center; }
.lang-tab { height: 44px; min-width: 38px; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; color: var(--color-neutral-600); background: none; border: none; border-bottom: 2px solid transparent; }
.lang-tab.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.detail-body { flex: 1; }
.detail-title-block { padding: var(--space-4) var(--space-4) 0; }
.detail-title-block h1 { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -.015em; margin: 0; }
.detail-meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); font-size: 13px; color: var(--color-neutral-700); gap: var(--space-2); flex-wrap: wrap; }
.star-btn { font-size: 19px; padding: 2px 3px; cursor: pointer; background: none; border: none; color: var(--color-neutral-400); }
.star-btn.filled { color: var(--color-accent-700); }

.ingredients-card { margin: var(--space-4) var(--space-4) 0; background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); }
.ingredients-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-2); }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-600); }
.servings-stepper { display: flex; align-items: center; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); overflow: hidden; font-size: 14px; background: var(--color-bg); }
.servings-stepper button { padding: 10px 14px; color: var(--color-neutral-700); background: none; border: none; }
.servings-stepper span { padding: 10px 12px; border-left: 1px solid var(--color-neutral-300); border-right: 1px solid var(--color-neutral-300); white-space: nowrap; }
.ingredient-row { display: flex; gap: var(--space-2); align-items: flex-start; cursor: pointer; padding: 3px 0; }
.ingredient-box { width: 19px; height: 19px; flex: none; margin-top: 3px; border-radius: 1px; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-neutral-400); }
.ingredient-box.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.ingredient-label { font-size: 16px; line-height: 1.45; }
.ingredient-label.on { color: var(--color-neutral-500); text-decoration: line-through; }
.ingredient-qty { color: var(--color-accent-700); }
.link-line { margin-top: var(--space-3); font-size: 13px; color: var(--color-accent-700); cursor: pointer; }

.instructions-block { padding: var(--space-6) var(--space-4) 0; }
.step { margin-bottom: var(--space-4); }
.step-label { font-family: var(--font-heading); font-size: 13px; color: var(--color-accent-700); letter-spacing: .1em; margin-bottom: 5px; }
.step p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 62ch; }
.notes-block { padding: var(--space-6) var(--space-4) var(--space-8); }
.notes-block p { margin: 0; font-size: 15px; font-style: italic; line-height: 1.55; color: var(--color-neutral-700); max-width: 62ch; }

.sticky-footer { position: sticky; bottom: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); background: var(--color-bg); display: flex; gap: var(--space-2); }
.btn { border: none; border-radius: var(--radius-md); font-size: 16px; cursor: pointer; padding: 13px 18px; }
.btn-primary { flex: 1; text-align: center; background: var(--color-accent); color: #fff; }
.btn-secondary { border: 1px solid var(--color-neutral-300); background: none; color: var(--color-neutral-700); }

/* --- Cook mode --- */
.cook-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); }
.cook-progress-track { height: 3px; background: var(--color-neutral-300); }
.cook-progress-bar { height: 3px; background: var(--color-accent); }
.cook-body { flex: 1; padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-8); }
.cook-step-text { margin: 0; font-family: var(--font-heading); font-size: 27px; line-height: 1.35; font-weight: 400; max-width: 26ch; }

/* --- Forms / capture / review / settings --- */
.form-screen { padding: var(--space-6) var(--space-4) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; width: 100%; margin: 0 auto; }
.source-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); cursor: pointer; background: var(--color-neutral-100); }
.source-option-title { display: block; font-size: 16px; font-weight: 600; }
.source-option-sub { display: block; font-size: 13px; color: var(--color-neutral-600); margin-top: 3px; line-height: 1.45; }
.help-box { background: var(--color-accent-100); border: 1px solid var(--color-accent-200); border-radius: var(--radius-md); padding: var(--space-3); font-size: 13.5px; line-height: 1.6; color: var(--color-accent-800); }
textarea.form-textarea { width: 100%; min-height: 260px; padding: 12px; font-size: 15px; line-height: 1.55; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); color: var(--color-text); resize: vertical; }
input.form-input { width: 100%; height: 48px; padding: 0 12px; font-size: 15px; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); color: var(--color-text); }

.processing-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); text-align: center; }
.processing-title { font-family: var(--font-heading); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.processing-track { width: 100%; max-width: 320px; height: 4px; background: var(--color-neutral-300); border-radius: 2px; overflow: hidden; }
.processing-bar { height: 4px; background: var(--color-accent); transition: width .4s ease; }
.processing-steps { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); width: 100%; max-width: 320px; }
.processing-step { font-size: 14px; text-align: left; color: var(--color-neutral-500); }
.processing-step.done, .processing-step.active { color: var(--color-accent-800); }

.field-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-600); }
.review-title-input { width: 100%; font-family: var(--font-heading); font-size: 24px; font-weight: 600; padding: 10px 12px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); background: var(--color-neutral-100); color: var(--color-text); }
.ingredient-line { padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 16px; line-height: 1.5; }

.settings-block { display: flex; flex-direction: column; gap: var(--space-2); }
.account-card { border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-neutral-100); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.seg { display: flex; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); overflow: hidden; }
.seg button { flex: 1; text-align: center; padding: 13px 0; font-size: 14px; cursor: pointer; background: none; border: none; color: var(--color-neutral-700); }
.seg button.active { background: var(--color-accent); color: #fff; }
.data-btn { padding: 14px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); font-size: 16px; cursor: pointer; background: var(--color-neutral-100); text-align: left; }

.dropzone { border: 1px dashed var(--color-neutral-400); border-radius: var(--radius-md); padding: var(--space-6) var(--space-4); text-align: center; cursor: pointer; background: var(--color-neutral-100); }

.tab-bar { position: sticky; bottom: 0; display: flex; border-top: 1px solid var(--color-divider); background: var(--color-bg); }
.tab-bar button { flex: 1; text-align: center; padding: 14px 0 18px; font-size: 13px; cursor: pointer; background: none; border: none; color: var(--color-neutral-600); }
.tab-bar button.active { color: var(--color-accent-700); }

.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-4); }
.login-card h1 { font-family: var(--font-heading); font-size: 26px; margin: 0; }
.login-msg { font-size: 14px; color: var(--color-neutral-700); }
.login-msg.error { color: #aa0b56; }
.code-input { width: 100%; height: 52px; padding: 0 12px; font-size: 22px; letter-spacing: 6px; text-align: center; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); color: var(--color-text); }