:root {
  color-scheme: light;
  --bg: #f4f7f6;
  --bg-accent: #e9f5f1;
  --surface: rgba(255,255,255,.92);
  --surface-solid: #fff;
  --surface-2: #f7faf9;
  --text: #13221e;
  --muted: #6e7e78;
  --border: #dce7e3;
  --primary: #0f766e;
  --primary-dark: #0a5d57;
  --primary-soft: #dff2ee;
  --blue: #4e8df6;
  --orange: #f59e42;
  --green: #33b27d;
  --rose: #e27179;
  --violet: #8b6ad9;
  --danger: #b84545;
  --shadow: 0 10px 32px rgba(20,52,44,.08);
  --radius: 20px;
  --nav-height: 72px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1513;
  --bg-accent: #10211d;
  --surface: rgba(24,32,29,.94);
  --surface-solid: #181f1d;
  --surface-2: #202926;
  --text: #edf5f2;
  --muted: #a2b1ab;
  --border: #33403b;
  --primary: #39b6a5;
  --primary-dark: #57c8b9;
  --primary-soft: #173a34;
  --shadow: 0 12px 34px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, var(--bg-accent) 0, transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.topbar__inner {
  width: min(100% - 24px, 920px);
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display:grid;
  place-items:center;
  color:white;
  font-weight:900;
  background: linear-gradient(135deg, var(--primary), #34a58f);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 30%, transparent);
}
.eyebrow, .kicker {
  margin: 0;
  color: var(--primary);
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 850;
}
.brand h1 { margin: 1px 0 0; font-size: 1.28rem; line-height: 1; letter-spacing: -.02em; }
.goal-pill {
  margin-left: auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.install-btn { margin-left: 4px; }

.app-shell { width: min(100% - 18px, 920px); margin: 14px auto 30px; }
.view { display:none; }
.view.active { display:block; }

.card, .toolbar-card, .metric-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow: var(--shadow);
}

.card {
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.toolbar-card {
  border-radius: 18px;
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:end;
  margin-bottom: 12px;
}
.toolbar-main {
  display:grid;
  grid-template-columns: minmax(160px, .8fr) minmax(250px, 1.2fr);
  gap: 10px;
  align-items:end;
}
.toolbar-actions { display:flex; gap:7px; align-items:center; }
.icon-action, .ghost-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 12px;
  min-height: 40px;
  padding: 8px 10px;
  font-weight: 800;
}
.icon-action span { font-size:.78rem; margin-left:3px; }

.field {
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:750;
}
.field--wide { grid-column:1/-1; }
input, select, textarea {
  width:100%;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.segmented { border:0; padding:0; margin:0; }
.segmented legend { font-size:.8rem; color:var(--muted); font-weight:750; margin-bottom:6px; }
.segmented { display:grid; grid-template-columns:1fr 1fr; }
.segmented label { position:relative; }
.segmented input { position:absolute; opacity:0; pointer-events:none; }
.segmented span {
  min-height:42px;
  display:grid;
  place-items:center;
  padding:8px 10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--muted);
  font-weight:800;
}
.segmented label:first-of-type span { border-radius:12px 0 0 12px; }
.segmented label:last-of-type span { border-left:0; border-radius:0 12px 12px 0; }
.segmented input:checked + span { background:var(--primary); border-color:var(--primary); color:white; }

.status-strip {
  display:flex;
  gap:8px;
  overflow:auto;
  scrollbar-width:none;
  margin: 0 0 12px;
  padding: 1px;
}
.status-strip::-webkit-scrollbar { display:none; }
.status-strip span {
  flex:0 0 auto;
  background:var(--surface-solid);
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:999px;
  padding:7px 10px;
  font-size:.77rem;
  box-shadow:0 5px 16px rgba(20,52,44,.04);
}
.status-strip span.ok {
  color:var(--primary-dark);
  background:var(--primary-soft);
  border-color:color-mix(in srgb, var(--primary) 22%, var(--border));
}
.status-strip b { color:var(--text); }

.dashboard {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
.metric-card {
  border-radius:18px;
  padding:14px;
  min-width:0;
}
.metric-card--kcal { grid-column:1/-1; }
.metric-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:9px;
}
.metric-head span { font-weight:850; font-size:.92rem; }
.metric-head strong {
  font-size:.82rem;
  font-weight:750;
  color:var(--muted);
  text-align:right;
}
.bar {
  height:9px;
  border-radius:999px;
  background:color-mix(in srgb, var(--muted) 18%, var(--surface-2));
  overflow:hidden;
  position:relative;
}
.bar__fill { height:100%; width:0; border-radius:999px; transition:width .3s ease; }
.bar__fill.kcal { background: linear-gradient(90deg, #f7b267, var(--orange)); }
.bar__fill.protein { background: linear-gradient(90deg, #78a9ff, var(--blue)); }
.bar__fill.carbs { background: linear-gradient(90deg, #78d9ae, var(--green)); }
.bar__fill.fat { background: linear-gradient(90deg, #ef9ca2, var(--rose)); }
.bar__fill.fiber { background: linear-gradient(90deg, #b39be8, var(--violet)); }
.bar__marker {
  position:absolute;
  top:-2px;
  bottom:-2px;
  width:3px;
  background:var(--text);
  border-radius:4px;
  opacity:.65;
}
.metric-note { margin:8px 0 0; color:var(--muted); font-size:.72rem; line-height:1.35; }

.info-row {
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.4;
  padding:4px 4px 12px;
}
.marker-sample {
  width:3px;
  min-width:3px;
  height:22px;
  border-radius:3px;
  background:var(--text);
  opacity:.65;
}

.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.section-head h2 { margin:2px 0 0; font-size:1.18rem; letter-spacing:-.02em; }
button {
  border:0;
  border-radius:12px;
  min-height:40px;
  padding:9px 13px;
  font-weight:850;
}
button.primary { background:var(--primary); color:#fff; }
button.primary:hover { background:var(--primary-dark); }
button.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
button.danger { background:color-mix(in srgb, var(--danger) 12%, var(--surface)); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 26%, var(--border)); }
button.icon-btn {
  width:38px; height:38px; min-height:0; padding:0; border-radius:999px;
  background:var(--surface-2); color:var(--muted); font-size:1.35rem;
}

.entry-list, .product-list, .measurement-list { display:grid; gap:8px; }
.entry-item, .product-item, .measurement-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:11px 12px;
}
.entry-main, .product-main { min-width:0; }
.entry-name, .product-name { font-weight:850; line-height:1.3; }
.entry-time {
  display:inline-block;
  min-width:42px;
  margin-right:7px;
  color:var(--primary);
  font-size:.76rem;
  font-weight:900;
}
.entry-meta {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}
.entry-meta span {
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px 7px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.25;
}
.product-meta, .measurement-meta {
  margin-top:5px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.4;
}
.entry-actions, .product-actions { display:flex; gap:6px; }
.mini-btn {
  min-height:33px;
  padding:6px 9px;
  background:var(--surface-solid);
  border:1px solid var(--border);
  color:var(--text);
  font-size:.74rem;
}
.empty {
  text-align:center;
  color:var(--muted);
  padding:18px;
  border:1px dashed var(--border);
  border-radius:14px;
}

.goal-card summary, .builtin-details summary, .source-info summary {
  cursor:pointer;
  font-weight:850;
}
.goal-card p, .subtle, .source-note, .fiber-legend, .source-info p {
  color:var(--muted);
  line-height:1.5;
  font-size:.82rem;
}
.fiber-legend { margin:-2px 0 12px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.quality-badge {
  display:inline-flex;
  vertical-align:middle;
  align-items:center;
  padding:2px 6px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:.62rem;
  font-weight:900;
  margin-left:4px;
}
.quality-badge.estimate {
  background:color-mix(in srgb, var(--violet) 15%, var(--surface));
  color:var(--violet);
}
.search-field { margin-bottom:12px; }

.week-summary, .stats-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.stat {
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:13px;
  padding:11px;
}
.stat span { display:block; color:var(--muted); font-size:.7rem; }
.stat strong { display:block; margin-top:4px; font-size:1rem; }

.measurement-form {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  align-items:end;
}
.measurement-list { margin-top:14px; }

.settings-form { display:grid; gap:14px; }
.settings-grid, .manual-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.source-info {
  border:1px solid var(--border);
  border-radius:14px;
  padding:11px 12px;
  background:var(--surface-2);
}
.button-row { display:flex; gap:8px; margin-top:14px; align-items:center; }
.button-row.end { justify-content:flex-end; }
.settings-actions { justify-content:flex-start; }

.bottom-nav {
  position:fixed;
  z-index:20;
  left:50%;
  transform:translateX(-50%);
  bottom:8px;
  width:min(calc(100% - 18px), 560px);
  min-height:var(--nav-height);
  padding:7px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  background:color-mix(in srgb, var(--surface-solid) 92%, transparent);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 16px 40px rgba(16,40,33,.16);
  backdrop-filter:blur(18px);
}
.bottom-nav button {
  background:transparent;
  color:var(--muted);
  min-height:54px;
  padding:5px;
  display:grid;
  place-items:center;
  gap:1px;
  font-size:.67rem;
}
.bottom-nav button span { font-size:1.12rem; }
.bottom-nav button.active { color:var(--primary); background:var(--primary-soft); }

.modal {
  width:min(94vw, 650px);
  max-height:90vh;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:20px;
  padding:0;
  background:var(--surface-solid);
  color:var(--text);
  box-shadow:0 28px 90px rgba(0,0,0,.32);
}
.modal::backdrop { background:rgba(6,18,14,.58); backdrop-filter:blur(3px); }
.modal form { padding:18px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.modal-head h2 { margin:0; font-size:1.2rem; }
.quantity-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:10px; align-items:end; }
.preview-box {
  min-height:42px;
  display:flex;
  align-items:center;
  background:var(--primary-soft);
  color:var(--primary-dark);
  border-radius:12px;
  padding:10px 11px;
  font-size:.8rem;
  font-weight:850;
}
.manual-details { margin-top:12px; border:1px solid var(--border); border-radius:13px; padding:10px; }
.manual-details summary { cursor:pointer; font-weight:850; }
.manual-grid { margin-top:11px; }
.toast {
  position:fixed;
  left:50%;
  bottom:calc(var(--nav-height) + 22px);
  transform:translate(-50%,18px);
  z-index:50;
  max-width:calc(100vw - 24px);
  background:#13221e;
  color:white;
  border-radius:999px;
  padding:10px 14px;
  opacity:0;
  pointer-events:none;
  transition:.22s;
  text-align:center;
  font-size:.8rem;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 760px) {
  .topbar__inner { width:min(100% - 18px, 920px); }
  .goal-pill { display:none; }
  .toolbar-card { grid-template-columns:1fr; }
  .toolbar-main { grid-template-columns:1fr 1.15fr; }
  .toolbar-actions { justify-content:stretch; }
  .toolbar-actions .icon-action { flex:1; }
  .week-summary, .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .measurement-form { grid-template-columns:1fr 1fr; }
  .settings-grid, .manual-grid { grid-template-columns:1fr 1fr; }
  .entry-actions, .product-actions { flex-direction:column; }
}

@media (max-width: 480px) {
  .app-shell { width:min(100% - 12px, 920px); margin-top:9px; }
  .topbar__inner { width:min(100% - 14px, 920px); min-height:64px; }
  .brand-mark { width:36px; height:36px; border-radius:11px; }
  .brand h1 { font-size:1.16rem; }
  .toolbar-card { padding:9px; border-radius:15px; }
  .toolbar-main { grid-template-columns:1fr; }
  .toolbar-actions span { display:none; }
  .icon-action { min-height:38px; }
  .dashboard { gap:7px; }
  .metric-card { padding:11px; border-radius:15px; }
  .metric-head { display:grid; gap:2px; margin-bottom:7px; }
  .metric-head strong { text-align:left; font-size:.73rem; }
  .metric-card--kcal .metric-head { display:flex; }
  .metric-card--kcal .metric-head strong { text-align:right; }
  .card { padding:14px; border-radius:17px; margin-bottom:10px; }
  .section-head h2 { font-size:1.08rem; }
  .entry-item, .product-item { padding:10px; align-items:start; }
  .settings-grid, .manual-grid, .measurement-form { grid-template-columns:1fr; }
  .quantity-grid { grid-template-columns:1fr; }
  .bottom-nav { width:calc(100% - 12px); bottom:6px; border-radius:18px; }
}