/* ============================================================
   GEO FIELD GUIDE 2026 — визуальный слой статьи.
   Родня /scan: тот же фосфорный сигнал, но подача «отчёт»,
   а не «терминал». Зелёный = ты в ответе, красный = клик забрали,
   янтарь = спорное место.
   ============================================================ */

.geo-page {
  --sig: #00FF9C;
  --sig-soft: #6BFFC4;
  --amber: #FFC14D;
  --lost: #FF5A6E;
  --off: #1C2620;
  --term-bg: #050A08;
}

/* ---------- шапка статьи ---------- */

.geo-page .article-tag {
  color: var(--sig);
  border-color: rgba(0, 255, 156, 0.4);
  background: linear-gradient(100deg, rgba(0, 255, 156, 0.14), rgba(0, 255, 156, 0.03));
  box-shadow: 0 0 26px rgba(0, 255, 156, 0.16);
}
.geo-page .article-head h1 em {
  color: var(--sig);
  text-shadow: 0 0 14px rgba(0, 255, 156, 0.7), 0 0 54px rgba(0, 255, 156, 0.32);
}
.geo-page .beam-halo { background: linear-gradient(90deg, transparent 10%, rgba(0, 255, 156, 0.13) 48%, transparent 90%); }
.geo-page .fog-a { background: radial-gradient(closest-side, rgba(0, 255, 156, 0.09), transparent 70%); }
.geo-page .fog-b { background: radial-gradient(closest-side, rgba(20, 120, 90, 0.1), transparent 70%); }
.geo-page .pull { border-left-color: var(--sig); background: linear-gradient(100deg, rgba(0, 255, 156, 0.09), transparent 70%); }
.geo-page .check-list li::before { color: var(--sig); }
.geo-page .steps > li::before {
  background: linear-gradient(140deg, rgba(0, 255, 156, 0.22), rgba(0, 255, 156, 0.04));
  border-color: rgba(0, 255, 156, 0.4); color: var(--sig);
}
.geo-page .article-body a:not(.btn) {
  color: var(--sig-soft);
  border-bottom: 1px solid rgba(0, 255, 156, 0.35);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.geo-page .article-body a:not(.btn):hover { color: var(--sig); border-bottom-color: var(--sig); }
.geo-page .sources a { color: var(--sig-soft); }

/* ---------- общая рамка блока данных ---------- */

.fig {
  margin: 34px 0 36px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  padding: 26px 28px 22px;
}
.fig-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.fig-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.fig-src { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em; color: var(--text-faint); }
.fig-src a { color: var(--text-faint) !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; }
.fig-src a:hover { color: var(--sig-soft) !important; }
.fig-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-dim);
}

/* ---------- 100 кликов ---------- */

.clicks {
  display: grid; grid-template-columns: repeat(20, 1fr); gap: 6px;
  margin: 4px 0 6px;
}
.clicks i {
  display: block; aspect-ratio: 1; border-radius: 50%;
  background: var(--sig); box-shadow: 0 0 8px rgba(0, 255, 156, 0.45);
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.clicks i.taken { background: var(--off); box-shadow: none; transform: scale(0.72); }
.clicks-key {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint);
}
.clicks-key b { color: var(--text); font-weight: 400; }
.clicks-key i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: 0;
}
.clicks-key .k-you { background: var(--sig); }
.clicks-key .k-gone { background: var(--off); }

/* ---------- горизонтальные корреляции ---------- */

.corr { display: flex; flex-direction: column; gap: 14px; }
.corr-row { display: grid; grid-template-columns: 190px 1fr 54px; gap: 14px; align-items: center; }
.corr-row .r-name { font-size: 14.5px; line-height: 1.3; }
.corr-row .r-name small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-faint); margin-top: 2px; }
.corr-track { height: 12px; border-radius: 7px; background: var(--off); overflow: hidden; }
.corr-track i {
  display: block; height: 100%; width: 0; border-radius: 7px;
  background: linear-gradient(90deg, rgba(0, 255, 156, 0.45), var(--sig));
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.corr-row.is-weak .corr-track i { background: linear-gradient(90deg, rgba(255, 193, 77, 0.3), var(--amber)); }
.corr-val { font-family: var(--font-mono); font-size: 14px; text-align: right; color: var(--sig); }
.corr-row.is-weak .corr-val { color: var(--amber); }

/* ---------- рост спроса ---------- */

.trend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.trend-cell {
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px;
  background: rgba(0, 0, 0, 0.2);
}
.trend-cell b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.035em; color: var(--sig);
  line-height: 1; margin-bottom: 8px;
}
.trend-cell code {
  display: block; font-family: var(--font-mono); font-size: 11px;
  color: var(--text); background: none; margin-bottom: 6px; word-break: break-word;
}
.trend-cell span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-faint); }

/* ---------- библиотеки движков ---------- */

