/* =====================================================================
   Blade Throwers z. s. – "Aréna" design system
   Source: Blade Throwers grafický manuál (varianta Aréna) v1.0
   Black carries everything, red is the single point of attention.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root,
[data-bs-theme="dark"] {
    /* Base colours (manual 03) */
    --bt-black: #0A0A0A;
    --bt-red: #E10600;          /* Aréna červená – tags, buttons, one word in a heading */
    --bt-white: #FFFFFF;

    /* Supplementary */
    --bt-panel: #161616;        /* web panels (manual 08) */
    --bt-asphalt: #1E1E1E;      /* panels and tiles */
    --bt-line: #2A2A2A;         /* dividers */
    --bt-steel: #8F8E8E;        /* from the logo, graphic elements */
    --bt-caption: #B5B5B5;      /* secondary text on black */
    --bt-target: #B50200;       /* logo red – logo only, used here for pressed states */

    --bt-font-display: 'Teko', 'Bahnschrift Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
    --bt-font-text: 'Rajdhani', 'Segoe UI', Arial, sans-serif;

    --bt-cut: 14px;             /* chamfered corner */
    --bt-skew: 12px;            /* slanted tag / button edge */
    --bt-radius: 0;
    --bt-gap: 1rem;
    --bt-content-max: 1200px;
    --bt-sidebar-w: 272px;
    --bt-control-h: 44px;
    --bt-focus: 0 0 0 2px var(--bt-black), 0 0 0 4px var(--bt-white);

    /* Bootstrap bridge */
    --bs-body-bg: var(--bt-black);
    --bs-body-color: var(--bt-white);
    --bs-body-font-family: var(--bt-font-text);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.4;
    --bs-emphasis-color: var(--bt-white);
    --bs-secondary-color: var(--bt-caption);
    --bs-tertiary-bg: var(--bt-asphalt);
    --bs-secondary-bg: var(--bt-asphalt);
    --bs-border-color: var(--bt-line);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-link-color: var(--bt-white);
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: var(--bt-white);
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-primary: var(--bt-red);
    --bs-primary-rgb: 225, 6, 0;
    --bs-danger: var(--bt-red);
    --bs-danger-rgb: 225, 6, 0;
    --bs-heading-color: var(--bt-white);
    --bs-form-invalid-color: #ff6a63;
    --bs-form-invalid-border-color: var(--bt-red);
    --bs-form-valid-border-color: var(--bt-line);
    --bs-form-valid-color: var(--bt-caption);
    color-scheme: dark;
}

/* ---------- 2. Base ---------- */
html {
    -webkit-text-size-adjust: 100%;
    background: var(--bt-black);
}

body {
    margin: 0;
    background: var(--bt-black);
    color: var(--bt-white);
    font-family: var(--bt-font-text);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
    body { font-size: 1.0625rem; }
}

h1, h2, h3, h4, .bt-display {
    font-family: var(--bt-font-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: .9;
    letter-spacing: 0;
    color: var(--bt-white);
    margin: 0 0 .5rem;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: 1.75rem; font-weight: 500; letter-spacing: .04em; line-height: 1; }
h4 { font-size: 1.375rem; font-weight: 500; letter-spacing: .04em; line-height: 1; }
h5, h6 { font-family: var(--bt-font-text); font-weight: 700; }

h1:focus, h1:focus-visible { outline: none; }

p { margin: 0 0 .75rem; }

a {
    color: var(--bt-white);
    text-decoration-color: var(--bt-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

a:hover { color: var(--bt-white); text-decoration-color: var(--bt-white); }

:focus-visible {
    outline: 2px solid var(--bt-white);
    outline-offset: 2px;
}

::selection { background: var(--bt-red); color: var(--bt-white); }

.text-red { color: var(--bt-red) !important; }
.text-caption, .text-muted, .text-body-secondary { color: var(--bt-caption) !important; }
.text-steel { color: var(--bt-steel) !important; }
.num { font-family: var(--bt-font-display); font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }

/* Eyebrow / štítek: Rajdhani Bold 15, +0.18em */
.bt-eyebrow {
    display: block;
    font-family: var(--bt-font-text);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bt-caption);
    margin-bottom: .5rem;
}

/* ---------- 3. Graphic elements (manual 05) ---------- */

/* Chamfered corner: bottom right cut at 45° */
.bt-cut {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bt-cut)), calc(100% - var(--bt-cut)) 100%, 0 100%);
}

/* Slanted tag (parallelogram), red or white, max two per surface */
.bt-tag {
    --tag-bg: var(--bt-red);
    --tag-fg: var(--bt-white);
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em 1.1em .25em;
    background: var(--tag-bg);
    color: var(--tag-fg);
    font-family: var(--bt-font-text);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    clip-path: polygon(var(--bt-skew) 0, 100% 0, calc(100% - var(--bt-skew)) 100%, 0 100%);
}

.bt-tag--white { --tag-bg: var(--bt-white); --tag-fg: var(--bt-black); }
.bt-tag--dark { --tag-bg: var(--bt-asphalt); --tag-fg: var(--bt-caption); }
.bt-tag--sm { font-size: .6875rem; padding: .2em .9em .15em; }

/* Start line: red vertical bar marks the main message */
.bt-startline { position: relative; padding-left: 1.5rem; }
.bt-startline::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background: var(--bt-red);
}

