/* processor-rating.ru — mobile-first, system fonts, без внешних зависимостей */
:root {
    --c-bg: #ffffff;
    --c-text: #1c2430;
    --c-muted: #5b6675;
    --c-brand: #1e4fd8;
    --c-brand-dark: #16367e;
    --c-brand-soft: #eef2fc;
    --c-line: #e3e8ef;
    --c-soft: #f4f6fa;
    --c-zebra: #fafbfd;
    --c-win: #e7f6ea;
    --c-win-text: #1c6b2f;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(28, 36, 48, 0.06), 0 4px 14px rgba(28, 36, 48, 0.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
}

.wrap, main { max-width: 960px; margin: 0 auto; padding: 0 16px; --wrap-pad: 16px; }
main { padding-top: 8px; padding-bottom: 40px; }

h1 { font-size: 1.55rem; line-height: 1.25; margin: 0.7em 0 0.5em; }
h2 { font-size: 1.2rem; margin: 1.6em 0 0.6em; padding-left: 10px; border-left: 3px solid var(--c-brand); }
p { margin: 0.6em 0; }
a { color: var(--c-brand); }
a:hover { color: var(--c-brand-dark); }
.lead { font-size: 1.05rem; color: var(--c-muted); }
.note { font-size: 0.85rem; color: var(--c-muted); }
.updated { font-size: 0.85rem; color: var(--c-muted); margin-top: 2.5em; padding-top: 10px; border-top: 1px solid var(--c-line); }

/* --- header --- */
.site-header { background: var(--c-bg); border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--c-brand), #7aa2ff 55%, var(--c-line)) 1; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 10px; padding-bottom: 10px; }
.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--c-text);
    min-width: 0;
}
.logo-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.15; }
.logo-name { display: block; }
.logo-name span { color: var(--c-brand); }
.logo-tagline {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-muted);
    white-space: nowrap;
}
.logo-icon { color: var(--c-brand); flex: none; }
.nav-toggle { display: none; }
.site-nav { min-width: 0; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 2px 14px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    color: var(--c-brand);
}
.site-nav a:hover { border-bottom-color: var(--c-brand); }
.site-nav a[aria-current] { font-weight: 700; color: var(--c-text); border-bottom-color: var(--c-brand); }
.site-nav .nav-ico { display: none; flex: none; }
/* поиск процессора в шапке */
.header-search {
    position: relative;
    z-index: 6;
    flex: 1 1 180px;
    max-width: 300px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.header-search .hs-toggle { display: none; }
.header-search input {
    width: 100%;
    padding: 7px 12px;
    font-size: 0.9rem;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    background: var(--c-soft);
}
.header-search input:focus { outline: 2px solid var(--c-brand); outline-offset: -1px; background: var(--c-bg); }

/* mobile: лого | Меню | лупа; панель меню — wrap без скролла; поиск: строка + лупа справа */
@media (max-width: 719px) {
    .site-header .wrap { gap: 10px 8px; padding-top: 12px; padding-bottom: 14px; }
    .logo { flex: 1 1 auto; min-width: 0; order: 1; font-size: 1.08rem; }
    .logo-tagline { font-size: 0.52rem; letter-spacing: 0.05em; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        order: 1;
        flex: none;
        height: 40px;
        padding: 0 14px;
        border: 1px solid #c8d0dc;
        border-radius: 999px;
        background: var(--c-bg);
        color: var(--c-text);
        font: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    }
    .nav-toggle-ico { flex: none; opacity: 0.9; }
    .nav-toggle:hover,
    .nav-toggle:focus-visible {
        color: var(--c-brand);
        border-color: var(--c-brand);
        background: var(--c-brand-soft);
        outline: none;
    }
    .nav-toggle[aria-expanded="true"] {
        color: #fff;
        background: var(--c-brand);
        border-color: var(--c-brand);
        box-shadow: none;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-ico { opacity: 1; }
    .header-search {
        flex: 0 0 auto;
        order: 1;
        max-width: none;
        margin-left: 0;
        width: auto;
        z-index: 2;
        gap: 8px;
    }
    .header-search .hs-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--c-text);
        cursor: pointer;
    }
    .header-search .hs-toggle:hover,
    .header-search .hs-toggle:focus-visible { background: var(--c-brand-soft); outline: none; color: var(--c-brand); }
    .header-search:not(.is-open) input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .header-search.is-open {
        flex: 1 1 100%;
        order: 3;
        width: 100%;
        max-width: none;
        align-items: stretch;
    }
    .header-search.is-open input {
        position: static;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        height: 40px;
        margin: 0;
        padding: 0 12px;
        clip: unset;
        overflow: visible;
        white-space: normal;
        border-radius: 8px;
    }
    .header-search.is-open .hs-toggle {
        width: 40px;
        height: 40px;
        border-color: #c8d0dc;
        border-radius: 8px;
        background: var(--c-brand-soft);
        color: var(--c-brand);
    }
    .site-nav {
        display: none;
        flex: 1 1 100%;
        order: 2;
        width: 100%;
        margin: 0;
        overflow: visible;
    }
    .site-nav.is-open { display: block; }
    .site-nav ul {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding: 2px 0 0;
    }
    .site-nav li { flex: none; }
    .site-nav a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        font-size: 0.84rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--c-text);
        background: var(--c-bg);
        border: 1px solid #c8d0dc;
        border-radius: 999px;
        border-bottom-width: 1px;
        white-space: nowrap;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    }
    .site-nav .nav-ico { display: block; width: 16px; height: 16px; opacity: 0.92; }
    .site-nav .nav-ico--brand { width: 18px; height: 18px; }
    .site-nav a:hover {
        color: var(--c-brand);
        border-color: var(--c-brand);
        background: var(--c-brand-soft);
    }
    .site-nav a[aria-current] {
        color: #fff;
        background: var(--c-brand);
        border-color: var(--c-brand);
        font-weight: 700;
        box-shadow: none;
    }
    .site-nav a[aria-current] .nav-ico { opacity: 1; }
    .site-nav a[aria-current]:hover {
        color: #fff;
        background: var(--c-brand-dark);
        border-color: var(--c-brand-dark);
    }
}

