@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

* {
    box-sizing: border-box;
}

:root {
    --ink: #12232c;
    --ink-soft: #29414b;
    --muted: #6d7f86;
    --line: #d8e4e5;
    --paper: #ffffff;
    --canvas: #f3f8f7;
    --accent: #0a877d;
    --accent-dark: #076158;
    --accent-soft: #e1f3ef;
    --warning: #a36624;
    --danger: #a74343;
    --shadow: 0 18px 45px rgba(21, 58, 63, .08);
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background-color: var(--canvas);
    background-image: linear-gradient(rgba(10, 135, 125, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 135, 125, .045) 1px, transparent 1px), linear-gradient(140deg, #f7fbfa 0%, #edf6f3 52%, #f7f8f3 100%);
    background-size: 32px 32px, 32px 32px, auto;
    font-family: "Manrope", "Segoe UI", sans-serif;
}

.bracket-workspace-page {
    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;
    padding-bottom: 48px;
}

.bracket-workspace-page .app-header {
    margin-bottom: 18px;
}

.bracket-workspace-page .header-actions {
    align-items: center;
}

.compact-hero {
    margin-bottom: 18px;
    padding: 26px 30px;
}

.compact-hero h1 {
    margin: 5px 0 7px;
    font-size: clamp(28px, 4vw, 42px);
}

.compact-hero .intro {
    margin: 0;
    max-width: 720px;
}

.bracket-workspace-panel {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.bracket-workspace-panel .bracket-class-counts {
    gap: 16px;
}

.bracket-workspace-panel .bracket-class-count-card {
    min-height: 108px;
    align-content: center;
    padding: 18px 20px;
}

.bracket-workspace-panel .bracket-workspace-toolbar {
    align-items: end;
    padding-top: 2px;
}

.bracket-workspace-panel .bracket-workspace-toolbar h2 {
    margin: 4px 0 0;
    font-size: 23px;
}

.bracket-workspace-panel .bracket-class-picker {
    min-width: 220px;
}

.bracket-workspace-panel .bracket-category-picker {
    min-width: 120px;
}

.bracket-workspace-panel .bracket-class-wide {
    min-width: min(420px, 42vw);
    flex: 1 1 420px;
}

.bracket-workspace-panel .bracket-class-summary {
    margin-top: -2px;
}

/* Bracket Actions Toolbar */
.bracket-actions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 2px;
}

.bracket-actions-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bracket-clash-indicator {
    display: flex;
    align-items: center;
}

.clash-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
}

.clash-pill.is-safe {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.clash-pill.is-clash {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Swap Banner */
.bracket-swap-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(10, 135, 125, 0.14));
    border: 1.5px solid #0284c7;
    border-radius: 8px;
    margin-top: 4px;
    color: var(--ink);
    font-size: 13px;
    animation: swapBannerPulse 2.5s infinite ease-in-out;
}

@keyframes swapBannerPulse {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(2, 132, 199, 0);
    }

    50% {
        box-shadow: 0 0 12px rgba(2, 132, 199, 0.25);
    }
}

.button-small {
    padding: 4px 10px;
    font-size: 12px;
}

/* Table Slot, Partai, and Action Styling */
.bracket-participants-table th,
.bracket-participants-table td {
    vertical-align: middle;
}

.partai-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    box-shadow: 0 1px 4px rgba(234, 88, 12, 0.25);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.partai-pill.is-bye {
    background: rgba(100, 116, 139, 0.16);
    color: var(--muted);
    border: 1px dashed var(--line);
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 600;
}

.slot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font: 700 11px "DM Mono", monospace;
    letter-spacing: 0.04em;
}

.slot-badge.is-clash-badge {
    background: #dc2626;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.35);
}

.col-num {
    font-weight: 600;
    color: var(--muted);
}

.col-name strong {
    font-size: 13.5px;
    color: var(--ink);
}

.clash-tag-inline {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.row-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-order-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-soft);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-order-move:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-order-move:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-order-swap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    height: 26px;
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-order-swap:hover {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
}

.btn-order-swap.is-active {
    background: #e11d48;
    color: #fff;
    border-color: #e11d48;
}

tr.is-row-selected {
    background: rgba(14, 165, 233, 0.1) !important;
}

tr.is-row-clashing {
    background: rgba(254, 226, 226, 0.35);
}

