/* === grom.place Design System — из production style.css === */
:root {
    --dark: #2E2E2E;
    --grey: #999999;
    --medium-grey: #E1E2E4;
    --light-grey: #F3F4F6;
    --white: #FFFFFF;
    --green: #D6FD52;
    --blue: #4176FF;
    --red: #DA251C;
    --ff: "Montserrat", "Arial", sans-serif;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
html {
    font-style: normal; font-weight: 400;
    font-family: var(--ff); color: var(--dark);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body { width: 100%; height: 100%; background-color: var(--light-grey); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* === Container (production) === */
header .container, footer .container, nav { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; }
section .container, main .container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 16px 64px; }
@media (min-width: 768px) {
    header .container, footer .container, nav { padding: 0 20px; }
    section .container, main .container { padding: 48px 20px 80px; }
}
@media (min-width: 1440px) {
    header .container, footer .container, nav { padding: 0 100px; }
    section .container, main .container { padding: 48px 100px 80px; }
}

/* === Top bar (production) === */
.top-bar { background-color: var(--dark); }
.top-bar a { font-size: 12px; font-weight: 400; line-height: 14.63px; border-bottom: 1px solid transparent; color: var(--white); }
.top-bar a:hover, .top-bar a:focus-visible { border-bottom: 1px solid var(--green); }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.top-bar .container div { display: flex; align-items: center; gap: 6px; }
@media (min-width: 768px) {
    .top-bar .container { justify-content: flex-start; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
}

/* === Navbar (production) === */
.navbar { background-color: var(--white); position: relative; box-shadow: 0 4px 26px 0 rgba(0,0,0,0.08); }
.navbar-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
@media (min-width: 768px) { .navbar-wrapper { padding: 4px 0; } }

.burger, .logo, .menu, .login { display: inline-block; }

/* Burger (mobile only) */
.burger { cursor: pointer; width: 32px; height: 32px; padding: 8px 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: none; border: none; }
.burger-line { width: 100%; height: 3px; background-color: var(--grey); position: relative; border-radius: 10px; }
.burger-line::before, .burger-line::after { content: ""; position: absolute; width: 100%; height: 3px; background-color: var(--grey); border-radius: 10px; }
.burger-line::before { bottom: -7px; }
.burger-line::after { bottom: -14px; }
.burger.active .burger-line { background-color: transparent; }
.burger.active .burger-line::before { transform: rotate(45deg) translate(0,0); }
.burger.active .burger-line::after { transform: rotate(-45deg) translate(5px,-5px); }
@media (min-width: 768px) { .burger { display: none; } }

/* Logo */
.logo { padding: 0; }
.logo img { width: 70px; height: auto; }
@media (min-width: 768px) { .logo { padding: 8px; } }

/* Menu (mobile: hidden, desktop: inline) */
.menu { display: none; border-top: 1.5px solid var(--medium-grey); background: var(--white); }
.menu ul { padding: 18px 0 22px; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.menu li { padding: 4px 0; }
.menu li a { color: var(--grey); padding: 0 0 4px; font-size: 14px; font-weight: 400; line-height: 17.07px; border-bottom: 1.5px solid transparent; }
.menu li a:hover { color: var(--dark); border-bottom: 1.5px solid var(--green); }
.menu.show { display: block; animation: menuOpen 0.8s ease-in-out; position: absolute; top: 100%; left: 0; width: 100%; background-color: rgb(251,251,251); text-align: left; z-index: 99; }
@keyframes menuOpen { 0% { opacity:0; transform:translateY(-100%); } 100% { opacity:1; transform:translateY(0); } }
@media (min-width: 768px) {
    .menu { display: inline-block; border: none; position: relative; background: transparent; text-align: center; width: 70%; }
    .menu ul { flex-direction: row; justify-content: center; gap: 56px; padding: 0; }
    .menu li { display: inline-block; }
    .menu li a { font-size: 14px; font-weight: 400; line-height: 17.07px; color: var(--grey); }
    .menu.show { position: relative; background: transparent; }
}

/* Login */
.login a { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; line-height: 19.5px; color: var(--dark); background: transparent; cursor: pointer; white-space: nowrap; }
.login a svg { display: block; stroke: var(--grey); }
@media (min-width: 768px) {
    .login a { padding: 12px 24px; border-radius: 25px; border: 1.5px solid var(--green); }
    .login a svg { display: none; }
    .login a:hover { background-color: var(--green); }
}

/* === Breadcrumbs (production) === */
.breadcrumb { z-index: 1; margin-bottom: 24px; padding: 0; }
.breadcrumb .breadcrumb__list { margin: 0; padding: 0; display: none; gap: 12px; }
.breadcrumb .breadcrumb__item { list-style-type: none; }
.breadcrumb .breadcrumb__item a { color: var(--dark); position: relative; font-family: var(--ff); font-size: 16px; font-weight: 500; line-height: 19.5px; text-align: left; display: block; }
.breadcrumb .breadcrumb__item a::after { content: "/"; position: absolute; left: calc(100% + 4px); }
.breadcrumb .breadcrumb__item.active a { color: var(--grey); pointer-events: none; }
.breadcrumb .breadcrumb__item.active a::after { content: none; }
.breadcrumb .breadcrumb__item:not(.active):hover a { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb .breadcrumb__item-button { color: var(--dark); display: flex; align-items: center; gap: 8px; font-family: var(--ff); font-size: 16px; font-weight: 500; line-height: 19.5px; background: none; border: none; cursor: pointer; }
@media (min-width: 768px) { .breadcrumb .breadcrumb__list { display: flex; } .breadcrumb .breadcrumb__item-button { display: none; } }
.breadcrumb--dark { margin-bottom: 32px; }
.breadcrumb--dark .breadcrumb__item a, .breadcrumb--dark .breadcrumb__item-button { color: var(--dark); }
@media (min-width: 768px) { .breadcrumb--dark { margin-top: -16px; margin-bottom: 48px; } }

/* === Breadcrumbs (simple) — for standalone pages === */
.breadcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; font-family: var(--ff); font-size: 16px; font-weight: 500; line-height: 19.5px; }
.breadcrumbs a { color: var(--green); transition: text-decoration 0.15s; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs .sep { color: var(--grey); font-weight: 400; }
.breadcrumbs .current { color: var(--grey); }

/* === Footer (production) === */
footer { background: var(--dark); padding: 40px 0; }
footer .container { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.footer-wrapper { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.footer-logo { margin-bottom: 8px; }
.footer-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
.footer-list a { color: var(--white); font-size: 14px; opacity: 0.7; transition: opacity 0.2s; }
.footer-list a:hover { opacity: 1; }
.copyright { color: var(--white); font-size: 14px; opacity: 0.5; margin: 0; }

/* === Wrapper === */
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* === Page Content === */
.page-content { padding: 32px 0 64px; }
@media (min-width: 768px) { .page-content { padding: 48px 0 80px; } }

/* === Title === */
.page-title { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
@media (min-width: 768px) { .page-title { font-size: 36px; } }
.page-date { font-size: 14px; color: var(--grey); margin: 0 0 24px; }

/* === Discipline Cards (landing) === */
.discipline-cards { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .discipline-cards { grid-template-columns: repeat(2, 1fr); } }
.discipline-card { background: var(--white); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.discipline-card__title { font-size: 20px; font-weight: 700; margin: 0; }
.discipline-card__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Buttons === */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 25px; font-family: var(--ff); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 1.5px solid transparent; text-decoration: none; }
.btn--primary { background: var(--green); color: var(--dark); border-color: var(--green); }
.btn--primary:hover { box-shadow: 0 0 10px 0px #BCE92799; }
.btn--outline { background: var(--white); color: var(--dark); border-color: var(--medium-grey); }
.btn--outline:hover { border-color: var(--green); }

/* === Tabs === */
.tabs { display: inline-flex; gap: 4px; margin-bottom: 24px; background: var(--white); border-radius: 12px; padding: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.tab-btn { padding: 10px 24px; border: none; background: transparent; font-family: var(--ff); font-size: 14px; font-weight: 500; color: var(--grey); cursor: pointer; border-radius: 10px; transition: all 0.2s; }
.tab-btn.active { background: var(--green); color: var(--dark); font-weight: 600; }
.tab-btn:hover:not(.active) { color: var(--dark); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* === Title block === */
.title-block { margin-bottom: 24px; }
.title-block h1 { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 4px; }
@media (min-width: 768px) { .title-block h1 { font-size: 32px; } }
.event-date { font-size: 14px; color: var(--grey); margin: 0; }

/* === Filters === */
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-search { border: 1.5px solid var(--medium-grey); padding: 10px 16px 10px 36px; border-radius: 10px; font-family: var(--ff); font-size: 14px; color: var(--dark); outline: none; min-width: 180px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 12px center no-repeat; }
.filter-search:focus { border-color: var(--green); }
.filter-search::placeholder { color: var(--grey); }
.filter-select { border: 1.5px solid var(--medium-grey); padding: 10px 32px 10px 12px; border-radius: 10px; font-family: var(--ff); font-size: 14px; color: var(--dark); background: var(--white); outline: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5' fill='none'%3E%3Cpath d='M0 0L5 5L10 0' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.filter-select:focus { border-color: var(--green); }
.filter-reset { border: none; background: none; font-family: var(--ff); font-size: 13px; font-weight: 500; color: var(--grey); cursor: pointer; padding: 8px 12px; }
.filter-reset:hover { color: var(--dark); }

/* === Results Table (production-matching) === */
.tab-panel { min-width: 0; }
.tab-panel .results-table-wrap, .tab-panel .leaderboard-table-wrap { display: inline-block; min-width: 960px; background: var(--white); border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow-x: auto; margin-bottom: 16px; }
.results-table-wrap table { width: 100%; margin: 0; border-collapse: collapse; }
.results-table-wrap th, .results-table-wrap td { white-space: nowrap; padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--light-grey); font-size: 14px; }
.results-table-wrap th { color: var(--grey); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.results-table-wrap td { color: var(--dark); font-size: 14px; }
.results-table-wrap tbody tr:hover { background: var(--light-grey); }
.results-table-wrap .col-name { text-align: left; }
.results-table-wrap thead tr:first-child th:nth-child(3) { text-align: left; }
.results-table-wrap .col-name a { color: var(--dark); font-weight: 500; }
.results-table-wrap .col-name a:hover { color: var(--blue); }
.results-table-wrap .col-time { font-variant-numeric: tabular-nums; font-weight: 500; }
.results-table-wrap .col-place { font-weight: 600; }
.col-bib { font-variant-numeric: tabular-nums; }
.col-club { color: var(--grey); font-size: 13px; }
.col-gender-icon { width: 32px; }

/* Place badges */
.place-badge { display: block; margin: 0 auto; width: 28px; height: 28px; border-radius: 50%; font-weight: 600; font-size: 13px; text-align: center; line-height: 28px; }
.place-badge--1 { background: #FFD700; color: var(--dark); }
.place-badge--2 { background: #C0C0C0; color: var(--dark); }
.place-badge--3 { background: #CD7F32; color: var(--white); }
.place-badge--other { background: var(--light-grey); color: var(--dark); }

/* Pagination */
.pagination { display: flex; align-items: center; gap: 4px; margin-top: 16px; justify-content: center; }
.pagination button { min-width: 36px; height: 36px; border: 1.5px solid var(--medium-grey); border-radius: 8px; background: var(--white); font-family: var(--ff); font-size: 14px; font-weight: 500; color: var(--dark); cursor: pointer; transition: all 0.2s; }
.pagination button.active { background: var(--green); border-color: var(--green); }
.pagination button:hover:not(.active) { border-color: var(--green); }
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* Pagination info */
.pagination-info { font-size: 13px; color: var(--grey); margin-top: 12px; text-align: center; }

/* === Status === */
.results-count { font-size: 14px; color: var(--grey); margin: 12px 0 0; }
.live-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; max-width: 960px; padding: 0 16px 0 0; }
.live-toolbar .filters { margin-bottom: 0; }
.updated-at { font-size: 12px; color: var(--grey); margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.loading { text-align: center; padding: 48px 20px; color: var(--grey); font-size: 14px; }
.error { text-align: center; padding: 40px; color: var(--red); font-size: 14px; }

/* === Leaderboard === */
.leaderboard-section { margin-bottom: 32px; }
.leaderboard-section h3 { font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.leaderboard-subtitle { font-size: 14px; font-weight: 600; margin: 20px 0 12px; color: var(--dark); }
.leaderboard-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.leaderboard-table th { font-size: 12px; font-weight: 600; color: var(--grey); text-transform: uppercase; padding: 8px 12px; border-bottom: 2px solid var(--medium-grey); text-align: center; }
.leaderboard-table th:nth-child(1) { width: 60px; }
.leaderboard-table th:nth-child(2) { text-align: left; }
.leaderboard-table th:nth-child(3) { width: 60px; }
.leaderboard-table th:nth-child(5) { width: 100px; text-align: right; }
.leaderboard-table td { padding: 8px 12px; border-bottom: 1px solid var(--light-grey); font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-table td:nth-child(2) { text-align: left; }
.leaderboard-table td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }
.leaderboard-table tbody tr:hover { background: var(--light-grey); }
.leaderboard-table-wrap { display: block; background: var(--white); border-radius: 12px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }

/* Two-level table header */
.th-group { text-align: center; font-size: 13px; }
table thead tr + tr th { font-size: 11px; padding-top: 2px; padding-bottom: 8px; text-align: center; }
.col-place { text-align: center; width: 60px; }
.col-split { font-size: 13px; text-align: center; }

/* === Mobile: compact tables === */
@media (max-width: 767px) {
    .tab-panel .results-table-wrap { min-width: 0; padding: 8px; }
    .tab-panel .leaderboard-table-wrap { min-width: 0; padding: 8px; display: block; width: 100%; }
    .results-table-wrap table { width: auto; }
    .leaderboard-table { width: 100%; }
    .results-table-wrap th,
    .results-table-wrap td,
    .leaderboard-table th,
    .leaderboard-table td { padding: 6px 6px; font-size: 12px; }
    .results-table-wrap th { font-size: 10px; }
    .leaderboard-table th { font-size: 10px; }
    .col-place { width: 40px; }
    .place-badge { width: 24px; height: 24px; font-size: 11px; line-height: 24px; }
    table thead tr + tr th { font-size: 9px; }
}