/* ============================================================
   STOM CHECK — "aesthetic learning" design system
   ============================================================ */

:root {
  --bg: #F7F5F0;
  --bg-2: #EFEBE2;
  /* Card = rounded outer shell; plate = the sharp-cornered square inside it
     that a product photo sits on. Both must be opaque: photos `multiply`, so
     a translucent backdrop leaves the JPEG's baked-in white showing. --plate
     is one tonal step down from --card so the inner square reads. */
  --card: #FCFAF6;
  --plate: #F2EFE8;
  --surface: #FCFAF6;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(28, 22, 14, 0.08);
  --glass-border-strong: rgba(28, 22, 14, 0.14);
  --shadow: 0 3px 14px rgba(50, 38, 20, 0.06), 0 1px 3px rgba(50, 38, 20, 0.05);
  --shadow-lift: 0 16px 36px rgba(40, 30, 15, 0.16), 0 4px 10px rgba(40, 30, 15, 0.07);
  --shadow-soft: 0 10px 24px rgba(40, 30, 15, 0.10);

  --text-1: #1B1811;
  --text-2: #4C4740;
  --text-3: #7C766C;
  --text-inverse: #FFFFFF;

  /* neutral / default accent (picker, search) */
  --accent: #A8863F;
  --accent-tint: rgba(168, 134, 63, 0.10);
  --accent-tint-strong: rgba(168, 134, 63, 0.18);

  /* per-specialty accent palette */
  --ortho: #B8792E;
  --ortho-tint: rgba(184, 121, 46, 0.11);
  --ortodont: #6754C9;
  --ortodont-tint: rgba(103, 84, 201, 0.11);
  --therapy: #128C77;
  --therapy-tint: rgba(18, 140, 119, 0.11);
  --surgery: #BE4438;
  --surgery-tint: rgba(190, 68, 56, 0.11);

  --success: #1F9D5C;
  --success-tint: rgba(31, 157, 92, 0.12);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;

  --tap-min: 52px;
  --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* per-specialty accent binding: JS toggles one of these classes on .view */
.accent-ortho { --accent: var(--ortho); --accent-tint: var(--ortho-tint); --accent-tint-strong: rgba(184, 121, 46, 0.20); }
.accent-ortodont { --accent: var(--ortodont); --accent-tint: var(--ortodont-tint); --accent-tint-strong: rgba(103, 84, 201, 0.20); }
.accent-therapy { --accent: var(--therapy); --accent-tint: var(--therapy-tint); --accent-tint-strong: rgba(18, 140, 119, 0.20); }
.accent-surgery { --accent: var(--surgery); --accent-tint: var(--surgery-tint); --accent-tint-strong: rgba(190, 68, 56, 0.20); }

/* static accent utility classes (used inside search results regardless of current view accent) */
.search-result-tag.accent-ortho, .search-result-media.accent-ortho { --accent: var(--ortho); --accent-tint: var(--ortho-tint); }
.search-result-tag.accent-ortodont, .search-result-media.accent-ortodont { --accent: var(--ortodont); --accent-tint: var(--ortodont-tint); }
.search-result-tag.accent-therapy, .search-result-media.accent-therapy { --accent: var(--therapy); --accent-tint: var(--therapy-tint); }
.search-result-tag.accent-surgery, .search-result-media.accent-surgery { --accent: var(--surgery); --accent-tint: var(--surgery-tint); }

* , *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

html { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.5;
  min-height: 100svh;
  letter-spacing: -0.011em;
}

#app { position: relative; display: flex; flex-direction: column; min-height: 100svh; }

/* ============ motion system ============
   Every animation here is compositor-only (transform + opacity), one-shot and
   under half a second — nothing infinite, nothing that touches layout or
   paint, so the motion layer costs effectively nothing.
   --ease-out: fast start, soft landing (navigation).
   --ease-spring: slight overshoot (cards, checkmarks — things that "arrive"). */
:root {
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
}

/* Direction-aware screen transitions: drilling deeper slides in from the
   right, going back slides in from the left — the page itself tells you
   which way you moved. Direction class is set by the router. */
@keyframes viewEnterFwd {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes viewEnterBack {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
.view-enter-fwd { animation: viewEnterFwd 0.34s var(--ease-out) both; }
.view-enter-back { animation: viewEnterBack 0.34s var(--ease-out) both; }

/* staggered entrance for cards/tiles/results (delay set inline by JS, capped) */
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.stagger-in { animation: staggerIn 0.4s var(--ease-spring) both; }

/* topbar title slides up in sync with the view */
@keyframes titleIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.title-in { animation: titleIn 0.3s var(--ease-out) both; }

/* Item detail: the photo settles (a gentle zoom-out landing), then the text
   cascades up after it — eyebrow, title, description, extended blocks. */
@keyframes photoSettle {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}
.detail-img-wrap .detail-img:not(.img-pending) {
  animation: photoSettle 0.5s var(--ease-out) both;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.detail-body > * { animation: riseIn 0.42s var(--ease-out) both; }
.detail-body > *:nth-child(1) { animation-delay: 0.10s; }
.detail-body > *:nth-child(2) { animation-delay: 0.15s; }
.detail-body > *:nth-child(3) { animation-delay: 0.20s; }
.detail-body > *:nth-child(4) { animation-delay: 0.26s; }

/* specialty covers settle once on the picker — one-shot, not a loop */
.specialty-card img { animation: photoSettle 0.7s var(--ease-out) both; }

/* images fade in as they finish loading; cached ones skip this entirely */
img.img-pending { opacity: 0; }
img { transition: opacity 0.28s ease; }

/* render-perf: off-screen cards in long grids are skipped until scrolled near.
   `auto` on the intrinsic size makes the browser remember each card's real
   height once measured — without it the page's scroll height stays a guess and
   restoring a scroll position after back-navigation lands short. */
.item-card, .search-result {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ topbar ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 10px calc(10px + env(safe-area-inset-top, 0px));
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
}

.icon-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.15s ease, transform 0.12s ease;
}
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn[hidden] { display: none; }
.icon-btn:active { background: var(--accent-tint); transform: scale(0.92); }
.search-btn { color: var(--text-2); margin-left: auto; }

/* Brand mark: only reads next to the app's own title ("СтомЧек") on the root
   screen. Once you drill in, the title becomes the screen's own name and the
   back chevron takes this slot — showing the mark there would just be clutter
   next to an unrelated title, so it hides in lockstep with the back button. */
.app-logo {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 7px 2px 7px 4px;
  border-radius: 22%;
}
#backBtn:not([hidden]) ~ .app-logo { display: none; }

.app-title {
  flex: 1;
  min-width: 0;
  padding: 12px 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  /* Две строки плюс собственные отступы. При box-sizing: border-box
     max-height включает padding, поэтому 2.9em съедали вторую строку
     у длинных заголовков вроде «ProTaper Universal — ротационная система». */
  max-height: calc(1.3em * 2 + 24px);
  color: var(--text-1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view {
  flex: 1;
  padding: 16px;
  padding-bottom: 40px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* ============ hero (picker screen) ============ */
.hero-block { padding: 10px 2px 22px; }
.hero-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.hero-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--text-1);
  margin-bottom: 10px;
}
.hero-sub {
  font-size: 14.5px;
  color: var(--text-3);
  line-height: 1.55;
  max-width: 46ch;
  margin-bottom: 18px;
}
.hero-search-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-strong);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--text-3);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.hero-search-btn svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--text-3); }
.hero-search-btn:active { transform: scale(0.99); box-shadow: var(--shadow-soft); }

