css
/* 1.  Google Fonts — Onest */
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");

/* 2.  Modern CSS Reset (subset of Andy Bell & Josh Comeau variants) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img,svg{display:block;max-width:100%;height:auto;}
button,input,textarea,select{font:inherit;color:inherit;}
a{text-decoration:none;color:inherit;}

/* 3.  Design Tokens (CSS variables) */
:root{
    /* Brand palette */
    --brand-red: #E70000;
    --brand-black: #000000;
    --brand-white:#FFFFFF;
    --brand-gray: #F5F5F5;

    /* Typography */
    --font-primary: 'Onest', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--brand-white);
    --fs-900: clamp(2.5rem, 1.6vw + 1.7rem, 3.5rem); /* page headings */
    --fs-700: 1.25rem;   /* table header / buttons */
    --fs-400: 1rem;      /* body */
    --lh-default: 1.4;

    /* Shape */
    --radius-lg: .75rem;   /* 12px */
    --radius-sm: .25rem;  /* 4px  */

    /* Transition */
    --tr-fast: 150ms ease;
}

/* 4.  Base styles */
body{
    font-family: var(--font-primary), serif;
    font-size: var(--fs-400);
    line-height: var(--lh-default);
    background: var(--brand-black);
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-primary) serif;font-weight:700;}

/* Utility */
.container-fluid{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto;}
@media(min-width:992px){.container-fluid{padding-left:3rem;padding-right:3rem;}}

.logo{height:3rem;transition:transform var(--tr-fast);}  /* 48px */

/* 5. Page Containers (names inherited from Figma exports) */
.page3-container,.page4-container{
    padding-block:3rem;
}
@media(max-width:576px){
    .page3-container,.page4-container{padding-block:2rem;}
}

/* 6. Tables – Shared styles */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* fallback */
.table thead {
    --bs-table-bg: transparent;
    background: var(--brand-black);
    color: var(--brand-white);

    outline: 1px solid var(--brand-white);
    outline-offset: -1px;
    border-radius: var(--radius-lg);
}

.table thead th {
    --bs-table-bg: transparent;
}

/* header row */
.table th, .table td {
    padding: .875rem 1rem;
    text-align: left;
    white-space: nowrap;
}

.table th {
    font-weight: 600;
    font-size: var(--fs-700);
}

/* header size */
.table tbody tr {
    transition: background var(--tr-fast);
    --bs-table-bg: transparent;
    background: transparent;
}

.table,
.table th,
.table td {
    font-family: var(--font-primary), serif; color: var(--brand-white);
}

.page-header {
    display: flex !important;
    flex-wrap: wrap; /* чтобы элементы переносились при нехватке места */
    vertical-align: center;
}

.page-title-container {
    margin-bottom: .25rem;
    flex: 1 1 auto;               /* растягивается и сжимается по необходимости */
    min-width: 0;                 /* позволяет flex-shrink работать */
}

.page-title {
    color: var(--brand-white);
    white-space: normal;          /* разрешает перенос строк */
    overflow-wrap: break-word;    /* разбивает длинные слова */
}

.page-title-container,
.page-title {
    min-width: 0;               /* позволяет элементу shrink работать */
}

/* 6.1. Candidates specific */
.candidates-table .top-row {
    background: var(--brand-red);
    --bs-table-bg: var(--brand-red);
    color: var(--brand-red);
}

.candidates-table .regular-row {
    background: var(--brand-black);
    --bs-table-bg: var(--brand-black);
}

/* 6.1.1. Rounded block corners: only corner cells */
.candidates-table tr.top-row:first-child td:first-child {
    border-top-left-radius: var(--radius-lg);
}
.candidates-table tr.top-row:first-child td:last-child {
    border-top-right-radius: var(--radius-lg);
}
.candidates-table tr.top-row.last-top-row td:first-child {
    border-bottom-left-radius: var(--radius-lg);
}
.candidates-table tr.top-row.last-top-row td:last-child {
    border-bottom-right-radius: var(--radius-lg);
}

/* 6.1.2. Row separators */
.candidates-table tr {
    position: relative;
}
/* Separator between red top rows, except after last-top-row */
.candidates-table tr.top-row:not(.last-top-row)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2.5%; /* 95% width centered */
    width: 95%;
    height: 1px;
    background: var(--brand-gray);
    filter: brightness(75%);
}
/* Separator between regular rows, except after last row */
.candidates-table tr:not(.top-row):not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.25%;
    width: 97.5%;
    height: 1px;
    background: var(--brand-gray);
    filter: brightness(60%);
}

/* 6.1.3. Фиксированная раскладка таблицы */
/* 6.1. Candidates */
.candidates-table {
    table-layout: fixed; /* фиксированная ширина колонок */
    width: 100%;
}
.candidates-table th:nth-child(1),
.candidates-table td:nth-child(1) { width: 40%; }
.candidates-table th:nth-child(2),
.candidates-table td:nth-child(2) { width: 35%; }
.candidates-table th:nth-child(3),
.candidates-table td:nth-child(3) { width: 25%; }