/* Quiet target rings in the background, centre always red */
.bt-rings { position: relative; overflow: hidden; isolation: isolate; }
.bt-rings::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -110px;
    top: 50%;
    width: 300px;
    height: 300px;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--bt-red) 0 22px, transparent 23px),
        radial-gradient(circle, transparent 0 60px, var(--bt-line) 61px 84px, transparent 85px),
        radial-gradient(circle, transparent 0 112px, #202020 113px 136px, transparent 137px);
    opacity: .9;
    pointer-events: none;
}

/* ---------- 4. Panels and tiles ---------- */
.bt-panel {
    background: var(--bt-panel);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bt-panel { padding: 1.5rem; }
}

.bt-panel--flush { padding: 0; }
.bt-panel--asphalt { background: var(--bt-asphalt); }
.bt-panel > :last-child { margin-bottom: 0; }

.bt-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.bt-panel-head h2, .bt-panel-head h3 { margin: 0; }

.bt-panel--flush > .bt-panel-head { padding: 1rem 1.25rem 0; }

.bt-grid {
    display: grid;
    gap: var(--bt-gap);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.bt-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.bt-grid--stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Icon tile (manual 05: icon set) */
.bt-tile {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    justify-content: space-between;
    min-height: 128px;
    padding: 1.1rem 1.1rem 1.25rem;
    background: var(--bt-asphalt);
    color: var(--bt-white);
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bt-cut)), calc(100% - var(--bt-cut)) 100%, 0 100%);
    transition: background-color .15s ease, transform .15s ease;
}

.bt-tile:hover { background: #262626; color: var(--bt-white); transform: translateY(-2px); }
.bt-tile:active { transform: none; }

.bt-tile .bt-icon { width: 32px; height: 32px; }

.bt-tile-title {
    font-family: var(--bt-font-display);
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
    line-height: .9;
}

.bt-tile-sub { color: var(--bt-caption); font-size: .9rem; line-height: 1.25; }

.bt-tile--accent { background: var(--bt-red); }
.bt-tile--accent:hover { background: #f01a10; }
.bt-tile--accent .bt-tile-sub { color: rgba(255,255,255,.85); }

/* Stats */
.bt-stat {
    padding: 1rem 1.1rem;
    background: var(--bt-panel);
    position: relative;
}

.bt-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--bt-line);
}

.bt-stat--accent::before { background: var(--bt-red); }

.bt-stat-label {
    display: block;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bt-caption);
}

.bt-stat-value {
    display: block;
    font-family: var(--bt-font-display);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    margin-top: .35rem;
    font-variant-numeric: tabular-nums;
}

.bt-stat-value small { font-size: 1.4rem; color: var(--bt-caption); font-weight: 500; }

.bt-meter {
    height: 6px;
    background: var(--bt-line);
    margin-top: .6rem;
    overflow: hidden;
}

.bt-meter > span { display: block; height: 100%; background: var(--bt-red); }

/* ---------- 5. Buttons (manual 05: one red per screen, white secondary, underlined tertiary) ---------- */
.btn {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-family: var(--bt-font-text);
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: .95rem;
    --bs-btn-line-height: 1.2;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 0;
    --bs-btn-focus-box-shadow: var(--bt-focus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--bt-control-h);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

.btn:active { transform: translateY(1px); }
.btn .bt-icon { width: 20px; height: 20px; flex: none; }

.btn-primary, .btn-light, .btn-danger {
    clip-path: polygon(var(--bt-skew) 0, 100% 0, calc(100% - var(--bt-skew)) 100%, 0 100%);
    padding-left: calc(var(--bs-btn-padding-x) + 4px);
    padding-right: calc(var(--bs-btn-padding-x) + 4px);
}

.btn-primary {
    --bs-btn-color: var(--bt-white);
    --bs-btn-bg: var(--bt-red);
    --bs-btn-hover-color: var(--bt-white);
    --bs-btn-hover-bg: #f2180f;
    --bs-btn-active-color: var(--bt-white);
    --bs-btn-active-bg: var(--bt-target);
    --bs-btn-disabled-color: var(--bt-caption);
    --bs-btn-disabled-bg: var(--bt-line);
}

.btn-light, .btn-secondary-strong {
    --bs-btn-color: var(--bt-black);
    --bs-btn-bg: var(--bt-white);
    --bs-btn-hover-color: var(--bt-black);
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-active-color: var(--bt-black);
    --bs-btn-active-bg: var(--bt-caption);
    --bs-btn-disabled-color: var(--bt-steel);
    --bs-btn-disabled-bg: var(--bt-line);
}

.btn-danger {
    --bs-btn-color: var(--bt-white);
    --bs-btn-bg: var(--bt-target);
    --bs-btn-hover-color: var(--bt-white);
    --bs-btn-hover-bg: var(--bt-red);
    --bs-btn-active-color: var(--bt-white);
    --bs-btn-active-bg: #8a0200;
}

/* Quiet button on dark surfaces */
.btn-secondary, .btn-dark, .btn-outline-secondary {
    --bs-btn-color: var(--bt-white);
    --bs-btn-bg: var(--bt-asphalt);
    --bs-btn-hover-color: var(--bt-white);
    --bs-btn-hover-bg: var(--bt-line);
    --bs-btn-active-color: var(--bt-white);
    --bs-btn-active-bg: #333;
    --bs-btn-disabled-color: var(--bt-steel);
    --bs-btn-disabled-bg: var(--bt-asphalt);
    box-shadow: inset 0 0 0 1px var(--bt-line);
}

.btn-outline-danger {
    --bs-btn-color: #ff5a52;
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--bt-white);
    --bs-btn-hover-bg: var(--bt-target);
    --bs-btn-active-color: var(--bt-white);
    --bs-btn-active-bg: var(--bt-target);
    box-shadow: inset 0 0 0 1px rgba(225, 6, 0, .6);
}