.inline-bracket-preview {
    display: grid;
    gap: 16px;
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.inline-bracket-preview[hidden] {
    display: none !important;
}

.inline-bracket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.inline-bracket-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bracket-hint-text {
    font-size: 12.5px;
    color: var(--muted);
}

.inline-bracket-header h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.inline-bracket-header .status-message {
    margin: 0;
}

.inline-bracket-board {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-width: 780px;
    overflow-x: auto;
    padding: 0 0 12px;
}

/* Each round column */
.inline-bracket-round {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    gap: 8px;
}

.inline-bracket-round:first-child {
    padding-left: 0;
}

.inline-bracket-round:last-child {
    padding-right: 0;
}

.inline-bracket-round h3 {
    margin: 0 0 6px;
    color: var(--muted);
    font: 700 9.5px "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Match list - vertically distributes cards */
.inline-bracket-matches {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    gap: 8px;
    min-height: 496px;
}

.inline-match-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inline-match-partai-tag {
    align-self: center;
    padding: 1px 7px;
    border-radius: 999px;
    font: 800 8px "DM Mono", monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.2);
}

/* Match card */
.inline-bracket-match {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: var(--paper);
    box-shadow: 0 2px 8px rgba(21, 58, 63, .06);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.inline-bracket-match:hover {
    border-color: var(--accent);
    box-shadow: 0 3px 14px rgba(10, 135, 125, .14);
}

.inline-bracket-match.has-contingent-clash {
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.28) !important;
}

/* Row inside a match card (for each player/slot) */
.inline-bracket-player,
.inline-bracket-empty {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 34px;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.inline-bracket-player:last-child,
.inline-bracket-empty:last-child {
    border-bottom: 0;
}

/* Interactive slot styles */
.inline-bracket-player.is-interactive-slot {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.inline-bracket-player.is-interactive-slot:hover {
    background: rgba(10, 135, 125, 0.12);
}

.inline-bracket-player .slot-swap-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.inline-bracket-player.is-interactive-slot:hover .slot-swap-hint {
    opacity: 0.9;
}

.inline-bracket-player.is-swap-source {
    background: rgba(14, 165, 233, 0.22) !important;
    outline: 2px solid #0284c7;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
}

.inline-bracket-player.is-swap-source>span {
    background: #0284c7 !important;
}

.inline-bracket-player.is-slot-clashing>span {
    background: #dc2626 !important;
}

/* Slot label column (A, B, Q etc.) */
.inline-bracket-player>span,
.inline-bracket-empty>span {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--accent);
    font: 700 8.5px "DM Mono", monospace;
    letter-spacing: 0.04em;
    border-right: 1px solid var(--line);
    min-height: 34px;
    transition: background 0.15s ease;
}

/* Player info wrapper div */
.inline-bracket-player>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 3px 7px;
}

/* Player info area */
.inline-bracket-player strong {
    display: block;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 9.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.inline-bracket-player small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 7.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Empty slot */
.inline-bracket-empty {
    opacity: 0.5;
}

.inline-bracket-empty em {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 4px 7px;
    color: var(--muted);
    font-size: 8.5px;
    font-style: italic;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bracket-page {
    min-height: 100vh;
    background-color: #e9f2f0;
    background-image: linear-gradient(rgba(10, 135, 125, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 135, 125, .06) 1px, transparent 1px);
    background-size: 32px 32px;
}

.bracket-shell {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.bracket-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.bracket-header h1 {
    margin-bottom: 6px;
    font-size: clamp(24px, 3vw, 36px);
}

.bracket-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.bracket-stage {
    min-height: 520px;
    padding: 28px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow);
}

.bracket-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bracket-help {
    margin-bottom: 22px;
    padding: 11px 13px;
    border-left: 3px solid var(--accent);
    color: var(--ink-soft);
    background: var(--accent-soft);
    font-size: 13px;
}

.bracket-board {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 16px;
    min-width: 820px;
    overflow-x: auto;
}

.bracket-round {
    min-width: 0;
}

.bracket-round h2 {
    margin: 0 0 12px;
    color: var(--ink-soft);
    font: 700 11px/1.2 "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bracket-matches {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 12px;
    height: calc(100% - 28px);
}

.bracket-match {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--line);
    background: #fff;
}

.bracket-round:not(:last-child) .bracket-match::after,
.bracket-round:not(:first-child) .bracket-match::before {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 2px;
    background: var(--accent);
    content: "";
}

.bracket-round:not(:last-child) .bracket-match::after {
    right: -17px;
}

.bracket-round:not(:first-child) .bracket-match::before {
    left: -17px;
}

.bracket-round:not(:first-child) .bracket-match::after {
    box-shadow: 0 -19px 0 -0.5px var(--accent), 0 19px 0 -0.5px var(--accent);
}

.match-number {
    color: var(--muted);
    font: 600 10px/1.2 "DM Mono", monospace;
    text-transform: uppercase;
}

.bracket-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
}

.participant-name-input,
.bracket-competitor {
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: #fff;
    font-size: 11px;
}

.participant-name-input:focus {
    border-color: var(--accent);
    outline: 2px solid rgba(10, 135, 125, .18);
}

.bracket-competitor {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.bracket-entry .bracket-competitor {
    width: auto;
    color: var(--accent-dark);
    font-weight: 700;
    cursor: pointer;
}

.bracket-competitor:not(:disabled):hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.bracket-competitor:disabled,
.bracket-competitor.is-empty {
    color: var(--muted);
    background: #f4f7f6;
    cursor: not-allowed;
}

.bracket-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.result-card {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--line);
    background: #fff;
}

.result-label {
    color: var(--muted);
    font: 700 10px/1.2 "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.result-card strong {
    color: var(--ink);
    font-size: 14px;
}

.third-place-result {
    border-color: rgba(163, 102, 36, .4);
    background: #fffaf2;
}

@media (max-width: 760px) {
    .bracket-shell {
        width: min(100% - 24px, 1440px);
        padding-top: 18px;
    }

    .bracket-header {
        align-items: stretch;
        flex-direction: column;
    }

    .bracket-stage {
        padding: 16px;
        overflow-x: auto;
    }

    .bracket-results {
        grid-template-columns: 1fr;
    }
}

button,
input,
select {
    font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(10, 135, 125, .28);
    outline-offset: 2px;
}

.page-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 72px;
}