/* desktop ≥720: одна строка logo | nav+иконки | короткий поиск (расширяется влево поверх меню) */
@media (min-width: 720px) {
    .site-header .wrap {
        flex-wrap: nowrap;
        gap: 10px 14px;
        align-items: center;
    }
    .logo { flex: none; order: 0; font-size: 1.12rem; }
    .logo-tagline { font-size: 0.55rem; }
    .nav-toggle { display: none; }
    .site-nav {
        display: block;
        flex: 1 1 auto;
        order: 0;
        width: auto;
        min-width: 0;
        margin: 0;
        margin-left: 5px;
        overflow: visible;
        position: relative;
        z-index: 1;
    }
    .site-nav ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 2px 12px;
        width: auto;
        padding: 0;
    }
    .site-nav li { flex: none; }
    .site-nav .nav-ico {
        display: block;
        width: 15px;
        height: 15px;
        opacity: 0.9;
    }
    .site-nav .nav-ico--brand { width: 17px; height: 17px; }
    .site-nav a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 3px;
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.2;
        color: var(--c-brand);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        white-space: nowrap;
        box-shadow: none;
    }
    .site-nav a:hover {
        color: var(--c-brand-dark);
        background: transparent;
        border-color: transparent;
        border-bottom-color: var(--c-brand);
    }
    .site-nav a[aria-current] {
        color: var(--c-text);
        background: transparent;
        border-color: transparent;
        border-bottom-color: var(--c-brand);
        font-weight: 700;
    }
    .site-nav a[aria-current] .nav-ico { opacity: 1; }
    .site-nav a[aria-current]:hover {
        color: var(--c-text);
        background: transparent;
        border-bottom-color: var(--c-brand);
    }
    .header-search {
        flex: 0 0 auto;
        order: 0;
        width: 100px;
        max-width: none;
        margin-left: 0;
        z-index: 8;
        transition: width 0.22s ease;
    }
    .header-search .hs-toggle { display: none; }
    .header-search:focus-within {
        width: min(340px, 38vw);
    }
    .header-search input,
    .header-search.is-open input,
    .header-search:not(.is-open) input {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 7px 6px;
        font-size: 0.76rem;
        overflow: visible;
        clip: unset;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid var(--c-line);
        box-shadow: none;
        transition: box-shadow 0.22s ease;
    }
    .header-search:focus-within input {
        white-space: normal;
        text-overflow: clip;
        box-shadow: -8px 0 20px 4px rgba(255, 255, 255, 0.9);
        background: var(--c-bg);
    }
}