/* --- specialty picker: full-bleed photo cards --- */
.specialty-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.specialty-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.2s cubic-bezier(.2,.7,.3,1), box-shadow 0.2s ease;
}
.specialty-card:active { transform: scale(0.98); }
.specialty-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.specialty-card:active img { transform: scale(1.03); }
.specialty-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0) 32%, rgba(8, 10, 14, 0.86) 100%);
}
.specialty-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  pointer-events: none;
}
.specialty-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px 60px 20px 22px;
}
.specialty-card-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  margin-bottom: 6px;
}
.specialty-card-meta { display: flex; align-items: center; gap: 7px; }
.specialty-card-count {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.specialty-card-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.6); }
.specialty-card-arrow {
  position: absolute;
  right: 18px;
  bottom: 20px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.specialty-card-arrow svg { width: 17px; height: 17px; }

/* ============ specialty home ============ */
.specialty-home-header { padding: 4px 2px 18px; }
.specialty-home-title { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--text-1); margin-bottom: 4px; }
.specialty-home-sub { font-size: 13.5px; color: var(--text-3); }

/* --- category / checklist tile grid --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.tile {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 18px 14px 16px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s cubic-bezier(.2,.7,.3,1), background 0.15s ease, box-shadow 0.15s ease;
}
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.5px;
  background: var(--accent);
  opacity: 0.65;
}
.tile:active { transform: scale(0.97); background: var(--glass-strong); box-shadow: var(--shadow); }

.tile-title { font-size: 14px; font-weight: 700; color: var(--text-1); line-height: 1.3; }
.tile-count { font-size: 11.5px; font-weight: 600; color: var(--accent); }
.tile-proc .tile-title { font-size: 14.5px; }

/* --- item card grid (with photo) --- */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.item-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s cubic-bezier(.2,.7,.3,1), box-shadow 0.15s ease;
}
.item-card:active { transform: scale(0.96); box-shadow: var(--shadow-soft); }