/* Разрешаем перенос текста при выходе за границы */
.candidates-table th,
.candidates-table td {
    word-wrap: break-word;
    white-space: normal;
}

/* 6.2. Experts specific */
.experts-table .expert-row {
    background: var(--brand-red);
    color: var(--brand-red);
}

/* 6.2.1. Rounded block corners: only corner cells */
.experts-table tr.expert-row:first-child td:first-child {
    border-top-left-radius: var(--radius-lg);
}
.experts-table tr.expert-row:first-child td:last-child {
    border-top-right-radius: var(--radius-lg);
}
.experts-table tr.expert-row.last-expert-row td:first-child {
    border-bottom-left-radius: var(--radius-lg);
}
.experts-table tr.expert-row.last-expert-row td:last-child {
    border-bottom-right-radius: var(--radius-lg);
}

/* 6.2.2. Row separators */
.experts-table tr {
    position: relative;
}
/* Separator between red top rows, except after last-top-row */
.experts-table tr.expert-row:not(.last-expert-row)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2.5%; /* 95% width centered */
    width: 95%;
    height: 1px;
    background: var(--brand-gray);
    filter: brightness(70%);
}

/* 6.2.3. Фиксированная раскладка таблицы */
.experts-table {
    table-layout: fixed;
    width: 100%;
}
.experts-table th:nth-child(1),
.experts-table td:nth-child(1) { width: 50%; }
.experts-table th:nth-child(2),
.experts-table td:nth-child(2) { width: 50%; }

.experts-table th,
.experts-table td {
    word-wrap: break-word;
    white-space: normal;
}


/* 7. Buttons (if needed later) */
.button-group {
    display: inline-flex;
    align-items: stretch;
    gap: .5rem;               /* 1rem между кнопками */
    /*margin: 1.5rem 0 2rem 0; !* 2.5rem от лого сверху, 2rem до таблицы снизу *!*/
    margin: 0;
}

/* Базовый reset */
.btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary), serif;
    font-size: var(--fs-700) !important;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast), filter var(--tr-fast);
    text-decoration: none;     /* для <a> */
    text-align: center;
}

/* === Активная кнопка === */
.btn-active {
    background: var(--brand-white);
    color: var(--brand-black);
    border: none;
}
.btn-active:active {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    filter: brightness(0.85);
}
.btn-active:hover {
    background: var(--brand-white);
    color: var(--brand-black);
    filter: brightness(0.85);
}

/* === Неактивная кнопка === */
.btn-inactive {
    background: transparent;
    color: var(--brand-white);
    border: 1px solid var(--brand-white);
}
.btn-inactive:active {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    /*filter: brightness(0.85);*/
}
.btn-inactive:hover {
    background: var(--brand-white);
    color: var(--brand-black);
    /* рамка оставляем, поэтому border не меняем */
}

/* 8. Responsive Typography tweaks */
@media(max-width:992px){
    :root{--fs-900:clamp(2rem,3.3vw+ 1.2rem,2.75rem);--fs-700:1.125rem;}
    .logo{height:2.5rem;} /* 40px */
}
@media(max-width:768px){
    :root{--fs-700:1rem;--fs-400:.9375rem;}
}
@media(max-width:576px){
    :root{--fs-900:1.75rem;}
    .logo{height:2rem;} /* 32px */
    .table th,.table td{padding:.75rem .75rem;font-size:.875rem;}
}

/* 9.  Dark‑mode Support (optional, but included) */
@media(prefers-color-scheme: dark){
    body{background:#121212;color:var(--brand-gray);} /* gray text on near‑black */
    .table thead{background:#1e1e1e;color:var(--brand-black);}  /* dark header */
    .candidates-table .regular-row{background:#1e1e1e;} /* dark row for black */
}

/* Center alignment for “Место в рейтинге” column */
.candidates-table th:nth-child(3),
.candidates-table td:nth-child(3){text-align:center;}

/* Decorative vertical divider between logo and title */
.vertical-divider,.vr{
    width:2px;
    height:70px;
    background:var(--brand-gray);
    opacity: .875;
    margin:0 1rem;

    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
@media(max-width:768px){.vertical-divider,.vr{height:32px;}}



/* 10. Info-badge alongside buttons */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 1.5rem 0 2rem 0;
}

.info-badge {
    background: transparent;
    border: 1px solid var(--brand-white);
    flex-direction: column;
    color: var(--brand-white);
    padding-left:  2.5rem;
    padding-right:  2.5rem;
    width: 225px;
}
.info-badge .header {
    font-size: var(--fs-700);
    line-height: 1;
}
.info-badge .text {
    font-size: var(--fs-400);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.btn,
.info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
    border-radius: var(--radius-lg);
}

/* End of ref-base.css */