/* Tertiary: underlined link */
.btn-link {
    --bs-btn-color: var(--bt-white);
    --bs-btn-hover-color: var(--bt-white);
    --bs-btn-active-color: var(--bt-white);
    --bs-btn-padding-x: .25rem;
    text-decoration: none;
    box-shadow: inset 0 -3px 0 var(--bt-red);
    min-height: 0;
    padding-bottom: .35rem;
}

.btn-link:hover { box-shadow: inset 0 -3px 0 var(--bt-white); }

.btn-sm {
    --bs-btn-padding-x: .9rem;
    --bs-btn-padding-y: .35rem;
    --bs-btn-font-size: .8rem;
    min-height: 36px;
}

.btn-lg {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: .75rem;
    --bs-btn-font-size: 1.125rem;
    min-height: 54px;
}

/* Square icon button (row actions) */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 40px;
    min-height: 40px;
    height: 40px;
    letter-spacing: 0;
}

.btn-icon.btn-sm { width: 36px; height: 36px; min-height: 36px; }

.bt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.bt-actions--end { justify-content: flex-end; }
.bt-row-actions { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: nowrap; }

/* ---------- 6. Forms ---------- */
label, .form-label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bt-caption);
}

.form-control, .form-select, input:not([type]),
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"], select, textarea {
    display: block;
    width: 100%;
    min-height: var(--bt-control-h);
    padding: .55rem .8rem;
    font-family: var(--bt-font-text);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--bt-white);
    background-color: var(--bt-asphalt);
    border: 1px solid var(--bt-line);
    border-radius: 0;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

select, .form-select {
    padding-right: 2.4rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 18px 18px;
}

select option { background: var(--bt-asphalt); color: var(--bt-white); }

textarea, textarea.form-control { min-height: 110px; resize: vertical; }

.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--bt-steel); opacity: 1; }

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    color: var(--bt-white);
    background-color: #232323;
    border-color: var(--bt-white);
    box-shadow: inset 0 -3px 0 var(--bt-red);
}

input[readonly], .form-control[readonly] { color: var(--bt-caption); background-color: var(--bt-panel); }

input[type="number"] { font-family: var(--bt-font-display); font-size: 1.5rem; font-weight: 500; padding-top: .45rem; padding-bottom: .2rem; }

input[type="checkbox"], input[type="radio"], .form-check-input {
    width: 22px;
    height: 22px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: none;
    appearance: none;
    background-color: var(--bt-asphalt);
    border: 2px solid var(--bt-steel);
    border-radius: 0;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
}

input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    background: var(--bt-white);
    clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 70%);
    transition: transform .1s ease;
}

input[type="checkbox"]:checked, .form-check-input:checked { background-color: var(--bt-red); border-color: var(--bt-red); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--bt-white); outline-offset: 2px; }

/* Toggle row: checkbox + text on one line, large hit area */
.bt-check {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--bt-control-h);
    padding: .5rem .8rem;
    margin: 0;
    background: var(--bt-asphalt);
    border: 1px solid var(--bt-line);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bt-white);
}

.bt-check:has(input:checked) { border-color: var(--bt-red); }

.bt-field { margin-bottom: 1rem; }
.bt-field-hint { display: block; margin-top: .3rem; color: var(--bt-caption); font-size: .875rem; }

.bt-form-grid {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.bt-form-grid .bt-field--wide { grid-column: 1 / -1; }

.bt-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
}

.bt-fieldset > legend {
    float: none;
    width: 100%;
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bt-line);
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}

.bt-search {
    position: relative;
    flex: 1 1 220px;
    max-width: 420px;
}

.bt-search .bt-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-steel);
    pointer-events: none;
}

.bt-search input { padding-left: 2.6rem; }

.bt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.bt-toolbar .form-select, .bt-toolbar select { width: auto; min-width: 180px; }

.validation-message, .text-danger { color: #ff6a63 !important; font-weight: 600; font-size: .9rem; }
.validation-errors { list-style: none; padding: .75rem 1rem; margin: 0 0 1rem; background: rgba(225, 6, 0, .12); border-left: 4px solid var(--bt-red); }
.validation-errors li { color: var(--bt-white); }
.invalid, .form-control.invalid, input.invalid, select.invalid { border-color: var(--bt-red) !important; outline: none; }
.valid.modified:not([type=checkbox]) { outline: none; }

/* ---------- 7. Alerts, badges, empty states ---------- */
.alert, .bt-alert {
    position: relative;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 1rem .9rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--bt-asphalt);
    color: var(--bt-white);
    border: 0;
    border-radius: 0;
    border-left: 4px solid var(--bt-steel);
}

.alert-danger, .alert-warning, .bt-alert--red { border-left-color: var(--bt-red); background: rgba(225, 6, 0, .12); }
.alert-success, .alert-info { border-left-color: var(--bt-white); }
.alert .bt-icon { flex: none; margin-top: 2px; }

/* Full red banner – the one place where red covers a surface (manual 08 warnings) */
.bt-banner-red {
    background: var(--bt-red);
    color: var(--bt-white);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.bt-banner-red h2, .bt-banner-red h3 { color: var(--bt-white); margin: 0; }

.bt-badge, .status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem .1rem;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--bt-line);
    color: var(--bt-caption);
    white-space: nowrap;
}

.bt-badge--ok, .status-badge-success { background: var(--bt-white); color: var(--bt-black); }
.bt-badge--red, .status-badge-danger { background: var(--bt-red); color: var(--bt-white); }