/* --- breadcrumbs --- */
.breadcrumbs { font-size: 0.85rem; margin-top: 12px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; color: var(--c-muted); }
.breadcrumbs li + li::before { content: "›"; margin-right: 4px; color: var(--c-muted); opacity: 0.5; }
.breadcrumbs a { text-decoration: none; }

/* --- таблицы --- */
/* overflow-y:hidden обязателен: иначе overflow-x:auto → used overflow-y:auto,
   и полоса гориз. скролла (таблица min-width:640) даёт «пустую» строку + верт. скролл */
.table-wrapper { overflow-x: auto; overflow-y: hidden; margin: 12px 0; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
thead th { background: var(--c-soft); font-size: 0.85rem; white-space: nowrap; border-bottom: 2px solid var(--c-line); }
tbody tr:nth-child(even) { background: var(--c-zebra); }
tbody tr:hover { background: var(--c-brand-soft); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
tbody th[scope="row"] { font-weight: 600; }
td.win { background: var(--c-win); color: var(--c-win-text); font-weight: 700; }
td.num { text-align: right; }
/* caption: a11y-имя таблицы; визуально компактно, без дубля соседнего h2 */
caption {
    caption-side: top;
    text-align: left;
    padding: 8px 12px 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-muted);
}
.rating-table td:first-child { color: var(--c-muted); }
.rating-table tbody th[scope="row"] a { text-decoration: none; }
.rating-table tbody th[scope="row"] a:hover { text-decoration: underline; }
/* фиксированные ширины: таблицы рейтингов не «скачут» при переходе между хабами */
.rating-table { table-layout: fixed; min-width: 640px; }
.rating-table th:nth-child(1) { width: 6%; }
.rating-table th:nth-child(2) { width: 36%; }
.rating-table th:nth-child(3) { width: 11%; }
.rating-table th:nth-child(4) { width: 14%; }
.rating-table th:nth-child(5) { width: 15%; }
.rating-table th:nth-child(6) { width: 9%; }
.rating-table th:nth-child(7) { width: 9%; }
.rating-table td, .rating-table th { overflow: hidden; text-overflow: ellipsis; }
/* ячейка с меткой разбора: не clip absolute-tooltip (ellipsis на имени остаётся у <a>) */
.rating-table th:has(.row-mark),
.rating-table td:has(.row-mark),
.rating-table th:has(.vs-mark),
.rating-table td:has(.vs-mark) {
    overflow: visible;
}
/* при показе тултипа — wrapper не обрезает; иначе overflow-x:auto → clip по Y */
.table-wrapper:has(.row-mark:hover),
.table-wrapper:has(.row-mark:focus),
.table-wrapper:has(.row-mark:focus-visible),
.table-wrapper:has(.vs-mark:hover),
.table-wrapper:has(.vs-mark:focus),
.table-wrapper:has(.vs-mark:focus-visible) {
    overflow: visible;
}
/* главная: в таблицах колонка «тип» вместо TDP — свои ширины */
.home .rating-table th:nth-child(2) { width: 32%; }
.home .rating-table th:nth-child(6) { width: 12%; }
.home .rating-table th:nth-child(7) { width: 8%; }

/* метка разбора: SVG вне анкора; смысл в aria-label + легенда + tooltip */
.vs-mark, .row-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 5px;
    border: 0;
    border-radius: 4px;
    background: var(--c-brand-soft);
    color: var(--c-brand-dark);
    cursor: help;
    outline: none;
    z-index: 1;
}
.vs-mark:hover, .vs-mark:focus, .vs-mark:focus-visible,
.row-mark:hover, .row-mark:focus, .row-mark:focus-visible {
    z-index: 30;
}
.vs-links .vs-mark { background: var(--c-bg); }
.vs-mark .mark-icon, .row-mark .mark-icon {
    display: block;
    width: 15px;
    height: 15px;
}
.vs-mark:focus-visible, .row-mark:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
}
.vs-mark::before, .row-mark::before {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateX(-50%);
    z-index: 100;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 6px;
    background: #1a1f2e;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}
.vs-mark:hover::before, .vs-mark:focus::before, .vs-mark:focus-visible::before,
.row-mark:hover::before, .row-mark:focus::before, .row-mark:focus-visible::before {
    opacity: 1;
    visibility: visible;
}
@media (hover: none) {
    /* mobile/tablet: тултип по tap (focus), не по «вечному» hover */
    .vs-mark:hover:not(:focus)::before,
    .row-mark:hover:not(:focus)::before {
        opacity: 0;
        visibility: hidden;
    }
}
.mark-legend {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 0.88rem;
    color: var(--c-muted);
    line-height: 1.4;
}
.mark-legend .mark-icon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--c-brand-dark);
    margin-top: 2px;
}
.expert-jump {
    margin: -4px 0 14px;
    font-size: 0.95rem;
}
.expert-jump a { text-decoration: none; }
.expert-jump a:hover { text-decoration: underline; }