.app-header,
.site-header {
    margin-bottom: 16px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 16px rgba(18, 35, 44, .03), 0 1px 2px rgba(18, 35, 44, .02);
    backdrop-filter: blur(8px);
}

.brand-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.brand-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.brand-logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 4px;
    border: 1px solid rgba(10, 135, 125, .2);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(10, 135, 125, .1);
    transition: transform .18s ease, box-shadow .18s ease;
}

.brand-logo-wrapper:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 135, 125, .16);
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .08));
}

.brand-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.brand-name {
    color: var(--ink);
    font: 800 14px/1.2 "Space Grotesk", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.brand-tagline {
    color: var(--muted);
    font: 600 11px/1.2 "DM Mono", monospace;
    letter-spacing: .04em;
}

.championship-hero {
    margin: 0 0 22px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 251, 0.9) 100%);
    box-shadow: 0 4px 20px rgba(18, 35, 44, .03);
}

.hero-badge-row {
    margin-bottom: 8px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font: 700 10.5px/1.2 "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent-dark);
    font: 700 11px/1.2 "DM Mono", monospace;
    letter-spacing: .12em;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: clamp(26px, 3.8vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.championship-headline {
    word-break: break-word;
    text-wrap: balance;
}

h2 {
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.intro {
    max-width: 680px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.header-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(18, 35, 44, .04);
    transition: all .18s ease;
}

.header-link-icon {
    flex-shrink: 0;
    stroke: var(--accent);
}

.header-link:hover {
    color: var(--accent-dark);
    border-color: rgba(10, 135, 125, .3);
    background: var(--accent-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 135, 125, .12);
}

.header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.user-status {
    max-width: 220px;
    overflow: hidden;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .8);
    color: var(--ink-soft);
    font: 600 11px/1.2 "DM Mono", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
}

.summary-grid[hidden] {
    display: none !important;
}

@keyframes maintenance-gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.public-maintenance {
    min-height: 100vh;
}

.public-maintenance .public-data-content,
.public-maintenance #last-updated {
    display: none !important;
}

.maintenance-panel {
    width: min(680px, calc(100% - 32px));
    margin: 22px auto;
    padding: 48px 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--shadow);
    text-align: center;
}

.maintenance-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}

.maintenance-gear-main {
    width: 52px;
    height: 52px;
    color: var(--accent);
    animation: maintenance-gear-spin 6s linear infinite;
    flex-shrink: 0;
}

.maintenance-gear-small {
    width: 28px;
    height: 28px;
    color: var(--accent);
    opacity: .5;
    animation: maintenance-gear-spin 4s linear infinite reverse;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 4px;
}

.maintenance-panel h1 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(24px, 4.5vw, 36px);
}

.maintenance-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.summary-card,
.content-panel {
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.summary-card {
    min-height: 116px;
    padding: 19px 21px;

    .bracket-slot-plan {
        display: grid;
        gap: 12px;
        padding: 15px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .72);
    }

    .bracket-slot-plan-header,
    .bracket-slot-plan-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .bracket-slot-plan-header h3 {
        margin: 4px 0 0;
        font-size: 16px;
    }

    .bracket-slot-plan-header .status-message {
        margin: 0;
        white-space: nowrap;
    }

    .bracket-slot-plan-summary strong {
        color: var(--accent-dark);
        font-size: 13px;
    }

    .bracket-slot-plan-summary span {
        color: var(--muted);
        font-size: 11px;
    }

    .bracket-slot-plan-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .bracket-slot-chip {
        display: grid;
        min-width: 62px;
        padding: 7px 9px;
        border: 1px solid var(--line);
        color: var(--ink-soft);
        background: var(--paper);
        text-align: center;
    }

    .bracket-slot-chip strong {
        color: var(--accent-dark);
        font: 700 13px "DM Mono", monospace;
    }

    .bracket-slot-chip small {
        color: var(--muted);
        font-size: 9px;
    }
}