.badge { border-radius: 0; font-weight: 700; letter-spacing: .08em; }
.badge.bg-secondary { background: var(--bt-line) !important; color: var(--bt-caption); }

.bt-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--bt-caption);
    background: var(--bt-panel);
}

.bt-empty .bt-icon { width: 48px; height: 48px; color: var(--bt-steel); margin-bottom: .75rem; }
.bt-empty h3 { color: var(--bt-white); }

.bt-loading {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 0;
    color: var(--bt-caption);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .8125rem;
}

.bt-loading::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bt-red) 0 4px, transparent 5px);
    box-shadow: inset 0 0 0 3px var(--bt-steel);
    animation: bt-pulse 1s ease-in-out infinite;
}

@keyframes bt-pulse { 50% { box-shadow: inset 0 0 0 3px var(--bt-line); transform: scale(.85); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 8. Tables ---------- */
.table-responsive, .bt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bt-panel);
    margin-bottom: 1rem;
}

.table, .bt-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bt-white);
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    --bs-table-striped-color: var(--bt-white);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: var(--bt-white);
    --bs-table-border-color: var(--bt-line);
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--bt-white);
    font-size: 1rem;
}

.table > :not(caption) > * > * { padding: .65rem .8rem; border-bottom: 1px solid var(--bt-line); background: transparent; color: inherit; box-shadow: none; }

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bt-asphalt);
    color: var(--bt-caption);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid var(--bt-line);
    vertical-align: bottom;
}

.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover > * { background: rgba(255, 255, 255, .035); }
.table td { vertical-align: middle; }
.table-bordered > :not(caption) > * > * { border: 1px solid var(--bt-line); }

.bt-th-sort {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.bt-th-sort:hover, .bt-th-sort[aria-sort] { color: var(--bt-white); }
.bt-th-sort:focus-visible { outline: 2px solid var(--bt-white); outline-offset: 2px; }
.bt-th-sort .bt-icon { width: 14px; height: 14px; }

.bt-startno {
    font-family: var(--bt-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--bt-caption);
    font-variant-numeric: tabular-nums;
}

.bt-person { display: flex; flex-direction: column; line-height: 1.15; }
.bt-person strong { font-weight: 700; }
.bt-person small { color: var(--bt-caption); font-size: .85rem; }

.bt-flag {
    display: inline-block;
    width: 28px;
    height: 20px;
    object-fit: cover;
    vertical-align: middle;
    background: var(--bt-line);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

.bt-nat { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 700; letter-spacing: .06em; }

/* ---------- 9. Ranks / podium ---------- */
.rank-1, .rank-2, .rank-3, .rank-tie, .rank-missing { position: relative; }
td.rank-1, .bt-result.rank-1 { background: var(--bt-red) !important; color: var(--bt-white); }
td.rank-2, .bt-result.rank-2 { background: var(--bt-white) !important; color: var(--bt-black); }
td.rank-3, .bt-result.rank-3 { background: var(--bt-steel) !important; color: var(--bt-black); }
td.rank-tie, .bt-result.rank-tie { background: repeating-linear-gradient(-45deg, rgba(225,6,0,.35) 0 8px, rgba(225,6,0,.15) 8px 16px) !important; color: var(--bt-white); box-shadow: inset 0 0 0 2px var(--bt-red); }
td.rank-missing, .bt-result.rank-missing { color: var(--bt-steel); }
td.rank-2 .text-caption, td.rank-3 .text-caption, .bt-result.rank-2 .text-caption, .bt-result.rank-3 .text-caption { color: rgba(10,10,10,.7) !important; }

.bt-rank {
    display: inline-grid;
    place-items: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: .2rem .35rem 0;
    font-family: var(--bt-font-display);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
    background: var(--bt-asphalt);
    color: var(--bt-white);
}

.bt-rank.rank-1 { background: var(--bt-red); }
.bt-rank.rank-2 { background: var(--bt-white); color: var(--bt-black); }
.bt-rank.rank-3 { background: var(--bt-steel); color: var(--bt-black); }

.bt-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--bt-caption); font-size: .875rem; }
.bt-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.bt-legend i { display: inline-block; width: 14px; height: 14px; }
.bt-legend .rank-1 { background: var(--bt-red); }
.bt-legend .rank-2 { background: var(--bt-white); }
.bt-legend .rank-3 { background: var(--bt-steel); }
.bt-legend .rank-tie { background: repeating-linear-gradient(-45deg, rgba(225,6,0,.6) 0 3px, rgba(225,6,0,.2) 3px 6px); box-shadow: inset 0 0 0 1px var(--bt-red); }
.bt-legend .rank-missing { background: var(--bt-asphalt); box-shadow: inset 0 0 0 1px var(--bt-steel); }

