.bv-reviews *,

.bv-project-block *,

.bv-home-teaser * {

    box-sizing: border-box;

}



.bv-reviews,

.bv-project-block,

.bv-home-teaser {

    font-family: inherit;

    color: var(--ink, #1a1a1a);

    overflow-wrap: anywhere;

}



.bv-hero {

    margin-bottom: 16px;

}



.bv-hero h1 {

    margin: 0 0 8px;

    font-size: 1.8rem;

    line-height: 1.2;

    color: var(--ink, #1a1a1a);

}



.bv-lead,

.bv-subtitle,

.bv-teaser-text {

    margin: 0;

    color: var(--ink-2, #444);

    line-height: 1.5;

}



.bv-search-wrap {

    width: 100%;

    margin-bottom: 12px;

}



.bv-search {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface, #fff);

    color: var(--ink, #1a1a1a);

    font: inherit;

    font-size: 16px;

    outline: none;

}



.bv-search:focus {

    border-color: var(--brand-primary, #1f4d3a);

    box-shadow: 0 0 0 3px var(--brand-primary-soft, #edf3ef);

}



.bv-summary {

    margin: 8px 0 12px;

}



.bv-summary-line {

    font-size: 1.05rem;

    color: var(--ink, #1a1a1a);

}



.bv-summary-muted {

    margin-top: 4px;

    color: var(--ink-muted, #777);

    font-size: 0.85rem;

}



.bv-chips {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    max-width: 100%;

    padding: 4px 0 8px;

    scrollbar-width: thin;

    -webkit-overflow-scrolling: touch;

}



@media (min-width: 768px) {

    .bv-chips {

        flex-wrap: wrap;

        overflow-x: visible;

    }

}



.bv-chip {

    flex: 0 0 auto;

    padding: 8px 12px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: 999px;

    background: var(--surface, #fff);

    color: var(--ink-2, #444);

    font: inherit;

    font-size: 0.9rem;

    cursor: pointer;

    white-space: nowrap;

    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

}



.bv-chip:hover {

    border-color: var(--brand-primary, #1f4d3a);

    color: var(--brand-primary, #1f4d3a);

}



.bv-chip.is-active {

    background: var(--brand-primary-soft, #edf3ef);

    border-color: var(--brand-primary, #1f4d3a);

    color: var(--brand-primary, #1f4d3a);

    font-weight: 600;

}



.bv-results {

    margin-top: 16px;

}



.bv-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 16px;

}



@media (min-width: 768px) {

    .bv-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1100px) {

    .bv-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



.bv-card {

    border: 1px solid var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface, #fff);

    padding: 16px;

    overflow-wrap: anywhere;

}



.bv-card--highlighted {

    border-color: var(--brand-primary, #1f4d3a);

    box-shadow: 0 0 0 3px var(--brand-primary-soft, #edf3ef);

}



.bv-card h3 {

    margin: 0 0 4px;

    font-size: 1.2rem;

    color: var(--ink, #1a1a1a);

}



.bv-city,

.bv-stats,

.bv-topics,

.bv-topic-filter-note {

    color: var(--ink-2, #444);

    margin-bottom: 8px;

    line-height: 1.45;

}



.bv-city {

    color: var(--ink-muted, #777);

}



.bv-coverage-badge {

    display: inline-block;

    margin: 8px 0;

    padding: 4px 9px;

    border-radius: 999px;

    background: var(--surface-sunken, #f5f5f4);

    border: 1px solid var(--border, #e5e2dc);

    color: var(--ink-2, #444);

    font-size: 0.8rem;

    font-weight: 600;

}



.bv-link {

    display: inline-block;

    margin-top: 12px;

    color: var(--brand-primary, #1f4d3a);

    text-decoration: none;

    font-weight: 600;

}



.bv-link:hover {

    text-decoration: underline;

}



.bv-quiet-section {

    margin-top: 24px;

    padding: 16px;

    border: 1px dashed var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface-sunken, #f5f5f4);

}



.bv-quiet-title {

    margin: 0 0 6px;

    color: var(--ink-2, #444);

    font-weight: 700;

}



.bv-quiet-text {

    margin: 0 0 12px;

    color: var(--ink-muted, #777);

}



.bv-quiet-list {

    margin: 0;

    padding: 0;

    list-style: none;

    color: var(--ink-2, #444);

}



.bv-quiet-list li {

    margin-bottom: 6px;

}



.bv-empty {

    padding: 32px 16px;

    text-align: center;

    color: var(--ink-muted, #777);

    border: 1px dashed var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface-sunken, #f5f5f4);

}



.bv-error {

    padding: 16px;

    border: 1px solid var(--critical, #b91c1c);

    border-radius: var(--radius-card, 12px);

    background: var(--surface-sunken, #f5f5f4);

    color: var(--critical, #b91c1c);

}



/* Project block - one analytical card, not a run of text on the page background */



.bv-project-block {

    padding: 20px 22px;

    border: 1px solid color-mix(in srgb, var(--brand-primary, #1f4d3a) 16%, var(--border, #e5e2dc));

    border-radius: var(--radius-card, 16px);

    background: color-mix(in srgb, var(--brand-primary-soft, #edf3ef) 22%, var(--surface, #fff));

}



.bv-project-block .bv-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px 20px;

}



.bv-project-block .bv-head-texts { min-width: 0; }



.bv-project-block .bv-title {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    font-size: 1.25rem;

    line-height: 1.25;

}



.bv-project-block .bv-title-icon {

    flex: 0 0 auto;

    width: 19px;

    height: 19px;

    color: var(--brand-primary, #1f4d3a);

}



.bv-project-block .bv-metrics {

    display: flex;

    flex-wrap: wrap;

    gap: 4px 14px;

    padding-top: 4px;

}



.bv-project-block .bv-metric { font-size: 0.85rem; color: var(--ink-2, #444); white-space: nowrap; }

.bv-project-block .bv-metric-value { color: var(--ink, #1a1a1a); font-variant-numeric: tabular-nums; }



.bv-project-block .bv-subtitle {

    margin: 4px 0 0;

    font-size: 0.9rem;

    color: var(--ink-2, #444);

}



.bv-project-block .bv-summary-line {

    margin: 10px 0 14px;

    font-size: 0.82rem;

    color: var(--ink-muted, #777);

}



.bv-state-box {

    margin-bottom: 16px;

    padding: 16px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface-sunken, #f5f5f4);

}



.bv-state-title {

    margin-bottom: 6px;

    color: var(--ink, #1a1a1a);

    font-weight: 700;

}



.bv-state-text {

    margin: 0;

    color: var(--ink-2, #444);

}



.bv-summary-mentions-btn {

    margin: 0 0 16px;

    padding: 10px 14px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: 999px;

    background: var(--surface, #fff);

    color: var(--ink-2, #444);

    font: inherit;

    cursor: pointer;

}



.bv-summary-mentions-btn:hover {

    border-color: var(--brand-primary, #1f4d3a);

    color: var(--brand-primary, #1f4d3a);

}



.bv-topic-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 12px;

}



.bv-topic-row {

    border: 1px solid var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface, #fff);

    overflow: hidden;

}



.bv-topic-row > button {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 12px 14px;

    border: 0;

    background: none;

    color: var(--ink, #1a1a1a);

    font: inherit;

    font-weight: 600;

    cursor: pointer;

    text-align: left;

}



.bv-topic-row > button:hover {

    background: var(--brand-primary-soft, #edf3ef);

}



.bv-topic-count {

    color: var(--ink-muted, #777);

    font-weight: 500;

}



.bv-sentiment-pills {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    padding: 0 14px 12px;

}



.bv-sentiment-pill {

    display: inline-block;

    padding: 3px 9px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: 999px;

    background: var(--surface-sunken, #f5f5f4);

    color: var(--ink-2, #444);

    font-size: 0.8rem;

}



.bv-mention-list {

    margin-top: 12px;

    padding: 16px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface, #fff);

}



.bv-mention {

    margin: 0 0 16px;

    padding: 0;

}



.bv-mention-text {

    margin: 0 0 8px;

    color: var(--ink, #1a1a1a);

    line-height: 1.5;

    quotes: "«" "»";

}



.bv-mention-text::before {

    content: "«";

}



.bv-mention-text::after {

    content: "»";

}



.bv-mention-source {

    color: var(--ink-muted, #777);

    font-size: 0.85rem;

    line-height: 1.5;

}



.bv-mention-source a {

    color: var(--brand-primary, #1f4d3a);

    text-decoration: none;

}



.bv-mention-source a:hover {

    text-decoration: underline;

}



.bv-more-btn {

    margin-top: 8px;

    padding: 8px 12px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: 999px;

    background: var(--surface, #fff);

    color: var(--ink-2, #444);

    font: inherit;

    cursor: pointer;

}



.bv-more-btn:hover {

    border-color: var(--brand-primary, #1f4d3a);

    color: var(--brand-primary, #1f4d3a);

}



/* Home teaser */



.bv-home-teaser {

    border: 1px solid var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface, #fff);

    padding: 16px;

}



.bv-home-teaser h3 {

    margin: 0 0 8px;

    color: var(--ink, #1a1a1a);

}



.bv-teaser-text {

    margin-bottom: 14px;

    color: var(--ink-2, #444);

}



.bv-teaser-input-row {

    display: flex;

    gap: 8px;

    margin-bottom: 12px;

}



.bv-teaser-input {

    flex: 1;

    min-width: 0;

    padding: 10px 14px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: 999px;

    background: var(--surface, #fff);

    color: var(--ink, #1a1a1a);

    font: inherit;

    outline: none;

}



.bv-teaser-input:focus {

    border-color: var(--brand-primary, #1f4d3a);

}



.bv-btn {

    padding: 10px 16px;

    border: 0;

    border-radius: 999px;

    background: var(--brand-primary, #1f4d3a);

    color: #fff;

    font: inherit;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

}



.bv-suggestions {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.bv-suggestion {

    text-align: left;

    padding: 10px 12px;

    border: 1px solid var(--border, #e5e2dc);

    border-radius: var(--radius-card, 12px);

    background: var(--surface-sunken, #f5f5f4);

    color: var(--ink, #1a1a1a);

    font: inherit;

    cursor: pointer;

    transition: border-color 0.15s ease;

}



.bv-suggestion:hover {

    border-color: var(--brand-primary, #1f4d3a);

}



.bv-mini-preview {

    margin-top: 12px;

    padding: 12px;

    border: 1px solid var(--brand-primary, #1f4d3a);

    border-radius: var(--radius-card, 12px);

    background: var(--brand-primary-soft, #edf3ef);

    color: var(--ink, #1a1a1a);

}



.bv-mini-name {

    font-weight: 700;

    margin-bottom: 4px;

}



.bv-mini-city,

.bv-mini-stats,

.bv-mini-topics,

.bv-mini-empty {

    color: var(--ink-2, #444);

    margin-bottom: 6px;

    line-height: 1.45;

}



.bv-mini-preview a {

    display: inline-block;

    margin-top: 4px;

    color: var(--brand-primary, #1f4d3a);

    font-weight: 600;

    text-decoration: none;

}



/* ---- ЖК page block v4 (2026-09-20): themes with volume bars + mention cards -----------------------------

   Supersedes the v3 flat list. Same data and same behaviour - only the presentation is new: the left column

   ranks themes with a bar per topic (volume, never a score), the right column shows each mention as a card

   with its sentiment and topic. Sources stay out of the UI, as before. */

.bv-split { display: grid; grid-template-columns: minmax(280px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 4px; }

.bv-topics { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 96px); overflow-y: auto; }

.bv-topics-title { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #777); }

.bv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; width: 100%; text-align: left;

    padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink, #1a1a1a); font: inherit; font-size: 0.92rem;

    line-height: 1.3; cursor: pointer; }

.bv-row:hover { background: var(--surface-sunken, #f5f5f4); }

.bv-row.is-active { background: color-mix(in srgb, var(--brand-primary-soft, #edf3ef) 85%, var(--surface, #fff)); color: var(--brand-primary, #1f4d3a); font-weight: 600; }

.bv-row:focus-visible { outline: 2px solid var(--brand-primary, #1f4d3a); outline-offset: 1px; }

.bv-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bv-row-count { color: var(--ink-muted, #777); font-variant-numeric: tabular-nums; }

.bv-row.is-active .bv-row-count { color: inherit; }

.bv-row-track { grid-column: 1 / -1; display: block; height: 4px; margin-top: 3px; border-radius: 999px; background: var(--surface-sunken, #f1efec); overflow: hidden; }

.bv-row-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand-primary, #1f4d3a); opacity: 0.32; }

.bv-row.is-active .bv-row-fill { opacity: 0.85; }

.bv-row--all { margin-bottom: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--border, #e5e2dc); border-radius: 8px 8px 0 0; }

.bv-topics-toggle { align-self: flex-start; margin-top: 6px; padding: 5px 12px; border: 1px dashed var(--border, #d8d4cc); border-radius: 999px;

    background: transparent; color: var(--ink-2, #444); font: inherit; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }

.bv-topics-toggle:hover { border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); }

.bv-panel { min-width: 0; }

.bv-panel-head { margin-bottom: 10px; }

.bv-panel-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

.bv-panel-title { margin: 0; font-size: 1.05rem; }

.bv-panel-sub { margin: 4px 0 0; font-size: 0.82rem; color: var(--ink-muted, #777); }

.bv-filters { display: flex; flex-wrap: wrap; gap: 6px; }

.bv-filter { padding: 4px 12px; border: 1px solid var(--border, #e5e2dc); border-radius: 999px; background: var(--surface, #fff);

    color: var(--ink-2, #444); font: inherit; font-size: 0.82rem; cursor: pointer; }

.bv-filter:hover:not(:disabled) { border-color: var(--brand-primary, #1f4d3a); }

.bv-filter.is-active { background: var(--brand-primary-soft, #edf3ef); border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); font-weight: 600; }

.bv-filter:disabled { opacity: 0.45; cursor: default; }

.bv-feed { display: flex; flex-direction: column; gap: 10px; margin: 0; }

.bv-quote { margin: 0; padding: 11px 13px; border: 1px solid var(--border, #e5e2dc); border-radius: 12px; background: var(--surface, #fff); }

.bv-quote-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }

.bv-quote-date { margin-left: auto; color: var(--ink-muted, #777); font-size: 0.78rem; white-space: nowrap; }

.bv-sent-chip, .bv-topic-chip { padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; line-height: 1.4; border: 1px solid transparent; }

.bv-sent-chip { font-weight: 600; background: var(--surface-sunken, #f5f5f4); color: var(--ink-2, #444); border-color: var(--border, #e5e2dc); }

.bv-sent-chip.is-positive { background: color-mix(in srgb, var(--good, #0e7a5f) 12%, var(--surface, #fff));

    color: color-mix(in srgb, var(--good, #0e7a5f) 75%, var(--ink, #1a1a1a)); border-color: color-mix(in srgb, var(--good, #0e7a5f) 28%, transparent); }

.bv-sent-chip.is-negative { background: color-mix(in srgb, var(--critical, #b91c1c) 11%, var(--surface, #fff));

    color: color-mix(in srgb, var(--critical, #b91c1c) 72%, var(--ink, #1a1a1a)); border-color: color-mix(in srgb, var(--critical, #b91c1c) 26%, transparent); }

.bv-topic-chip { background: color-mix(in srgb, var(--brand-primary, #1f4d3a) 9%, var(--surface, #fff));

    color: color-mix(in srgb, var(--brand-primary, #1f4d3a) 78%, var(--ink, #1a1a1a)); border-color: color-mix(in srgb, var(--brand-primary, #1f4d3a) 24%, transparent); }

.bv-quote-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }

.bv-quote-text::before { content: "\00ab"; }

.bv-quote-text::after { content: "\00bb"; }

.bv-loading { color: var(--ink-muted, #777); padding: 8px 0; }

@media (max-width: 820px) {

    .bv-project-block { padding: 16px 14px; }

    .bv-split { grid-template-columns: 1fr; gap: 12px; }

    .bv-topics { position: static; flex-direction: row; flex-wrap: nowrap; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden;

        padding: 2px 0 8px; -webkit-overflow-scrolling: touch; }

    .bv-topics-title { display: none; }

    .bv-row { flex: 0 0 auto; width: auto; padding: 5px 12px; border: 1px solid var(--border, #e5e2dc); border-radius: 999px; white-space: nowrap;

        gap: 8px; grid-template-columns: auto auto; }

    .bv-row.is-active { border-color: var(--brand-primary, #1f4d3a); }

    .bv-row-track { display: none; }

    .bv-row--all { margin-bottom: 0; padding-bottom: 5px; border-bottom: 0; border-radius: 999px; }

    .bv-topics-toggle { flex: 0 0 auto; margin-top: 0; }

    .bv-panel-head-row { flex-direction: column; align-items: flex-start; }

    .bv-metrics { width: 100%; }

}



/* footer: «Что говорят люди» is a rounded button like «O нас» next to it - it inherits

   .site-footer-links a wholesale, so there is nothing to override here any more. */



/* ==== «Что говорят люди» analytics page /reviews (2026-09-21 redesign) ==== */

.bvr-page { max-width: 1240px; margin: 0 auto; padding: 8px 16px 72px; color: var(--ink, #1a1a1a); }

.bvr-page * { box-sizing: border-box; }



/* hero */

.bvr-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; min-height: 240px; padding: 28px 36px;

    border: 1px solid var(--border, #e5e2dc); border-radius: 22px; background: linear-gradient(135deg, var(--brand-primary-soft, #edf3ef) 0%, var(--surface, #fff) 72%); }

.bvr-h1 { margin: 0 0 10px; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }

.bvr-lead { margin: 0 0 20px; max-width: 58ch; color: var(--ink-2, #444); line-height: 1.5; }

.bvr-search-wrap { display: block; }

.bvr-search { display: block; width: 100%; height: 54px; padding: 0 20px; font: inherit; font-size: 1.05rem; color: var(--ink, #1a1a1a);

    border: 1px solid var(--border-strong, var(--border, #d8d4cc)); border-radius: 14px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }

.bvr-search::placeholder { color: var(--ink-muted, #777); }

.bvr-search:focus { outline: 2px solid var(--brand-primary, #1f4d3a); outline-offset: 1px; }

.bvr-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.bvr-metric { padding: 18px 16px; border: 1px solid var(--border, #e5e2dc); border-radius: 16px; background: var(--surface, #fff); }

.bvr-metric-value { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 800; line-height: 1; color: var(--brand-primary, #1f4d3a); font-variant-numeric: tabular-nums; }

.bvr-metric-label { margin-top: 8px; font-size: 0.85rem; line-height: 1.25; color: var(--ink-2, #444); }

.bvr-metrics-note { margin: 10px 2px 0; font-size: 0.8rem; color: var(--ink-muted, #777); }



/* sections */

.bvr-section { margin-top: 52px; }

.bvr-section-head { margin-bottom: 16px; }

.bvr-h2 { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.25; }

.bvr-note { margin: 4px 0 0; color: var(--ink-muted, #777); font-size: 0.9rem; line-height: 1.4; }



/* top topics chart */

/* Ranked rows: rank, theme, count, and a short secondary bar underneath. One violet for every bar -

   the colour carries no meaning, the numbers do. Two columns on a wide screen so the block stays compact. */

.bvr-bars { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; border: 1px solid var(--border, #e5e2dc);

    border-radius: 16px; background: var(--surface, #fff); }

.bvr-bar-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px;

    width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink, #1a1a1a);

    font: inherit; text-align: left; cursor: pointer; }

.bvr-bar-row:hover { background: var(--surface-sunken, #f5f5f4); }

.bvr-bar-row.is-active { background: color-mix(in srgb, var(--brand-primary-soft, #edf3ef) 85%, var(--surface, #fff));

    color: var(--brand-primary, #1f4d3a); }

.bvr-bar-row:focus-visible { outline: 2px solid var(--brand-primary, #1f4d3a); outline-offset: 1px; }

.bvr-bar-rank { color: var(--ink-muted, #777); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.bvr-bar-row.is-active .bvr-bar-rank { color: inherit; }

.bvr-bar-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bvr-bar-count { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.bvr-bar-track { grid-column: 2 / -1; display: block; width: clamp(160px, 55%, 220px); height: 5px; margin-top: 3px;

    border-radius: 999px; background: var(--surface-sunken, #f1efec); overflow: hidden; }

.bvr-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand-primary, #1f4d3a); opacity: 0.45; }

.bvr-bar-row.is-active .bvr-bar-fill { opacity: 0.9; }

.bvr-bars-toggle { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 5px 12px;

    border: 1px dashed var(--border, #d8d4cc); border-radius: 999px; background: transparent; color: var(--ink-2, #444);

    font: inherit; font-size: 0.82rem; cursor: pointer; }

.bvr-bars-toggle:hover { border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); }

@media (min-width: 1100px) {

    .bvr-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

}



/* filters panel */

.bvr-filters { padding: 20px 22px; border: 1px solid var(--border, #e5e2dc); border-radius: 18px; background: var(--surface-sunken, #f7f6f3); }

.bvr-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.bvr-reset { padding: 4px 10px; border: 0; background: transparent; color: var(--brand-primary, #1f4d3a); font: inherit; font-size: 0.88rem; cursor: pointer; }

.bvr-reset:hover { text-decoration: underline; }

.bvr-filter-row { display: flex; align-items: flex-start; gap: 14px; padding: 6px 0; }

.bvr-filter-label { flex: 0 0 56px; padding-top: 7px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #777); }

.bvr-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.bvr-chip { padding: 6px 14px; border: 1px solid var(--border, #e5e2dc); border-radius: 999px; background: var(--surface, #fff); color: var(--ink-2, #444); font: inherit; font-size: 0.88rem; line-height: 1.3; cursor: pointer; }

.bvr-chip:hover { border-color: var(--brand-primary, #1f4d3a); }

.bvr-chip.is-active { background: var(--brand-primary-soft, #edf3ef); border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); font-weight: 600; }

.bvr-chip--ghost { border-style: dashed; background: transparent; }

.bvr-chip:focus-visible { outline: 2px solid var(--brand-primary, #1f4d3a); outline-offset: 1px; }



/* ЖК cards */

.bvr-results { margin-top: 24px; }

.bvr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.bvr-card { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border: 1px solid var(--border, #e5e2dc); border-radius: 18px; background: var(--surface, #fff);

    color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }

a.bvr-card:hover { border-color: var(--brand-primary, #1f4d3a); box-shadow: 0 8px 24px rgba(31, 77, 58, 0.10); transform: translateY(-1px); }

a.bvr-card:focus-visible { outline: 2px solid var(--brand-primary, #1f4d3a); outline-offset: 2px; }

.bvr-card.is-target { border-color: var(--brand-primary, #1f4d3a); box-shadow: 0 0 0 3px var(--brand-primary-soft, #edf3ef); }

.bvr-card-title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }

.bvr-card-city { margin-top: 2px; color: var(--ink-muted, #777); font-size: 0.88rem; }

.bvr-card-figures { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }

.bvr-card-count { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--brand-primary, #1f4d3a); font-variant-numeric: tabular-nums; }

.bvr-card-noun { font-size: 0.95rem; font-weight: 600; line-height: 1.2; }

.bvr-card-sources { margin-top: 2px; font-size: 0.82rem; color: var(--ink-muted, #777); }

.bvr-badge { margin-left: auto; padding: 2px 10px; border: 1px solid var(--border, #e5e2dc); border-radius: 999px; background: var(--surface-sunken, #f7f6f3); color: var(--ink-2, #444); font-size: 0.75rem; }

.bvr-card-topics-title { margin-bottom: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #777); }

.bvr-mini { display: grid; grid-template-columns: minmax(0, 1fr) 72px 30px; align-items: center; gap: 10px; padding: 3px 0; font-size: 0.88rem; }

.bvr-mini-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bvr-mini-track { display: block; height: 6px; border-radius: 999px; background: var(--surface-sunken, #f1efec); overflow: hidden; }

.bvr-mini-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand-primary, #1f4d3a); opacity: 0.75; }

.bvr-mini-count { text-align: right; color: var(--ink-2, #444); font-variant-numeric: tabular-nums; }

.bvr-card-cta { margin-top: auto; padding-top: 4px; font-size: 0.92rem; font-weight: 600; color: var(--brand-primary, #1f4d3a); }

.bvr-card.is-empty { padding: 16px 18px; gap: 6px; background: var(--surface-sunken, #f7f6f3); }

.bvr-card.is-empty .bvr-card-title { font-size: 1rem; }

.bvr-card-empty { margin: 0; font-size: 0.85rem; color: var(--ink-muted, #777); }

.bvr-quiet { margin-top: 40px; }

.bvr-quiet-title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: var(--ink-2, #444); }

.bvr-empty { padding: 28px 0; color: var(--ink-muted, #777); }



@media (max-width: 1100px) {

    .bvr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .bvr-hero { grid-template-columns: 1fr; gap: 22px; padding: 28px 28px; }

}

@media (max-width: 700px) {

    .bvr-page { padding: 4px 12px 56px; }

    .bvr-hero { padding: 22px 18px; gap: 18px; border-radius: 18px; min-height: 0; }

    .bvr-search { height: 50px; font-size: 1rem; }

    .bvr-metrics { gap: 8px; }

    .bvr-metric { padding: 12px 10px; border-radius: 12px; }

    .bvr-metric-label { font-size: 0.76rem; }

    .bvr-section { margin-top: 36px; }

    .bvr-bars { padding: 10px 8px; grid-template-columns: 1fr; }

    .bvr-bar-row { padding: 7px 8px; }

    .bvr-bar-label { font-size: 0.84rem; line-height: 1.2; }

    .bvr-filters { padding: 16px 14px; }

    .bvr-filter-row { flex-direction: column; gap: 6px; }

    .bvr-filter-label { flex: none; padding-top: 0; }

    .bvr-grid { grid-template-columns: 1fr; }

    .bvr-card { padding: 18px 18px; }

}

/* ---- «Что говорят люди» (/reviews): compact + colour pass (2026-09-20) ----------------------------------

   Only this page. The page was ~5000px tall on a 1440 desktop with one purple for every bar, so the topics

   now carry their own colours and the type/spacing step down. Data, markup and behaviour are untouched -

   these are overrides of the sizes and colours declared above. */

.bvr-page{

  /* Muted by ~50%: every hue is mixed half-and-half with the card surface, so the topics stay

     distinguishable without the bars shouting. Numbers keep more of the hue to stay readable. */

  --bv-c1:color-mix(in srgb, var(--brand-primary, #1f4d3a) 50%, var(--surface, #fff));

  --bv-c2:color-mix(in srgb, var(--accent, #0e7a5f) 50%, var(--surface, #fff));

  --bv-c3:color-mix(in srgb, var(--dir-cut, #2a78d6) 50%, var(--surface, #fff));

  --bv-c4:color-mix(in srgb, var(--dir-increase, #eb6834) 50%, var(--surface, #fff));

  --bv-c5:color-mix(in srgb, #9a6bd6 50%, var(--surface, #fff));

  --bv-c6:color-mix(in srgb, #0f9488 50%, var(--surface, #fff));

  --bv-c7:color-mix(in srgb, var(--warning, #fab219) 50%, var(--surface, #fff));

  --bv-c8:color-mix(in srgb, #c2528f 50%, var(--surface, #fff));

  padding-bottom:40px;

}



/* hero */

.bvr-hero{gap:22px; min-height:0; padding:18px 22px; border-radius:16px;}

.bvr-h1{margin-bottom:6px; font-size:clamp(1.3rem, 1.9vw, 1.75rem); line-height:1.18;}

.bvr-lead{margin-bottom:12px; max-width:52ch; font-size:0.88rem; line-height:1.45;}

.bvr-search{height:42px; padding:0 14px; font-size:0.95rem; border-radius:10px;}

.bvr-metrics{gap:8px;}

.bvr-metric{padding:10px 12px; border-radius:12px;}

.bvr-metric-value{font-size:clamp(1.25rem, 1.7vw, 1.6rem);}

.bvr-metric-label{margin-top:4px; font-size:0.74rem; line-height:1.2;}

.bvr-metric-value{color:color-mix(in srgb, var(--brand-primary, #1f4d3a) 72%, var(--ink, #111));}

.bvr-metric:nth-child(2) .bvr-metric-value{color:color-mix(in srgb, var(--accent, #0e7a5f) 72%, var(--ink, #111));}

.bvr-metric:nth-child(3) .bvr-metric-value{color:color-mix(in srgb, var(--dir-cut, #2a78d6) 72%, var(--ink, #111));}

.bvr-card-count{color:color-mix(in srgb, var(--brand-primary, #1f4d3a) 72%, var(--ink, #111));}

.bvr-metrics-note{margin-top:6px; font-size:0.72rem;}



/* sections */

.bvr-section{margin-top:26px;}

.bvr-section-head{margin-bottom:10px;}

.bvr-h2{font-size:1.05rem;}

.bvr-note{font-size:0.78rem;}



/* topic chart: one colour per topic instead of eight identical purple bars */

.bvr-bar-row{padding:5px 8px; font-size:0.84rem;}

.bvr-bar-label{font-size:0.86rem;}

.bvr-bar-count{font-size:0.86rem;}



/* filters */

.bvr-filters{padding:12px 14px; border-radius:14px;}

.bvr-filter-head{margin-bottom:8px;}

.bvr-filter-row{gap:10px; padding:3px 0;}

.bvr-filter-label{flex-basis:50px; padding-top:5px; font-size:0.7rem;}

.bvr-chips{gap:6px;}

.bvr-chip{padding:4px 11px; font-size:0.82rem;}



/* ЖК cards: denser grid, smaller type, coloured mini-bars */

.bvr-results{margin-top:16px;}

.bvr-grid{grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:12px;}

.bvr-card{gap:8px; padding:13px 15px; border-radius:14px;}

.bvr-card-title{font-size:0.98rem;}

.bvr-card-city{font-size:0.78rem;}

.bvr-card-figures{gap:2px 10px;}

.bvr-card-count{font-size:1.6rem;}

.bvr-card-noun{font-size:0.8rem;}

.bvr-card-sources{font-size:0.72rem;}

.bvr-badge{padding:1px 8px; font-size:0.72rem;}

.bvr-card-topics-title{margin-bottom:4px; font-size:0.66rem;}

.bvr-mini{grid-template-columns:minmax(0, 1fr) 60px 26px; gap:8px; padding:2px 0; font-size:0.8rem;}

.bvr-mini-track{height:5px;}

.bvr-mini-fill{opacity:1;}

.bvr-mini:nth-of-type(3n+1) .bvr-mini-fill{background:var(--bv-c1);}

.bvr-mini:nth-of-type(3n+2) .bvr-mini-fill{background:var(--bv-c2);}

.bvr-mini:nth-of-type(3n+3) .bvr-mini-fill{background:var(--bv-c3);}

.bvr-card-cta{font-size:0.84rem;}

.bvr-quiet{margin-top:24px;}

.bvr-quiet-title{margin-bottom:8px; font-size:0.9rem;}



@media (max-width: 700px){

  .bvr-hero{padding:14px 16px;}

  .bvr-grid{grid-template-columns:1fr;}

  .bvr-bars{grid-template-columns:1fr;}

  .bvr-bar-row{font-size:0.82rem;}

  .bvr-bar-track{width:min(100%, 180px);}

}



/* ---- /reviews on the photo backdrop (2026-09-20) --------------------------------------------------------

   The page blocks sit at 85% opacity so the backdrop reads through them. Only backgrounds change; borders,

   radii, type and spacing stay as declared above. Small inner elements (bar tracks, chips, badges, the

   search field) stay solid - stacking translucent layers cancels the effect and hurts legibility. */

.bvr-page .bvr-hero{background:linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-soft, #edf3ef) 85%, transparent) 0%, color-mix(in srgb, var(--surface, #fff) 85%, transparent) 72%);}

.bvr-page .bvr-metric,

.bvr-page .bvr-bars,

.bvr-page .bvr-card{background:color-mix(in srgb, var(--surface, #fff) 85%, transparent);}

.bvr-page .bvr-filters,

.bvr-page .bvr-card.is-empty{background:color-mix(in srgb, var(--surface-sunken, #f7f6f3) 85%, transparent);}

/* Section headings and their notes sit directly on the photo now, not on a panel, so the muted grey

   lost too much contrast: they step up one ink level and carry a soft glow in the page colour. */

.bvr-page .bvr-section-head .bvr-note,

.bvr-page .bvr-quiet-title{color:var(--ink-2, #444); text-shadow:0 1px 3px color-mix(in srgb, var(--page, #fff) 75%, transparent);}

.bvr-page .bvr-section-head .bvr-h2{text-shadow:0 1px 3px color-mix(in srgb, var(--page, #fff) 75%, transparent);}



/* ---- Overview: «Что говорят люди» card (third column of the bottom row) ---- */

.bv-home-teaser--compact { display: flex; flex-direction: column; border: 0; background: transparent; padding: 0; min-width: 0; height: 100%; }

.bv-home-teaser--compact .bv-compact-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--ink, #1a1a1a); }

.bv-compact-sub { margin: 0 0 10px; font-size: 0.82rem; line-height: 1.35; color: var(--ink-muted, #777); }

.bv-home-teaser--compact .bv-teaser-input { flex: none; width: 100%; padding: 8px 14px; font-size: 0.92rem; }

.bv-home-teaser--compact .bv-suggestions { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 4px; border: 1px solid var(--border, #e5e2dc); border-radius: 10px; background: var(--surface, #fff); }

.bv-home-teaser--compact .bv-suggestions[hidden] { display: none; }

.bv-home-teaser--compact .bv-suggestion { padding: 6px 8px; text-align: left; font-size: 0.85rem; line-height: 1.3; overflow-wrap: anywhere; }

.bv-home-body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; min-width: 0; }

.bv-home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }

.bv-home-label { font-size: 0.78rem; font-weight: 600; color: var(--ink-2, #444); }

.bv-home-count { font-size: 0.85rem; font-weight: 600; color: var(--ink-2, #444); }

.bv-home-teaser--compact .bv-mini-name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }

.bv-home-teaser--compact .bv-mini-empty { margin: 0; font-size: 0.85rem; color: var(--ink-muted, #777); }

.bv-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.bv-mini-chip { padding: 2px 10px; border: 1px solid var(--border, #e5e2dc); border-radius: 999px; background: var(--surface, #fff); color: var(--ink-2, #444); font-size: 0.8rem; line-height: 1.5; }

.bv-home-quote { margin: 0; padding: 0 0 0 10px; border: 0; border-left: 3px solid var(--brand-primary-soft, #edf3ef); font-size: 0.82rem; line-height: 1.4; color: var(--ink-2, #444);

    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

.bv-home-teaser--compact .bv-mini-cta { align-self: flex-start; font-size: 0.88rem; font-weight: 600; color: var(--brand-primary, #1f4d3a); text-decoration: none; }

.bv-home-teaser--compact .bv-mini-cta:hover, .bv-home-all:hover { text-decoration: underline; }

.bv-home-all { margin-top: auto; padding-top: 8px; align-self: flex-start; font-size: 0.85rem; color: var(--ink-2, #444); text-decoration: none; }

@media (max-width: 640px) {

    .bv-home-quote { -webkit-line-clamp: 3; line-clamp: 3; }

}



/* ---- Overview card colours: neutral like the neighbouring cards, violet only as an accent ---- */

.bv-home-teaser--compact .bv-compact-title { color: var(--ink, #1a1a1a); }

.bv-home-teaser--compact .bv-teaser-input { border-color: var(--border, #e5e2dc); background: var(--surface, #fff); }

.bv-home-teaser--compact .bv-teaser-input:focus { border-color: var(--brand-primary, #1f4d3a); box-shadow: 0 0 0 3px var(--brand-primary-soft, #edf3ef); }

.bv-home-label { color: var(--ink-2, #444); }

.bv-home-teaser--compact .bv-mini-chip { border-color: var(--brand-primary-border, #c9dcd2); color: var(--brand-primary-dark, #17392b); background: var(--surface, #fff); font-weight: 500; }

.bv-home-teaser--compact .bv-home-count { color: var(--ink, #1a1a1a); display: flex; align-items: center; gap: 7px; }

.bv-home-teaser--compact .bv-home-count::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary, #1f4d3a); }

.bv-home-quote { border-left-color: var(--brand-primary-border, #c9dcd2); }

.bv-home-all { color: var(--brand-primary, #1f4d3a); font-weight: 600; }

:root[data-theme="dark"] .bv-home-teaser--compact .bv-mini-chip { color: #8fdcb4; border-color: rgba(111, 191, 151, 0.4); }

:root[data-theme="dark"] .bv-home-teaser--compact .bv-teaser-input:focus { box-shadow: 0 0 0 3px rgba(31, 77, 58, 0.3); }

:root[data-theme="dark"] .bv-home-all,

:root[data-theme="dark"] .bv-home-teaser--compact .bv-mini-cta { color: #6fbf97; }



/* ---- /reviews: ЖК covers and Buyer Voice Ranking Engine V1 (2026-09-20) ---------------------------------

   The covers are the ones the ЖК catalogue already has (projects.cover_image_url); a card without one keeps

   exactly its current look. Ranking blocks match the page's 85% opacity so the backdrop reads through, and

   stay deliberately plain: small rank numbers, no medals - this ranks collected opinions, not ЖК quality. */

.bvr-page .bvr-card{overflow:hidden;}

.bvr-page .bvr-card-cover{display:block; width:calc(100% + 30px); height:120px; margin:-13px -15px 0;

    object-fit:cover; border-bottom:1px solid var(--border, #e5e2dc);}



.bvr-page .bvr-mode-switcher{margin-top:22px;}

.bvr-page .bvr-mode-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;}

.bvr-page .bvr-mode-buttons{display:flex; flex-wrap:wrap; gap:6px;}

.bvr-page .bvr-mode-btn{padding:6px 14px; border:1px solid var(--border, #e5e2dc); border-radius:999px;

    background:color-mix(in srgb, var(--surface, #fff) 85%, transparent); color:var(--ink-2, #444);

    font:inherit; font-size:0.84rem; line-height:1.3; cursor:pointer;}

.bvr-page .bvr-mode-btn:hover{border-color:var(--brand-primary, #1f4d3a); color:var(--brand-primary, #1f4d3a);}

.bvr-page .bvr-mode-btn.is-active{background:var(--brand-primary-soft, #edf3ef); border-color:var(--brand-primary, #1f4d3a);

    color:var(--brand-primary, #1f4d3a); font-weight:600;}

.bvr-page .bvr-mode-note{margin:0; font-size:0.78rem; color:var(--ink-muted, #777);}

/* The two ranking modes carry their own colour so the switch reads at a glance: green for where the

   collected opinions lean positive, red for where they lean negative. «Обзор» stays neutral violet.

   Muted on purpose - this is an analytical page, not a scoreboard. */

.bvr-page .bvr-mode-btn[data-value="positive"]{color:color-mix(in srgb, var(--good, #0e7a5f) 78%, var(--ink, #1a1a1a));

    border-color:color-mix(in srgb, var(--good, #0e7a5f) 32%, var(--border, #e5e2dc));}

.bvr-page .bvr-mode-btn[data-value="positive"]:hover{border-color:color-mix(in srgb, var(--good, #0e7a5f) 55%, var(--border, #e5e2dc));

    color:color-mix(in srgb, var(--good, #0e7a5f) 88%, var(--ink, #1a1a1a));}

.bvr-page .bvr-mode-btn[data-value="positive"].is-active{background:color-mix(in srgb, var(--good, #0e7a5f) 13%, var(--surface, #fff));

    border-color:color-mix(in srgb, var(--good, #0e7a5f) 55%, transparent); color:color-mix(in srgb, var(--good, #0e7a5f) 85%, var(--ink, #1a1a1a));}

.bvr-page .bvr-mode-btn[data-value="negative"]{color:color-mix(in srgb, var(--critical, #b91c1c) 74%, var(--ink, #1a1a1a));

    border-color:color-mix(in srgb, var(--critical, #b91c1c) 30%, var(--border, #e5e2dc));}

.bvr-page .bvr-mode-btn[data-value="negative"]:hover{border-color:color-mix(in srgb, var(--critical, #b91c1c) 52%, var(--border, #e5e2dc));

    color:color-mix(in srgb, var(--critical, #b91c1c) 84%, var(--ink, #1a1a1a));}

.bvr-page .bvr-mode-btn[data-value="negative"].is-active{background:color-mix(in srgb, var(--critical, #b91c1c) 12%, var(--surface, #fff));

    border-color:color-mix(in srgb, var(--critical, #b91c1c) 52%, transparent); color:color-mix(in srgb, var(--critical, #b91c1c) 82%, var(--ink, #1a1a1a));}



.bvr-page .bvr-ranking{margin-top:26px;}

.bvr-page .bvr-method-wrap{margin:6px 0 12px;}

.bvr-page .bvr-method-toggle{padding:2px 0; border:0; background:transparent; color:var(--brand-primary, #1f4d3a);

    font:inherit; font-size:0.84rem; cursor:pointer;}

.bvr-page .bvr-method-toggle:hover{text-decoration:underline;}

.bvr-page .bvr-method-panel{margin-top:8px; max-width:70ch; padding:12px 14px; border:1px solid var(--border, #e5e2dc);

    border-radius:12px; background:color-mix(in srgb, var(--surface-sunken, #f7f6f3) 85%, transparent);}

.bvr-page .bvr-method-text{margin:0; font-size:0.84rem; line-height:1.5; color:var(--ink-2, #444);}



.bvr-page .bvr-rank-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px;}

.bvr-page .bvr-rank-card{display:flex; flex-direction:column; gap:8px; padding:13px 15px; overflow:hidden;

    border:1px solid var(--border, #e5e2dc); border-radius:14px;

    background:color-mix(in srgb, var(--surface, #fff) 85%, transparent);}

.bvr-page .bvr-rank-cover{display:block; width:calc(100% + 30px); height:120px; margin:-13px -15px 0;

    object-fit:cover; border-bottom:1px solid var(--border, #e5e2dc);}

.bvr-page .bvr-rank-head{display:flex; align-items:baseline; gap:10px;}

.bvr-page .bvr-rank-num{min-width:18px; color:var(--ink-muted, #777); font-size:0.9rem; font-weight:700;

    font-variant-numeric:tabular-nums;}

.bvr-page .bvr-rank-title-wrap{min-width:0;}

.bvr-page .bvr-rank-name{font-size:0.98rem; font-weight:700; color:var(--ink, #1a1a1a); text-decoration:none;}

.bvr-page .bvr-rank-name:hover{color:var(--brand-primary, #1f4d3a);}

.bvr-page .bvr-rank-city{font-size:0.78rem; color:var(--ink-muted, #777);}

.bvr-page .bvr-rank-stats-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}

.bvr-page .bvr-rank-stats{font-size:0.8rem; color:var(--ink-2, #444);}

.bvr-page .bvr-rank-badge{padding:1px 8px; border:1px solid var(--border, #e5e2dc); border-radius:999px;

    background:var(--surface-sunken, #f7f6f3); color:var(--ink-2, #444); font-size:0.72rem;}

.bvr-page .bvr-rank-shares{display:flex; flex-direction:column; gap:4px;}

.bvr-page .bvr-rank-share-row{display:grid; grid-template-columns:96px minmax(0, 1fr) 46px; align-items:center;

    gap:8px; font-size:0.8rem; line-height:1.3;}

.bvr-page .bvr-rank-share-label{color:var(--ink-2, #444);}

.bvr-page .bvr-rank-share-track{display:block; height:6px; border-radius:999px;

    background:var(--surface-sunken, #f1efec); overflow:hidden;}

.bvr-page .bvr-rank-share-fill{display:block; height:100%; border-radius:999px; opacity:0.7;}

.bvr-page .bvr-rank-share-row.is-positive .bvr-rank-share-fill{background:var(--good, #0e7a5f);}

.bvr-page .bvr-rank-share-row.is-negative .bvr-rank-share-fill{background:var(--critical, #b91c1c);}

.bvr-page .bvr-rank-share-value{text-align:right; color:var(--ink, #1a1a1a); font-variant-numeric:tabular-nums;}

.bvr-page .bvr-rank-topics{font-size:0.82rem; line-height:1.4; color:var(--ink-2, #444);}

.bvr-page .bvr-rank-topics-title{font-weight:600;}

.bvr-page .bvr-rank-cta{align-self:flex-start; margin-top:2px; font-size:0.84rem; font-weight:600;

    color:var(--brand-primary, #1f4d3a); text-decoration:none;}

.bvr-page .bvr-rank-cta:hover{text-decoration:underline;}

.bvr-page .bvr-rank-insufficient{margin:10px 0 0; font-size:0.8rem; color:var(--ink-muted, #777);}

.bvr-page .bvr-rank-skel{height:132px; margin-bottom:12px; border-radius:14px;

    background:color-mix(in srgb, var(--surface-sunken, #f7f6f3) 85%, transparent); animation:bvr-pulse 1.4s ease-in-out infinite;}

@keyframes bvr-pulse{0%, 100%{opacity:1;} 50%{opacity:0.55;}}



@media (max-width: 700px){

    .bvr-page .bvr-card-cover,

    .bvr-page .bvr-rank-cover{height:140px;}

    .bvr-page .bvr-rank-list{grid-template-columns:1fr;}

    .bvr-page .bvr-rank-share-row{grid-template-columns:86px minmax(0, 1fr) 42px; gap:6px; font-size:0.78rem;}

}



/* ---- /reviews: less lilac (2026-09-22) -----------------------------------------------------------------

   Violet was doing three different jobs at once - decoration on every bar, every big number and the hero

   tint - so the page read as one pink field. It now marks only state and actions (the chosen theme, the

   chosen chip, links); volume bars and figures go graphite, and the hero tint drops to a hint. */

.bvr-page .bvr-hero{background:linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-soft, #edf3ef) 38%, color-mix(in srgb, var(--surface, #fff) 85%, transparent)) 0%, color-mix(in srgb, var(--surface, #fff) 85%, transparent) 62%);}

/* Graphite bars read as switched-off, so the volume colour is the radar's own teal instead - present,
   but nothing like the lilac field it replaced. */
.bvr-page .bvr-bar-fill{background:color-mix(in srgb, var(--accent, #0e7a5f) 46%, var(--surface, #fff)); opacity:1;}

.bvr-page .bvr-bar-row.is-active .bvr-bar-fill{background:var(--brand-primary, #1f4d3a); opacity:0.85;}

.bvr-page .bvr-metric-value{color:color-mix(in srgb, var(--accent-strong, #0b5f49) 72%, var(--ink, #111));}

.bvr-page .bvr-metric:nth-child(2) .bvr-metric-value{color:color-mix(in srgb, var(--accent, #0e7a5f) 62%, var(--ink, #111));}

.bvr-page .bvr-metric:nth-child(3) .bvr-metric-value{color:color-mix(in srgb, var(--dir-cut, #2a78d6) 58%, var(--ink, #111));}

.bvr-page .bvr-card-count{color:color-mix(in srgb, var(--accent-strong, #0b5f49) 68%, var(--ink, #111));}

.bvr-page .bvr-mini:nth-of-type(3n+1) .bvr-mini-fill{background:color-mix(in srgb, var(--accent, #0e7a5f) 46%, var(--surface, #fff));}

.bvr-page .bvr-chip.is-active{background:color-mix(in srgb, var(--brand-primary-soft, #edf3ef) 55%, var(--surface, #fff));}

.bvr-page .bvr-bar-row.is-active{background:color-mix(in srgb, var(--brand-primary-soft, #edf3ef) 60%, var(--surface, #fff));}