.engines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.engine {
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 18px;
  background: rgba(0, 0, 0, 0.22);
}
.engine h5 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--sig); margin-bottom: 14px; font-weight: 400;
}
.engine .e-top { font-family: var(--font-head); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.engine .e-share { font-family: var(--font-mono); font-size: 11px; color: var(--amber); margin-bottom: 12px; }
.engine p { font-size: 14px; color: var(--text-dim); }

/* ---------- разрыв: локальный бизнес ---------- */

.gap-fig { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gap-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px;
  background: rgba(0, 0, 0, 0.22); text-align: center;
}
.gap-card.is-lost { border-color: rgba(255, 90, 110, 0.3); }
.gap-card b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(40px, 7vw, 64px); letter-spacing: -0.045em; line-height: 1;
  color: var(--sig); margin-bottom: 10px;
}
.gap-card.is-lost b { color: var(--lost); }
.gap-card p { font-size: 14.5px; color: var(--text-dim); }
.gap-card .g-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--text-faint); margin-bottom: 14px; }

/* ---------- интерактивная карточка счёта ---------- */

.card-score {
  margin: 36px 0 38px; border: 1px solid rgba(0, 255, 156, 0.28); border-radius: 18px;
  background: linear-gradient(150deg, rgba(0, 255, 156, 0.06), rgba(255, 255, 255, 0.015));
  overflow: hidden;
}
.cs-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; border-bottom: 1px solid rgba(0, 255, 156, 0.2);
  background: rgba(0, 255, 156, 0.05);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--sig);
}
.cs-body { padding: 24px 24px 8px; }
.cs-q {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.cs-q:last-of-type { border-bottom: none; }
.cs-q input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px;
  border: 1px solid var(--line-bright); background: rgba(0, 0, 0, 0.35);
  display: grid; place-items: center; font-size: 12px; color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cs-q input:checked + .cs-box { background: var(--sig); border-color: var(--sig); color: #04120C; }
.cs-q input:focus-visible + .cs-box { box-shadow: 0 0 0 3px rgba(0, 255, 156, 0.25); }
.cs-q .cs-text { font-size: 15.5px; line-height: 1.5; }
.cs-q .cs-text small {
  display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; color: var(--text-faint); margin-top: 3px;
}
.cs-out {
  padding: 20px 24px 24px; border-top: 1px solid rgba(0, 255, 156, 0.2);
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
}
.cs-num {
  font-family: var(--font-head); font-weight: 800; font-size: 54px;
  letter-spacing: -0.045em; line-height: 1; color: var(--sig); min-width: 116px;
}
.cs-num s { text-decoration: none; font-size: 22px; color: var(--text-faint); }
.cs-verdict b { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.cs-verdict p { font-size: 14.5px; color: var(--text-dim); margin: 0; }
.card-score.is-mid .cs-num, .card-score.is-mid .cs-verdict b { color: var(--amber); }
.card-score.is-bad .cs-num, .card-score.is-bad .cs-verdict b { color: var(--lost); }
.card-score.is-good .cs-verdict b { color: var(--sig); }

/* ---------- план действий ---------- */

.play { display: flex; flex-direction: column; gap: 8px; margin: 26px 0 32px; }
.play-row {
  display: grid; grid-template-columns: 34px 1fr 96px 96px; gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px 20px;
}
.play-n { font-family: var(--font-mono); font-size: 12px; color: var(--sig); }
.play-what b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.play-what span { font-size: 14px; color: var(--text-dim); }
.play-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-align: center; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--line-bright);
  color: var(--text-faint);
}
.play-tag.hi { color: var(--sig); border-color: rgba(0, 255, 156, 0.35); background: rgba(0, 255, 156, 0.07); }
.play-tag.mid { color: var(--amber); border-color: rgba(255, 193, 77, 0.3); background: rgba(255, 193, 77, 0.06); }
.play-head {
  display: grid; grid-template-columns: 34px 1fr 96px 96px; gap: 14px;
  padding: 0 20px 4px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; color: var(--text-faint);
}
.play-head span:nth-child(3), .play-head span:nth-child(4) { text-align: center; }

/* ---------- врезка «не покупай» ---------- */

.geo-page .warn-box { border-color: rgba(255, 90, 110, 0.32); background: rgba(255, 90, 110, 0.06); }
.geo-page .warn-label { color: var(--lost); }

/* ---------- адаптив ---------- */

@media (max-width: 860px) {
  .trend { grid-template-columns: 1fr 1fr; }
  .engines { grid-template-columns: 1fr; }
  .play-row { grid-template-columns: 26px 1fr; row-gap: 10px; }
  .play-row .play-tag { grid-column: span 1; }
  .play-head { display: none; }
}
@media (max-width: 640px) {
  .fig { padding: 20px 18px 18px; margin: 26px 0 28px; }
  .clicks { grid-template-columns: repeat(10, 1fr); gap: 7px; }
  .corr-row { grid-template-columns: 1fr; gap: 6px; }
  .corr-val { text-align: left; }
  .gap-fig { grid-template-columns: 1fr; }
  .cs-out { grid-template-columns: 1fr; gap: 12px; }
  .cs-num { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clicks i, .corr-track i { transition: none; }
}