.summary-card span {
    display: block;
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.summary-card strong {
    display: block;
    margin-top: 17px;
    color: var(--accent-dark);
    font-size: 29px;
    letter-spacing: -.04em;
}

.summary-updated {
    margin: -10px 0 18px;
    color: var(--muted);
    font: 11px "DM Mono", monospace;
}

.admin-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 24px;
    margin-top: 18px;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 4px 20px rgba(18, 35, 44, .04);
}

.admin-sidebar::-webkit-scrollbar {
    width: 5px;
}

.admin-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(10, 135, 125, 0.2);
    border-radius: 4px;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 135, 125, 0.45);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 12px;
    border-bottom: 1px solid var(--line);
}

.sidebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 20px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font: 700 11px/1.2 "DM Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(10, 135, 125, .25);
}

.sidebar-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-group-title {
    padding: 4px 8px 6px;
    border-bottom: 1px dashed rgba(216, 228, 229, .8);
    margin-bottom: 4px;
    color: var(--muted);
    font: 700 10.5px/1.2 "DM Mono", monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.side-menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all .16s ease-in-out;
}

.side-menu-item[hidden] {
    display: none;
}

.side-menu-item:hover {
    border-color: rgba(10, 135, 125, .15);
    color: var(--accent-dark);
    background: rgba(10, 135, 125, .06);
}

.side-menu-item.active {
    border-color: var(--accent-dark);
    color: var(--paper);
    background: var(--accent);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(10, 135, 125, .22);
}

.menu-icon {
    flex-shrink: 0;
    stroke: currentColor;
    transition: transform .16s ease;
}

.side-menu-item.active .menu-icon {
    stroke: var(--paper);
    transform: scale(1.08);
}

.menu-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-main-panel {
    min-width: 0;
}

.medal-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}

.compact-medal-summary {
    gap: 10px;
    margin: 12px 0 16px;
}

.compact-medal-summary .summary-card {
    min-height: 78px;
    padding: 12px 15px;
}

.compact-medal-summary .summary-card strong {
    margin-top: 8px;
    font-size: 24px;
}

.content-panel {
    margin-top: 16px;
    padding: 25px;
}

.login-panel {
    max-width: 560px;
    margin: 30px auto 0;
}

.login-form {
    display: grid;
    gap: 8px;
}

.login-form label,
.admin-controls label {
    margin-top: 8px;
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.login-form input,
select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font-size: 14px;
}

.login-form input:focus,
select:focus {
    outline: 3px solid rgba(10, 135, 125, .15);
    border-color: var(--accent);
}

.login-form .button {
    margin-top: 12px;
}

