/* ЧтоТам — в духе Wabi: воздух, мягкие рассеянные тени, всё пилюлями,
   серифные заголовки поверх спокойного светло-серого фона, дружелюбный зелёный. */

:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #ececea;      /* подложки внутри белых карт */
  --ink: #17181a;
  --ink-2: #8a8f8b;
  --green: #4e9e58;          /* дружелюбный зелёный (кнопки) */
  --green-deep: #17824d;     /* глубокий (текстовые акценты) */
  --green-pastel: #e9f3ea;   /* пастельная карта */

  --sh-sm: 0 1px 2px rgba(18, 20, 18, .04), 0 6px 18px rgba(18, 20, 18, .06);
  --sh-md: 0 2px 4px rgba(18, 20, 18, .05), 0 16px 40px rgba(18, 20, 18, .10);
  --sh-lg: 0 4px 10px rgba(18, 20, 18, .06), 0 24px 60px rgba(18, 20, 18, .14);

  --r-card: 24px;
  --r-row: 20px;

  --serif: "Lora", Georgia, serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { color-scheme: light; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink);
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
svg { display: block; }
[data-ico] { display: inline-flex; flex: none; }

/* ---------- Шапка экрана ---------- */
.screen { display: none; padding: calc(18px + env(safe-area-inset-top)) 20px 0; max-width: 640px; margin: 0 auto; }
.screen.active { display: block; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; }
.headline { font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.brand-chip { width: 42px; height: 42px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: center; color: var(--green-deep); }
.subtitle { color: var(--ink-2); font-size: 14px; margin: 4px 0 20px; line-height: 1.5; }

/* ---------- Ряды ---------- */
.rows { display: flex; flex-direction: column; gap: 10px; }
.row-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--r-row);
  box-shadow: var(--sh-sm);
  padding: 13px 15px; cursor: pointer;
  transition: transform .08s, box-shadow .15s;
}
.row-card:active { transform: scale(.985); }
.row-card .thumb {
  width: 46px; height: 46px; border-radius: 14px; flex: none; overflow: hidden;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.row-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-card .info { flex: 1; min-width: 0; }
.row-card .title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-card .meta { font-size: 12px; color: var(--ink-2); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; }

.kind-pill { font-size: 10.5px; font-weight: 600; padding: 2.5px 8px; border-radius: 999px;
  background: var(--bg); color: var(--ink-2); }

.score-pill {
  flex: none; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
}

.checkbtn { background: none; border: none; padding: 0; color: #c9cec9; cursor: pointer; flex: none; }
.checkbtn.on { color: var(--green); }
.del { background: none; border: none; padding: 4px; color: #c9cec9; cursor: pointer; flex: none; }

/* ---------- Кнопки (пилюли) ---------- */
.btn-primary, .btn-ghost, .btn-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border-radius: 999px; height: 52px; padding: 0 26px;
  transition: filter .15s, transform .08s;
}
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 10px 24px rgba(78, 158, 88, .32); }
.btn-primary:active { filter: brightness(.94); transform: scale(.98); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.btn-ghost:active { filter: brightness(.97); }
.btn-text { background: none; color: var(--ink-2); height: 44px; }
.block, .sheet .btn-primary, .dialog .btn-primary { width: 100%; }

/* ---------- Пустое состояние (карта) ---------- */
.empty-card { background: var(--surface); border-radius: 28px; box-shadow: var(--sh-sm);
  text-align: center; padding: 36px 24px; margin-top: 8px; }
.orb { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto;
  background: var(--green-pastel); color: var(--green-deep);
  display: flex; align-items: center; justify-content: center; }
.empty-card p { margin: 18px 0 22px; line-height: 1.55; font-size: 14px; color: var(--ink-2); }

/* ---------- Плавающая навигация ---------- */
.navbar {
  position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  pointer-events: none;
}
.nav-pill { display: flex; gap: 2px; background: var(--surface); border-radius: 999px;
  padding: 6px; box-shadow: var(--sh-md); pointer-events: auto; }
.nav-item { background: none; border: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #9aa09a; width: 88px; padding: 9px 0 7px; border-radius: 999px;
  transition: color .15s, background .15s; }
.nav-item.active { color: var(--ink); background: var(--bg); }
.nav-label { font-size: 11px; font-weight: 600; }
.nav-scan {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green); color: #fff; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(78, 158, 88, .42);
  transition: transform .1s;
}
.nav-scan:active { transform: scale(.93); }

/* ---------- Сканер ---------- */
.scanner-wrap { position: relative; background: #141613; border-radius: 28px; overflow: hidden;
  aspect-ratio: 3/4; max-height: 52vh; box-shadow: var(--sh-md);
  display: flex; align-items: center; justify-content: center; }
#video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 24% 15%; border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(20, 22, 19, .45);
  outline: 2px solid rgba(255, 255, 255, .9); }
.scan-hint { position: absolute; bottom: 14px; left: 16px; right: 16px; text-align: center;
  color: rgba(255,255,255,.85); font-size: 13px; }
.scan-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.scan-engine { text-align: center; margin-top: 12px; font-size: 11.5px; color: var(--ink-2); }

/* ---------- Поиск ---------- */
.search-bar { display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: 999px; box-shadow: var(--sh-sm);
  height: 54px; padding: 0 20px; margin: 14px 0 16px; color: var(--ink-2); }
.search-bar input { flex: 1; border: none; background: none; font-family: inherit;
  font-size: 15px; color: var(--ink); }
.search-bar input:focus { outline: none; }

