/* ============================================================
   Paella — design system
   Warm cream surfaces · graphite ink · coral/tomato accent
   Type: Manrope (UI) + Instrument Serif (editorial accents)
   ============================================================ */

:root {
  /* surfaces — warm cream, low chroma */
  --bg:        oklch(0.984 0.012 92);   /* warm cream page */
  --bg-2:      oklch(0.963 0.018 92);   /* sand panel */
  --surface:   oklch(1 0 0);            /* card white */
  --surface-2: oklch(0.975 0.010 72);

  /* ink */
  --ink:       oklch(0.255 0.012 60);   /* graphite */
  --ink-2:     oklch(0.45 0.012 60);    /* secondary */
  --ink-3:     oklch(0.62 0.010 62);    /* muted */
  --hairline:  oklch(0.90 0.010 70);

  /* ===== BRAND: olive primary (from logo #1F3A01) ===== */
  --olive-deep: oklch(0.355 0.082 128);  /* logo green, darkest brand */
  --olive:      oklch(0.46 0.095 129);    /* primary olive */
  --olive-2:    oklch(0.56 0.10 126);     /* lighter olive for gradients */
  /* primary accent vars (olive) — most components read these */
  --coral:     oklch(0.46 0.095 129);     /* PRIMARY = olive */
  --coral-ink: oklch(0.40 0.092 129);     /* olive text/links on light */
  --coral-soft:oklch(0.93 0.042 124);     /* pale olive badge bg */

  /* warm secondary accent — tomato/coral */
  --tomato:     oklch(0.63 0.18 33);
  --tomato-ink: oklch(0.53 0.18 33);
  --tomato-soft:oklch(0.93 0.055 38);

  --orange:    oklch(0.74 0.16 58);
  --orange-soft:oklch(0.94 0.05 65);
  --green:     oklch(0.62 0.12 145);
  --green-soft:oklch(0.93 0.045 145);
  --plum:      oklch(0.62 0.13 350);
  --plum-soft: oklch(0.93 0.04 350);
  --blue:      oklch(0.66 0.11 250);
  --blue-soft: oklch(0.93 0.035 250);
  --sand:      oklch(0.90 0.03 95);
  --cream:     oklch(0.965 0.018 95);

  --gold:      oklch(0.80 0.13 85);

  /* shadow — warm, soft */
  --sh-sm: 0 1px 2px oklch(0.4 0.04 60 / 0.06), 0 2px 6px oklch(0.4 0.04 60 / 0.05);
  --sh-md: 0 4px 12px oklch(0.4 0.04 60 / 0.08), 0 12px 28px oklch(0.4 0.04 60 / 0.07);
  --sh-lg: 0 8px 24px oklch(0.4 0.04 60 / 0.10), 0 28px 60px oklch(0.4 0.04 60 / 0.12);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

/* suppress transitions during theme swap (Chromium var()+transition stale-value fix) */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: none !important; animation-duration: .001s !important;
}
body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
.serif-i { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--coral-soft); }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 20px; border: 3px solid var(--bg); }

/* ---------- app shell ---------- */
#root { min-height: 100vh; }
.app { min-height: 100vh; padding-bottom: 92px; }
@media (min-width: 880px) { .app { padding-bottom: 48px; } }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
@media (min-width: 880px) { .wrap { padding: 0 28px; } }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: oklch(0.984 0.012 92 / 0.82);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.hdr-row { display: flex; align-items: center; gap: 14px; height: 64px; }
.logo { display: flex; align-items: center; gap: 9px; }
.logo-img { height: 34px; width: auto; display: block; }
.logo-img.lg { height: 56px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(150deg, var(--olive), var(--olive-2));
  display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: 0 4px 12px oklch(0.46 0.095 129 / 0.34);
}
.logo-word { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.logo-word b { color: var(--coral-ink); }
.mvp-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--coral-ink); background: var(--coral-soft);
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.hdr-nav { display: none; margin-left: auto; gap: 4px; }
@media (min-width: 880px) { .hdr-nav { display: flex; } }
.hdr-nav button {
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  padding: 9px 13px; border-radius: 11px; transition: .16s;
}
.hdr-nav button:hover { background: var(--bg-2); color: var(--ink); }
.hdr-nav button.on { color: var(--coral-ink); background: var(--coral-soft); }
.hdr-geo {
  margin-left: auto; display: none; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
@media (min-width: 880px) { .hdr-geo { display: flex; } }
.hdr-fav {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline);
  padding: 8px 13px; border-radius: 999px; box-shadow: var(--sh-sm);
}
@media (min-width: 880px) { .hdr-fav { margin-left: 8px; } }
.hdr-fav .cnt { color: var(--coral-ink); }

/* ---------- bottom nav (mobile) ---------- */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: oklch(1 0 0 / 0.92); backdrop-filter: blur(18px);
  border-top: 1px solid var(--hairline);
  display: flex; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
@media (min-width: 880px) { .bnav { display: none; } }
.bnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--ink-3); padding: 6px 2px;
  transition: .15s;
}
.bnav button .ic { transition: .18s; }
.bnav button.on { color: var(--coral-ink); }
.bnav button.on .ic { transform: translateY(-1px); }
.bnav .add {
  position: relative; top: -2px;
}
.bnav .add .ic-wrap {
  width: 44px; height: 44px; border-radius: 15px; margin-bottom: 1px;
  background: linear-gradient(150deg, var(--olive), var(--olive-2));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px oklch(0.46 0.095 129 / 0.42);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; border-radius: 14px;
  padding: 12px 18px; transition: .16s; white-space: nowrap;
}
.btn:active { transform: scale(0.975); }
.btn-pri { background: var(--coral); color: #fff; box-shadow: 0 6px 16px oklch(0.46 0.095 129 / 0.34); }
.btn-pri:hover { background: var(--coral-ink); }
.btn-dark { background: var(--olive-deep); color: var(--bg); }
.btn-dark:hover { background: oklch(0.30 0.07 128); }
.btn-soft { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); box-shadow: var(--sh-sm); }
.btn-soft:hover { background: var(--bg-2); }
.btn-ghost { color: var(--ink-2); padding: 12px 14px; }
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); }
.btn-sm { font-size: 13.5px; padding: 9px 13px; border-radius: 11px; }
.btn-block { width: 100%; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--hairline);
  padding: 8px 14px; border-radius: 999px; transition: .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--ink-3); }