.google-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.google-mark {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #4285f4;
    background: var(--paper);
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.settings-panel {
    border-color: #bde5dc;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(225, 243, 239, .72));
}

.settings-form {
    display: grid;
    gap: 8px;
}

.settings-form>label {
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.settings-form-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.settings-form-row input {
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font-size: 14px;
}

.settings-form-row input:focus {
    outline: 3px solid rgba(10, 135, 125, .15);
    border-color: var(--accent);
}

.settings-form .status-message {
    margin-bottom: 0;
}

.fee-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.fee-settings-grid label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fee-settings-grid input,
.payment-paid-input {
    width: 100%;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font: 13px "Manrope", sans-serif;
}

.settings-help {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.payment-table {
    min-width: 800px;
}

.payment-paid-input {
    width: 100px;
}

.payment-actions {
    display: grid;
    justify-items: stretch;
    gap: 7px;
    width: 122px;
    padding: 0;
    border: 0;
}

.invoice-button {
    width: 122px;
    white-space: nowrap;
}

.payment-actions>.button {
    width: 122px;
    min-height: 38px;
    padding: 8px 10px;
    text-align: center;
}

.invoice-dialog {
    width: min(760px, calc(100% - 32px));
    padding: 24px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 24px 70px rgba(18, 35, 44, .24);
}

.invoice-dialog::backdrop {
    background: rgba(18, 35, 44, .42);
}

.invoice-header,
.invoice-total,
.invoice-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.invoice-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.invoice-meta {
    padding: 7px 0;
    color: var(--muted);
    font-size: 13px;
}

.invoice-meta strong {
    color: var(--ink);
}

.invoice-adjustments {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--canvas);
}

.invoice-adjustments label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.invoice-adjustments input,
.invoice-adjustments textarea {
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font: 13px "Manrope", sans-serif;
    resize: vertical;
}

.invoice-adjustments .button {
    justify-self: start;
}

.invoice-note {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

.invoice-note p {
    margin: 4px 0 0;
    color: var(--ink);
    white-space: pre-wrap;
}

.invoice-event-header {
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--ink-soft);
    text-align: center;
}

.invoice-event-header .eyebrow {
    margin-bottom: 5px;
    font-size: 10px;
}

.invoice-event-header h3 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    letter-spacing: .02em;
}

.invoice-table {
    min-width: 0;
    margin: 14px 0;
}

.invoice-table th,
.invoice-table td {
    padding: 9px 10px;
    font-size: 12px;
}

.invoice-total {
    padding: 8px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.invoice-total strong {
    color: var(--accent-dark);
}

.invoice-remaining {
    color: var(--danger);
    font-weight: 800;
}

.invoice-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

.invoice-actions .button {
    min-width: 145px;
    min-height: 42px;
    text-align: center;
}

@media (max-width: 520px) {
    .invoice-actions {
        justify-content: stretch;
    }

    .invoice-actions .button {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media print {
    body * {
        visibility: hidden;
    }

    .invoice-dialog,
    .invoice-dialog * {
        visibility: visible;
    }

    .invoice-dialog {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        border: 0;
        box-shadow: none;
    }

    .invoice-actions,
    .invoice-header .button,
    .invoice-adjustments {
        display: none;
    }
}

@page thermal {
    size: 80mm 150mm;
    margin: 0;
}

@media print {
    body.thermal-print {
        page: thermal;
        min-width: 0;
        width: 80mm;
        height: 150mm;
        margin: 0;
        padding: 4mm 3mm;
        background: #ffffff;
        overflow: hidden;
    }

    body.thermal-print .invoice-dialog {
        position: static;
        width: 74mm;
        height: auto;
        min-height: 0;
        padding: 0;
        overflow: visible !important;
        font-size: 10px;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.thermal-print .invoice-header {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    body.thermal-print .invoice-header h2 {
        font-size: 17px;
    }

    body.thermal-print .invoice-event-header {
        margin-bottom: 9px;
        padding-bottom: 8px;
    }

    body.thermal-print .invoice-event-header h3 {
        font-size: 15px;
    }

    body.thermal-print .invoice-meta,
    body.thermal-print .invoice-total {
        font-size: 11px;
        line-height: 1.35;
    }

    body.thermal-print .invoice-table {
        width: 100%;
        table-layout: fixed;
    }

    body.thermal-print .invoice-table th,
    body.thermal-print .invoice-table td {
        padding: 6px 3px;
        font-size: 10px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    body.thermal-print .invoice-table th:nth-child(1),
    body.thermal-print .invoice-table td:nth-child(1) {
        width: 36%;
    }

    body.thermal-print .invoice-table th:nth-child(2),
    body.thermal-print .invoice-table td:nth-child(2) {
        width: 13%;
    }

    body.thermal-print .invoice-table th:nth-child(3),
    body.thermal-print .invoice-table td:nth-child(3),
    body.thermal-print .invoice-table th:nth-child(4),
    body.thermal-print .invoice-table td:nth-child(4) {
        width: 25.5%;
    }

    body.thermal-print .invoice-event-header .eyebrow {
        font-size: 10px;
        line-height: 1.35;
    }

    body.thermal-print .invoice-content,
    body.thermal-print .invoice-table,
    body.thermal-print .invoice-total {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

.access-code-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.slow-track-formula-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.slow-track-formula-list>div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 13px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
}

.slow-track-formula-list strong {
    color: var(--accent-dark);
    font: 700 12px "DM Mono", monospace;
}

.slow-track-formula-list span {
    color: var(--ink-soft);
    font-size: 13px;
}

.slow-track-formula-table {
    min-width: 620px;
}

.slow-track-pool-input {
    width: min(100%, 220px);
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font: 12px "DM Mono", monospace;
}

.slow-track-pool-input:focus {
    outline: 3px solid rgba(10, 135, 125, .15);
    border-color: var(--accent);
}

.slow-track-medal-text {
    color: var(--ink-soft);
    font-size: 12px;
}

.slow-track-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.slow-track-pagination .button {
    min-height: 36px;
    padding: 8px 12px;
}

.access-code-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
}

.access-code-item strong,
.access-code-item small {
    display: block;
}

.access-code-item strong {
    font-size: 13px;
}

.access-code-item small {
    margin-top: 3px;
    color: var(--muted);
    font: 10px "DM Mono", monospace;
}

.access-code-item .button {
    min-height: 34px;
    padding: 7px 10px;
}

.class-type-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 15px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
}

.class-type-item strong,
.class-type-item small {
    display: block;
}

.class-type-item strong {
    font-size: 14px;
}

.class-type-item small {
    margin-top: 4px;
    color: var(--muted);
    font: 10px "DM Mono", monospace;
}

.class-type-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    cursor: pointer;
    color: var(--accent-dark);
    font: 700 11px "DM Mono", monospace;
    white-space: nowrap;
}

.class-type-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.switch-track {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #b9c8ca;
    transition: .18s ease;
}

.switch-track::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 2px 5px rgba(18, 35, 44, .2);
    content: "";
    transition: .18s ease;
}

.class-type-switch input:checked+.switch-track {
    background: var(--accent);
}

.class-type-switch input:checked+.switch-track::after {
    transform: translateX(18px);
}

.class-type-switch input:focus-visible+.switch-track {
    outline: 3px solid rgba(10, 135, 125, .28);
    outline-offset: 2px;
}

.class-type-switch input:disabled+.switch-track {
    cursor: wait;
    opacity: .55;
}

.festival-format-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 14px 0;
    padding: 13px 15px;
    border: 1px solid #bde5dc;
    background: var(--accent-soft);
}

.festival-format-control[hidden] {
    display: none !important;
}

.control-label {
    display: block;
    margin-bottom: 4px;
    color: var(--accent-dark);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.festival-format-control small {
    color: var(--muted);
    font-size: 12px;
}

.format-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--muted);
    font: 700 11px "DM Mono", monospace;
    white-space: nowrap;
}

.format-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.format-switch input:checked~strong {
    color: var(--accent-dark);
}

.format-switch input:checked+.switch-track {
    background: var(--accent);
}

.format-switch input:checked+.switch-track::after {
    transform: translateX(18px);
}

.format-switch input:not(:checked)~strong {
    color: var(--muted);
}

.format-switch input:focus-visible+.switch-track {
    outline: 3px solid rgba(10, 135, 125, .28);
    outline-offset: 2px;
}

.format-switch input:disabled+.switch-track {
    cursor: wait;
    opacity: .55;
}

.odd-allocation-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--accent-dark);
    font: 700 11px "DM Mono", monospace;
    white-space: nowrap;
}