/* хаб бренда: лого + цифры каталога (Intel/AMD) */
.rating-page .brand-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 8px 0 12px; }
.rating-page .brand-hero .brand-logo {
    flex: none; width: 140px; height: 48px; object-fit: contain; margin: 0;
    background: #fff; border: 1px solid var(--c-line); border-radius: 8px;
    padding: 8px 14px; box-sizing: border-box;
}
.rating-page .brand-hero-text { min-width: 0; flex: 1; }
.rating-page .brand-hero h1 { margin: 0; }
.rating-page .brand-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 18px; }
.rating-page .brand-facts > div {
    background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
    padding: 12px 14px; box-shadow: var(--shadow);
}
.rating-page .brand-facts dt { font-size: 0.78rem; color: var(--c-muted); margin: 0; }
.rating-page .brand-facts dd { margin: 4px 0 0; font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.rating-page .brand-facts dd a { text-decoration: none; }
.rating-page .brand-facts dd a:hover { text-decoration: underline; }
.rating-page .brand-facts dd span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--c-muted); margin-top: 2px; }
@media (max-width: 559px) { .rating-page .brand-facts { grid-template-columns: 1fr; } }
/* спеки на карточке: ровные колонки 50/50 */
.cpu-card section table th[scope="row"] { width: 48%; font-weight: 600; }

/* --- карточка CPU --- */
.score-panel { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 18px; margin: 16px 0; box-shadow: var(--shadow); }
.score-main { min-width: 220px; }
.brand-logo { display: block; height: 24px; width: auto; margin-bottom: 10px; }
.score-value { display: block; font-size: 2.1rem; font-weight: 800; color: var(--c-brand); line-height: 1.1; }
.score-label { display: block; font-size: 0.8rem; color: var(--c-muted); max-width: 220px; }
.score-bar { margin-top: 10px; height: 6px; border-radius: 3px; background: var(--c-line); overflow: hidden; max-width: 220px; }
.score-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--c-brand), #7aa2ff); min-width: 3px; }
.score-meta { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; display: grid; gap: 6px 24px; }
@media (min-width: 560px) { .score-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- плитки «главное» на карточке CPU --- */
.spec-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.hl-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.hl-icon { color: var(--c-brand); margin-bottom: 4px; }
.hl-value { font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.hl-label { font-size: 0.78rem; color: var(--c-muted); }
@media (min-width: 560px) { .spec-highlights { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .spec-highlights { grid-template-columns: repeat(5, 1fr); } }

/* --- сравнение --- */
.vs-head { display: flex; align-items: stretch; gap: 12px; margin: 16px 0; }
.vs-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px 14px; text-align: center; box-shadow: var(--shadow); }
.vs-side.winner { border: 2px solid var(--c-brand); }
.vs-side .brand-logo { height: 20px; margin: 0 0 8px; }
.vs-side a { font-weight: 700; text-decoration: none; display: block; margin-bottom: 6px; }
.vs-divider { align-self: center; font-weight: 800; color: var(--c-muted); }
.winner-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--c-brand-dark); background: var(--c-brand-soft); border-radius: 99px; padding: 3px 10px; }
.trophy-icon { flex: none; }
.verdict { background: var(--c-win); color: var(--c-win-text); border-radius: var(--radius); padding: 12px 16px; }