.chip.on { background: var(--olive-deep); color: var(--bg); border-color: var(--olive-deep); }
.chip .e { margin-right: 5px; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.b-coral { background: var(--coral-soft); color: var(--coral-ink); }
.b-orange{ background: var(--orange-soft); color: oklch(0.55 0.16 55); }
.b-green { background: var(--green-soft); color: oklch(0.45 0.13 150); }
.b-plum  { background: var(--plum-soft); color: oklch(0.48 0.13 350); }
.b-blue  { background: var(--blue-soft); color: oklch(0.48 0.11 250); }
.b-sand  { background: var(--bg-2); color: var(--ink-2); }

/* ---------- score ---------- */
.score {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: 14px; letter-spacing: -0.01em;
  background: var(--olive-deep); color: #fff;
  padding: 4px 9px 4px 8px; border-radius: 10px;
}
.score .st { color: var(--gold); display: inline-flex; }
.score.lg { font-size: 19px; padding: 7px 13px 7px 11px; border-radius: 13px; }
.score.float {
  position: absolute; top: 12px; left: 12px;
  background: oklch(0.984 0.012 92 / 0.92); color: var(--ink);
  backdrop-filter: blur(6px); box-shadow: var(--sh-sm);
}

/* ---------- section heads ---------- */
.sec { margin-top: 38px; }
@media (min-width:880px){ .sec { margin-top: 54px; } }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sec-title { font-size: 23px; font-weight: 800; letter-spacing: -0.025em; }
@media (min-width:880px){ .sec-title { font-size: 28px; } }
.sec-sub { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
.sec-link { font-size: 14px; font-weight: 700; color: var(--coral-ink); display: inline-flex; align-items: center; gap: 4px; flex: none; }
.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink); }

/* ---------- dish card ---------- */
.dgrid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px){ .dgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px){ .dgrid { grid-template-columns: 1fr 1fr 1fr; } }

.dcard {
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-sm); border: 1px solid var(--hairline); cursor: pointer;
  display: flex; flex-direction: column; transition: .22s cubic-bezier(.2,.7,.3,1);
}
.dcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.dcard-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.dcard-media img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.dcard:hover .dcard-media img { transform: scale(1.04); }
.dcard-save {
  position: absolute; top: 11px; right: 11px; width: 36px; height: 36px;
  border-radius: 50%; background: oklch(1 0 0 / 0.9); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--ink-2); box-shadow: var(--sh-sm); transition: .15s;
}
.dcard-save:hover { transform: scale(1.08); }
.dcard-save.on { color: var(--coral); }
.dcard-tagrow { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 80%; }
.dcard-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.dcard-name { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.dcard-meta { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dcard-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.dcard-reason { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.dcard-reason b { color: var(--ink); font-weight: 700; }
.dcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.dcard-price { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.dcard-price .cur { color: var(--ink-3); font-weight: 700; }

/* image placeholder (gradient + emoji) */
.imgph { position: absolute; inset: 0; display: grid; place-items: center; }
.imgph .e { font-size: 46px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.imgph::after {
  content:""; position: absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 12px, transparent 12px 24px);
}

/* ---------- hero ---------- */
.hero { padding-top: 22px; }
.hero-eyebrow { display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.hero-h1 { font-size: 38px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; margin: 14px 0 0; }
@media (min-width:880px){ .hero-h1 { font-size: 60px; } }
.hero-h1 .em { color: var(--coral-ink); }
.hero-sub { font-size: 16px; color: var(--ink-2); line-height: 1.5; margin-top: 16px; max-width: 540px; }
@media (min-width:880px){ .hero-sub { font-size: 18px; } }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* big dish-of-day card */
.herodish {
  display: grid; grid-template-columns: 1fr; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-lg);
}
@media (min-width: 760px){ .herodish { grid-template-columns: 1.05fr 1fr; } }
.herodish-media { position: relative; aspect-ratio: 4/3; min-height: 240px; }
.herodish-media img { width:100%; height:100%; object-fit: cover; }
.herodish-body { padding: 24px; display: flex; flex-direction: column; gap: 13px; }
@media (min-width:880px){ .herodish-body { padding: 32px; } }
.herodish-name { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
@media (min-width:880px){ .herodish-name { font-size: 33px; } }

/* ---------- how it works ---------- */
.how-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width:640px){ .how-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width:980px){ .how-grid { grid-template-columns: repeat(4,1fr); } }
.how-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px; box-shadow: var(--sh-sm); }
.how-num { font-family:"Instrument Serif",serif; font-size: 30px; color: var(--coral-ink); line-height: 1; }
.how-card h4 { font-size: 16px; font-weight: 800; margin: 12px 0 6px; letter-spacing: -0.02em; }
.how-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* ---------- generic panel ---------- */
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.note {
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
  background: var(--bg-2); border-radius: var(--r-md); padding: 13px 16px;
  border: 1px dashed var(--hairline);
}
.note b { color: var(--ink); }

/* ---------- drawer (dish detail) ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: oklch(0.2 0.02 60 / 0.45); backdrop-filter: blur(3px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; z-index: 91; background: var(--bg);
  inset: auto 0 0 0; max-height: 94vh; border-radius: 26px 26px 0 0;
  box-shadow: var(--sh-lg); overflow-y: auto; animation: slideup .32s cubic-bezier(.2,.8,.25,1);
}
@keyframes slideup { from { transform: translateY(100%); } }
@media (min-width: 760px) {
  .drawer { inset: 0 0 0 auto; width: 540px; max-height: 100vh; border-radius: 0; animation: slidein .32s cubic-bezier(.2,.8,.25,1); }
  @keyframes slidein { from { transform: translateX(100%); } }
}
.drawer-grab { width: 40px; height: 4px; border-radius: 99px; background: var(--hairline); margin: 9px auto 0; }
@media (min-width:760px){ .drawer-grab { display: none; } }
.drawer-close {
  position: sticky; top: 0; z-index: 5; float: right; margin: 12px 14px -44px auto;
  width: 38px; height: 38px; border-radius: 50%; background: oklch(1 0 0 / 0.9);
  backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: var(--sh-sm); color: var(--ink);
}
.drawer-hero { position: relative; aspect-ratio: 16/11; }
.drawer-hero img { width:100%; height:100%; object-fit: cover; }
.drawer-body { padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 20px; }

/* signal bars */
.sig { display: flex; flex-direction: column; gap: 11px; }
.sig-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.sig-label { font-size: 14px; font-weight: 600; }
.sig-pct { font-size: 13px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sig-track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.sig-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--olive), var(--olive-2)); transition: width .8s cubic-bezier(.2,.8,.25,1); }
.sig-fill.weak { background: var(--sand); }

/* review */
.rev { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.rev:first-child { border-top: none; }
.rev-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 15px; }
.rev-name { font-size: 14px; font-weight: 700; }
.rev-sub { font-size: 12px; color: var(--ink-3); }
.rev-text { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 5px; }

/* tag pills wrap */
.tagwrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- restaurant card ---------- */
.rgrid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width:640px){ .rgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width:980px){ .rgrid { grid-template-columns: 1fr 1fr 1fr; } }
.rcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: .2s; cursor: pointer; }
.rcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.rcard-cover { position: relative; aspect-ratio: 16/9; }
.rcard-cover img { width:100%; height:100%; object-fit: cover; }
.rcard-body { padding: 15px 16px 17px; }
.rcard-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.rcard-meta { font-size: 13px; color: var(--ink-2); margin-top: 3px; display:flex; gap:6px; align-items:center; flex-wrap: wrap; }
.rcard-best { margin-top: 13px; padding: 11px 13px; background: var(--bg-2); border-radius: var(--r-sm); display:flex; align-items:center; gap: 11px; }
.rcard-best img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex: none; }