.odd-allocation-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.odd-allocation-switch input:checked+.switch-track {
    background: #b98928;
}

.odd-allocation-switch input:checked+.switch-track::after {
    transform: translateX(18px);
}

.odd-allocation-switch input:focus-visible+.switch-track {
    outline: 3px solid rgba(10, 135, 125, .28);
    outline-offset: 2px;
}

.odd-allocation-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.odd-allocation-radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.odd-allocation-radio input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent);
}

.odd-allocation-radio:has(input:checked) {
    color: var(--accent-dark);
}

.odd-medal-panel {
    margin-top: 14px;
}

.medal-detail-tabs {
    margin-top: 16px;
}

.panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.compact-toolbar {
    margin-bottom: 8px;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 620px);
    gap: 7px;
    margin-bottom: 14px;
}

.search-row label {
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.search-row input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font-size: 14px;
}

.search-row input:focus {
    outline: 3px solid rgba(10, 135, 125, .15);
    border-color: var(--accent);
}

.category-button,
.button {
    min-height: 42px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: .18s ease;
}

.category-button {
    color: var(--accent-dark);
    background: transparent;
}

.category-button.active,
.category-button:hover {
    color: var(--paper);
    background: var(--accent);
    transform: translateY(-1px);
}

.button {
    color: var(--paper);
    background: var(--accent);
}

.button:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

.button:disabled {
    cursor: wait;
    opacity: .55;
    transform: none;
}

.secondary-button {
    color: var(--accent-dark);
    background: transparent;
}

.primary-button {
    margin-top: 0;
}

.status-message {
    min-height: 22px;
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.status-message.success {
    color: var(--accent-dark);
}

.status-message.error {
    color: var(--danger);
}

.participant-edit-dialog {
    width: min(92vw, 520px);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 20px 60px rgb(15 23 42 / 25%);
}

.participant-edit-dialog::backdrop {
    background: rgb(15 23 42 / 45%);
}

.participant-edit-dialog form {
    display: grid;
    gap: 10px;
}

.participant-edit-dialog input {
    width: 100%;
    margin-bottom: 8px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.participant-edit-dialog .panel-toolbar {
    margin-bottom: 6px;
}

.active-mix-section {
    margin-top: 22px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.active-mix-section h4 {
    margin: 0 0 10px;
}

.active-mix-list {
    display: grid;
    gap: 8px;
}

.active-mix-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.active-mix-item div {
    display: grid;
    gap: 3px;
}

.active-mix-item small {
    color: var(--muted);
}

.festival-preview {
    margin-top: 24px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.festival-preview-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0;
}

.festival-preview-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.festival-preview-table-wrap {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper);
}

.festival-preview-table-wrap h3 {
    margin: 0;
    padding: 13px 15px;
    color: var(--accent-dark);
    border-bottom: 1px solid var(--line);
    background: var(--accent-soft);
    font-size: 15px;
}

.festival-preview-table-wrap table {
    min-width: 0;
}

.festival-preview-table-wrap th,
.festival-preview-table-wrap td {
    padding: 10px 12px;
}

.festival-match-table-wrap {
    margin-top: 14px;
}

.festival-match-table {
    min-width: 980px;
}

.festival-match-table th,
.festival-match-table td {
    text-align: center;
    vertical-align: middle;
}

.festival-match-table th:nth-child(2),
.festival-match-table th:nth-child(7),
.festival-match-table td:nth-child(2),
.festival-match-table td:nth-child(7) {
    min-width: 190px;
    text-align: left;
}

.festival-match-table th:nth-child(3),
.festival-match-table th:nth-child(8),
.festival-match-table td:nth-child(3),
.festival-match-table td:nth-child(8) {
    min-width: 150px;
    text-align: left;
}

.festival-corner {
    font-weight: 800;
    white-space: nowrap;
}

.red-corner {
    color: #b42318;
}

.blue-corner {
    color: #175cd3;
}

.festival-vs-cell {
    color: var(--muted);
    font-weight: 800;
}

.festival-placement-buttons {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.festival-place-button {
    min-width: 30px;
    padding: 6px 7px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--paper);
    color: var(--accent-dark);
    cursor: pointer;
    font: 700 10px "DM Mono", monospace;
}

.festival-place-button:hover,
.festival-place-button.is-selected {
    background: var(--accent);
    color: var(--paper);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

@media (max-width: 760px) {
    .festival-preview-tables {
        grid-template-columns: 1fr;
    }
}

.status-message.empty {
    color: var(--warning);
}

.schedule-status {
    color: var(--muted);
    font: 600 11px "DM Mono", monospace;
}

.schedule-tatami-control {
    display: grid;
    gap: 5px;
    min-width: 150px;
}

.schedule-tatami-control span {
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    text-transform: uppercase;
}

.schedule-tatami-control select,
.schedule-tatami-select {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink-soft);
}

.schedule-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.schedule-tatami-card {
    min-height: 220px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.schedule-tatami-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--ink-soft);
    color: var(--paper);
}

.schedule-tatami-card > header span {
    font: 800 17px "DM Mono", monospace;
}

.schedule-tatami-card > header strong {
    font: 600 11px "DM Mono", monospace;
}

.schedule-tatami-card > header small {
    opacity: .75;
    font-size: 9px;
}

.schedule-card-list {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.schedule-card-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--line);
    background: var(--canvas);
}