/* Result cards (by discipline / by thrower) */
.bt-results-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.bt-result {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    background: var(--bt-panel);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.bt-result .bt-rank { background: rgba(0,0,0,.25); color: inherit; }
.bt-result.rank-1 .bt-rank, .bt-result.rank-2 .bt-rank, .bt-result.rank-3 .bt-rank { background: transparent; font-size: 2.2rem; }
.bt-result-name { font-weight: 700; line-height: 1.15; }
.bt-result-meta { display: block; font-size: .85rem; opacity: .8; font-weight: 600; }
.bt-result-score { text-align: right; font-family: var(--bt-font-display); font-size: 1.9rem; font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
.bt-result-score small { display: block; font-family: var(--bt-font-text); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-top: .2rem; }

/* Result board: one card per ranking, wrapping to the width of the screen (no horizontal scrolling) */
.bt-content:has(.bt-results-tabs) { max-width: 1680px; }
.bt-board { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); align-items: start; }
.bt-board-card { background: var(--bt-asphalt); min-width: 0; }
.bt-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .55rem .7rem .45rem; border-bottom: 2px solid var(--bt-red); }
.bt-board-head h3 { margin: 0; font-family: var(--bt-font-text); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
.bt-board-head h3 .bt-icon { vertical-align: -2px; margin-right: .2rem; }
.bt-board-head small { color: var(--bt-caption); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bt-board-list { list-style: none; margin: 0; padding: 0; }
.bt-board-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .4rem; border-top: 1px solid var(--bt-line); font-size: .9rem; }
.bt-board-row:first-child { border-top: 0; }
.bt-board-rank { font-family: var(--bt-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.bt-board-name { font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bt-board-value { white-space: nowrap; font-family: var(--bt-font-display); font-size: 1.2rem; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.bt-board-value small { font-family: var(--bt-font-text); font-size: .75rem; opacity: .85; margin-left: .15rem; }
.bt-board-row.rank-1 { background: var(--bt-red); color: var(--bt-white); }
.bt-board-row.rank-2 { background: var(--bt-white); color: var(--bt-black); }
.bt-board-row.rank-3 { background: var(--bt-steel); color: var(--bt-black); }
.bt-board-row.rank-tie { background: repeating-linear-gradient(-45deg, rgba(225,6,0,.35) 0 8px, rgba(225,6,0,.15) 8px 16px); box-shadow: inset 0 0 0 2px var(--bt-red); }
.bt-board-row.rank-missing { color: var(--bt-steel); }
.bt-board-empty, .bt-board-more { margin: 0; padding: .45rem .7rem; color: var(--bt-caption); font-size: .85rem; }
.bt-board-more { border-top: 1px solid var(--bt-line); font-weight: 700; }
.bt-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.bt-group-head .bt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.bt-board-sub { padding: .35rem .7rem .25rem; background: var(--bt-panel); color: var(--bt-caption); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid var(--bt-line); }
.bt-board-name .bt-flag { width: 21px; height: 15px; margin-right: .35rem; vertical-align: -2px; }
.bt-board-overall { margin-left: .35rem; font-size: .75rem; font-weight: 700; opacity: .7; white-space: nowrap; }
.bt-board-list .bt-board-row:first-child { border-top: 0; }

/* Result views on phones: the tabs wrap into a grid instead of scrolling sideways */
@media (max-width: 767.98px) {
    .bt-tabs.bt-results-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; overflow: visible; border-bottom: 0; padding: 0; }
    .bt-tabs.bt-results-tabs a { justify-content: center; flex-direction: column; gap: .2rem; padding: .5rem .25rem .45rem; margin: 0; font-size: .6875rem; letter-spacing: .08em; white-space: normal; text-align: center; background: var(--bt-panel); border-bottom-width: 3px; }
}

/* ---------- 10. Tabs / segmented nav / chips ---------- */
.bt-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    margin: 0 0 1.25rem;
    padding: 0 0 2px;
    border-bottom: 1px solid var(--bt-line);
    scrollbar-width: thin;
}

.bt-tabs a, .bt-tabs button {
    all: unset;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem .9rem .6rem;
    cursor: pointer;
    color: var(--bt-caption);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
}

.bt-tabs a:hover, .bt-tabs button:hover { color: var(--bt-white); }
.bt-tabs a.active, .bt-tabs button.active, .bt-tabs [aria-current="page"], .bt-tabs [aria-selected="true"] { color: var(--bt-white); border-bottom-color: var(--bt-red); }
.bt-tabs a:focus-visible, .bt-tabs button:focus-visible { outline: 2px solid var(--bt-white); outline-offset: -2px; }
.bt-tabs .bt-icon { width: 18px; height: 18px; }

.bt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

.bt-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    margin: 0;
    padding: .35rem .9rem;
    background: var(--bt-asphalt);
    border: 1px solid var(--bt-line);
    color: var(--bt-white);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
    text-transform: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

button.bt-chip { font-family: var(--bt-font-text); }
.bt-chip:hover { border-color: var(--bt-steel); }
.bt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bt-chip:has(input:checked), .bt-chip.active, .bt-chip[aria-pressed="true"] { background: var(--bt-red); border-color: var(--bt-red); color: var(--bt-white); }
.bt-chip:has(input:focus-visible), .bt-chip:focus-visible { outline: 2px solid var(--bt-white); outline-offset: 2px; }
.bt-chip small { opacity: .75; font-weight: 600; }

.bt-chip-group { margin-bottom: 1rem; }
.bt-chip-group > .bt-eyebrow { margin-bottom: .5rem; }

/* ---------- 11. Modal ---------- */
.bt-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(2px);
}

.bt-modal {
    position: fixed;
    z-index: 1050;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(var(--bt-modal-w, 760px), calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    display: flex;
    flex-direction: column;
    background: var(--bt-panel);
    color: var(--bt-white);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px var(--bt-line);
    animation: bt-modal-in .16s ease-out;
}

.bt-modal--sm { --bt-modal-w: 480px; }
.bt-modal--lg { --bt-modal-w: 960px; }

@keyframes bt-modal-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }

.bt-modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.bt-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 1rem 1.5rem;
    border-bottom: 1px solid var(--bt-line);
    position: relative;
}

.bt-modal-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bt-red); }
.bt-modal-title { margin: 0; font-size: 2rem; line-height: .95; padding-top: .2rem; }
.bt-modal-title small { display: block; font-family: var(--bt-font-text); font-size: .8rem; font-weight: 700; letter-spacing: .18em; color: var(--bt-caption); margin-bottom: .2rem; }