/* ---------- ranking list ---------- */
.rank { display: flex; flex-direction: column; gap: 10px; }
.rankrow { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 11px; box-shadow: var(--sh-sm); transition: .16s; cursor: pointer; }
.rankrow:hover { transform: translateX(3px); box-shadow: var(--sh-md); }
.rank-pos { font-family:"Instrument Serif",serif; font-size: 30px; width: 44px; text-align: center; color: var(--ink-3); flex: none; line-height: 1; }
.rankrow.top1 .rank-pos { color: var(--coral-ink); }
.rankrow.top2 .rank-pos, .rankrow.top3 .rank-pos { color: var(--orange); }
.rank-img { width: 64px; height: 64px; border-radius: 13px; object-fit: cover; flex: none; position: relative; overflow: hidden; }
.rank-main { flex: 1; min-width: 0; }
.rank-name { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.rank-sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.rank-reason { font-size: 12.5px; color: var(--coral-ink); font-weight: 600; margin-top: 4px; }
.rank-right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ---------- collections rail ---------- */
.rail { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.coll {
  flex: none; width: 260px; scroll-snap-align: start; border-radius: var(--r-lg); overflow: hidden;
  position: relative; aspect-ratio: 3/4; box-shadow: var(--sh-sm); cursor: pointer; transition: .2s;
}
.coll:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.coll img { width:100%; height:100%; object-fit: cover; }
.coll-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, oklch(0.2 0.03 50 / 0.82)); }
.coll-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; color: #fff; }
.coll-body h4 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.coll-body p { font-size: 12.5px; opacity: .9; margin: 6px 0 0; }

/* ---------- methodology ---------- */
.m-hero { padding: 30px 0 6px; }
.m-compare { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width:760px){ .m-compare { grid-template-columns: 1fr 1fr; } }
.m-col { border-radius: var(--r-lg); padding: 22px; border: 1px solid var(--hairline); }
.m-col.dim { background: var(--bg-2); }
.m-col.hot { background: linear-gradient(165deg, var(--coral-soft), var(--orange-soft)); border-color: transparent; }
.m-col h4 { font-size: 17px; font-weight: 800; margin: 0 0 12px; }
.m-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.m-col li { font-size: 14px; color: var(--ink-2); line-height: 1.4; padding-left: 24px; position: relative; }
.m-col li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; }
.m-col.dim li::before { background: var(--sand); }
.m-col.hot li::before { background: var(--coral); }

.weights { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width:640px){ .weights { grid-template-columns: 1fr 1fr; } }
.wrow { display: flex; align-items: center; gap: 12px; }
.wrow .wlab { width: 130px; font-size: 14px; font-weight: 700; flex: none; }
.wrow .wtrack { flex: 1; height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.wrow .wfill { height: 100%; border-radius: 99px; }
.wrow .wpct { width: 44px; text-align: right; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }

.stage { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width:760px){ .stage { grid-template-columns: 1fr 1fr; } }
@media (min-width:1040px){ .stage { grid-template-columns: repeat(4,1fr); } }
.stage-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 19px; box-shadow: var(--sh-sm); }
.stage-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-ink); }
.stage-card h4 { font-size: 16px; font-weight: 800; margin: 7px 0 11px; }
.stage-card ul { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 6px; }
.stage-card li { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

.flow { display: flex; flex-direction: column; gap: 10px; }
.flowstep { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-sm); }
.flowstep .n { width: 30px; height: 30px; border-radius: 50%; background: var(--coral-soft); color: var(--coral-ink); font-weight: 800; display: grid; place-items: center; flex: none; font-size: 14px; }
.flowstep h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 800; }
.flowstep p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }

/* signal demo */
.sigdemo { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-sm); }
.quote { font-family:"Instrument Serif",serif; font-size: 22px; line-height: 1.35; color: var(--ink); }
.arrow-down { display: grid; place-items: center; color: var(--coral-ink); margin: 14px 0; }

/* ---------- about ---------- */
.about-hero { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width:820px){ .about-hero { grid-template-columns: 280px 1fr; } }
.about-portrait { aspect-ratio: 4/5; border-radius: var(--r-xl); overflow: hidden; position: relative; box-shadow: var(--sh-md); border: 1px solid var(--hairline); }
.about-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width:760px){ .about-cards { grid-template-columns: repeat(3,1fr); } }
.about-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px; box-shadow: var(--sh-sm); }
.about-card .ci { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 13px; }

/* ---------- profile ---------- */
.prof-head { display: flex; align-items: center; gap: 18px; }
.prof-av { width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 30px; box-shadow: var(--sh-md); }
.stat-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width:640px){ .stat-grid { grid-template-columns: repeat(4,1fr); } }
.stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 17px; box-shadow: var(--sh-sm); }
.stat .v { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.stat .l { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.3; }
.badge-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.bigbadge { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 15px 8px 8px; box-shadow: var(--sh-sm); }
.bigbadge .em { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
.bigbadge .t { font-size: 13.5px; font-weight: 700; }

/* taste profile */
.taste { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width:760px){ .taste { grid-template-columns: 1fr 1fr; } }

/* ---------- search ---------- */
.search { position: relative; }
.search input {
  width: 100%; font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 14px 18px 14px 48px; box-shadow: var(--sh-sm); outline: none; transition: .16s;
}
.search input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
.search input::placeholder { color: var(--ink-3); }
.search .sic { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }

/* form */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 12px 14px; outline: none; transition: .15s;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
.rate-row { display: flex; gap: 10px; }
.rate-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px; border-radius: var(--r-sm); border: 1.5px solid var(--hairline); background: var(--surface); transition: .15s; }
.rate-opt .em { font-size: 26px; }
.rate-opt .t { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.rate-opt.on { border-color: var(--coral); background: var(--coral-soft); }
.rate-opt.on .t { color: var(--coral-ink); }
.tagpick { display: flex; flex-wrap: wrap; gap: 8px; }
.tagopt { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); padding: 8px 13px; border-radius: 999px; transition: .14s; }
.tagopt.on { background: var(--olive-deep); color: var(--bg); border-color: var(--olive-deep); }

/* success */
.success { text-align: center; padding: 40px 24px; }
.success .ring { width: 84px; height: 84px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin: 0 auto 20px; animation: pop .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(0); } }

/* footer */
.foot { margin-top: 64px; border-top: 1px solid var(--hairline); padding: 34px 0 40px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 24px 50px; justify-content: space-between; }
.foot small { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

/* empty state */
.empty { text-align: center; padding: 56px 24px; color: var(--ink-2); }
.empty .e { font-size: 46px; }
.empty h4 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 14px 0 6px; }

/* page intro */
.pintro { padding: 26px 0 4px; }
.pintro h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 0; }
@media (min-width:880px){ .pintro h1 { font-size: 40px; } }
.pintro p { font-size: 15.5px; color: var(--ink-2); margin: 10px 0 0; max-width: 600px; line-height: 1.5; }

/* utilities */
.row { display: flex; align-items: center; gap: 10px; }
.wrap-g { display: flex; flex-wrap: wrap; gap: 8px; }
.muted { color: var(--ink-2); }
.center { text-align: center; }
.divider { height: 1px; background: var(--hairline); margin: 4px 0; }
.fadein { animation: fadein .4s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   v2 additions: brand badge, map, AI, FAB, view toggle
   ============================================================ */

/* tomato (warm) badge + olive badge alias */
.b-tomato { background: var(--tomato-soft); color: var(--tomato-ink); }
.b-olive  { background: var(--coral-soft); color: var(--coral-ink); }

/* save pop */
@keyframes savepop { 0%{transform:scale(1)} 38%{transform:scale(1.34)} 100%{transform:scale(1)} }
.dcard-save.justsaved, .btn .ic.justsaved { animation: savepop .42s ease; }

/* logo lockup with tagline */
.logo-tag { font-size: 11px; font-weight: 700; color: var(--olive); letter-spacing: .01em; margin-top: -2px; }

/* view toggle */
.viewtoggle { display:inline-flex; background: var(--bg-2); border:1px solid var(--hairline); border-radius:999px; padding:4px; gap:4px; }
.viewtoggle button { font-size:13.5px; font-weight:700; color:var(--ink-2); padding:8px 15px; border-radius:999px; display:flex; align-items:center; gap:7px; transition:.15s; }
.viewtoggle button.on { background: var(--surface); color: var(--olive-deep); box-shadow: var(--sh-sm); }

/* floating action button (Добавить блюдо) */
.fab {
  position: fixed; right: 16px; bottom: 100px; z-index: 66;
  height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--olive-deep); color: #fff; font-weight: 800; font-size: 15px;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 8px 22px oklch(0.46 0.095 129 / 0.40); transition: .18s;
}
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(.96); }
.fab .lab { display: none; }
@media (min-width:880px){ .fab { bottom: 26px; right: 26px; } .fab .lab { display: inline; } }

