.cat-lock{opacity:.45; cursor:default;}
.cat-lock:hover{border-color:var(--line) !important;}
.cat-soon{
  position:absolute; top:10px; right:10px; background:rgba(0,0,0,.55); color:var(--muted);
  font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:6px;
}
.cat-photo, .art-thumb, .art-hero{position:relative;}
/* Раньше цвет фона задавался инлайн style="background:${c.color}" —
   но у справочника всего 6 фиксированных категорий, так что это просто
   6 именованных классов вместо динамического инлайн-стиля. */
.cat-color-alfa{background:linear-gradient(135deg,#3a3a3a,#1a1a1a);}
.cat-color-pitbike{background:linear-gradient(135deg,#4a2600,#1a1a1a);}
.cat-color-enduro{background:linear-gradient(135deg,#1f3a1f,#1a1a1a);}
.cat-color-cross{background:linear-gradient(135deg,#3a1f1f,#1a1a1a);}
.cat-color-scoot4t{background:linear-gradient(135deg,#1f2b3a,#1a1a1a);}
.cat-color-scoot2t{background:linear-gradient(135deg,#2b1f3a,#1a1a1a);}
.cat-photo img, .art-thumb img, .art-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.topic-icon{width:44%; height:44%; stroke:rgba(255,255,255,.8); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;}
.art-thumb .topic-icon{width:52%; height:52%;}
.exact-box{
  background:var(--surface); border:1px solid var(--gold-dim); border-left:3px solid var(--gold);
  border-radius:10px; padding:12px 14px; margin:18px 0; font-size:13.5px; line-height:1.6; color:var(--text);
}
.exact-box b{color:var(--gold); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
.art-caution{
  background:rgba(193,64,47,.08); border:1px solid rgba(193,64,47,.35); border-radius:10px;
  padding:12px 14px; margin:18px 0; font-size:13.5px; line-height:1.6; color:#e8b8b0;
}
.art-foot-note{
  margin-top:28px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); line-height:1.7;
}
.art-foot-note a{color:var(--gold); text-decoration:underline;}
.gwrap{width:100%; min-width:0; max-width:1080px; box-sizing:border-box; margin:0 auto; padding:28px clamp(16px,4vw,40px) 60px;}
.g-title{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.02em; text-transform:uppercase;
  font-size:clamp(30px,5vw,44px); margin:0 0 8px;
}
.g-sub{color:var(--muted); font-size:13.5px; margin:0 0 26px; max-width:560px; line-height:1.6;}

.g-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:20px;
  color:var(--muted); text-decoration:none; font-size:13px; text-transform:uppercase;
  letter-spacing:.04em; cursor:pointer; background:none; border:none; font-family:inherit; padding:0;
}
.g-back:hover{color:var(--gold);}
.g-back svg{width:16px;height:16px; stroke:currentColor; fill:none; stroke-width:2.2;}

/* ---------- Экран 1: категории ---------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px;
}
.cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; text-align:left; display:flex; flex-direction:column;
  color:inherit; text-decoration:none;
}
.cat-photo{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
}
.cat-body{padding:14px 14px 16px;}
.cat-name{font-weight:700; font-size:15px; margin:0 0 4px;}
.cat-count{color:var(--muted); font-size:12px;}
.cat-card:hover{border-color:var(--gold-dim);}

/* ---------- Экран 2: список статей категории ---------- */
.art-row{
  display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line);
  cursor:pointer; color:inherit; text-decoration:none;
}
.art-row:hover .art-title{color:var(--gold);}
.art-thumb{
  width:84px; height:84px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); font-size:9.5px; text-transform:uppercase; text-align:center; padding:4px;
}
.art-info{min-width:0;}
.art-title{font-weight:700; font-size:15px; margin:0 0 5px; line-height:1.35;}
.art-excerpt{color:var(--muted); font-size:13px; line-height:1.5;}

/* ---------- Экран 3: статья ---------- */
.art-hero{
  aspect-ratio:1/1; max-width:520px; margin-left:auto; margin-right:auto;
  border-radius:14px; margin-bottom:22px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
}
/* "Оп, анимировалось" — эффект открытия детальной картинки при заходе
   в статью. Картинка на видео не превращается (Gemini рисует только
   статику), но плавное увеличение+проявление из центра даёт то же
   ощущение "раскрытия узла", которое просили. overflow:hidden на
   .art-hero не даёт увеличенной картинке вылезти за скруглённые углы. */
@keyframes artHeroReveal{
  from{opacity:0; transform:scale(1.18);}
  to{opacity:1; transform:scale(1);}
}
.art-hero img{animation:artHeroReveal .6s cubic-bezier(.2,.7,.2,1) both;}
@media (prefers-reduced-motion: reduce){
  .art-hero img{animation:none;}
}
.art-h1{font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,4.5vw,38px); letter-spacing:.01em; margin:0 0 6px; line-height:1.1;}
.art-cat-tag{
  display:inline-block; color:var(--gold); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:18px;
}
.art-body p{font-size:15px; line-height:1.75; color:#d9d5c9; margin:0 0 16px;}
.art-body h2{font-size:17px; margin:26px 0 10px; color:var(--text);}
.art-body ul{margin:0 0 16px; padding-left:20px;}
.art-body li{font-size:15px; line-height:1.65; color:#d9d5c9; margin-bottom:6px;}
.art-inline-img{
  aspect-ratio:1/1; max-width:480px; margin:20px auto; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--surface);
  color:rgba(255,255,255,.55); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
}
.art-inline-img img{width:100%; height:100%; object-fit:cover;}
/* wide-contain (2026-10-02) — только для статей с a.imageMode:"wide-contain"
   (см. guide-logic.js/renderArticle). Технические схемы 16:9 с подписями/
   стрелками по краям кадра: обычный квадратный cover их обрезал бы —
   здесь контейнер подгоняется под реальное соотношение сторон исходника,
   картинка вписывается целиком (contain), края не обрезаются. Остальные
   статьи (.art-hero/.art-inline-img без модификатора) не затронуты. */
.art-hero--wide,
.art-inline-img--wide{
  width:100%; min-width:0; aspect-ratio:1672/941; background:#080808; overflow:hidden;
}
.art-hero--wide img,
.art-inline-img--wide img{
  width:100%; height:100%; object-fit:contain; object-position:center; display:block;
}
.art-cta{
  margin-top:34px; padding:18px 20px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.art-cta p{margin:0; font-size:13.5px; color:var(--muted); max-width:360px;}
.art-cta a{
  background:var(--gold); color:#1a1400; text-decoration:none; font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; padding:12px 20px; border-radius:10px; white-space:nowrap;
}

.screen{display:none;}
.screen.active{display:block;}

/* ---------- Симптомы, поиск и результаты (2026-10-26) ---------- */
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.g-h2{font-size:15px; font-weight:800; margin:30px 0 12px; color:var(--text); text-transform:uppercase; letter-spacing:.05em;}
.g-search{display:flex; gap:8px; margin:0 0 6px; max-width:620px;}
.g-search input{flex:1; min-width:0; box-sizing:border-box; padding:12px 14px; min-height:48px; font:inherit; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:10px;}
.g-search input:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
.g-search button{min-height:48px; padding:0 18px; background:var(--gold); color:#1a1400; border:0; border-radius:10px; font:inherit; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.04em; cursor:pointer;}
.sym-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px;}
.sym-card{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; box-sizing:border-box; padding:12px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); color:var(--text); text-decoration:none; font-weight:700; font-size:14px;}
.sym-card span:last-child{color:var(--gold);}
.sym-card:hover{border-color:var(--gold-dim);}
.g-filters{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 12px;}
.g-filters label{font-size:13px; color:var(--muted);}
.g-filters select{min-height:44px; padding:0 12px; font:inherit; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:10px;}
.g-filters button{min-height:44px; padding:0 14px; background:transparent; color:var(--gold); border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13px; cursor:pointer;}
.g-count{font-size:13px; color:var(--muted); margin:0 0 6px;}
.art-kind{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; margin:0 0 4px;}
@media (max-width:480px){
  .g-search button{padding:0 14px;}
  .sym-grid{grid-template-columns:1fr 1fr; gap:8px;}
  .sym-card{padding:10px 12px; font-size:13px;}
}
/* Список прямых ссылок внизу справочника */
.guide-static-index{margin:32px 0;padding:18px;border:1px solid #353535;border-radius:12px}
.guide-static-index summary{cursor:pointer;color:#f2cc68;font-weight:700}
.guide-static-index section{margin-top:20px}
.guide-static-index ul{columns:2;list-style:none;padding:0}
.guide-static-index li{break-inside:avoid;margin:7px 0}
.guide-static-index a{color:inherit}
@media(max-width:700px){.guide-static-index ul{columns:1}}