/* Аудитор сайтов — в стиле gora-academy.ru: белый/светло-серый фон, фирменный синий,
   тёмно-синие карточки, кнопки-«таблетки», крупные скругления, жирные заголовки. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Onest:wght@400;500;600;700&display=swap');

:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --panel: #f2f4f7;
  --ink: #111317;
  --ink-2: #4a5261;
  --muted: #8a93a3;
  --line: #e4e8ee;
  --line-2: #d3d9e2;
  --track: #e9edf2;
  --blue: #3c9df2;
  --blue-d: #2386dd;
  --blue-bg: #e8f3fe;
  --blue-line: #bcddfb;
  --navy: #1f2d3d;
  --slate: #56677c;
  --orange: #ff7a45;
  --critical: #e5484d;
  --critical-bg: #fdecec;
  --important: #f08a1c;
  --important-bg: #fef1e2;
  --minor: #3c9df2;
  --minor-bg: #e8f3fe;
  --good: #1fa463;
  --good-bg: #e4f6ec;
  --radius: 24px;
  --radius-s: 16px;
  --shadow: 0 1px 2px rgba(17, 19, 23, .04), 0 12px 32px -16px rgba(31, 45, 61, .18);
  --display: 'Montserrat', 'Onest', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 'Onest', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0; }

/* ---------- Логотип и шапка ---------- */
.logo { display: inline-flex; align-items: flex-end; gap: .26em; font: 700 19px/1 var(--display); color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo-mark { height: 1.46em; width: auto; flex: none; }
.logo-word { line-height: .72; letter-spacing: .01em; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-sub { font: 600 13px/1.2 'Onest'; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line-2); white-space: nowrap; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 32px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px;
  border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { border-color: var(--blue); color: var(--blue-d); }
.btn:active { transform: translateY(1px); }
.btn-dark, .btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.btn-dark:hover, .btn-blue:hover { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--panel); padding: 6px 12px; border-radius: 999px; }
.status-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; }
.status-chip.off i { background: var(--critical); }

.score-good { --c: var(--good); --cbg: var(--good-bg); }
.score-mid { --c: var(--important); --cbg: var(--important-bg); }
.score-bad { --c: var(--critical); --cbg: var(--critical-bg); }

/* ---------- Главная ---------- */
.home { max-width: 1040px; margin: 0 auto; padding: 56px 24px 96px; }
.hero { background: var(--card); border-radius: 32px; padding: 48px 48px 40px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--blue-bg) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.hero > * { position: relative; z-index: 1; }
.hero-tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--blue-d); background: var(--blue-bg); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -.02em; line-height: 1.08; position: relative; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero p { margin-top: 16px; font-size: 18px; color: var(--ink-2); max-width: 680px; position: relative; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; position: relative; }
.hero-points span { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); }
.url-form { margin-top: 28px; display: flex; gap: 10px; padding: 8px; background: var(--panel); border-radius: 999px; position: relative; }
.url-form input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; padding: 0 20px; background: transparent; }
.url-form .btn { height: 54px; padding: 0 30px; }
.form-note { margin-top: 12px; font-size: 14px; color: var(--muted); position: relative; }
.warn { margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-s); background: var(--important-bg); color: #7a4300; font-size: 15px; }
.warn code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; }
.err { color: var(--critical); }