/* ---------- MAP ---------- */
.map-wrap {
  position: relative; height: 540px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--hairline); box-shadow: var(--sh-sm);
  background:
    radial-gradient(120% 90% at 30% 10%, oklch(0.95 0.02 130) 0%, transparent 55%),
    radial-gradient(120% 90% at 80% 90%, oklch(0.94 0.03 95) 0%, transparent 55%),
    var(--cream);
}
@media (max-width:560px){ .map-wrap { height: 460px; } }
.map-grid { position:absolute; inset:0; background-image:
  linear-gradient(oklch(0.5 0.02 130 / 0.05) 1px, transparent 1px),
  linear-gradient(90deg, oklch(0.5 0.02 130 / 0.05) 1px, transparent 1px);
  background-size: 46px 46px; }
.map-ring { position:absolute; border:1.5px dashed oklch(0.55 0.05 130 / 0.30); border-radius:50%; pointer-events:none; }
.map-ring.mkad { width: 78%; height: 82%; left:11%; top:9%; }
.map-ring.garden { width: 34%; height: 36%; left:33%; top:32%; border-style:solid; border-color: oklch(0.55 0.05 130 / 0.22); }
.map-river { position:absolute; inset:0; pointer-events:none; }
.map-river path { fill:none; stroke: oklch(0.70 0.06 230 / 0.45); stroke-width: 9; stroke-linecap:round; }
.map-dlabel { position:absolute; transform:translate(-50%,-50%); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: oklch(0.55 0.03 130 / 0.7); pointer-events:none; white-space:nowrap; }
.map-pin { position:absolute; transform:translate(-50%,-100%); z-index:5; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.map-pin:hover, .map-pin.on { z-index:12; }
.map-pin-badge { background: var(--surface); border:1px solid var(--hairline); border-radius:999px; padding:4px 9px 4px 5px; box-shadow: var(--sh-md); display:flex; align-items:center; gap:5px; font-weight:800; font-size:12.5px; white-space:nowrap; transition:.16s; }
.map-pin-badge .e { font-size:14px; }
.map-pin-badge .s { color: var(--olive-deep); display:inline-flex; align-items:center; gap:2px; }
.map-pin:hover .map-pin-badge, .map-pin.on .map-pin-badge { background: var(--olive-deep); color:#fff; transform: scale(1.06); }
.map-pin:hover .map-pin-badge .s, .map-pin.on .map-pin-badge .s { color: var(--gold); }
.map-pin .tip { width:0;height:0;border:6px solid transparent;border-top-color:var(--surface); margin-top:-1px; filter: drop-shadow(0 2px 1px oklch(0.4 0.04 60 /0.12)); transition:.16s; }
.map-pin:hover .tip, .map-pin.on .tip { border-top-color: var(--olive-deep); }
.map-card {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:min(440px,92%); z-index:30;
  background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--sh-lg);
  overflow:hidden; animation: slideup .28s cubic-bezier(.2,.8,.25,1);
}
.map-card-top { display:flex; gap:13px; padding:14px; }
.map-card-img { width:66px;height:66px;border-radius:12px;overflow:hidden;position:relative;flex:none; }
.map-card-close { position:absolute; top:10px; right:10px; width:30px;height:30px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;color:var(--ink-2); z-index:2; }
.map-attr { position:absolute; right:8px; bottom:6px; font-size:10px; color: var(--ink-3); z-index:2; background: oklch(1 0 0 /0.6); padding:1px 6px; border-radius:6px; }

/* ---------- AI подбор ---------- */
.ai-hero {
  border-radius: var(--r-xl); padding: 30px;
  background: linear-gradient(160deg, var(--olive-deep), oklch(0.42 0.085 132));
  color: oklch(0.96 0.02 110); position:relative; overflow:hidden;
}
@media(min-width:880px){ .ai-hero { padding: 40px; } }
.ai-hero::after { content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, oklch(0.6 0.13 60 /.5), transparent 70%); }
.ai-hero h1 { font-size: 34px; font-weight:800; letter-spacing:-0.03em; margin:12px 0 0; line-height:1.06; color:#fff; }
@media(min-width:880px){ .ai-hero h1 { font-size:46px; } }
.ai-hero p { font-size:16px; line-height:1.55; margin-top:14px; max-width:560px; opacity:.92; }
.ai-hero .pill { display:inline-flex; align-items:center; gap:7px; background: oklch(1 0 0 /0.16); color:#fff; padding:6px 13px; border-radius:999px; font-weight:700; font-size:13px; }

.ai-form { display:flex; flex-direction:column; gap:24px; }
.ai-block label.h { font-size:15px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.ai-block .num { width:24px;height:24px;border-radius:7px;background:var(--coral-soft);color:var(--coral-ink);display:grid;place-items:center;font-size:12.5px;font-weight:800; flex:none; }
.seg { display:flex; flex-wrap:wrap; gap:8px; }
.seg button { font-size:13.5px; font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--hairline); padding:9px 15px; border-radius:999px; transition:.14s; }
.seg button.on { background: var(--olive-deep); color:#fff; border-color:var(--olive-deep); }

.ai-loading { text-align:center; padding:60px 24px; }
.ai-spin { width:64px;height:64px;margin:0 auto 24px; border-radius:50%; border:5px solid var(--coral-soft); border-top-color: var(--olive); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-step { font-size:16px; font-weight:700; color:var(--ink); transition:.3s; min-height:24px; }
.ai-substep { font-size:13.5px; color:var(--ink-3); margin-top:6px; }

.aicard { display:grid; grid-template-columns: 116px 1fr; background:var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-sm); transition:.2s; }
.aicard:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
@media(min-width:560px){ .aicard { grid-template-columns: 150px 1fr; } }
.aicard-media { position:relative; min-height:140px; }
.aicard-body { padding:14px 16px 15px; display:flex; flex-direction:column; gap:9px; }
.aicard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ringm { --p:90; width:50px;height:50px;border-radius:50%; flex:none;
  background: conic-gradient(var(--olive) calc(var(--p)*1%), var(--bg-2) 0); display:grid; place-items:center; }
.ringm i { width:39px;height:39px;border-radius:50%;background:var(--surface); display:grid;place-items:center; font-style:normal; font-weight:800; font-size:12px; color:var(--olive-deep); }
.aimatch-cap { font-size:11px; font-weight:700; color:var(--ink-3); text-align:center; margin-top:3px; }
.ai-why { font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.ai-why b { color:var(--ink); }
.ai-matched { display:flex; flex-wrap:wrap; gap:6px; }
.ai-risk { font-size:12.5px; color:var(--tomato-ink); background:var(--tomato-soft); padding:7px 11px; border-radius:10px; display:flex; gap:7px; align-items:center; line-height:1.4; }
.ai-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }

/* author photo */
.author-photo { position:relative; width:100%; aspect-ratio:4/5; border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--sh-md); border:4px solid var(--surface); outline:2px solid var(--coral-soft); }
.author-photo img { width:100%;height:100%;object-fit:cover; }
.author-photo.circle { aspect-ratio:1/1; border-radius:50%; }

/* hero logo lockup */
.hero-logo { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.hero-logo img { height:64px; width:auto; }
@media(min-width:880px){ .hero-logo img { height:84px; } }

/* ============================================================
   v3 patch: centered hero · featured carousel · rail arrows
   · richer map · optional rating sliders · author portrait
   ============================================================ */

/* ---- centered hero ---- */
.hero { text-align:center; padding-top:26px; }
@media(min-width:880px){ .hero { padding-top:46px; } }
.hero-eyebrow { justify-content:center; }
.hero-h1 { margin-left:auto; margin-right:auto; max-width:14ch; }
@media(min-width:880px){ .hero-h1 { font-size:62px; max-width:none; } }
.hero-sub { margin-left:auto; margin-right:auto; }
.hero-cta { justify-content:center; }
.hero-stats { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.hero-stat { text-align:center; }
.hero-stat .v { font-size:26px; font-weight:800; letter-spacing:-0.03em; color:var(--olive-deep); }
.hero-stat .l { font-size:12.5px; color:var(--ink-2); font-weight:600; margin-top:1px; }
.hero-stat-div { width:1px; background:var(--hairline); align-self:stretch; }

/* ---- featured carousel (Рекомендуем рядом) ---- */
.fcar { position:relative; }
.fcar-view { overflow:hidden; border-radius:var(--r-xl); }
.fcar-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:9;
  width:46px; height:46px; border-radius:50%; background:oklch(1 0 0 /0.92);
  border:1px solid var(--hairline); box-shadow:var(--sh-md); display:grid; place-items:center;
  color:var(--ink); transition:.16s; backdrop-filter:blur(6px);
}
.fcar-arrow:hover { background:var(--olive-deep); color:#fff; transform:translateY(-50%) scale(1.06); }
.fcar-arrow.prev { left:10px; } .fcar-arrow.next { right:10px; }
@media(min-width:1040px){ .fcar-arrow.prev{ left:-21px;} .fcar-arrow.next{ right:-21px;} }
.fcar-foot { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; }
.fcar-dots { display:flex; gap:7px; }
.fcar-dot { width:8px; height:8px; border-radius:99px; background:var(--hairline); transition:.25s; cursor:pointer; padding:0; }
.fcar-dot.on { width:26px; background:var(--olive); }
.fcar-auto { font-size:12px; font-weight:700; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; }
.fcar-auto .lp { width:7px; height:7px; border-radius:50%; background:var(--olive); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }
.fcar-slide { animation: fcarIn .5s cubic-bezier(.2,.8,.25,1); }
@keyframes fcarIn { from { opacity:0; transform: translateX(var(--dir, 24px)); } }
.fcar-cf { transition: opacity .34s ease; will-change: opacity; }
.herodish-media.clickable, .dcard-media.clickable { cursor:pointer; }

/* ---- generic rail with arrows (collections) ---- */
.railwrap { position:relative; }
.rail-arrow {
  position:absolute; top:calc(50% - 14px); transform:translateY(-50%); z-index:9;
  width:42px; height:42px; border-radius:50%; background:oklch(1 0 0 /0.94);
  border:1px solid var(--hairline); box-shadow:var(--sh-md); display:grid; place-items:center;
  color:var(--ink); transition:.16s; backdrop-filter:blur(6px);
}
.rail-arrow:hover { background:var(--olive-deep); color:#fff; }
.rail-arrow.prev { left:-8px; } .rail-arrow.next { right:-8px; }
@media(min-width:1040px){ .rail-arrow.prev{ left:-20px;} .rail-arrow.next{ right:-20px;} }
.rail-arrow.hide { opacity:0; pointer-events:none; }

/* ---- richer map ---- */
.map-wrap {
  background:
    radial-gradient(140% 120% at 50% -10%, oklch(0.97 0.022 120) 0%, transparent 60%),
    linear-gradient(165deg, oklch(0.955 0.02 110) 0%, oklch(0.93 0.03 95) 100%);
}
.map-svg { position:absolute; inset:0; width:100%; height:100%; }
.map-grid { display:none; }
.map-dlabel {
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color: oklch(0.42 0.05 130); background: oklch(1 0 0 /0.62); padding:2px 8px; border-radius:999px;
  backdrop-filter:blur(2px); border:1px solid oklch(0.5 0.04 130 /0.12);
}
.map-pin-badge { box-shadow: 0 4px 12px oklch(0.3 0.05 130 /0.22), 0 1px 0 oklch(1 0 0 /0.6) inset; }
.map-legend {
  position:absolute; left:12px; top:12px; z-index:6; background:oklch(1 0 0 /0.86); backdrop-filter:blur(8px);
  border:1px solid var(--hairline); border-radius:12px; padding:9px 12px; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; gap:5px;
}
.map-legend .li { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--ink-2); }
.map-legend .sw { width:14px; height:8px; border-radius:3px; flex:none; }
.map-zoom { position:absolute; right:12px; top:12px; z-index:6; display:flex; flex-direction:column; gap:6px; }
.map-zoom button { width:34px;height:34px;border-radius:10px;background:oklch(1 0 0 /0.9); border:1px solid var(--hairline); box-shadow:var(--sh-sm); display:grid;place-items:center; font-weight:800; font-size:18px; color:var(--ink); }
.map-zoom button:hover { background:var(--olive-deep); color:#fff; }

/* ---- optional rating sliders (Добавить блюдо) ---- */
.rate-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 16px; background:var(--bg-2); border:1px solid var(--hairline); border-radius:var(--r-sm); transition:.15s; }
.rate-toggle:hover { border-color:var(--ink-3); }
.rate-toggle .tt { font-size:14px; font-weight:800; display:flex; align-items:center; gap:8px; }
.rate-toggle .opt { font-size:11.5px; font-weight:700; color:var(--olive); background:var(--coral-soft); padding:3px 9px; border-radius:999px; }
.crit { display:flex; flex-direction:column; gap:16px; padding:18px 16px; background:var(--bg-2); border:1px dashed var(--hairline); border-radius:var(--r-sm); animation: fadein .3s ease; }
.crit-row .ch { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.crit-row .nm { font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:7px; }
.crit-row .vl { font-size:13px; font-weight:800; color:var(--ink-3); }
.crit-row .vl.set { color:var(--olive-deep); }
.stars { display:flex; gap:7px; }
.starbtn { padding:0; color:var(--hairline); transition:.12s; display:grid; place-items:center; }
.starbtn:hover { transform:scale(1.12); }
.starbtn.on { color:var(--gold); }
.crit-score { display:flex; align-items:center; gap:13px; padding:14px 16px; background:linear-gradient(150deg, var(--coral-soft), var(--orange-soft)); border-radius:var(--r-sm); }
.crit-score .big { font-size:34px; font-weight:800; letter-spacing:-0.03em; color:var(--olive-deep); line-height:1; }

/* ---- author portrait (clean, fills rectangle, no frame) ---- */
.author-photo { border:none; outline:none; box-shadow: var(--sh-md); }
.author-quote { font-family:"Instrument Serif",serif; font-style:italic; font-size:21px; line-height:1.35; color:var(--ink); margin:18px 0 0; padding-left:18px; border-left:3px solid var(--olive); }

/* ============================================================
   v4: real Leaflet map · dark theme · mobile polish
   ============================================================ */

/* ---- Leaflet map ---- */
.map-wrap { background: var(--bg-2); }
.map-svg, .map-grid, .map-ring, .map-river, .map-zoom { display:none !important; }
.map-leaflet { position:absolute; inset:0; z-index:1; }
.leaflet-container { font-family:"Manrope",sans-serif; background: var(--bg-2); }
.leaflet-control-zoom a { border-radius:8px !important; color:var(--ink) !important; }
.leaflet-bar { border:none !important; box-shadow: var(--sh-md) !important; }
.leaflet-control-attribution { font-size:10px !important; background: oklch(1 0 0 /0.7) !important; }
.leaflet-div-icon { background: transparent !important; border: none !important; }
.lpin-wrap { display:flex !important; align-items:center; justify-content:center; overflow:visible; }
.lpin {
  display:flex; align-items:center; gap:5px; background:var(--surface); color:var(--ink);
  border:1px solid var(--hairline); border-radius:999px; padding:3px 9px 3px 5px; font-weight:800; font-size:12px;
  box-shadow: 0 4px 12px oklch(0.3 0.05 130 /0.28), 0 1px 0 oklch(1 0 0 /0.5) inset; white-space:nowrap; transition:.14s; cursor:pointer;
}
.lpin .e { font-size:14px; }
.lpin .s { color:var(--olive-deep); }
.lpin-wrap:hover .lpin { background:var(--olive-deep); color:#fff; transform:scale(1.08); }
.lpin-wrap:hover .lpin .s { color:var(--gold); }
.lpin.mini { padding:2px 7px; box-shadow:none; font-size:11px; }
.lpin.mini .s { color:var(--olive-deep); }
.map-legend { z-index:1200; left:auto; right:12px; top:12px; }
.map-card { z-index:1200; }
.map-fallback { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ink-2); padding:24px; }

/* perf: skip rendering offscreen heavy cards → faster section switches */
.dcard { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.rankrow { content-visibility: auto; contain-intrinsic-size: auto 90px; }
.rcard { content-visibility: auto; contain-intrinsic-size: auto 360px; }

/* ---- theme toggle button ---- */
.hdr-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.theme-btn {
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--surface); border:1px solid var(--hairline);
  box-shadow:var(--sh-sm); color:var(--ink-2); transition:.16s;
}
.theme-btn:hover { color:var(--ink); background:var(--bg-2); }

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg:        oklch(0.205 0.012 110);
  --bg-2:      oklch(0.245 0.014 110);
  --surface:   oklch(0.262 0.014 110);
  --surface-2: oklch(0.30 0.016 110);
  --ink:       oklch(0.955 0.008 100);
  --ink-2:     oklch(0.80 0.012 100);
  --ink-3:     oklch(0.63 0.012 100);
  --hairline:  oklch(0.36 0.013 110);

  --olive-deep: oklch(0.62 0.10 130);
  --olive:      oklch(0.66 0.11 130);
  --olive-2:    oklch(0.72 0.11 128);
  --coral:      oklch(0.66 0.11 130);
  --coral-ink:  oklch(0.80 0.11 132);
  --coral-soft: oklch(0.34 0.055 130);

  --tomato:     oklch(0.70 0.17 35);
  --tomato-ink: oklch(0.80 0.13 38);
  --tomato-soft:oklch(0.36 0.09 33);

  --orange-soft:oklch(0.40 0.07 65);
  --green-soft: oklch(0.36 0.06 150);
  --plum-soft:  oklch(0.36 0.06 350);
  --blue-soft:  oklch(0.36 0.05 250);
  --sand:       oklch(0.40 0.02 95);
  --cream:      oklch(0.27 0.012 110);
  --gold:       oklch(0.82 0.13 85);

  --sh-sm: 0 1px 2px oklch(0 0 0 / 0.40), 0 2px 6px oklch(0 0 0 / 0.34);
  --sh-md: 0 4px 12px oklch(0 0 0 / 0.46), 0 12px 28px oklch(0 0 0 / 0.40);
  --sh-lg: 0 8px 24px oklch(0 0 0 / 0.52), 0 28px 60px oklch(0 0 0 / 0.55);
}
/* dark: fix hardcoded light surfaces */
[data-theme="dark"] .hdr { background: oklch(0.205 0.012 110 / 0.82); }
[data-theme="dark"] .bnav { background: oklch(0.205 0.012 110 / 0.92); }
[data-theme="dark"] .score.float { background: oklch(0.262 0.014 110 / 0.92); color: var(--ink); }
[data-theme="dark"] .dcard-save { background: oklch(0.20 0.012 110 / 0.82); color: var(--ink-2); }
[data-theme="dark"] .drawer-close,
[data-theme="dark"] .fcar-arrow,
[data-theme="dark"] .rail-arrow,
[data-theme="dark"] .map-card-close { background: oklch(0.30 0.016 110 / 0.94); color: var(--ink); }
[data-theme="dark"] .map-legend,
[data-theme="dark"] .lpin { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .leaflet-control-attribution { background: oklch(0.2 0.01 110 /0.7) !important; }
[data-theme="dark"] .leaflet-control-attribution a { color: var(--ink-2) !important; }
[data-theme="dark"] .btn-pri { box-shadow: 0 6px 16px oklch(0.66 0.11 130 / 0.20); }
[data-theme="dark"] .btn-pri, [data-theme="dark"] .chip.on, [data-theme="dark"] .tagopt.on,
[data-theme="dark"] .score, [data-theme="dark"] .btn-dark, [data-theme="dark"] .seg button.on,
[data-theme="dark"] .logo-mark, [data-theme="dark"] .bnav .add .ic-wrap { color: oklch(0.16 0.01 120); }
[data-theme="dark"] .m-col.hot { background: linear-gradient(165deg, oklch(0.34 0.055 130), oklch(0.36 0.05 60)); }
[data-theme="dark"] .ai-hero { background: linear-gradient(160deg, oklch(0.30 0.06 132), oklch(0.26 0.05 140)); }
[data-theme="dark"] .badge[class*="b-"] { filter: none; }
[data-theme="dark"] .map-fallback { color: var(--ink-2); }
[data-theme="dark"] ::selection { background: oklch(0.40 0.07 130); }

/* ============================================================
   MOBILE POLISH (≤560px)
   ============================================================ */
@media (max-width:560px){
  .hero-h1 { font-size:34px; }
  .hero-sub { font-size:15.5px; }
  .hero-cta { gap:8px; }
  .hero-cta .btn { flex:1 1 auto; }
  .hero-stats { gap:14px; margin-top:20px; }
  .hero-stat .v { font-size:22px; }
  .sec-title { font-size:21px; }
  .herodish-name { font-size:24px; }
  .fcar-arrow { width:40px; height:40px; }
  .drawer-body { padding:18px 16px 36px; }
  .map-wrap { height:62vh; min-height:420px; }
  .map-legend { font-size:10px; padding:6px 9px; }
  .btn { font-size:14.5px; padding:11px 15px; }
  .pintro h1 { font-size:27px; }
  .ai-hero h1 { font-size:30px; }
  .aicard { grid-template-columns:1fr; }
  .aicard-media { min-height:170px; }
  .stat .v { font-size:24px; }
  .foot-grid { gap:22px 30px; }
}
/* tap targets & momentum scroll on touch */
@media (hover:none){
  .chips, .rail { -webkit-overflow-scrolling:touch; }
  .dcard:active { transform:scale(.99); }
}

/* ---------- Галерея заведения: скрытый скроллбар + стрелки ---------- */
.vgal-rail::-webkit-scrollbar{ display:none; }
.vgal-rail{ -ms-overflow-style:none; }
.vgal-arrow{ opacity:.92; transition:transform .15s ease, opacity .15s ease; cursor:pointer; border:1px solid var(--hairline); color:var(--ink); }
.vgal-arrow:hover{ transform:translateY(-50%) scale(1.08); opacity:1; }

/* ---------- Паспорт мест: флажок на карте ---------- */
.flagpin-wrap{ background:none!important; border:none!important; }
.flagpin{ font-size:24px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); transform-origin:bottom left; animation:flagpop .3s ease; cursor:pointer; }
.flagpin:hover{ transform:scale(1.18); }
@keyframes flagpop{ from{ transform:scale(0) translateY(6px); opacity:0; } to{ transform:scale(1); opacity:1; } }