/* The sharp-cornered plate inside the rounded card. Inset by the card's
   padding so its square corners stay visible against the rounded shell. */
.item-card-media {
  background: var(--plate);
  border-radius: 0;
  overflow: hidden;
}
.item-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6px;
  display: block;
}

.item-card-title {
  padding: 9px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  text-align: center;
  line-height: 1.3;
}

/* ============ item detail ============ */
/* Rounded card holding a sharp-cornered photo plate. */
.detail-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 12px;
}

.detail-img-wrap {
  /* Opaque, and inset by the card's padding: `multiply` on the photo blends
     against this colour, and the inset keeps the square corners visible. */
  background: var(--plate);
  border-radius: 0;
  overflow: hidden;
}
.detail-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  padding: 10px;
  display: block;
}

.detail-body { padding: 18px 8px 10px; }
.detail-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.detail-title { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 10px; }
.detail-desc { font-size: 15px; color: var(--text-2); line-height: 1.62; }

.detail-extended {
  margin-top: 18px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-extended-block {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--accent-tint);
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.detail-extended-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--glass-strong);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.detail-extended-icon svg { width: 15px; height: 15px; }
.detail-extended-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.detail-extended-text {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.56;
}

/* --- section titles --- */
.section-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 2px 14px;
}

/* Section heading inside one category — burs are split into materials / shapes /
   grit / finishing without leaving the screen. Heavier and darker than the
   category caption above it, so the hierarchy reads at a glance. */
.group-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.01em;
  margin: 26px 2px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border-strong);
}
.group-title:first-child {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}

/* --- tabs (specialty content: Справочник / Чек-листы) --- */
.tabbar {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 4px;
}
.tab-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn.active { background: var(--accent); color: #fff; box-shadow: var(--shadow); }

/* --- procedure (interactive checklist) --- */
.proc-block {
  background: var(--bg);
  border: none;
  border-radius: var(--r-lg);
  padding: 18px 0;
  margin-bottom: 16px;
}
.proc-block h3 { font-size: 15.5px; font-weight: 700; color: var(--text-1); }
.proc-block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.proc-progress {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.proc-progress-track {
  height: 6px;
  border-radius: 4px;
  background: var(--glass-border);
  overflow: hidden;
  margin-bottom: 16px;
}
.proc-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s cubic-bezier(.2,.7,.3,1);
}

/* tool chips: "Что подготовить" grid with photos — tap to check off */
.tool-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.tool-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 8px;
}
.tool-chip:active { transform: scale(0.95); }
/* The plate must be the img's BACKDROP, not the img's own background: the JPEG
   is opaque and would cover it, leaving its white to multiply against the card. */