.run { margin-top: 24px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px; }
.run-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.run-head h2 { font: 700 20px var(--display); }
.run-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.steps li .ic { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; display: grid; place-items: center; font-size: 13px; }
.steps li.active { color: var(--ink); font-weight: 600; }
.steps li.active .ic { border-color: var(--blue); border-top-color: transparent; animation: spin .9s linear infinite; }
.steps li.done { color: var(--ink-2); }
.steps li.done .ic { border-color: var(--blue); background: var(--blue); color: #fff; }
.steps li .sub { font-weight: 400; color: var(--muted); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.run-log { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); max-height: 140px; overflow: auto; }
.run-log div { padding: 2px 0; }

.history { margin-top: 56px; }
.history h2 { font: 700 24px var(--display); margin-bottom: 18px; }
.audit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.audit-card { position: relative; background: var(--card); border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s; }
.audit-card:hover { transform: translateY(-3px); }
.audit-thumb { aspect-ratio: 16 / 9; background: var(--panel) center top / cover no-repeat; }
.audit-meta { padding: 16px 18px 18px; }
.audit-host { font: 700 16px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 56px; }
.audit-niche { font-size: 13px; color: var(--ink-2); margin-top: 4px; min-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-date { font-size: 12px; color: var(--muted); margin-top: 8px; }
.audit-score { position: absolute; right: 14px; top: 14px; padding: 5px 12px; border-radius: 999px; font: 800 14px var(--display); background: #fff; color: var(--c, var(--ink)); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.audit-del { position: absolute; right: 12px; bottom: 12px; border: 0; background: none; color: var(--muted); font-size: 13px; padding: 4px 8px; border-radius: 999px; opacity: 0; transition: opacity .15s; }
.audit-card:hover .audit-del { opacity: 1; }
.audit-del:hover { color: var(--critical); background: var(--critical-bg); }
.empty { color: var(--muted); }

/* ---------- Отчёт: каркас ---------- */
.report { max-width: 1340px; margin: 0 auto; padding: 32px 32px 96px; }
.layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 36px; align-items: start; }
.minimap { position: sticky; top: 88px; }
.minimap-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; font-weight: 700; }
.minimap-page { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); max-height: calc(100vh - 130px); background: #fff; }
.minimap-page img { width: 100%; }
.minimap-band { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.7); cursor: pointer; display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 3px; }
.minimap-band:hover, .minimap-band.on { background: rgba(60, 157, 242, .18); outline: 2px solid var(--blue); outline-offset: -2px; z-index: 2; }
.minimap-band span { font: 700 10px/1 'Onest'; color: #fff; background: var(--c, var(--navy)); padding: 2px 5px; border-radius: 99px; }

.sec-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 64px 0 20px; }
.sec-title h2 { font: 800 28px var(--display); letter-spacing: -.01em; }
.sec-title > span { color: var(--muted); font-size: 15px; }
.panel { background: var(--card); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.panel.tint { background: var(--blue-bg); box-shadow: none; }
.sub-h { font: 700 16px var(--display); margin: 0 0 12px; }
.muted { color: var(--muted); }
.lead { font-size: 17px; line-height: 1.6; margin-bottom: 18px; color: var(--ink-2); }
.legend { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.9; }
.legend a { color: var(--blue-d); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.dots { margin: 0; padding-left: 18px; }
.dots li { margin: 6px 0; }
.dots li .copy { position: static; margin-left: 6px; vertical-align: middle; }

/* Обложка */
.cover { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; background: var(--card); border-radius: 32px; padding: 40px; box-shadow: var(--shadow); }
.eyebrow { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--blue-d); background: var(--blue-bg); font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.cover h1 { font: 800 clamp(30px, 3.6vw, 46px)/1.1 var(--display); letter-spacing: -.02em; margin-top: 16px; word-break: break-word; }
.cover-niche { margin-top: 12px; font-size: 17px; color: var(--ink-2); }
.cover-verdict { margin-top: 20px; font-size: 17px; line-height: 1.6; }
.cover-facts { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.cover-facts b { color: var(--ink); }
.cover-right { position: relative; }
.browser { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(31, 45, 61, .35); border: 1px solid var(--line); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.browser-bar span { margin-left: 8px; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.ring { position: absolute; left: -30px; bottom: -30px; width: 150px; height: 150px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; }
.ring svg { position: absolute; inset: 10px; transform: rotate(-90deg); }
.ring-num { font: 800 42px/1 var(--display); color: var(--c); letter-spacing: -.03em; text-align: center; }
.ring-sub { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }

.growth { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.growth-card { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 24px; }
.growth-card:nth-child(2) { background: var(--blue); }
.growth-card:nth-child(3) { background: var(--slate); }
.growth-card .k { font: 700 13px var(--display); color: #bfe0ff; text-transform: uppercase; letter-spacing: .05em; }
.growth-card:nth-child(2) .k { color: #fff; opacity: .8; }
.growth-card p { margin-top: 10px; font-size: 16px; line-height: 1.5; }

/* Главные показатели */
.crit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.crit { background: var(--card); border-radius: var(--radius); padding: 20px 20px 22px; box-shadow: var(--shadow); }
.crit-name { font-weight: 700; font-size: 14px; color: var(--ink-2); min-height: 40px; }
.crit-score { font: 800 40px/1 var(--display); color: var(--c); margin-top: 6px; }
.crit-score small { font-size: 16px; color: var(--muted); font-weight: 700; margin-left: 2px; }
.crit p { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }
.sc-bar { height: 6px; background: var(--track); border-radius: 99px; margin: 10px 0; overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: var(--c); border-radius: 99px; }

/* Старый формат оценок (аудиты до обновления) */
.scorecard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; background: var(--card); border-radius: var(--radius); padding: 22px 28px; box-shadow: var(--shadow); }
.sc-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sc-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.sc-top b { font-family: var(--display); color: var(--c); }
.sc-row p { font-size: 14px; color: var(--ink-2); }

/* Чек-листы */
.checklist { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.ck-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.ck-title { font-weight: 700; }
.ck-row p { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.ck-row .ck-fix { color: var(--ink); }
.st { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; }
.st-ok { background: var(--good); }
.st-partial { background: var(--important); }
.st-fail { background: var(--critical); }
.st-na { background: var(--line-2); }

/* Оффер 4У */
.offer-now { background: var(--panel); border-radius: var(--radius-s); padding: 16px 18px; font-size: 18px; font-weight: 600; }
.offer-now .lbl, .ba .lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; color: var(--muted); }
q { quotes: '«' '»'; }
.u-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; }
.u { border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; }
.u-top { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.u-top b { color: var(--c); font-family: var(--display); }
.u p { font-size: 13px; color: var(--ink-2); }
.variants { display: grid; gap: 10px; }
.variant { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--blue-bg); border: 1px solid var(--blue-line); border-radius: var(--radius-s); padding: 14px 110px 14px 14px; font-size: 16px; font-weight: 600; }
.variant-n { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font: 800 14px var(--display); }

/* Воронка, ЦА, лид-магниты */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--panel); }
.chip small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.lvl-hot { background: var(--critical-bg); color: #b4262b; }
.lvl-warm { background: var(--important-bg); color: #a35400; }
.lvl-cold { background: var(--blue-bg); color: #1766b0; }
.legend .chip { padding: 2px 10px; font-size: 12px; }
.sugg { margin-bottom: 12px; }
.sugg p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.seg-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 8px; }
.seg-top h4 { font: 700 16px var(--display); }
.seg p { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.b-ok { background: var(--good-bg); color: var(--good); }
.b-fail { background: var(--critical-bg); color: var(--critical); }
.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel .table-wrap { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius-s); margin-top: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--display); color: var(--c, var(--ink)); }

/* Живое фото или сток */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pic { margin: 0; background: var(--card); border-radius: var(--radius-s); overflow: hidden; box-shadow: var(--shadow); break-inside: avoid; }
.pic-img { position: relative; aspect-ratio: 4 / 3; background: var(--panel); }
.pic-img img { width: 100%; height: 100%; object-fit: cover; }
.pic-img .badge { position: absolute; left: 10px; top: 10px; font-size: 12px; padding: 4px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.badge.v-real { background: var(--good); color: #fff; }
.badge.v-stock { background: var(--critical); color: #fff; }
.badge.v-unclear { background: #fff; color: var(--ink-2); }
.pic figcaption { font-size: 13px; color: var(--ink-2); padding: 10px 12px 12px; }
.pic figcaption a { color: var(--blue-d); white-space: nowrap; }

/* Скорость */
.gauges { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.gauge { display: flex; align-items: center; gap: 14px; }
.gauge svg text { font: 800 22px var(--display); fill: var(--c); }
.gauge b { display: block; font: 700 16px var(--display); }
.gauge span { font-size: 13px; color: var(--muted); }

/* SEO */
.meta-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.meta-row:last-child { border-bottom: 0; }
.meta-name { font-weight: 700; padding-top: 10px; }
.meta-row .ba { margin-top: 0; }
.meta-row .before small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.kw { margin-bottom: 8px; }

/* Разбор по блокам */
.counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.count { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--card); box-shadow: var(--shadow); }
.count i { width: 10px; height: 10px; border-radius: 50%; }
.block { background: var(--card); border-radius: 28px; padding: 28px; margin-bottom: 20px; scroll-margin-top: 84px; box-shadow: var(--shadow); }
.block-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 22px; }
.block-num { font: 800 15px var(--display); background: var(--navy); color: #fff; border-radius: 14px; padding: 9px 11px; min-width: 46px; text-align: center; }
.block-head h3 { font: 700 21px var(--display); }
.block-head h3 small { font: 500 13px 'Onest'; color: var(--muted); margin-left: 6px; }
.block-head p { margin-top: 6px; color: var(--ink-2); }
.fear { display: inline-block; font-size: 13.5px; padding: 5px 12px; border-radius: 999px; margin-top: 10px !important; }
.fear.on { background: var(--good-bg); color: #16683f; }
.fear.off { background: var(--critical-bg); color: #b4262b; }
.pill { font: 800 14px var(--display); padding: 7px 14px; border-radius: 999px; background: var(--cbg); color: var(--c); white-space: nowrap; }
.block-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.block-body.clean { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shot { position: relative; margin: 0; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.shot.sticky { position: sticky; top: 84px; }
.shot img { width: 100%; }
.mk-box { position: absolute; border: 2.5px solid var(--sc); border-radius: 8px; box-shadow: 0 0 0 3px rgba(255,255,255,.55); transition: background .15s, box-shadow .15s; pointer-events: none; }
.mk-num { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--sc); color: #fff; font: 700 13px/28px 'Onest'; text-align: center; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.25); cursor: pointer; z-index: 2; transition: transform .15s; }
.mk-num.hl { transform: scale(1.25); }
.mk-box.hl { background: color-mix(in srgb, var(--sc) 14%, transparent); box-shadow: 0 0 0 4px rgba(255,255,255,.8), 0 0 0 7px var(--sc); }
.sev-critical { --sc: var(--critical); --sbg: var(--critical-bg); }
.sev-important { --sc: var(--important); --sbg: var(--important-bg); }
.sev-minor { --sc: var(--minor); --sbg: var(--minor-bg); }

.issues { display: grid; gap: 14px; align-content: start; }
.issue { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--sc); border-radius: var(--radius-s); padding: 16px 18px; transition: box-shadow .15s; break-inside: avoid; }
.issue.hl { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 25%, transparent); }
.issue.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 40% { background: var(--sbg); } 100% { background: var(--card); } }
.issue-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issue-n { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--sc); color: #fff; font: 700 12px/24px 'Onest'; text-align: center; flex: none; }
.tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--sbg); color: var(--sc); }
.tag.cat { background: var(--panel); color: var(--ink-2); }
.issue h4 { font: 700 16px var(--display); margin-top: 10px; }
.issue p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.issue p b { color: var(--ink); }
.ba { margin-top: 12px; display: grid; gap: 8px; }
.ba > div { border-radius: 14px; padding: 10px 14px; font-size: 15px; position: relative; }
.ba .before { background: var(--panel); color: var(--muted); }
.ba .before q { text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, .5); }
.ba .after { background: var(--blue-bg); border: 1px solid var(--blue-line); color: var(--ink); font-weight: 600; padding-right: 100px; }
.ba .after .lbl { color: var(--blue-d); }
.copy { position: absolute; right: 10px; top: 10px; border: 0; background: #fff; border-radius: 999px; font-size: 12px; font-weight: 600; padding: 4px 10px; color: var(--blue-d); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.copy:hover { background: var(--blue); color: #fff; }
.strengths { padding: 14px 18px; border-radius: var(--radius-s); background: var(--good-bg); }
.strengths h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--good); }
.strengths ul { margin: 0; padding-left: 18px; font-size: 15px; color: #1b4d34; }
.strengths li + li { margin-top: 4px; }
.noissues { color: var(--muted); font-size: 15px; }

.redesign { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line-2); }
.rd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rd-head h4 { font: 700 18px var(--display); display: flex; align-items: center; gap: 10px; }
.rd-head h4::before { content: '✦'; color: var(--blue); }
.rd-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rd-compare figure { margin: 0; }
.rd-compare figcaption { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.rd-compare figure.after figcaption { color: var(--blue-d); }
.rd-compare img { border-radius: 14px; border: 1px solid var(--line); width: 100%; }
.rd-compare figure.after img { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.redesign-ask { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-2); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.redesign-ask .btn { height: 44px; border-color: var(--blue); color: var(--blue-d); }
.redesign-ask .btn:hover { background: var(--blue); color: #fff; }
.rd-rec { font-size: 13px; color: var(--orange); font-weight: 700; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--blue); display: inline-block; animation: spin .8s linear infinite; }
.rd-note { font-size: 13px; color: var(--muted); margin-top: 10px; }

.missing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.miss { background: var(--card); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); break-inside: avoid; }
.miss h4 { font: 700 17px var(--display); display: flex; gap: 10px; }
.miss h4::before { content: '+'; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 17px; line-height: 1; }
.miss p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.miss p b { color: var(--ink); }
.miss .example { margin-top: 12px; padding: 12px 14px; background: var(--blue-bg); border: 1px solid var(--blue-line); border-radius: 14px; font-size: 14px; white-space: pre-wrap; }

.mobile-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; background: var(--card); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); }
.phones { display: flex; gap: 14px; }
.phone { flex: 1; min-width: 0; border: 7px solid var(--navy); border-radius: 26px; overflow: hidden; position: relative; background: #000; }
.phone img { width: 100%; }
.mobile-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fact { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-weight: 600; }
.fact.bad { background: var(--critical-bg); color: var(--critical); }

.plan { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.plan-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); break-inside: avoid; cursor: pointer; }
.plan-row:last-child { border-bottom: 0; }
.plan-row input { width: 20px; height: 20px; accent-color: var(--blue); }
.plan-row.done .plan-step { text-decoration: line-through; color: var(--muted); }
.plan-step a { color: var(--blue-d); font-size: 13px; margin-left: 6px; }
.impact { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.impact-high { background: var(--good-bg); color: var(--good); }
.impact-medium { background: var(--important-bg); color: var(--important); }
.impact-low { background: var(--panel); color: var(--muted); }
.effort { font-size: 13px; color: var(--muted); white-space: nowrap; }

.cover-logo { display: none; margin-bottom: 22px; }
.cover-logo .logo { font-size: 22px; }
.cover-logo > span { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.report-footer { margin-top: 56px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 13px; }
.report-footer .logo { font-size: 14px; color: var(--muted); }
.footer-note { margin-top: 56px; font-size: 13px; color: var(--muted); text-align: center; }
.loading { padding: 120px 0; text-align: center; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; transform: translateX(-50%); }

@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .minimap { display: none; }
  .crit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .topbar { padding: 10px 16px; gap: 10px; }
  .logo { font-size: 15px; }
  .brand-sub { display: none; }
  .topbar-actions { flex-wrap: nowrap; gap: 6px; }
  .topbar .btn { height: 34px; padding: 0 12px; font-size: 12px; }
  #openSite { display: none; }
  .home { padding: 20px 12px 64px; }
  .hero { padding: 28px 20px; border-radius: 24px; }
  .url-form { flex-direction: column; border-radius: 24px; }
  .url-form input { height: 48px; }
  .report { padding: 16px 12px 64px; }
  .cover { padding: 24px 20px; border-radius: 24px; }
  .cover, .block-body, .block-body.clean, .rd-compare, .missing-grid, .mobile-wrap, .scorecard, .two-col, .grid2, .checklist, .u-grid { grid-template-columns: minmax(0, 1fr); }
  .growth, .crit-grid { grid-template-columns: minmax(0, 1fr); }
  .crit-name { min-height: 0; }
  .ring { left: auto; right: 12px; bottom: -28px; width: 120px; height: 120px; }
  .ring-num { font-size: 32px; }
  .block { padding: 18px; border-radius: 22px; }
  .shot.sticky { position: relative; top: 0; }
  .meta-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .plan-row { grid-template-columns: 32px minmax(0, 1fr); }
  .plan-row .impact, .plan-row .effort { grid-column: 2; justify-self: start; }
  .sec-title h2 { font-size: 22px; }
}

/* ---------- Печать / PDF (печатается в масштабе 0.7, раскладка остаётся «компьютерной») ---------- */
@media print {
  @page { size: A4; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
  body { background: #fff; }
  .topbar, .minimap, .copy, .rd-actions, .no-print { display: none !important; }
  .cover-logo { display: block; }
  .crit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crit-grid, .crit { break-inside: avoid; }
  .report { padding: 0; max-width: none; }
  .layout { display: block; }
  .cover, .panel, .block, .crit, .checklist, .plan, .miss, .table-wrap, .mobile-wrap, .pic, .scorecard { border: 1px solid var(--line); }
  .ring { border: 1px solid var(--line); }
  .sec-title { margin: 36px 0 16px; break-after: avoid; }
  .blocks-title { break-before: page; }
  .block { break-inside: auto; }
  .block-head { break-after: avoid; }
  .shot, .shot.sticky { position: relative; top: 0; break-inside: avoid; }
  .issue, .miss, .plan-row, .strengths, .ck-row, .crit, .u, .variant, .seg, .pic, .meta-row, .tbl tr { break-inside: avoid; }
  .redesign, .mobile-wrap, .growth, .gauges { break-inside: avoid; }
}