.bt-modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; min-height: 0; }

.bt-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bt-line);
    background: var(--bt-black);
}

.bt-modal-footer .me-auto { margin-right: auto; }

.bt-close {
    all: unset;
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: var(--bt-caption);
    background: var(--bt-asphalt);
}

.bt-close:hover { color: var(--bt-white); background: var(--bt-line); }
.bt-close:focus-visible { outline: 2px solid var(--bt-white); }

@media (max-width: 575.98px) {
    .bt-modal { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 94dvh; animation: bt-sheet-in .18s ease-out; }
    @keyframes bt-sheet-in { from { transform: translateY(24px); opacity: 0; } }
    .bt-modal-footer .btn { flex: 1 1 auto; }
}

/* Score entry inside the modal */
.bt-score-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

.bt-score {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem .85rem .85rem;
    background: var(--bt-asphalt);
    border-left: 4px solid var(--bt-line);
}

.bt-score.is-missing { border-left-color: var(--bt-red); }
.bt-score label { margin: 0; color: var(--bt-white); letter-spacing: .04em; font-size: .9rem; display: flex; justify-content: space-between; gap: .5rem; }
.bt-score label span { color: var(--bt-caption); font-weight: 600; letter-spacing: .1em; font-size: .7rem; }
.bt-score input { background: var(--bt-black); text-align: right; }

/* ---------- 12. Page header ---------- */
.bt-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0 0 1.5rem;
}

.bt-page-header h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); margin: 0; }
.bt-page-header-text { min-width: 0; }
.bt-page-header-text > p { color: var(--bt-caption); margin: .6rem 0 0; max-width: 60ch; }
.bt-page-header .bt-tag { margin-bottom: .75rem; }
.bt-page-header .bt-tag { max-width: 100%; white-space: normal; }

/* Hero (home) */
.bt-hero {
    padding: 1.75rem 1.5rem 1.75rem 2rem;
    margin-bottom: 1.25rem;
    background: var(--bt-panel);
}

.bt-hero h1 { font-size: clamp(2.8rem, 8vw, 5.5rem); line-height: .85; margin: .75rem 0 1rem; overflow-wrap: anywhere; }
.bt-hero p { color: var(--bt-caption); max-width: 56ch; font-size: 1.1rem; }
.bt-hero .bt-actions { margin-top: 1.25rem; }

@media (min-width: 768px) {
    .bt-hero { padding: 2.5rem 2.5rem 2.5rem 3rem; }
    .bt-rings::after { right: -60px; width: 380px; height: 380px; }
}

.bt-motto { font-family: var(--bt-font-display); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; line-height: .9; letter-spacing: .01em; }

.bt-section-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 2rem 0 1rem;
    font-family: var(--bt-font-text);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bt-caption);
}

.bt-section-title::after { content: ""; flex: 1; height: 1px; background: var(--bt-line); }

/* ---------- 13. App shell ---------- */
.bt-skip {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    padding: .6rem 1rem;
    background: var(--bt-white);
    color: var(--bt-black);
    font-weight: 700;
}

.bt-skip:focus { top: 1rem; }

.bt-shell { min-height: 100vh; }

.bt-main {
    min-width: 0;
    padding: 1.25rem 1rem 3rem;
}

.bt-content { max-width: var(--bt-content-max); margin: 0 auto; }
.bt-content--wide { max-width: none; }

@media (min-width: 768px) {
    .bt-main { padding: 2rem 2rem 4rem; }
}

/* Sidebar */
.bt-sidebar {
    position: fixed;
    z-index: 1030;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(var(--bt-sidebar-w), 86vw);
    display: flex;
    flex-direction: column;
    background: var(--bt-black);
    border-right: 1px solid var(--bt-line);
    transform: translateX(-102%);
    transition: transform .2s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bt-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.bt-nav-toggle:checked ~ .bt-sidebar { transform: none; }
.bt-nav-toggle:checked ~ .bt-scrim { display: block; }

.bt-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1020;
    background: rgba(0, 0, 0, .7);
    cursor: pointer;
}

.bt-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.5rem 1rem 1.25rem;
    text-decoration: none;
    color: var(--bt-white);
}

.bt-brand img { width: 128px; height: 128px; }

.bt-brand-sub {
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bt-caption);
    text-align: center;
}

.bt-sidebar-block { padding: 0 1rem 1rem; }

.bt-comp-picker {
    padding: .75rem .85rem .85rem;
    background: var(--bt-panel);
    border-left: 4px solid var(--bt-red);
}

.bt-comp-picker label { font-size: .6875rem; letter-spacing: .2em; margin-bottom: .35rem; }
.bt-comp-picker select { background-color: var(--bt-asphalt); font-weight: 700; min-height: 40px; }

.bt-nav { padding: .25rem .75rem 1rem; flex: 1; }

.bt-nav-section {
    margin: 1.1rem .5rem .35rem;
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bt-steel);
}

.bt-nav a, .bt-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .45rem .75rem;
    color: var(--bt-caption);
    text-decoration: none;
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .12s ease, background-color .12s ease;
}

.bt-nav a .bt-icon { width: 22px; height: 22px; flex: none; }
.bt-nav a:hover { color: var(--bt-white); background: var(--bt-panel); }
.bt-nav a.active { color: var(--bt-white); background: var(--bt-asphalt); }
.bt-nav a.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bt-red); }
.bt-nav a:focus-visible { outline: 2px solid var(--bt-white); outline-offset: -2px; }

.bt-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    border-top: 1px solid var(--bt-line);
}