.schedule-card-item > b {
    color: var(--accent-dark);
    font: 700 12px "DM Mono", monospace;
}

.schedule-card-item div {
    display: grid;
    gap: 4px;
}

.schedule-card-item strong {
    color: var(--ink-soft);
    font-size: 12px;
}

.schedule-card-item small,
.schedule-empty {
    color: var(--muted);
    font-size: 11px;
}

.bracket-workspace {
    display: grid;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(225, 243, 239, .58));
}

.bracket-class-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bracket-class-count-card {
    display: grid;
    gap: 3px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .78);
}

.bracket-class-count-card span,
.bracket-class-count-card small {
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bracket-class-count-card strong {
    color: var(--accent-dark);
    font-size: 26px;
    line-height: 1;
}

.bracket-rules-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
}

.bracket-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.bracket-rules-dialog {
    width: min(860px, calc(100% - 32px));
    max-height: min(760px, calc(100vh - 32px));
    padding: 22px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 24px 70px rgba(18, 35, 44, .24);
}

.bracket-rules-dialog::backdrop {
    background: rgba(18, 35, 44, .42);
}

.bracket-rules-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.bracket-rules-modal-header h2 {
    margin: 4px 0 0;
    font-size: 22px;
}

.bracket-rules-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bracket-rules-header h3 {
    margin: 4px 0 0;
    font-size: 17px;
}

.bracket-rules-header .status-message {
    margin: 0;
    white-space: nowrap;
}

.bracket-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.bracket-rule-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    cursor: pointer;
}

.bracket-rule-item input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
}

.bracket-rule-item span {
    display: grid;
    gap: 3px;
}

.bracket-rule-item strong {
    color: var(--ink-soft);
    font-size: 12px;
}

.bracket-rule-item small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.bracket-mix-panel {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px dashed var(--accent);
    background: rgba(225, 243, 239, .48);
}

.bracket-mix-panel h3 {
    margin: 4px 0 0;
    font-size: 16px;
}

.bracket-mix-form {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.bracket-mix-form input {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font: 13px "Manrope", sans-serif;
}

.bracket-mix-form input:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(10, 135, 125, .15);
}