.tool-chip-media { position: relative; width: 100%; background: var(--plate); }
.tool-chip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}
.tool-chip-noimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--glass-strong);
  border: 1px dashed var(--glass-border-strong);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
}
.tool-chip span {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-2);
  font-weight: 600;
}
.chip-check-badge {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: chipPop 0.25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes chipPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.tool-chip.chip-checked img,
.tool-chip.chip-checked .tool-chip-noimg { opacity: 0.4; filter: grayscale(0.7); transform: scale(0.96); }
.tool-chip.chip-checked span { text-decoration: line-through; color: var(--text-3); }
.tool-chip.chip-checked .chip-check-badge { display: flex; }

/* steps: tap to check off, with optional per-step tool photos */
.proc-steps-list { list-style: none; padding-left: 0; }
.proc-steps-visual > li {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.proc-steps-visual > li:active { transform: scale(0.99); }
.step-marker {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.step-done .step-marker { background: var(--success); }
.step-body { flex: 1; min-width: 0; }
.step-text { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.step-done .step-text { text-decoration: line-through; color: var(--text-3); }
.step-done { opacity: 0.65; }
.step-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.step-tool-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
  text-align: center;
}
.step-tool-chip img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: none;
  padding: 4px;
}
.step-tool-chip span { font-size: 11px; color: var(--text-2); font-weight: 600; line-height: 1.2; }

.reset-checklist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap-min);
  margin-top: 4px;
  border: 1px solid var(--glass-border-strong);
  background: transparent;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease;
}
.reset-checklist-btn svg { width: 16px; height: 16px; }
.reset-checklist-btn:active { background: var(--glass-strong); }

/* ============ search ============ */
.search-bar-wrap { position: sticky; top: 0; z-index: 2; padding: 4px 0 14px; margin: -4px 0 0; background: linear-gradient(var(--bg) 78%, transparent); }
.search-input-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.search-input-icon { width: 19px; height: 19px; flex: 0 0 auto; color: var(--text-3); }
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--text-1);
  -webkit-appearance: none;
}
.search-input::placeholder { color: var(--text-3); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.search-filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.search-results { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.search-result {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.search-result:active { transform: scale(0.98); background: var(--glass-strong); }
.search-result-media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--surface);
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-result-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.search-result-icon { width: 24px; height: 24px; color: var(--accent); }
.search-result-body { flex: 1; min-width: 0; }
.search-result-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.search-result-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.search-result-kind { font-size: 11px; color: var(--text-3); font-weight: 600; }
.search-result-title { font-size: 14.5px; font-weight: 700; color: var(--text-1); line-height: 1.3; margin-bottom: 2px; }
.search-result-title mark, .search-result-snippet mark {
  background: var(--accent-tint-strong);
  color: var(--text-1);
  border-radius: 3px;
  padding: 0 1px;
}
.search-result-snippet { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

.search-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-3);
}
.search-empty svg { color: var(--glass-border-strong); margin-bottom: 14px; }
.search-empty-title { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.search-empty-text { font-size: 13px; line-height: 1.5; max-width: 32ch; margin: 0 auto; }

/* Catalogue photos ship with a white background baked into the JPEG. `multiply`
   makes that white dissolve into whatever warm surface is behind it, so no white
   box shows. Deliberately NOT applied to specialty cover photos (real
   photographs — multiply would darken them) nor to the broken-image fallback. */
.detail-img,
.item-card img,
.tool-chip img,
.step-tool-chip img,
.search-result-media img {
  mix-blend-mode: multiply;
}
img.img-broken { mix-blend-mode: normal; }

/* fallback image (network hiccup / missing file) — deliberately quiet, not an error state */
img.img-broken { object-fit: none; padding: 14%; }

.empty-state {
  text-align: center;
  color: var(--text-3);
  padding: 40px 16px;
  font-size: 14px;
}

@media (min-width: 640px) {
  .item-grid, .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .hero-title { font-size: 36px; }
}

/* ============ trial banner / paywall / boot loading ============ */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.trial-banner-icon { font-size: 14px; }

.boot-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.boot-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--glass-border-strong);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px 32px;
  max-width: 420px;
  margin: 0 auto;
}
.paywall-icon {
  font-size: 44px;
  margin-bottom: 14px;
}
.paywall-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.paywall-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin-bottom: 12px;
}
.paywall-sub {
  font-size: 14.5px;
  color: var(--text-3);
  line-height: 1.6;
  margin-bottom: 22px;
}
.paywall-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-1);
  margin-bottom: 22px;
}
.paywall-price span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 4px;
}
.paywall-buy-btn {
  width: 100%;
  min-height: var(--tap-min);
  border: none;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.paywall-buy-btn:active { transform: scale(0.98); }
.paywall-buy-btn:disabled { opacity: 0.6; cursor: default; }
.paywall-status {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  min-height: 1.2em;
}

/* ============ freemium locks ============ */
/* lock badge on a locked catalogue card */
.lock-badge {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.lock-badge svg { width: 15px; height: 15px; }
.item-card-media { position: relative; }
.card-locked .item-card-media img { opacity: 0.5; filter: grayscale(0.35); }
.card-locked .item-card-title { color: var(--text-3); }

/* Что открыто бесплатно — показываем тихо: у карточки чуть заметная рамка,
   у категории точка рядом со счётчиком. Подписи «Открыто» на каждой плитке
   читались как реклама и мешали смотреть сам каталог. */
.card-free { border-color: rgba(31, 157, 92, 0.30); }
.free-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--success);
}