/* ---------- Шторка товара ---------- */
.scrim { position: fixed; inset: 0; background: rgba(18, 20, 18, .4); opacity: 0;
  pointer-events: none; transition: opacity .25s; z-index: 40; }
.scrim.show { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--bg); border-radius: 32px 32px 0 0;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.22,.9,.24,1);
  max-height: 93vh; overflow-y: auto;
  padding: 0 20px calc(28px + env(safe-area-inset-bottom)); }
.sheet.show { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; background: #d9dbd7; border-radius: 2px;
  margin: 14px auto 10px; cursor: pointer; }

.p-head { text-align: center; padding: 6px 0 2px; }
.score-ring { margin: 4px auto 2px; display: block; }
.score-ring .val { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.score-ring .max { font-size: 11px; fill: var(--ink-2); }
.band-label { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.incomplete { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.p-name { font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 14px 0 3px; text-align: center; }
.p-brand { color: var(--ink-2); font-size: 13px; text-align: center; }
.p-kind { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 7px 14px; border-radius: 999px; background: var(--surface);
  box-shadow: var(--sh-sm); color: var(--ink-2); font-size: 12px; font-weight: 600; }

/* панель-карта */
.panel { background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--sh-sm); padding: 18px; margin-top: 18px; }
.panel-title { font-size: 11px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.comp-row { margin: 12px 0; }
.comp-row:first-of-type { margin-top: 0; }
.comp-row:last-of-type { margin-bottom: 0; }
.comp-row .lbl { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; margin-bottom: 7px; }
.comp-row .lbl b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; }
.bar.hatched { background: repeating-linear-gradient(45deg, #ececea, #ececea 5px, #e2e2e0 5px, #e2e2e0 10px); }

/* чипы категорий */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--bg); color: var(--ink); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }

/* флаги */
.section-title { font-family: var(--serif); font-size: 19px; font-weight: 700; margin: 26px 2px 12px; }
.flag { background: var(--surface); border-radius: var(--r-row);
  box-shadow: var(--sh-sm); padding: 15px; margin-bottom: 10px; }
.flag-top { display: flex; align-items: center; gap: 9px; }
.flag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.flag.high .flag-dot { background: #d64545; }
.flag.moderate .flag-dot { background: #d9930d; }
.flag.limited .flag-dot { background: #c0a530; }
.flag.none .flag-dot { background: var(--green-deep); }
.flag-code { font-weight: 700; font-size: 13.5px; }
.flag-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.risk-pill { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.risk-pill.high { color: #d64545; background: rgba(214, 69, 69, .1); }
.risk-pill.moderate { color: #b57a00; background: rgba(217, 147, 13, .12); }
.risk-pill.limited { color: #98832a; background: rgba(192, 165, 48, .13); }
.risk-pill.none { color: var(--green-deep); background: var(--green-pastel); }
.flag-fn { font-size: 12px; color: var(--ink-2); margin: 6px 0 0 17px; }
.flag-statement { font-size: 13px; color: #3d423e; line-height: 1.55; margin: 8px 0 4px 17px; }
.flag-source { font-size: 11px; color: var(--ink-2); font-style: italic; margin-left: 17px; }
.clean-note { display: flex; align-items: center; gap: 10px;
  background: var(--green-pastel); color: var(--green-deep);
  padding: 15px 18px; border-radius: var(--r-row); font-size: 13.5px; font-weight: 600; }

/* крауд-петля: пастельная карта */
.contribute { background: var(--green-pastel); border-radius: var(--r-card);
  padding: 22px 20px; text-align: center; }
.contribute-top { display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--serif); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.contribute-top [data-ico], .contribute-top svg { color: var(--green-deep); }
.contribute p { color: #4e5a50; font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.contribute-badge { display: inline-block; margin-top: 14px; padding: 9px 16px;
  border-radius: 999px; background: var(--green-pastel); color: var(--green-deep);
  font-size: 13px; font-weight: 600; }

/* альтернативы */
.alt { display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--r-row); box-shadow: var(--sh-sm);
  padding: 12px 15px; margin-bottom: 10px; cursor: pointer; color: var(--ink); }
.alt .info { flex: 1; min-width: 0; }
.alt .title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt .meta { font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
.alt > [data-ico], .alt > svg { color: #c9cec9; }

.sheet .btn-primary { margin-top: 22px; }

/* ---------- Диалог ---------- */
.dialog-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(18, 20, 18, .4);
  display: none; align-items: center; justify-content: center; padding: 24px; }
.dialog-scrim.show { display: flex; }
.dialog { background: var(--bg); border-radius: 28px; padding: 24px; box-shadow: var(--sh-lg);
  width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto; }
.dialog h3 { font-family: var(--serif); margin: 0 0 8px; font-size: 21px; font-weight: 700; }
.dialog p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.text-field { width: 100%; height: 52px; padding: 0 18px; border-radius: 999px;
  border: none; background: var(--surface); box-shadow: var(--sh-sm);
  font-family: inherit; font-size: 16px; color: var(--ink); margin: 8px 0; }
.text-field:focus { outline: 2px solid var(--green); }
.ocr-status { text-align: center; color: var(--ink-2); font-size: 13.5px; padding: 12px; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--surface-2);
  border-top-color: var(--green); border-radius: 50%;
  animation: spin 1s linear infinite; margin: 12px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
details summary { color: var(--ink-2); font-size: 13px; cursor: pointer; }

/* ---------- Тост ---------- */
.toast { position: fixed; bottom: calc(108px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #f4f4f2; padding: 13px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; z-index: 80; opacity: 0; transition: opacity .25s;
  box-shadow: var(--sh-lg); white-space: nowrap; }
.toast.show { opacity: 1; }