.bracket-mix-source-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bracket-mix-source-column {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.bracket-mix-source-column h4 {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
}

.bracket-mix-source-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.bracket-age-picker {
    display: grid;
    gap: 3px;
    min-width: 145px;
    color: var(--muted);
    font: 700 9px "DM Mono", monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bracket-age-picker select {
    min-height: 32px;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font: 12px "Manrope", sans-serif;
}

.bracket-mix-source-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.bracket-mix-source {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    background: rgba(255, 255, 255, .8);
    font-size: 12px;
    cursor: pointer;
}

.bracket-mix-source input {
    accent-color: var(--accent);
}

.bracket-mix-source span {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket-mix-source small {
    color: var(--muted);
    font: 10px "DM Mono", monospace;
    white-space: nowrap;
}

@media (max-width: 700px) {

    .bracket-rules-grid,
    .bracket-mix-source-columns,
    .bracket-mix-form {
        grid-template-columns: 1fr;
    }

    .bracket-rules-header {
        display: grid;
    }

    .bracket-rules-modal-header {
        display: grid;
    }
}

.bracket-workspace-toolbar,
.bracket-class-summary {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.bracket-workspace-toolbar h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.bracket-class-picker {
    display: grid;
    gap: 5px;
    min-width: min(320px, 100%);
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bracket-class-picker select {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    background: var(--paper);
    font: 13px "Manrope", sans-serif;
}

.bracket-class-picker select:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(10, 135, 125, .15);
}

.bracket-class-summary {
    align-items: center;
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
}

.bracket-class-summary strong {
    color: var(--ink-soft);
    font-size: 14px;
}

.bracket-class-summary span {
    color: var(--accent-dark);
    font: 700 11px "DM Mono", monospace;
}

.bracket-contingent-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 16px;
}

.contingent-summary-label {
    width: 100%;
    color: var(--muted);
    font: 700 10px "DM Mono", monospace;
    text-transform: uppercase;
}

.contingent-summary-card {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 11px;
}

.contingent-summary-card b {
    color: var(--accent-dark);
    font: 800 14px "DM Mono", monospace;
}

.contingent-summary-card small {
    color: var(--muted);
    font-size: 10px;
}

.table-responsive {
    overflow-x: auto;
    border: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}

.pagination-bar .button {
    min-height: 38px;
    padding: 8px 12px;
}

.page-info {
    min-width: 170px;
    color: var(--muted);
    font: 11px "DM Mono", monospace;
    text-align: center;
}

table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: var(--paper);
}

th,
td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--paper);
    background: var(--ink-soft);
    font: 700 10px "DM Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    color: #30464e;
    font-size: 13px;
    line-height: 1.45;
}

.merged-team-cell {
    min-width: 150px;
    color: var(--accent-dark);
    background: rgba(225, 243, 239, .7);
    font-weight: 800;
    vertical-align: middle;
}

tbody tr:nth-child(even) {
    background: #f5faf8;
}

tbody tr:hover {
    background: var(--accent-soft);
}

.empty-state {
    padding: 34px;
    color: var(--muted);
    text-align: center;
}

.source-badge {
    padding: 7px 10px;
    border: 1px solid #bde5dc;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font: 700 10px "DM Mono", monospace;
}

.file-dropzone {
    display: block;
    padding: 24px;
    border: 1px dashed var(--accent);
    border-radius: 2px;
    background: #f4fbf9;
    cursor: pointer;
    transition: .18s ease;
}

.file-dropzone:hover {
    background: var(--accent-soft);
}

.file-title,
.file-help {
    display: block;
}

.file-title {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 800;
}

.file-help {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.file-dropzone input {
    display: block;
    width: 100%;
    margin-top: 15px;
    font-size: 13px;
}

.admin-controls {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.admin-controls label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-controls select {
    min-width: 180px;
}

@media (max-width: 700px) {
    .page-shell {
        width: min(100% - 24px, 1180px);
        padding: 22px 0 42px;
    }

    .app-header,
    .site-header {
        padding: 10px 14px;
    }

    .brand-bar {
        gap: 12px;
    }

    .panel-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .championship-hero {
        padding: 18px 20px;
        margin-bottom: 18px;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .header-link {
        flex: 1 1 auto;
        text-align: center;
    }

    .summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .medal-summary-grid {
        grid-template-columns: 1fr;
    }

    .summary-card {
        min-height: 92px;
    }

    .summary-card strong {
        margin-top: 11px;
    }

    .content-panel {
        padding: 18px;
    }

    .panel-toolbar .button {
        width: 100%;
    }

    .pagination-bar {
        gap: 8px;
    }

    .pagination-bar .button {
        flex: 1;
    }

    .page-info {
        min-width: 0;
        flex: 1.3;
        font-size: 10px;
    }

    .category-button {
        flex: 1 1 30%;
    }

    .admin-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-controls select,
    .admin-controls .button {
        width: 100%;
    }

    .admin-shell {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .admin-sidebar {
        position: relative;
        top: 0;
        gap: 12px;
        padding: 12px;
    }

    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 6px;
    }

    .settings-form-row {
        grid-template-columns: 1fr;
    }

    .fee-settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-form-row .button {
        width: 100%;
    }

    .source-badge {
        align-self: flex-start;
    }
}

@media (max-width: 430px) {

    .app-header,
    .site-header {
        padding: 8px 12px;
    }

    .brand-name {
        font-size: 12.5px;
    }

    .brand-tagline {
        font-size: 9.5px;
    }

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

    h1 {
        font-size: 21px;
        line-height: 1.2;
    }

    .brand-logo-wrapper {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        padding: 3px;
        border-radius: 6px;
    }

    .hero-badge {
        font-size: 9.5px;
    }

    .intro {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .category-button {
        flex-basis: 100%;
    }
}

.schedule-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0;
}

.schedule-board-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.schedule-category-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
}