.bt-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    color: var(--bt-caption);
    font-size: .9rem;
}

.bt-user .bt-icon { flex: none; }
.bt-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bt-lang { display: flex; align-items: center; gap: .5rem; }
.bt-lang .bt-icon { color: var(--bt-steel); flex: none; }
.bt-lang select { min-height: 38px; padding-top: .35rem; padding-bottom: .35rem; font-size: .9rem; }

/* Thrower picker in the thrower form (find an existing thrower or create a new one) */
.bt-pick-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; max-height: 18rem; overflow-y: auto; }
.bt-pick {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: .55rem .8rem;
    border: 1px solid var(--bt-line);
    background: var(--bt-black);
    color: var(--bt-white);
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
}
.bt-pick:hover:not(:disabled), .bt-pick:focus-visible { border-color: var(--bt-white); }
.bt-pick:disabled { opacity: .55; cursor: not-allowed; }
.bt-pick-code { font-family: var(--bt-font-display); font-size: 1.15rem; color: var(--bt-caption); flex: none; min-width: 4.5rem; }
.bt-pick-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bt-pick-name small { color: var(--bt-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Standalone registration header (RegistrationLayout) */
.bt-standalone-head {
    position: sticky;
    top: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: .5rem 1rem;
    background: rgba(10, 10, 10, .96);
    border-bottom: 1px solid var(--bt-line);
}
.bt-standalone-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: var(--bt-white); text-decoration: none; }
.bt-standalone-brand img { width: 48px; height: 48px; flex: none; }
.bt-standalone-brand span { line-height: 1.05; min-width: 0; }
.bt-standalone-brand small { display: block; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bt-caption); font-weight: 700; }
.bt-standalone-brand strong { display: block; font-family: var(--bt-font-display); font-weight: 500; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; }
.bt-standalone-head .bt-lang select { max-width: 9.5rem; }
@media (min-width: 992px) {
    .bt-standalone-head { padding: .5rem 2.5rem; }
}

/* Competitions open for registration (/register) */
.bt-reg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.bt-reg-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 1.25rem; background: var(--bt-asphalt); }
.bt-reg-item h2 { margin: 0; font-size: 1.6rem; }
.bt-reg-item p { margin: .15rem 0 0; color: var(--bt-caption); }

/* Mobile top bar */
.bt-topbar {
    position: sticky;
    top: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 64px;
    padding: 0 .75rem 0 1rem;
    background: rgba(10, 10, 10, .96);
    border-bottom: 1px solid var(--bt-line);
}

.bt-topbar img { width: 48px; height: 48px; }
.bt-topbar-title { flex: 1; min-width: 0; line-height: 1.05; }
.bt-topbar-title strong { display: block; font-family: var(--bt-font-display); font-weight: 500; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-topbar-title span { display: block; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bt-caption); font-weight: 700; }

.bt-burger {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    background: var(--bt-asphalt);
    color: var(--bt-white);
    cursor: pointer;
    letter-spacing: 0;
}

.bt-burger .bt-icon { width: 26px; height: 26px; }

@media (min-width: 992px) {
    .bt-shell { display: grid; grid-template-columns: var(--bt-sidebar-w) minmax(0, 1fr); }
    .bt-sidebar { position: sticky; top: 0; height: 100vh; width: auto; transform: none; transition: none; }
    .bt-topbar, .bt-scrim, .bt-nav-close { display: none !important; }
    .bt-main { padding: 2.5rem 2.5rem 4rem; }
}

.bt-nav-close {
    position: absolute;
    right: .75rem;
    top: .75rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    background: var(--bt-asphalt);
    color: var(--bt-white);
    cursor: pointer;
}

/* Footer */
.bt-footer {
    max-width: var(--bt-content-max);
    margin: 3rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid var(--bt-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    color: var(--bt-steel);
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bt-footer a { color: var(--bt-caption); text-decoration: none; }
.bt-footer a:hover { color: var(--bt-white); }

/* ---------- 14. Icons ---------- */
.bt-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: none;
    vertical-align: middle;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
    fill: none;
}

.bt-icon--sm { width: 18px; height: 18px; }
.bt-icon--lg { width: 32px; height: 32px; }
.bt-icon--xl { width: 48px; height: 48px; }

/* ---------- 15. Misc ---------- */
hr { border: 0; border-top: 1px solid var(--bt-line); opacity: 1; margin: 1.5rem 0; }

.bt-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.bt-dl dt { color: var(--bt-caption); font-weight: 600; }
.bt-dl dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.bt-dl--left dd { text-align: left; }

.bt-list { list-style: none; padding: 0; margin: 0; }
.bt-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--bt-line); }
.bt-list li:last-child { border-bottom: 0; }
.bt-list strong { font-family: var(--bt-font-display); font-size: 1.25rem; font-weight: 500; line-height: 1; }

.bt-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

.bt-note-indicator { color: var(--bt-caption); cursor: help; }

.bt-danger-zone { border-top: 1px solid rgba(225, 6, 0, .4); margin-top: 1rem; padding-top: 1rem; }

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: .9rem 3rem .9rem 1.25rem;
    background: var(--bt-red);
    color: var(--bt-white);
    font-weight: 700;
}

#blazor-error-ui a { color: var(--bt-white); margin-left: .75rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .75rem; }