/* --- зелёные полосы производительности (vs) --- */
.perf-block { margin: 18px 0; }
/* метки-реперы (популярные CPU) над и под полосами */
.perf-scale { position: relative; }
.perf-labels { position: relative; height: 1.5em; margin: 2px 0; }
.perf-labels a { position: absolute; transform: translateX(-50%); font-size: 0.72rem; color: var(--c-muted); text-decoration: none; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.perf-labels a:hover { color: var(--c-brand); text-decoration: underline; }
.perf-labels a:first-child { transform: translateX(-25%); }
/* метка у правого края шкалы (топ-CPU на 100 баллах): не вылезать за колонку */
.perf-labels a.perf-edge { transform: translateX(-100%); }
.perf-line { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(28, 36, 48, 0.3); z-index: 1; pointer-events: none; }
@media (max-width: 560px) { .perf-labels { display: none; } .perf-line { border-left-color: rgba(28, 36, 48, 0.18); } }
/* обе полосы всегда одной высоты (grid выравнивает по самой высокой) */
.perf-block .perf-bars { display: grid; grid-auto-rows: 1fr; gap: 10px; margin: 12px 0; }
.perf-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #edf0f4; border-radius: 8px; padding: 10px 14px; overflow: hidden; min-height: 56px; }
.perf-fill { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, #2fae4a, #52c96b); border-radius: 8px 0 0 8px; min-width: 4px; }
.perf-info { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* фиксированная пилюля лого: у Intel/AMD/Apple разные пропорции — бокс один, лого вписывается */
.perf-info .brand-logo { flex: none; width: 64px; height: 26px; object-fit: contain; margin: 0; background: #fff; border-radius: 5px; padding: 3px 6px; box-shadow: 0 1px 2px rgba(28, 36, 48, 0.15); box-sizing: border-box; }
.perf-text { display: flex; flex-direction: column; min-width: 0; }
.perf-text a { font-weight: 700; text-decoration: none; color: var(--c-text); }
.perf-text a:hover { text-decoration: underline; color: var(--c-text); }
.perf-text small { font-size: 0.78rem; color: rgba(28, 36, 48, 0.72); }
.perf-score { position: relative; flex: none; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.15rem; color: var(--c-brand-dark); white-space: nowrap; }
.perf-diff { font-style: normal; font-size: 0.78rem; font-weight: 700; color: #fff; background: #2fae4a; border-radius: 99px; padding: 2px 8px; }
@media (max-width: 560px) {
    .perf-bar { padding: 8px 10px; gap: 8px; }
    .perf-info { gap: 8px; }
    .perf-info .brand-logo { width: 52px; height: 24px; }
    .perf-text a { font-size: 0.92rem; }
    .perf-text small { font-size: 0.7rem; }
    .perf-score { flex-direction: column; align-items: flex-end; gap: 2px; font-size: 1rem; }
}

/* хаб /socket/: карточки разъёмов — 1 кол. моб / 2 на десктопе */
.sockets-index .socket-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 14px 0 22px;
}
@media (min-width: 560px) {
    .sockets-index .socket-grid { grid-template-columns: 1fr 1fr; }
}
.sockets-index .socket-card {
    position: relative;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sockets-index .socket-card:hover,
.sockets-index .socket-card:has(.socket-card__link:focus-visible) {
    border-color: var(--c-brand);
    box-shadow: 0 1px 3px rgba(28, 36, 48, 0.08), 0 6px 18px rgba(30, 79, 216, 0.12);
}
.sockets-index .socket-card h3 { margin: 0 0 6px; font-size: 1.12rem; }
.sockets-index .socket-card .row-mark {
    position: relative;
    z-index: 2;
}
.sockets-index .socket-card:has(.row-mark:hover),
.sockets-index .socket-card:has(.row-mark:focus),
.sockets-index .socket-card:has(.row-mark:focus-visible) {
    overflow: visible;
}
.sockets-index .socket-card__link {
    text-decoration: none;
    color: var(--c-text);
}
.sockets-index .socket-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.sockets-index .socket-card:hover .socket-card__link,
.sockets-index .socket-card__link:focus-visible {
    color: var(--c-brand);
    text-decoration: underline;
}
.sockets-index .socket-card__link:focus-visible {
    outline: none;
}
.sockets-index .socket-card__link:focus-visible::after {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}
.sockets-index .socket-card p { margin: 0; font-size: 0.86rem; color: var(--c-muted); }
.sockets-index .socket-card p + p { margin-top: 4px; }
.sockets-index .socket-card__leader {
    position: relative;
    z-index: 1;
    color: var(--c-brand);
    text-decoration: none;
}
.sockets-index .socket-card__leader:hover,
.sockets-index .socket-card__leader:focus-visible {
    text-decoration: underline;
    color: var(--c-brand-dark);
}
.sockets-index .socket-card__leader:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- списки ссылок --- */
.link-list { padding-left: 1.2em; margin: 8px 0; }
.link-list li { margin: 4px 0; }
/* блоки сравнений — чипы */
.vs-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0; }
.vs-links li {
    list-style: none; margin: 0; display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.88rem; background: var(--c-soft); border: 1px solid var(--c-line);
    border-radius: 99px; padding: 6px 10px 6px 14px;
    transition: border-color 0.15s, background 0.15s;
}
.vs-links li:has(a:hover), .vs-links li:has(a:focus-visible) {
    border-color: var(--c-brand); background: var(--c-brand-soft);
}
.vs-links a {
    display: inline; text-decoration: none; color: var(--c-text);
    background: transparent; border: 0; padding: 0; border-radius: 0;
}
.vs-links a:hover, .vs-links li:has(a:hover) a { color: var(--c-brand-dark); }
.vs-links .vs-mark { margin-left: 4px; }

/* --- виджет сравнения --- */
.compare-widget { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px; margin: 12px 0 20px; box-shadow: var(--shadow); }
.breadcrumbs + .compare-widget { margin-top: 10px; }
.compare-widget::after {
    content: "Вводите в любом порядке, любые цифры или буквы, например: \"5500\", или \"i5\", \"12400\" и пр.";
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--c-muted);
}
#compare-form { display: grid; gap: 12px; }
.cw-field { position: relative; }
.cw-field label { display: block; font-size: 0.85rem; color: var(--c-muted); margin-bottom: 4px; }
.cw-field input { width: 100%; padding: 10px 12px; font-size: 1rem; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-bg); transition: border-color 0.15s; }
.cw-field input:hover { border-color: #c4cdd9; }
.cw-field input:focus { outline: 2px solid var(--c-brand); outline-offset: -1px; }
/* ширина выпадашки — под контент (не зажата инпутом), пункты не переносятся */
.cw-dropdown { position: absolute; z-index: 10; left: 0; top: 100%; min-width: 100%; width: max-content; max-width: min(420px, calc(100vw - 24px)); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 8px; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(28, 36, 48, 0.12); }
.cw-dropdown li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 0.95rem; display: flex; justify-content: space-between; gap: 16px; white-space: nowrap; }
.cw-dropdown li > span:first-child { overflow: hidden; text-overflow: ellipsis; }
/* поиск у правого края шапки — растём влево, чтобы не вылезать за экран */
.header-search .cw-dropdown { left: auto; right: 0; }
.cw-dropdown li:hover, .cw-dropdown li.active { background: var(--c-brand-soft); }
.cw-dropdown .cw-score { color: var(--c-muted); font-size: 0.85rem; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-size: 1rem; font-weight: 700; color: #fff; background: var(--c-brand); border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.btn-primary:hover { background: var(--c-brand-dark); }
.btn-primary:active { transform: translateY(1px); }

/* mobile: компактная высота виджета (лейблы → sr-only, плотнее gaps, без хинта) */
@media (max-width: 719px) {
    .compare-widget { padding: 12px; margin: 10px 0 16px; }
    .compare-widget::after { display: none; }
    .compare-widget #compare-form { gap: 8px; }
    .compare-widget .cw-field label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .compare-widget .cw-field input { padding: 8px 10px; font-size: 0.95rem; }
    .compare-widget .vs-divider {
        font-size: 0.72rem;
        line-height: 1;
        letter-spacing: 0.06em;
        padding: 0;
        text-align: center;
    }
    .compare-widget .btn-primary { padding: 8px 16px; font-size: 0.95rem; gap: 6px; }
    .compare-widget .btn-primary svg { width: 16px; height: 16px; }
}

@media (min-width: 720px) {
    h1 { font-size: 1.9rem; }
    #compare-form { grid-template-columns: 1fr auto 1fr auto; align-items: end; }
    #compare-form .vs-divider { padding-bottom: 0; }
    /* desktop: лейблы скрыты (как на mobile), подсказка — ::after */
    .compare-widget .cw-field label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .compare-widget .cw-field input { padding: 10px 12px; font-size: 1rem; }
    .compare-widget .btn-primary { padding: 12px 24px; font-size: 1rem; gap: 8px; }
    .compare-widget .btn-primary svg { width: 18px; height: 18px; }
}

/* --- ресёрч-блоки (карточка CPU / vs) --- */
.research-stack { margin: 28px 0 8px; border-top: 2px solid var(--c-brand); padding-top: 4px; }
.research-stack .research { margin: 18px 0; }
.research-stack h2 { font-size: 1.12rem; }
.research.verdict-box { background: var(--c-brand-soft); border-radius: var(--radius); padding: 16px 18px; }
.research.verdict-box h2 { border-left: none; padding-left: 0; margin-top: 0; }
.research.verdict-box p { margin: 0.4em 0 0; font-size: 1.02rem; }
.research .who-list, .research .gotcha-list, .research .owner-flat { padding-left: 1.25em; margin: 8px 0; }
.research .who-list li, .research .gotcha-list li, .research .owner-flat li { margin: 7px 0; }
.research .owner-grid { display: grid; gap: 12px; }
.research .owner-col { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.research .owner-col h3 { margin: 0 0 6px; font-size: 0.95rem; }
.research .owner-col.praise h3 { color: var(--c-win-text); }
.research .owner-col.complaints h3 { color: #a33a2b; }
.research .owner-col ul { margin: 0; padding-left: 1.2em; font-size: 0.93rem; }
.research .owner-col li { margin: 6px 0; }
.research .build-list, .research .price-list, .research .faq-list { margin: 8px 0; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 16px; }
.research dt { font-weight: 600; margin-top: 10px; }
.research dd { margin: 2px 0 10px 0; }
.research .price-list dt { display: inline-block; min-width: 90px; }
.research .faq-list dt { font-size: 0.98rem; }
.research .faq-list dd { color: var(--c-text); margin-bottom: 14px; }
.research .sources-list { font-size: 0.88rem; }
.research .sources-list li { margin: 5px 0; }
@media (min-width: 640px) { .research .owner-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } }

/* --- пагинация каталога (окно номеров) --- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 20px 0; font-size: 0.95rem; }
.pagination-pages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0; }
.pagination-pages li { margin: 0; }
.pagination a,
.pagination-current { display: inline-block; text-decoration: none; border: 1px solid var(--c-line); border-radius: 8px; padding: 8px 12px; min-width: 2.4em; text-align: center; transition: border-color 0.15s, background 0.15s; }
.pagination a:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.pagination-current { color: var(--c-fg); background: var(--c-brand-soft); border-color: var(--c-brand); font-weight: 600; }
.pagination-gap span { color: var(--c-muted); padding: 0 4px; border: 0; }
.pagination-prev,
.pagination-next { padding: 8px 14px; }

/* --- footer --- */
.site-footer { border-top: 1px solid var(--c-line); margin-top: 40px; background: var(--c-soft); }
.site-footer .wrap { padding: 20px 16px 28px; font-size: 0.83rem; color: var(--c-muted); }
.footer-nav { margin-bottom: 12px; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: var(--c-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
.footer-nav a:hover { color: var(--c-brand); border-bottom-color: var(--c-brand); }