/* lock on a checklist tile */
.tile-lock { display: inline-flex; vertical-align: -2px; color: var(--accent); }
.tile-lock svg { width: 14px; height: 14px; }
.tile-locked .tile-title { color: var(--text-3); }

/* locked-content CTA (shown in place of the paid material) */
.locked-cta {
  margin: 8px;
  padding: 24px 20px 22px;
  background: var(--accent-tint);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  text-align: center;
}
.locked-cta-icon { font-size: 30px; margin-bottom: 8px; }
.locked-cta-title { font-size: 16px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
.locked-cta-sub { font-size: 13.5px; line-height: 1.5; color: var(--text-2); max-width: 34ch; margin: 0 auto 16px; }
.locked-cta-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.locked-cta-btn:active { transform: scale(0.97); }
.locked-cta-btn:disabled { filter: grayscale(0.4); cursor: default; }
.locked-cta-status { font-size: 12.5px; color: var(--text-3); margin-top: 10px; line-height: 1.4; min-height: 1em; }

/* persistent unlock bar for free-tier users */
.unlock-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  border: none;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 -4px 18px rgba(40,30,15,0.16);
}
.unlock-banner:active { filter: brightness(0.96); }
.unlock-banner-txt { font-size: 14.5px; font-weight: 600; }
.unlock-banner-price { font-size: 15px; font-weight: 800; white-space: nowrap; }
.has-unlock-bar #view { padding-bottom: 80px; }

/* ============ paywall bottom sheet (tap on a locked card) ============ */
.paywall-sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 15, 8, 0);
  transition: background 0.22s ease;
}
.paywall-sheet-backdrop.open { background: rgba(20, 15, 8, 0.42); }
.paywall-sheet {
  width: 100%; max-width: 520px;
  background: var(--bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 22px calc(26px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.24s var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
.paywall-sheet-backdrop.open .paywall-sheet { transform: translateY(0); }
.paywall-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--glass-border-strong);
  margin: 0 auto 16px;
}
.paywall-sheet .locked-cta-btn { width: 100%; margin-top: 4px; }
.paywall-sheet-close {
  margin-top: 12px;
  border: none; background: transparent;
  color: var(--text-3); font-family: inherit; font-size: 14px;
  padding: 8px; cursor: pointer;
}

/* ============ locked placeholders (no photo shipped for locked items) ============ */
.card-lock-ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plate);
  color: var(--accent);
  opacity: 0.55;
}
.card-lock-ph svg { width: 30px; height: 30px; }
/* Карточка без фото (снимок ещё не сделан): тише замка и другого цвета,
   чтобы не читалась как «закрыто». */
.img-soon {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plate);
  color: var(--text-3);
  opacity: 0.45;
}
.img-soon svg { width: 28px; height: 28px; }
.tool-chip-media .img-soon svg,
.step-tool-chip .img-soon svg { width: 18px; height: 18px; }
.detail-img-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: var(--plate);
  color: var(--accent);
}
.detail-img-locked svg { width: 46px; height: 46px; opacity: 0.6; }

/* ============ spec table (structured facts inside a card) ============ */
.spec-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 16px 0 4px;
  background: var(--glass-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  background: var(--card);
}
.spec-key {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.35;
}
.spec-dot {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(28,22,14,0.22), 0 1px 3px rgba(40,30,15,0.18);
}
.spec-val {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
@media (max-width: 380px) {
  .spec-row { flex-direction: column; gap: 4px; }
  .spec-key { flex: none; }
}