/* Reconnect dialog (Components/Layout/ReconnectModal.razor); blazor.web.js toggles the components-reconnect-* classes */
.bt-reconnect {
    border: 1px solid var(--bt-line);
    background: var(--bt-asphalt);
    color: var(--bt-white);
    padding: 1.5rem 2rem;
    max-width: min(26rem, calc(100vw - 2rem));
    text-align: center;
}
.bt-reconnect::backdrop { background: rgba(10, 10, 10, .75); }
.bt-reconnect-body { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.bt-reconnect-body p { margin: 0; font-weight: 600; }
.bt-reconnect-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--bt-line);
    border-top-color: var(--bt-red);
    animation: bt-spin 1s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bt-reconnect-spinner { animation: none; } }

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.bt-reconnect-spinner { display: none; }

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .bt-reconnect-spinner,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .bt-reconnect-spinner,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; }

.blazor-error-boundary { background: var(--bt-red); padding: 1rem 1.25rem; color: var(--bt-white); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Light document mode for PDF export (manual 06: reading documents are white with a black header) */
.bt-export-light { background: #fff !important; color: #0A0A0A !important; padding: 16px !important; }
.bt-export-light .table thead th, .bt-export-light .bt-export-head { background: #0A0A0A !important; color: #fff !important; }
.bt-export-light .table > :not(caption) > * > * { color: #0A0A0A; border-color: #d0d0d0 !important; }
.bt-export-light h2, .bt-export-light h3 { color: #0A0A0A; }
.bt-export-light td.rank-1 { color: #fff !important; }
.bt-export-light td.rank-2 { box-shadow: inset 0 0 0 2px #0A0A0A; }
.bt-export-light td.rank-missing { color: #8F8E8E; }
.bt-export-light .text-caption { color: #555 !important; }
.bt-export-light .table-responsive { background: #fff !important; overflow: visible !important; }
.bt-export-light .table tbody th { background: #fff !important; color: #0A0A0A !important; }
.bt-export-light .bt-board-card { background: #fff; box-shadow: 0 0 0 1px #d0d0d0; }
.bt-export-light .bt-board-head { background: #0A0A0A; color: #fff; }
.bt-export-light .bt-board-head small { color: #ccc; }
.bt-export-light .bt-board-row { border-color: #d0d0d0; color: #0A0A0A; }
.bt-export-light .bt-board-row.rank-1 { color: #fff; }
.bt-export-light .bt-board-row.rank-2 { box-shadow: inset 0 0 0 2px #0A0A0A; }
.bt-export-light .bt-board-row.rank-missing, .bt-export-light .bt-board-more, .bt-export-light .bt-board-empty { color: #8F8E8E; }
.bt-export-light .bt-board-name { -webkit-line-clamp: unset; display: block; }

/* Black document header with the logo, shown only in the exported PDF */
.bt-export-head { display: none; }
.bt-export-light .bt-export-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 10px 16px;
    border-left: 6px solid var(--bt-red);
    font-family: var(--bt-font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
}
.bt-export-head img { width: 48px; height: 48px; }
.bt-export-head small { display: block; margin-bottom: 4px; font-family: var(--bt-font-text); font-size: 11px; letter-spacing: .2em; color: var(--bt-caption); }

@media print {
    .bt-sidebar, .bt-topbar, .bt-no-print, .bt-tabs, .bt-footer { display: none !important; }
    .bt-shell { display: block; }
    .bt-main { padding: 0; }
}

/* Live indicator (results refresh over SignalR) */
.bt-live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem .25rem;
    background: var(--bt-asphalt);
    color: var(--bt-caption);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bt-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--bt-steel); }
.bt-live.is-on { color: var(--bt-white); }
.bt-live.is-on i { background: var(--bt-red); animation: bt-blink 1.6s ease-in-out infinite; }
@keyframes bt-blink { 50% { opacity: .35; } }

/* Login */
.bt-login { max-width: 520px; margin: 1rem auto 0; }
.bt-login .bt-panel { padding: 2rem 1.75rem 2rem 2.25rem; }
.bt-login h1 { margin: .75rem 0 .5rem; }

/* Identity "manage account" pages */
.bt-manage-nav { display: flex; flex-direction: column; gap: .25rem; padding: 0; margin: 0; list-style: none; }
.bt-manage-nav .nav-link { padding: .6rem .9rem; color: var(--bt-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8125rem; border-left: 4px solid transparent; }
.bt-manage-nav .nav-link.active, .bt-manage-nav .nav-link:hover { color: var(--bt-white); background: var(--bt-asphalt); }
.bt-manage-nav .nav-link.active { border-left-color: var(--bt-red); }
.form-floating > label { color: var(--bt-caption); text-transform: none; letter-spacing: 0; font-weight: 600; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--bt-caption); }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent; }
.bt-flag { font-size: 0; color: transparent; overflow: hidden; }
.bt-flag.is-missing { visibility: hidden; width: 0; margin: 0; }

/* Keep row actions reachable in wide tables */
.bt-actions-col { position: sticky; right: 0; z-index: 1; background: var(--bt-panel) !important; box-shadow: -8px 0 12px -8px rgba(0,0,0,.8); }
.table thead th.bt-actions-col { z-index: 2; background: var(--bt-asphalt) !important; }

/* Number inputs: no spinners, the keyboard is faster */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* First-run setup (/setup) */
.bt-setup-langs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem .75rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; }
.bt-setup-langs a { color: var(--bt-caption); text-decoration: none; }
.bt-setup-langs a:hover, .bt-setup-langs a.active { color: var(--bt-white); }
.bt-setup-langs a.active { box-shadow: inset 0 -2px 0 var(--bt-red); }
.bt-setup-step { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .4rem; background: var(--bt-red); color: var(--bt-white); font-family: var(--bt-font-display); font-size: 1.1rem; line-height: 1; }