/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0f1923;
    color: #e0e0e0;
    min-height: 100vh;
}

label {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 600;
}

/* ===== Home Button ===== */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(12, 22, 32, 0.96);
    border-bottom: 1px solid #1e3044;
}

.btn-home {
    position: static;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 48, 68, 0.95);
    border: 1px solid #2a4a66;
    border-radius: 50%;
    color: #8899aa;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-home:hover {
    background: #c8102e;
    border-color: #c8102e;
    color: #fff;
    transform: scale(1.1);
}

.ui-icon-svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
}

.btn-home .ui-icon-svg,
.user-notification-icon .ui-icon-svg {
    width: 16px;
    height: 16px;
}

.user-notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ===== User Menu ===== */
.user-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.user-menu-name {
    color: #8899aa;
    font-weight: 600;
}

.user-menu-unverified {
    color: #ffb77a;
    font-size: 11px;
    font-weight: 700;
}

.user-menu-link {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(30, 48, 68, 0.95);
    border: 1px solid #2a4a66;
    border-radius: 4px;
    color: #8899aa;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.user-menu-link:hover {
    background: #1e3350;
    color: #fff;
    border-color: #c8102e;
}

.user-menu-admin {
    background: rgba(200, 16, 46, 0.15);
    border-color: #c8102e;
    color: #c8102e;
}

.user-menu-admin:hover {
    background: #c8102e;
    color: #fff;
}

.user-notifications {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-notification-btn {
    position: relative;
    width: 36px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 48, 68, 0.95);
    border: 1px solid #2a4a66;
    border-radius: 6px;
    color: #dbe5ee;
    cursor: pointer;
    transition: all 0.2s;
}

.user-notification-btn:hover {
    border-color: #c8102e;
    color: #fff;
}

.user-notification-icon {
    font-size: 15px;
    line-height: 1;
}

.user-notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c8102e;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 0 0 2px #0f1923;
}

.user-notification-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 500;
    width: min(360px, 88vw);
    background: #162231;
    border: 1px solid #2a4a66;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.user-notification-title {
    padding: 10px 12px;
    border-bottom: 1px solid #22384e;
    background: #132030;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.user-notification-list {
    max-height: 340px;
    overflow: auto;
}

.user-notification-item {
    width: 100%;
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #1f3348;
    color: #dbe5ee;
    text-align: left;
    cursor: pointer;
}

.user-notification-item:last-child {
    border-bottom: none;
}

.user-notification-item:hover {
    background: #1a2a3a;
}

.user-notification-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: transparent;
}

.user-notification-item.unread .user-notification-dot {
    background: #ff455d;
    box-shadow: 0 0 0 3px rgba(255, 69, 93, 0.18);
}

.user-notification-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.user-notification-subject {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.user-notification-meta {
    color: #8fa1b3;
    font-size: 11px;
    line-height: 1.35;
}

.user-notification-body {
    color: #b8c6d4;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-line;
}

.user-notification-empty {
    padding: 14px 12px;
    color: #8fa1b3;
    font-size: 12px;
}

/* ===== Header ===== */
.header {
    background: linear-gradient(135deg, #1a2a3a 0%, #0d1b2a 100%);
    border-bottom: 3px solid #c8102e;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

.header h1 span {
    color: #c8102e;
}

.header-info {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: #8899aa;
}

.header-info strong {
    color: #ffffff;
}

.header-buttons {
    display: flex;
    gap: 8px;
}

.bracket-page-toolbar {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.bracket-toolbar-main {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.bracket-toolbar-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bracket-toolbar-select-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
}

.bracket-toolbar-label,
.bracket-draw-mode-label {
    font-size: 12px;
    color: #8899aa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bracket-draw-mode-select {
    padding: 8px 12px;
    background: #0f1923;
    border: 1px solid #2a4a66;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 14px;
}

.bracket-draw-mode-select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.bracket-view-panel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bracket-view-panel-inline {
    align-items: center;
}

.bracket-view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: #111c28;
    border: 1px solid #1e3044;
}

.bracket-view-option {
    position: relative;
    display: inline-flex;
}

.bracket-view-option[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 30;
    width: max-content;
    max-width: 280px;
    padding: 7px 9px;
    border: 1px solid #31506c;
    border-radius: 8px;
    background: #101c28;
    color: #dbe5ee;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .16s ease, transform .16s ease;
}

.bracket-view-option[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    z-index: 31;
    width: 9px;
    height: 9px;
    border-right: 1px solid #31506c;
    border-bottom: 1px solid #31506c;
    background: #101c28;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px) rotate(45deg);
    transition: opacity .16s ease, transform .16s ease;
}

.bracket-view-option[data-tooltip]:hover::before,
.bracket-view-option[data-tooltip]:hover::after,
.bracket-view-option[data-tooltip]:focus::before,
.bracket-view-option[data-tooltip]:focus::after {
    opacity: 1;
    transform: translate(-50%, 0) rotate(45deg);
}

.bracket-view-option[data-tooltip]:hover::after,
.bracket-view-option[data-tooltip]:focus::after {
    transform: translate(-50%, 0);
}

.bracket-view-btn {
    border: none;
    background: transparent;
    color: #8fa1b3;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}

.bracket-view-btn:hover:not(:disabled) {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.bracket-view-btn.active {
    background: #c8102e;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(200, 16, 46, 0.18);
}

.bracket-view-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bracket-view-hint {
    font-size: 12px;
    color: #8fa1b3;
}

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

.bracket-toolbar-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #2d4861;
    border-radius: 12px;
    background: #132130;
    color: #e2ebf4;
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.bracket-toolbar-btn .ui-icon-svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.bracket-toolbar-btn:hover:not(:disabled) {
    border-color: #416888;
    background: #17293a;
    transform: translateY(-1px);
}

.bracket-toolbar-btn.is-primary {
    border-color: rgba(52, 108, 166, .48);
    background: rgba(24, 57, 92, .62);
}

.bracket-toolbar-btn.is-print {
    border-color: rgba(74, 152, 109, .48);
    background: rgba(31, 79, 55, .56);
}

.bracket-toolbar-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.bracket-toolbar-btn span {
    white-space: nowrap;
}

.bracket-toolbar-btn.is-icon-only {
    width: 42px;
    min-width: 42px;
    padding: 0;
    justify-content: center;
}

@media (max-width: 900px) {
    .bracket-toolbar-main {
        align-items: stretch;
    }

    .bracket-view-panel {
        flex-direction: column;
    }

    .bracket-view-panel-inline {
        flex-direction: row;
    }

    .bracket-view-toggle {
        width: 100%;
        justify-content: stretch;
    }

    .bracket-view-panel-inline .bracket-view-toggle {
        width: auto;
        justify-content: center;
    }

    .bracket-view-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .bracket-view-panel-inline .bracket-view-btn {
        flex: 0 0 auto;
        min-width: 82px;
    }

    .bracket-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .bracket-toolbar-btn {
        justify-content: center;
    }

    .bracket-toolbar-btn.is-icon-only {
        width: 100%;
        min-width: 0;
    }
}

/* ===== Buttons ===== */
.btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-reset {
    background: #c8102e;
    color: #fff;
}

.btn-reset:hover {
    background: #a00d24;
}

.btn-print {
    background: #2a6041;
    color: #fff;
}

.btn-print:hover {
    background: #1e4a31;
}

.btn-save {
    background: #1a6fc4;
    color: #fff;
}

.btn-save:hover {
    background: #155ca3;
}

/* ===== Sport Selection Page ===== */
.sport-selection-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px 60px;
}

.sport-selection-container h2 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1e3044;
    text-align: center;
}

.sport-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.sport-tile {
    background: #162231;
    border: 2px solid #1e3044;
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.sport-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #c8102e;
    opacity: 0;
    transition: opacity 0.25s;
}

.sport-tile:hover {
    border-color: #c8102e;
    background: #1a2e42;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.2);
}

.sport-tile:hover::before {
    opacity: 1;
}

.sport-tile-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.85;
}

.sport-tile-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* ===== Setup Page ===== */
.setup-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 40px 60px;
}

.setup-section {
    margin-bottom: 32px;
}

.setup-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1e3044;
}

.section-desc {
    font-size: 13px;
    color: #8899aa;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ===== Upload Area ===== */
.upload-area {
    border: 2px dashed #2a4a66;
    border-radius: 8px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.2s;
    background: #111c28;
}

.upload-area:hover {
    border-color: #3a6a8a;
}

.upload-area.drag-over {
    border-color: #c8102e;
    background: #1a2535;
    box-shadow: 0 0 20px rgba(200, 16, 46, 0.15);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.upload-area p {
    color: #8899aa;
    font-size: 14px;
    margin-bottom: 4px;
}

.upload-or {
    color: #556677 !important;
    font-size: 12px !important;
    margin: 12px 0 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.upload-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
}

.btn-upload {
    background: #c8102e;
    color: #fff;
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-upload:hover {
    background: #a00d24;
}

.btn-upload-xml {
    background: #2a4a66;
    color: #fff;
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-upload-xml:hover {
    background: #3a5a7a;
}

/* ===== Upload Status ===== */
.upload-status {
    margin-top: 12px;
    padding: 0;
    font-size: 13px;
    min-height: 20px;
    text-align: center;
}

.upload-status.success {
    color: #4caf50;
}

.upload-status.error {
    color: #e74c3c;
}

.upload-status.info {
    color: #8899aa;
}

/* ===== Age Groups ===== */
.age-groups-list {
    margin-bottom: 12px;
}

.no-groups-msg {
    color: #556677;
    font-size: 13px;
    font-style: italic;
    padding: 12px 0;
}

.age-group-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: #162231;
    border: 1px solid #1e3044;
    border-radius: 4px;
    margin-bottom: 6px;
}

.age-group-label {
    font-weight: 600;
    color: #ffffff;
    min-width: 100px;
    font-size: 13px;
}

.age-group-row label {
    font-size: 12px;
    color: #8899aa;
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-age {
    width: 60px;
    padding: 4px 8px;
    background: #0f1923;
    border: 1px solid #2a4a66;
    border-radius: 3px;
    color: #e0e0e0;
    font-size: 13px;
    text-align: center;
}

.input-age:focus {
    outline: none;
    border-color: #c8102e;
}

.btn-add-group {
    background: #1e3044;
    color: #8899aa;
    border: 1px dashed #2a4a66;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-add-group:hover {
    background: #2a4060;
    color: #ffffff;
    border-color: #3a6a8a;
}

.btn-remove-group {
    background: none;
    border: none;
    color: #c8102e;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1;
}

.btn-remove-group:hover {
    background: rgba(200, 16, 46, 0.15);
}

/* ===== Fighter Summary / Preview ===== */
.fighter-summary {
    margin-bottom: 20px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.summary-table thead th {
    text-align: left;
    padding: 8px 12px;
    background: #1e3044;
    color: #8899aa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}

.summary-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid #1e3044;
    color: #e0e0e0;
}

.summary-table tbody tr:hover {
    background: #162231;
}

.summary-total {
    margin-top: 12px;
    font-size: 13px;
    color: #8899aa;
}

.summary-warning {
    margin-top: 8px;
    font-size: 12px;
    color: #e7a33c;
}

/* ===== Generate Area ===== */
.generate-area {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.tournament-label {
    font-size: 13px;
    color: #8899aa;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-tournament {
    padding: 8px 12px;
    background: #0f1923;
    border: 1px solid #2a4a66;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 14px;
    width: 260px;
}

.input-tournament:focus {
    outline: none;
    border-color: #c8102e;
}

.btn-generate {
    background: #c8102e;
    color: #fff;
    padding: 10px 32px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-generate:hover {
    background: #a00d24;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
}

/* ===== Group Tabs ===== */
.bracket-page-tabs {
    margin: 14px 20px 14px;
}

.bracket-panel-sequence[hidden],
.bracket-panel-formations[hidden] {
    display: none !important;
}

.bracket-sequence-shell {
    padding: 0 20px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 14px;
    align-items: start;
}

.bracket-sequence-menu,
.bracket-sequence-list {
    grid-column: 1;
}

.bracket-sequence-menu {
    padding: 10px 12px;
    border: 1px solid #22384e;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(19, 34, 49, .96) 0%, rgba(14, 26, 39, .96) 100%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.bracket-sequence-timeflow {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 12px;
    min-height: calc(100vh - 144px);
    display: grid;
    grid-template-rows: auto auto minmax(360px, 1fr);
    gap: 10px;
}

.bracket-sequence-timeflow-empty,
.bracket-sequence-timeflow-config,
.bracket-sequence-timeflow-status,
.bracket-sequence-timeflow-rail {
    border: 1px solid #22384e;
    border-radius: 12px;
    background: rgba(15, 27, 39, .94);
    box-shadow: inset 0 0 0 1px rgba(16, 30, 44, .35);
}

.bracket-sequence-timeflow-empty {
    padding: 18px;
    color: #93a7bb;
    font-size: 13px;
    line-height: 1.45;
}

.bracket-sequence-timeflow-config {
    overflow: hidden;
}

.bracket-sequence-timeflow-config-summary {
    min-height: 38px;
    padding: 10px 12px;
    color: #dbe5ee;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.bracket-sequence-timeflow-config-summary::-webkit-details-marker {
    display: none;
}

.bracket-sequence-timeflow-config-summary::after {
    content: '+';
    float: right;
    color: #8ea4b7;
}

.bracket-sequence-timeflow-config[open] .bracket-sequence-timeflow-config-summary::after {
    content: '-';
}

.bracket-sequence-timeflow-form {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px;
}

.bracket-sequence-timeflow-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 8px;
    align-items: center;
}

.bracket-sequence-timeflow-field-label,
.bracket-sequence-timeflow-break-title {
    color: #93a7bb;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.bracket-sequence-timeflow-input {
    width: 100%;
    min-height: 32px;
    border: 1px solid #2b4a66;
    border-radius: 8px;
    background: #0f1a24;
    color: #e7eef5;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 8px;
}

.bracket-sequence-timeflow-break-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 58px;
    gap: 6px;
}

.bracket-sequence-timeflow-actions {
    display: flex;
    justify-content: flex-end;
}

.bracket-sequence-timeflow-save {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(74, 152, 109, .48);
    border-radius: 9px;
    background: rgba(49, 110, 79, .28);
    color: #d7efe2;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.bracket-sequence-timeflow-save:hover:not(:disabled) {
    border-color: rgba(111, 198, 151, .7);
    background: rgba(61, 134, 96, .38);
    transform: translateY(-1px);
}

.bracket-sequence-timeflow-save:active:not(:disabled) {
    transform: translateY(1px);
}

.bracket-sequence-timeflow-save:disabled {
    opacity: .46;
    cursor: not-allowed;
}

.bracket-sequence-timeflow-status {
    padding: 12px;
    display: grid;
    gap: 6px;
}

.bracket-sequence-timeflow-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.bracket-sequence-timeflow-range {
    color: #b7c5d3;
    font-size: 12px;
    font-weight: 800;
}

.bracket-sequence-timeflow-live {
    color: #8ea4b7;
    font-size: 12px;
    line-height: 1.35;
}

.bracket-sequence-timeflow-warning {
    padding: 7px 8px;
    border: 1px solid rgba(200, 16, 46, .38);
    border-radius: 8px;
    background: rgba(200, 16, 46, .12);
    color: #ffb5c1;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.bracket-sequence-timeflow-rail {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(26, 45, 63, .92) 0%, rgba(10, 19, 29, .96) 100%),
        repeating-linear-gradient(180deg, transparent 0 38px, rgba(88, 118, 146, .12) 38px 39px);
}

.bracket-sequence-timeflow-rail::before {
    content: '';
    position: absolute;
    top: 76px;
    bottom: 42px;
    left: 22px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #62a9dd, #e0a83d);
}

.bracket-sequence-timeflow-lane-header {
    position: absolute;
    top: 12px;
    left: 62px;
    right: 8px;
    height: 30px;
    z-index: 3;
}

.bracket-sequence-timeflow-lane-title {
    position: absolute;
    top: 0;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid rgba(64, 111, 150, .48);
    border-radius: 8px;
    background: rgba(18, 33, 49, .9);
    color: #dbe5ee;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bracket-sequence-timeflow-lanes {
    position: absolute;
    top: 76px;
    right: 8px;
    bottom: 42px;
    left: 62px;
}

.bracket-sequence-timeflow-bound {
    position: absolute;
    left: 36px;
    z-index: 4;
    color: #dbe5ee;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

.bracket-sequence-timeflow-bound.is-top {
    top: 52px;
}

.bracket-sequence-timeflow-bound.is-bottom {
    bottom: 16px;
}

.bracket-sequence-timeflow-break {
    position: absolute;
    left: 0;
    right: 6px;
    min-height: 18px;
    padding: 2px 6px;
    border: 1px solid rgba(224, 168, 61, .44);
    border-radius: 8px;
    background: rgba(224, 168, 61, .18);
    color: #f6deb1;
    font-size: 10px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
}

.bracket-sequence-timeflow-match {
    position: absolute;
    min-height: 12px;
    padding: 0;
    border: 1px solid rgba(93, 170, 129, .52);
    border-radius: 7px;
    background: #142434;
    color: #e6fff0;
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.bracket-sequence-timeflow-match-number,
.bracket-sequence-timeflow-match-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    line-height: 1;
    white-space: nowrap;
}

.bracket-sequence-timeflow-match-number {
    min-width: 24px;
    padding: 2px 5px;
    background: #e7eef6;
    color: #102131;
    letter-spacing: .04em;
}

.bracket-sequence-timeflow-match-time {
    flex: 1 1 auto;
    padding: 2px 5px;
    border-left: 1px solid #294764;
    background: #13283b;
    color: #e7eef6;
}

.bracket-sequence-timeflow-match:hover {
    border-color: rgba(126, 215, 167, .88);
    background: rgba(74, 152, 109, .62);
    transform: scale(1.02);
    z-index: 4;
}

.bracket-sequence-timeflow-match.is-active {
    border-color: rgba(255, 56, 88, .78);
    background: rgba(200, 16, 46, .58);
    box-shadow: 0 0 0 1px rgba(255, 56, 88, .24), 0 0 16px rgba(255, 56, 88, .36);
    z-index: 4;
}

.bracket-sequence-timeflow-match.sequence-hover-linked {
    border-color: rgba(224, 168, 61, .9);
    box-shadow: 0 0 0 1px rgba(224, 168, 61, .22), 0 0 14px rgba(224, 168, 61, .42);
    transform: scale(1.04);
    z-index: 5;
}

.bracket-sequence-timeflow-now {
    position: absolute;
    left: -70px;
    width: 30px;
    height: 18px;
    background: transparent;
    border-radius: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 6;
}

.bracket-sequence-timeflow-now::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #ff3858;
    filter: drop-shadow(0 0 8px rgba(255, 56, 88, .68));
    transform: translateY(-50%);
}

.bracket-sequence-timeflow-now::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 4px;
    border-radius: 999px 0 0 999px;
    background: #ff3858;
    box-shadow: 0 0 0 1px rgba(255, 56, 88, .32), 0 0 14px rgba(255, 56, 88, .55);
    transform: translateY(-50%);
}

.bracket-sequence-summary-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: stretch;
}

.bracket-sequence-summary-main {
    min-width: 0;
    display: grid;
}

.bracket-sequence-summary-copy {
    color: #b7c5d3;
    font-size: 13px;
    line-height: 1.55;
}

.bracket-sequence-summary-hint {
    margin-top: 8px;
    color: #8ea4b7;
    font-size: 12px;
    line-height: 1.45;
}

.bracket-sequence-tournament-notice {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(74, 152, 109, .42);
    border-radius: 10px;
    background: rgba(74, 152, 109, .12);
    color: #d7efe2;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.bracket-sequence-mode-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #35516d;
    border-radius: 999px;
    background: #122131;
    color: #dbe5ee;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(23, 40, 57, .35) inset;
}

.bracket-sequence-mode-pill.is-efficient {
    border-color: rgba(224, 168, 61, .58);
    background: rgba(224, 168, 61, .16);
    color: #f6deb1;
}

.bracket-sequence-mode-pill.is-very-efficient {
    border-color: rgba(74, 152, 109, .62);
    background: rgba(74, 152, 109, .16);
    color: #bfe9cf;
}

.bracket-sequence-mode-pill.is-pro {
    border-color: rgba(111, 132, 247, .62);
    background: rgba(111, 132, 247, .16);
    color: #d5ddff;
}

.bracket-sequence-mode-pill.is-default {
    border-color: #3f5b74;
    background: rgba(38, 59, 79, .18);
    color: #cdd8e2;
}

.bracket-sequence-summary-hint-warning {
    color: #f2c88a;
}

.bracket-sequence-mode-controls {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.bracket-sequence-gap-controls {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.bracket-sequence-gap-label {
    color: #d7e1ea;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

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

.bracket-sequence-tatami-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bracket-sequence-tatami-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bracket-sequence-compare-workspace {
    display: grid;
    gap: 14px;
}

.bracket-sequence-piece-tray {
    display: grid;
    gap: 8px;
}

.bracket-sequence-piece-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.bracket-sequence-piece {
    min-height: 40px;
    padding: 0 14px;
    border: 1px dashed #3a5875;
    border-radius: 12px;
    background: rgba(17, 31, 45, .78);
    color: #dbe5ee;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
    cursor: grab;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.bracket-sequence-piece.is-mode-default {
    border-color: rgba(96, 124, 150, .48);
}

.bracket-sequence-piece.is-mode-efficient {
    border-color: rgba(224, 168, 61, .48);
}

.bracket-sequence-piece.is-mode-very-efficient {
    border-color: rgba(74, 152, 109, .48);
}

.bracket-sequence-piece.is-mode-pro {
    border-color: rgba(111, 132, 247, .56);
    background: rgba(33, 44, 88, .78);
    color: #e0e5ff;
}

.bracket-sequence-piece:hover {
    border-color: #4a769d;
    background: rgba(25, 48, 73, .85);
    transform: translateY(-1px);
}

.bracket-sequence-piece.dragging,
.bracket-sequence-piece:active {
    cursor: grabbing;
}

.bracket-sequence-piece.is-primary {
    border-style: solid;
    border-color: rgba(74, 152, 109, .6);
    background: rgba(74, 152, 109, .14);
    color: #c9edd7;
}

.bracket-sequence-piece.is-secondary {
    border-style: solid;
    border-color: rgba(224, 168, 61, .58);
    box-shadow: inset 0 0 0 1px rgba(224, 168, 61, .12);
}

.bracket-sequence-compare-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.bracket-sequence-compare-links {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.bracket-sequence-compare-path {
    fill: none;
    stroke: rgba(90, 121, 149, .56);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 6;
    transition: stroke .16s ease, stroke-width .16s ease, filter .16s ease, opacity .16s ease;
}

.bracket-sequence-compare-path.is-active {
    stroke: rgba(224, 168, 61, .96);
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(224, 168, 61, .44));
}

.bracket-sequence-slot-panel {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.bracket-sequence-swap-column {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 24px;
}

.bracket-sequence-swap-btn {
    width: 92px;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid #35516d;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(24, 41, 59, .96) 0%, rgba(17, 30, 44, .96) 100%);
    color: #dbe5ee;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .03em;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, opacity .16s ease;
}

.bracket-sequence-swap-btn:hover:not(:disabled) {
    border-color: #4779a6;
    background: #193049;
    transform: translateY(-1px);
}

.bracket-sequence-swap-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.bracket-sequence-slot-card {
    display: grid;
    gap: 8px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid #35516d;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20, 35, 50, .96) 0%, rgba(15, 27, 40, .96) 100%);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.bracket-sequence-slot-card.is-selected {
    border-style: solid;
    border-color: rgba(74, 152, 109, .52);
    box-shadow: inset 0 0 0 1px rgba(74, 152, 109, .12);
}

.bracket-sequence-slot-card.is-empty {
    background: rgba(17, 31, 45, .78);
}

.bracket-sequence-slot-card.is-drag-over {
    border-color: rgba(224, 168, 61, .72);
    background: rgba(224, 168, 61, .08);
    box-shadow: inset 0 0 0 1px rgba(224, 168, 61, .14);
    transform: translateY(-1px);
}

.bracket-sequence-slot-top {
    display: grid;
    gap: 8px;
}

.bracket-sequence-slot-label {
    color: #9fb1c2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bracket-sequence-algorithm-select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #2b4a66;
    border-radius: 10px;
    background: #122131;
    color: #e7eef5;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    padding: 0 38px 0 12px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.bracket-sequence-algorithm-select:hover:not(:disabled),
.bracket-sequence-algorithm-select:focus {
    border-color: #4779a6;
    background: #193049;
    box-shadow: 0 0 0 2px rgba(71, 121, 166, .18);
    outline: none;
}

.bracket-sequence-algorithm-select:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.bracket-sequence-slot-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(74, 152, 109, .16);
    color: #c9edd7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bracket-sequence-slot-badge.is-secondary {
    background: rgba(224, 168, 61, .16);
    color: #f6deb1;
}

.bracket-sequence-slot-clear {
    margin-left: auto;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #35516d;
    border-radius: 999px;
    background: #122131;
    color: #dbe5ee;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

.bracket-sequence-slot-clear:hover {
    border-color: #4779a6;
    background: #193049;
}

.bracket-sequence-slot-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.bracket-sequence-slot-drop-hint {
    color: #8ea4b7;
    font-size: 12px;
    line-height: 1.45;
}

.bracket-sequence-slot-content {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.bracket-sequence-panel-list {
    display: grid;
    gap: 10px;
}

.bracket-sequence-panel-empty {
    min-height: 180px;
    padding: 24px 18px;
    border: 1px dashed #2c455f;
    border-radius: 12px;
    background: rgba(19, 34, 49, .64);
    color: #93a7bb;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}

.bracket-sequence-algorithm-btn,
.bracket-sequence-gap-btn,
.bracket-sequence-tatami-btn {
    min-width: 40px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #2b4a66;
    border-radius: 10px;
    background: #122131;
    color: #dbe5ee;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.bracket-sequence-algorithm-btn {
    width: fit-content;
    min-width: 220px;
}

.bracket-sequence-algorithm-btn:hover,
.bracket-sequence-gap-btn:hover:not(:disabled),
.bracket-sequence-tatami-btn:hover:not(:disabled) {
    border-color: #4779a6;
    background: #193049;
    transform: translateY(-1px);
}

.bracket-sequence-algorithm-btn.active,
.bracket-sequence-gap-btn.active,
.bracket-sequence-tatami-btn.active {
    border-color: rgba(224, 168, 61, .58);
    background: rgba(224, 168, 61, .18);
    color: #f6deb1;
    box-shadow: inset 0 0 0 1px rgba(224, 168, 61, .14);
}

.bracket-sequence-gap-btn:disabled,
.bracket-sequence-tatami-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.bracket-sequence-tatami-btn {
    width: 48px;
    min-width: 48px;
    padding: 0;
}

.bracket-sequence-tatami-icon {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
}

.bracket-sequence-tatami-icon.is-count-3 {
    gap: 2px;
}

.bracket-sequence-tatami-mat {
    display: block;
    width: 10px;
    height: 20px;
    border: 1px solid rgba(183, 205, 225, .82);
    border-radius: 3px;
    background:
        linear-gradient(90deg, transparent 0 42%, rgba(183, 205, 225, .56) 42% 58%, transparent 58% 100%),
        rgba(36, 67, 93, .78);
    box-shadow: inset 0 0 0 1px rgba(11, 20, 30, .38);
}

.bracket-sequence-tatami-btn.active .bracket-sequence-tatami-mat {
    border-color: rgba(246, 222, 177, .9);
    background:
        linear-gradient(90deg, transparent 0 42%, rgba(246, 222, 177, .68) 42% 58%, transparent 58% 100%),
        rgba(112, 84, 35, .86);
}

.bracket-sequence-diagnostics-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(180, 96, 64, .34);
    border-radius: 10px;
    background: rgba(64, 26, 22, .22);
    color: #ffd7b2;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.bracket-sequence-diagnostics-btn.is-summary {
    min-width: 240px;
    min-height: 100%;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    align-self: stretch;
    border-radius: 12px;
}

.bracket-sequence-diagnostics-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.bracket-sequence-diagnostics-copy {
    min-width: 0;
    display: block;
    text-align: left;
    line-height: 1.35;
}

.bracket-sequence-diagnostics-btn:hover {
    border-color: rgba(230, 146, 97, .48);
    background: rgba(86, 34, 29, .28);
}

.bracket-sequence-diagnostics-btn.active {
    border-color: rgba(230, 146, 97, .58);
    background: rgba(104, 42, 34, .34);
    box-shadow: inset 0 0 0 1px rgba(230, 146, 97, .18);
}

.bracket-sequence-diagnostics-inline {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
    border: 1px solid #2c455f;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(19, 34, 49, .98) 0%, rgba(14, 26, 39, .98) 100%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
    animation: bracket-sequence-diagnostics-slide .22s ease-out;
}

.bracket-sequence-diagnostics-inline-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(44, 69, 95, .78);
}

.bracket-sequence-diagnostics-card-title {
    min-width: 0;
}

.bracket-sequence-diagnostics-close {
    width: 40px;
    height: 40px;
    border: 1px solid #35516d;
    border-radius: 10px;
    background: #122131;
    color: #dbe5ee;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.bracket-sequence-diagnostics-close:hover {
    border-color: #4779a6;
    background: #193049;
}

@keyframes bracket-sequence-diagnostics-slide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bracket-sequence-violation-panel {
    display: grid;
    gap: 8px;
}

.bracket-sequence-violation-list {
    display: grid;
    gap: 8px;
}

.bracket-sequence-violation-item {
    padding: 10px 12px;
    border: 1px solid rgba(180, 96, 64, .34);
    border-radius: 10px;
    background: rgba(64, 26, 22, .22);
    display: grid;
    gap: 8px;
}

.bracket-sequence-violation-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bracket-sequence-violation-sequence {
    color: #ffd7b2;
    font-size: 13px;
    font-weight: 800;
}

.bracket-sequence-violation-badge {
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 200, 128, .26);
    background: rgba(255, 176, 95, .14);
    color: #ffd9b5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bracket-sequence-violation-meta {
    color: #d7e1ea;
    font-size: 12px;
    font-weight: 700;
}

.bracket-sequence-violation-matchup {
    color: #f2f6fa;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.bracket-sequence-violation-details {
    display: grid;
    gap: 6px;
}

.bracket-sequence-violation-detail {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.bracket-sequence-violation-detail-label {
    color: #ffcfaa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.bracket-sequence-violation-detail-value {
    color: #dce7f0;
    font-size: 12px;
    line-height: 1.45;
}

.bracket-sequence-violation-item.is-type-stage_borrow {
    border-color: rgba(98, 124, 214, .34);
    background: rgba(25, 35, 68, .22);
}

.bracket-sequence-violation-item.is-type-stage_borrow .bracket-sequence-violation-badge {
    border-color: rgba(137, 164, 255, .26);
    background: rgba(118, 145, 247, .16);
    color: #dce4ff;
}

.bracket-sequence-violation-item.is-type-dependency {
    border-color: rgba(186, 120, 70, .34);
    background: rgba(59, 34, 22, .24);
}

.bracket-sequence-violation-item.is-type-immediate_repeat {
    border-color: rgba(204, 92, 92, .38);
    background: rgba(71, 24, 24, .24);
}

.bracket-sequence-violation-item.is-type-immediate_repeat .bracket-sequence-violation-badge {
    border-color: rgba(255, 154, 154, .28);
    background: rgba(212, 82, 82, .18);
    color: #ffd6d6;
}

.bracket-sequence-violation-item.is-type-overdue .bracket-sequence-violation-badge,
.bracket-sequence-violation-item.is-type-too_early .bracket-sequence-violation-badge {
    border-color: rgba(255, 196, 121, .24);
    background: rgba(224, 168, 61, .14);
    color: #ffe2b7;
}

@media (max-width: 720px) {
    .bracket-sequence-violation-detail {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.bracket-sequence-list {
    display: grid;
    gap: 10px;
}

.bracket-sequence-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #22384e;
    border-radius: 12px;
    background: #162231;
    color: #dbe5ee;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.bracket-sequence-item:hover {
    border-color: #36516c;
    background: #1a2a3c;
    transform: translateY(-1px);
}

.bracket-sequence-item.active {
    border-color: rgba(200, 16, 46, .35);
    background: linear-gradient(180deg, rgba(200, 16, 46, .14) 0%, rgba(200, 16, 46, .07) 100%);
    box-shadow: inset 0 0 0 1px rgba(229, 74, 99, .14);
}

.bracket-sequence-item.group-active {
    border-color: rgba(74, 152, 109, .52);
    background: linear-gradient(180deg, rgba(74, 152, 109, .14) 0%, rgba(74, 152, 109, .06) 100%);
    box-shadow: inset 0 0 0 1px rgba(74, 152, 109, .14);
}

.bracket-sequence-item.group-active .bracket-sequence-number {
    border-color: rgba(74, 152, 109, .52);
    box-shadow: 0 0 0 1px rgba(74, 152, 109, .1);
}

.bracket-sequence-item.link-active {
    border-color: rgba(224, 168, 61, .58);
    background: linear-gradient(180deg, rgba(224, 168, 61, .14) 0%, rgba(224, 168, 61, .07) 100%);
    box-shadow: inset 0 0 0 1px rgba(224, 168, 61, .14), 0 0 0 1px rgba(224, 168, 61, .1);
}

.bracket-sequence-item.is-reorderable {
    cursor: grab;
}

.bracket-sequence-item.is-reorderable * {
    cursor: inherit;
}

.bracket-sequence-item.sequence-pressing,
.bracket-sequence-item.dragging {
    cursor: grabbing;
}

.bracket-sequence-item.dragging {
    opacity: .45;
}

.bracket-sequence-item.drop-before,
.bracket-sequence-item.drop-after {
    position: relative;
}

.bracket-sequence-item.drop-before::before,
.bracket-sequence-item.drop-after::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 999px;
    background: #e0a83d;
    box-shadow: 0 0 0 1px rgba(14, 24, 35, .45);
    z-index: 3;
    pointer-events: none;
}

.bracket-sequence-item.drop-before::before {
    top: -2px;
}

.bracket-sequence-item.drop-after::after {
    bottom: -2px;
}

.bracket-sequence-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #101a24;
    border: 1px solid #2a4a66;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .03em;
}

.bracket-sequence-body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.bracket-sequence-drop-panel {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-self: stretch;
    align-items: stretch;
    min-width: 108px;
    border-radius: 12px;
    border: 1px solid rgba(224, 168, 61, .42);
    background: rgba(224, 168, 61, .14);
    overflow: hidden;
}

.bracket-sequence-item.showing-drop-number .bracket-sequence-drop-panel {
    display: grid;
}

.bracket-sequence-drop-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 0 10px;
    color: #f6deb1;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .03em;
}

.bracket-sequence-drop-value.is-current {
    background: rgba(9, 18, 28, .2);
    color: #d7e1ea;
}

.bracket-sequence-drop-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    border-left: 1px solid rgba(224, 168, 61, .22);
    border-right: 1px solid rgba(224, 168, 61, .22);
    color: #f6deb1;
    font-size: 18px;
    font-weight: 900;
}

.bracket-sequence-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}

.bracket-sequence-group {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.bracket-sequence-meta {
    color: #8ea4b7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 6px;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.bracket-sequence-item.sequence-hover-linked .bracket-sequence-meta {
    color: #f6deb1;
    background: rgba(224, 168, 61, .14);
    box-shadow: 0 0 0 1px rgba(224, 168, 61, .22), 0 0 14px rgba(224, 168, 61, .32);
}

.bracket-sequence-tatami-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(93, 170, 129, .46);
    background: rgba(64, 133, 97, .18);
    color: #b9efd0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bracket-sequence-time-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(98, 169, 221, .44);
    background: rgba(52, 105, 145, .2);
    color: #cfe8ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

.bracket-sequence-matchup {
    color: #dbe5ee;
    font-size: 13px;
    line-height: 1.45;
}

.bracket-sequence-matchup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
}

.bracket-sequence-fighter {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(10, 18, 27, .16);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.bracket-sequence-fighter-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.bracket-sequence-coach-marker {
    flex: 0 0 8px;
    width: 8px;
    height: 16px;
    border-radius: 999px;
    background: var(--bracket-sequence-coach-accent, #547086);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

.bracket-sequence-fighter-title {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: visible;
    position: relative;
}

.bracket-sequence-fighter-coach-inline {
    min-width: 0;
    flex: 0 1 42%;
    color: #8ea4b7;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bracket-sequence-fighter-name {
    min-width: 0;
    flex: 1 1 auto;
    color: #f5f8fb;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.bracket-sequence-fighter-name[data-sequence-fighter-hover="1"] {
    cursor: pointer;
}

.bracket-sequence-fighter-name.is-unclipped {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: max-content;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    padding-right: 6px;
    background: linear-gradient(90deg, rgba(17, 31, 45, .98) 0%, rgba(17, 31, 45, .96) 72%, rgba(17, 31, 45, 0) 100%);
}

.bracket-sequence-fighter.fighter-hover-active {
    border-color: rgba(87, 166, 245, .82);
    background: rgba(49, 94, 142, .16);
    box-shadow:
        inset 0 0 0 1px rgba(87, 166, 245, .14),
        0 0 12px rgba(87, 166, 245, .28);
    animation: bracket-sequence-fighter-glow .95s ease-in-out infinite alternate;
}

@keyframes bracket-sequence-fighter-glow {
    from {
        box-shadow:
            inset 0 0 0 1px rgba(87, 166, 245, .12),
            0 0 8px rgba(87, 166, 245, .18);
    }
    to {
        box-shadow:
            inset 0 0 0 1px rgba(132, 197, 255, .24),
            0 0 16px rgba(87, 166, 245, .4);
    }
}

.bracket-sequence-fighter-submeta {
    gap: 4px;
}

.bracket-sequence-fighter-submeta .fighter-submeta-item {
    border-radius: 6px;
}

.bracket-sequence-fighter-submeta .fighter-submeta-badge {
    min-width: 16px;
    padding: 2px 4px;
    font-size: 8px;
}

.bracket-sequence-fighter-submeta .fighter-submeta-number {
    min-width: 20px;
    padding: 2px 5px;
    font-size: 9px;
}

.bracket-sequence-gap-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #112738;
    border: 1px solid #2c455f;
    color: #dbe5ee;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    margin-left: auto;
}

.bracket-sequence-matchup-divider {
    color: #8ea4b7;
    font-weight: 800;
    align-self: center;
    white-space: nowrap;
}

.bracket-sequence-empty {
    padding: 24px 18px;
    border: 1px solid #22384e;
    border-radius: 12px;
    background: #132231;
    color: #93a7bb;
    text-align: center;
}

body.bracket-sequence-dragging,
body.bracket-sequence-dragging * {
    cursor: grabbing !important;
}

body.bracket-sequence-algorithm-dragging,
body.bracket-sequence-algorithm-dragging * {
    cursor: grabbing !important;
}

@media (max-width: 1180px) {
    .bracket-sequence-shell {
        grid-template-columns: 1fr;
    }

    .bracket-sequence-menu,
    .bracket-sequence-list,
    .bracket-sequence-timeflow {
        grid-column: 1;
    }

    .bracket-sequence-timeflow {
        grid-row: auto;
        position: static;
        min-height: 0;
    }

    .bracket-sequence-summary-top {
        grid-template-columns: 1fr;
    }

    .bracket-sequence-diagnostics-btn.is-summary {
        min-width: 0;
    }

    .bracket-sequence-tatami-buttons {
        justify-content: flex-start;
    }

    .bracket-sequence-compare-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bracket-sequence-compare-links {
        display: none;
    }

    .bracket-sequence-swap-column {
        padding-top: 0;
        justify-content: stretch;
    }

    .bracket-sequence-swap-btn {
        width: 100%;
    }

    .bracket-sequence-matchup-row {
        grid-template-columns: 1fr;
    }

    .bracket-sequence-matchup-divider {
        justify-self: center;
    }
}

.group-tabs-wrapper {
    background: #111c28;
    border-bottom: 1px solid #1e3044;
    overflow-x: auto;
}

.group-tabs {
    display: flex;
    flex-direction: row;
    gap: 0;
    min-width: max-content;
    padding: 0 20px;
}

.group-tabs.layered {
    flex-direction: column;
    padding: 0 20px 10px;
}

.group-filter-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
}

.group-filter-title {
    min-width: 76px;
    color: #9fb1c5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.group-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.group-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #8899aa;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.group-tab:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.03);
}

.group-tab.active {
    color: #ffffff;
    border-bottom-color: #c8102e;
    background: rgba(200, 16, 46, 0.08);
}

/* ===== Bracket Container ===== */
.bracket-wrapper {
    overflow-x: auto;
    padding: 30px 40px 40px;
}

.bracket {
    display: flex;
    gap: 0;
    min-width: max-content;
}

.bracket.classic-layout {
    display: block;
}

.classic-bracket {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 18px;
    min-width: max-content;
}

.classic-half {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.classic-half.right {
    flex-direction: row-reverse;
}

.classic-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-width: 240px;
}

.classic-center-top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.classic-final {
    min-width: 240px;
}

.bracket-end-stage {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.classic-round .round-header {
    min-height: 48px;
}

.placement-rounds-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 236px;
    margin-left: 18px;
}

.bracket.classic-layout .placement-rounds-section {
    margin-left: 0;
    margin-top: 0;
    align-items: stretch;
}

.placement-rounds-section .round {
    min-width: 236px;
}

.bracket-end-stage .placement-rounds-section {
    margin-left: 0;
}

.placement-round .round-header {
    color: #d4b56f;
    border-bottom-color: rgba(212, 181, 111, 0.34);
}

/* ===== Round Column ===== */
.round {
    display: flex;
    flex-direction: column;
    min-width: 220px;
}

.round-header {
    text-align: center;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8899aa;
    border-bottom: 2px solid #1e3044;
}

.round-matches {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    gap: 4px;
}

/* ===== Match Card ===== */
.match {
    display: flex;
    flex-direction: column;
    margin: 0 6px;
    position: relative;
}

.match-slot {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    background: #162231;
    border: 1px solid #1e3044;
    padding: 5px 8px;
    min-height: 42px;
    font-size: 12px;
    cursor: default;
    transition: all 0.15s;
    position: relative;
}

.match-slot:first-of-type {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #0f1923;
}

.match-slot:last-of-type {
    border-radius: 0 0 4px 4px;
}

.match-slot.clickable {
    cursor: pointer;
}

.match-slot.clickable:hover {
    background: #1e3350;
    border-color: #3a5a7a;
}

.match-slot.winner {
    background: #1a3828;
    border-color: #2a6041;
}

.match-slot.loser {
    opacity: 0.45;
}

.match-slot.empty {
    background: #111c28;
    border-color: #1a2838;
}

/* ===== Start Match Button ===== */
.btn-start-match {
    display: block;
    width: calc(100% - 12px);
    margin: 4px 6px;
    padding: 5px 10px;
    background: #c8102e;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-start-match:hover {
    background: #e01535;
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.4);
}

/* ===== Match Score Info ===== */
.match-score-info {
    display: block;
    padding: 2px 8px;
    font-size: 10px;
    color: #8899aa;
    text-align: center;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Drag & Drop States ===== */
.match-slot.draggable {
    cursor: grab;
}

.match-slot.draggable:active {
    cursor: grabbing;
}

.match-slot.dragging {
    opacity: 0.4;
    background: #1a2a3a;
    border-style: dashed;
}

.match-slot.swap-eligible-slot {
    background: rgba(24, 62, 43, 0.92);
    border-color: rgba(78, 218, 134, 0.95);
    border-style: dashed;
    box-shadow: inset 0 0 0 1px rgba(78, 218, 134, 0.2), 0 0 16px rgba(78, 218, 134, 0.24);
}

.match-slot.layout-drop-allowed > * {
    opacity: 0;
}

.match-slot.layout-drop-allowed::after {
    content: '+';
    position: absolute;
    inset: 6px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(174, 255, 205, 0.72);
    border-radius: 3px;
    color: #c9f8d9;
    font-size: 20px;
    font-weight: 800;
    background: rgba(16, 44, 30, 0.72);
    pointer-events: none;
}

.match-slot.layout-drop-blocked {
    border-color: rgba(255, 67, 91, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 67, 91, 0.2), 0 0 16px rgba(255, 67, 91, 0.26);
}

.match-slot.layout-drop-blocked > * {
    opacity: 0.16;
}

.match-slot.layout-drop-blocked::after {
    content: '\2298';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ff8f9f;
    font-size: 22px;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255, 67, 91, 0.72);
    pointer-events: none;
}

.match-slot.layout-drop-source {
    box-shadow: inset 0 0 0 1px rgba(240, 200, 110, 0.18);
}

.match-slot.drag-over-slot {
    background: #183f2c;
    border: 2px dashed #62e394;
    box-shadow: inset 0 0 0 1px rgba(98, 227, 148, 0.22), 0 0 0 1px rgba(98, 227, 148, 0.18);
    animation: bracket-slot-drop-pulse .9s linear infinite;
}

@keyframes bracket-slot-drop-pulse {
    0% {
        border-color: rgba(98, 227, 148, 0.95);
        box-shadow: inset 0 0 0 1px rgba(98, 227, 148, 0.16), 0 0 0 0 rgba(98, 227, 148, 0.16);
    }
    50% {
        border-color: rgba(190, 255, 216, 1);
        box-shadow: inset 0 0 0 1px rgba(190, 255, 216, 0.22), 0 0 0 3px rgba(190, 255, 216, 0.08);
    }
    100% {
        border-color: rgba(98, 227, 148, 0.95);
        box-shadow: inset 0 0 0 1px rgba(98, 227, 148, 0.16), 0 0 0 0 rgba(98, 227, 148, 0.16);
    }
}

/* ===== Seed Number ===== */
.seed {
    width: 18px;
    font-size: 10px;
    font-weight: 700;
    color: #556677;
    text-align: center;
    flex-shrink: 0;
}

.seed-action {
    width: 26px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid #2a4a66;
    background: #12202f;
    color: #dbe5ee;
    cursor: pointer;
}

.seed-action:hover {
    border-color: #c8102e;
    color: #ffffff;
}

/* ===== Fighter Name ===== */
.fighter-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    font-weight: 500;
}

.fighter-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fighter-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
}

.fighter-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
    max-width: 100%;
    margin-left: auto;
}

.fighter-level,
.fighter-status,
.fighter-detail-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.fighter-level {
    background: #1e3044;
    border: 1px solid #2a4a66;
    color: #dbe5ee;
}

.fighter-detail-chip {
    max-width: 150px;
    background: #172838;
    border: 1px solid #29445d;
    color: #c9d7e3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fighter-lower-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.fighter-detail-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
}

.fighter-status {
    border: 1px solid transparent;
}

.fighter-status-pending {
    background: rgba(200, 128, 46, .16);
    border-color: rgba(200, 128, 46, .35);
    color: #f5c17a;
}

.fighter-status-confirmed {
    background: rgba(40, 167, 69, .16);
    border-color: rgba(40, 167, 69, .35);
    color: #9ce2b2;
}

.fighter-submeta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 0 0 auto;
}

.fighter-submeta-item {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #294764;
    border-radius: 7px;
    background: #142434;
}

.fighter-submeta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 2px 5px;
    background: #e7eef6;
    color: #102131;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fighter-submeta-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    min-width: 22px;
    background: #13283b;
    color: #e7eef6;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.viewer-highlight {
    border-color: #c8102e;
    box-shadow: inset 0 0 0 1px rgba(200, 16, 46, .35);
}

.match.sequence-target-highlight {
    border-radius: 8px;
    animation: bracket-sequence-target-flash .72s ease-in-out 3;
}

.match.sequence-target-highlight .match-slot {
    border-color: rgba(224, 168, 61, .9);
    box-shadow: inset 0 0 0 1px rgba(224, 168, 61, .32);
}

@keyframes bracket-sequence-target-flash {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(224, 168, 61, 0);
    }
    50% {
        transform: translateY(-1px);
        box-shadow: 0 0 0 3px rgba(224, 168, 61, .16);
    }
}

.match-slot.empty .fighter-name {
    color: #334455;
    font-style: italic;
}

.match-slot.placement-slot .fighter-name {
    color: #98b5cf;
}

.fighter-name-action {
    cursor: pointer;
    position: relative;
    z-index: 2;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.fighter-name-action:hover {
    color: #0b63b6;
}

/* ===== Belt Badge ===== */
.belt-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
}

.belt-white  { background: #f0f0f0; }
.belt-blue   { background: #1a6fc4; }
.belt-purple { background: #7b2d8e; }
.belt-brown  { background: #6b3a20; }
.belt-black  { background: #111111; border-color: #555; }

/* ===== Connector Lines ===== */
.connector {
    position: relative;
    width: 24px;
    min-width: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
}

.connector-pair {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.connector-pair svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.connector-pair svg line {
    stroke: #2a4a66;
    stroke-width: 1.5;
}

/* ===== Champion Box ===== */
.champion-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    padding: 0 20px;
}

.champion-card {
    background: linear-gradient(135deg, #1a3828 0%, #162231 100%);
    border: 2px solid #c8a82e;
    border-radius: 8px;
    padding: 24px 32px;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 0 30px rgba(200, 168, 46, 0.15);
}

.champion-card.empty-champion {
    border-color: #2a3a4a;
    box-shadow: none;
}

.champion-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #c8a82e;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-champion .champion-label {
    color: #556677;
}

.champion-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.champion-draw-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    min-width: 44px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #132030;
    border: 1px solid #1e3044;
    color: #dbe5ee;
    font-size: 12px;
    font-weight: 700;
}

.champion-belt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #8899aa;
    background: #132030;
    border: 1px solid #1e3044;
    border-radius: 999px;
    padding: 4px 10px;
}

.trophy-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

/* ===== Bye Info Banner ===== */
.bye-info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a2d3d;
    border: 1px solid #2a5a8a;
    border-left: 4px solid #3a8ad4;
    border-radius: 4px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #a0c4e8;
    line-height: 1.5;
}

.singleton-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.singleton-modal.open {
    display: flex;
}

.singleton-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 12, 18, 0.72);
}

.singleton-modal-dialog {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    background:
        radial-gradient(circle at top right, rgba(200, 16, 46, 0.12), transparent 34%),
        linear-gradient(180deg, #142131 0%, #0f1822 100%);
    border: 1px solid #22384e;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(4, 8, 14, 0.52);
    padding: 22px;
    color: #edf3f8;
}

.singleton-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.singleton-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #f7fbff;
}

.singleton-modal-subtitle {
    margin: 6px 0 0;
    color: #b2c0ce;
    font-size: 0.95rem;
}

.singleton-modal-subtitle-line {
    display: block;
}

.singleton-modal-subtitle-meta {
    margin-top: 2px;
}

.singleton-modal-close {
    border: 0;
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    color: #c7d4df;
    cursor: pointer;
}

.singleton-modal-close:hover {
    color: #ffffff;
}

.singleton-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.singleton-modal-more-btn {
    border: 1px solid #2b455d;
    background: #162434;
    color: #eef4f8;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.singleton-modal-more-btn:hover:not(:disabled) {
    background: #1b2c3f;
    border-color: #375777;
}

.singleton-modal-more-btn:disabled {
    opacity: .6;
    cursor: wait;
}

.singleton-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bracket-toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1250;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.bracket-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #22384e;
    background: linear-gradient(180deg, rgba(20, 31, 44, 0.98) 0%, rgba(15, 24, 34, 0.98) 100%);
    box-shadow: 0 20px 48px rgba(4, 8, 14, 0.38);
    color: #edf3f8;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease;
}

.bracket-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.bracket-toast.success {
    border-color: rgba(62, 149, 92, 0.42);
}

.bracket-toast.error {
    border-color: rgba(200, 16, 46, 0.42);
}

.bracket-toast-content {
    flex: 1 1 auto;
    min-width: 0;
}

.bracket-toast-message {
    font-size: 0.94rem;
    line-height: 1.45;
    color: #f1f6fb;
}

.bracket-toast-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.bracket-toast-action {
    border: 1px solid #2b455d;
    background: #162434;
    color: #eef4f8;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

.bracket-toast-action:hover:not(:disabled) {
    background: #1b2c3f;
    border-color: #375777;
}

.bracket-toast-action:disabled {
    opacity: .62;
    cursor: wait;
}

.bracket-toast-dismiss {
    border: 0;
    background: transparent;
    color: #c7d4df;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}

.bracket-toast-dismiss:hover {
    color: #ffffff;
}

.singleton-modal-empty {
    padding: 18px 4px;
    color: #b5c2cf;
}

.singleton-rec-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    border: 1px solid #22384e;
    border-radius: 14px;
    padding: 14px 16px;
    background: rgba(20, 31, 44, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.singleton-rec-info {
    min-width: 0;
}

.singleton-rec-title {
    font-weight: 700;
    color: #f3f7fb;
}

.singleton-rec-summary {
    margin-top: 4px;
    font-size: 0.92rem;
    color: #b1c0cd;
}

.singleton-rec-table-wrap {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid #22384e;
    border-radius: 10px;
    background: #101823;
}

.singleton-rec-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.9rem;
}

.singleton-rec-col-name {
    width: 36%;
}

.singleton-rec-col-metric {
    width: 16%;
}

.singleton-rec-table th,
.singleton-rec-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #203344;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.singleton-rec-table th {
    background: #162434;
    color: #b6c6d6;
    font-size: 0.82rem;
    font-weight: 700;
}

.singleton-rec-table td {
    color: #d9e4ee;
    background: rgba(16, 24, 35, 0.96);
}

.singleton-rec-table tbody tr:nth-child(even) td {
    background: rgba(18, 29, 42, 0.98);
}

.singleton-rec-table tbody tr:last-child td {
    border-bottom: none;
}

.singleton-rec-table td:first-child {
    color: #f1f6fb;
}

.singleton-rec-table td:not(:first-child),
.singleton-rec-table th:not(:first-child) {
    text-align: center;
}

.singleton-rec-btn {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .bracket-toast-stack {
        left: 16px;
        right: 16px;
        top: 16px;
        width: auto;
    }

    .singleton-rec-row {
        grid-template-columns: 1fr;
    }

    .singleton-rec-btn {
        width: 100%;
    }
}

.banner-icon {
    font-size: 18px;
    font-weight: 700;
    color: #3a8ad4;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3a8ad4;
    border-radius: 50%;
}

.banner-text {
    flex: 1;
}

.live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff2d45;
    margin-right: 6px;
    box-shadow: 0 0 0 rgba(255,45,69,.8);
    animation: bracketLiveBeacon 1s infinite;
}

@keyframes bracketLiveBeacon {
    0% { transform: scale(.88); box-shadow: 0 0 0 0 rgba(255,45,69,.9); }
    60% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255,45,69,0); }
    100% { transform: scale(.92); box-shadow: 0 0 0 0 rgba(255,45,69,0); }
}

/* ===== Waiting Opponent Slot ===== */
.match-slot.waiting-opponent {
    background: #1a2535;
    border-color: #2a5a8a;
    border-style: dashed;
}

.match-slot.waiting-opponent .fighter-name {
    color: #3a8ad4;
    font-style: italic;
    font-size: 11px;
}

/* ===== Assigned Opponent (second-chance fighter) ===== */
.match-slot.assigned-opponent {
    background: #1e2a1e;
    border-color: #c8802e;
    border-left: 3px solid #e09030;
}

.match-slot.assigned-opponent .fighter-name::after {
    content: '\2606';
    margin-left: 6px;
    color: #e09030;
    font-size: 12px;
}

/* ===== Loser Draggable ===== */
.match-slot.loser-draggable {
    cursor: grab;
    border-color: #c8802e;
    opacity: 0.65;
}

.match-slot.loser-draggable:hover {
    opacity: 0.85;
    border-color: #e09030;
    background: #1e2a35;
}

/* ===== Match Number ===== */
.match-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 10px;
    color: #334455;
    padding: 2px 0;
    letter-spacing: 1px;
}

.match-number-label {
    white-space: nowrap;
}

.match-sequence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(231, 178, 77, .14);
    border: 1px solid rgba(231, 178, 77, .32);
    color: #f5d48d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.match-tatami-badge {
    min-width: 28px;
    background: rgba(64, 133, 97, .16);
    border-color: rgba(93, 170, 129, .38);
    color: #b9efd0;
}

/* ===== No Bracket Message ===== */
.no-bracket-msg {
    color: #556677;
    font-size: 15px;
    text-align: center;
    padding: 60px 20px;
}

.bracket-loading-msg {
    color: #8fa8c1;
}

.bracket-load-error {
    color: #f5b7bd;
    background: rgba(200, 16, 46, 0.08);
    border: 1px solid rgba(200, 16, 46, 0.32);
    border-radius: 8px;
    margin: 30px 40px;
    padding: 24px;
    text-align: left;
}

/* ===== Language Switcher ===== */
.lang-switcher {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 18px 0 14px;
    margin-top: 40px;
}

.lang-switcher a {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #8899aa;
    background: #162231;
    border: 1px solid #2a4a66;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 48px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.lang-switcher a:hover {
    background: #1e3350;
    color: #fff;
    border-color: #c8102e;
}

.lang-switcher a:active {
    transform: scale(0.95);
}

.lang-switcher a.active {
    background: #c8102e;
    border-color: #c8102e;
    color: #fff;
}

.lang-switcher a.active:hover {
    background: #e01535;
}

@media(max-width: 760px) {
    .top-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-menu {
        width: 100%;
        justify-content: flex-start;
    }

    .user-notification-menu {
        right: -8px;
        width: min(320px, 92vw);
    }

    .header {
        padding: 16px 18px;
    }
}

.bracket-print-sheet {
    display: none;
}

.bracket-print-page,
.bracket-print-header,
.bracket-print-footer,
.bracket-print-diagram-wrap {
    display: none;
}

.bracket-print-progress {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bracket-print-progress.is-open {
    display: flex;
}

.bracket-print-progress-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 12, 22, 0.76);
    backdrop-filter: blur(3px);
}

.bracket-print-progress-dialog {
    position: relative;
    width: min(460px, calc(100vw - 32px));
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(68, 106, 150, 0.7);
    background: linear-gradient(180deg, rgba(26, 42, 62, 0.98), rgba(19, 31, 46, 0.98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
    display: grid;
    gap: 12px;
    color: #e9f1fb;
}

.bracket-print-progress-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.bracket-print-progress-copy {
    margin: 0;
    color: #9fb4cc;
    line-height: 1.45;
}

.bracket-print-progress-track {
    height: 12px;
    border-radius: 999px;
    background: rgba(9, 17, 28, 0.95);
    border: 1px solid rgba(57, 89, 126, 0.72);
    overflow: hidden;
}

.bracket-print-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4bb4ff, #75e2ff);
    box-shadow: 0 0 18px rgba(88, 191, 255, 0.34);
    transition: width 180ms ease;
}

.bracket-print-progress-status {
    font-size: 14px;
    font-weight: 700;
    color: #dce9f7;
}

/* ===== Print Styles ===== */
@media print {
    @page {
        size: A4 landscape;
        margin: 8mm 10mm;
    }

    body {
        background: #ffffff;
        color: #111111;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #bracket-page > * {
        display: none !important;
    }

    #bracket-page > .bracket-print-sheet {
        display: block !important;
    }

    .bracket-print-sheet {
        background: #ffffff;
        color: #111111;
        padding: 0;
    }

    .bracket-print-page {
        min-height: calc(210mm - 16mm);
        display: flex;
        flex-direction: column;
        gap: 4mm;
        break-after: page;
        page-break-after: always;
    }

    .bracket-print-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .bracket-print-header,
    .bracket-print-footer,
    .bracket-print-diagram-wrap {
        display: block;
    }

    .bracket-print-header {
        text-align: center;
        display: grid;
        gap: 1.1mm;
    }

    .bracket-print-title {
        font-size: 14.5pt;
        font-weight: 700;
        line-height: 1.08;
    }

    .bracket-print-meta {
        font-size: 10.2pt;
        line-height: 1.08;
    }

    .bracket-print-meta-inline,
    .bracket-print-category-line {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        column-gap: 0;
        row-gap: 0.5mm;
    }

    .bracket-print-category-line {
        font-size: 11.1pt;
        line-height: 1.08;
        font-weight: 600;
    }

    .bracket-print-group-line {
        font-size: 10.2pt;
        line-height: 1.08;
        font-weight: 600;
    }

    .bracket-print-inline-separator,
    .bracket-print-inline-secondary {
        color: #111111;
    }

    .bracket-print-inline-strong {
        font-weight: 800;
    }

    .bracket-print-diagram-wrap {
        width: 100%;
    }

    .bracket-print-empty {
        min-height: 120mm;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #222222;
        font-size: 12pt;
    }

    .bracket-print-diagram {
        display: block;
        width: 100%;
        height: auto;
    }

    .bracket-print-line,
    .bracket-print-card-line {
        stroke: #222222;
        stroke-width: 1.1;
        fill: none;
        stroke-dasharray: 3 2;
    }

    .bracket-print-card,
    .bracket-print-node {
        fill: #ffffff;
        stroke: #222222;
        stroke-width: 1.2;
    }

    .bracket-print-dashed-box {
        fill: none;
        stroke: #666666;
        stroke-width: 1;
        stroke-dasharray: 3 2;
    }

    .bracket-print-standings-outline,
    .bracket-print-standings-line {
        fill: none;
        stroke: #222222;
        stroke-width: 1.1;
    }

    .bracket-print-standings-shade {
        fill: #d9d9d9;
        stroke: none;
    }

    .bracket-print-card-name,
    .bracket-print-card-seed,
    .bracket-print-card-meta,
    .bracket-print-node-label,
    .bracket-print-final-label,
    .bracket-print-third-label,
    .bracket-print-standings-title,
    .bracket-print-standings-name {
        fill: #111111;
        font-family: "Helvetica Neue", Arial, sans-serif;
    }

    .bracket-print-card-name {
        font-size: 10.5px;
        font-weight: 600;
    }

    .bracket-print-card-seed {
        font-size: 12px;
        font-weight: 700;
    }

    .bracket-print-card-meta {
        font-size: 8px;
    }

    .bracket-print-node-label {
        font-size: 11px;
        font-weight: 700;
    }

    .bracket-print-final-label {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 0.03em;
    }

    .bracket-print-third-label {
        font-size: 12px;
        font-weight: 700;
    }

    .bracket-print-standings-title {
        font-size: 12px;
        font-weight: 700;
    }

    .bracket-print-standings-name {
        font-size: 10px;
        font-weight: 500;
    }

    .bracket-print-list-page {
        display: block;
        min-height: calc(210mm - 16mm);
        font-family: "Times New Roman", Times, serif;
    }

    .national-participant-list {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-family: "Times New Roman", Times, serif;
        font-size: 7pt;
        line-height: 1.05;
        color: #000000;
    }

    .national-participant-list col.national-list-col-1 { width: 14mm; }
    .national-participant-list col.national-list-col-2 { width: 12mm; }
    .national-participant-list col.national-list-col-3 { width: 8mm; }
    .national-participant-list col.national-list-col-4 { width: 8mm; }
    .national-participant-list col.national-list-col-5 { width: 8mm; }
    .national-participant-list col.national-list-col-6 { width: 10mm; }
    .national-participant-list col.national-list-col-7 { width: 48mm; }
    .national-participant-list col.national-list-col-8 { width: 15mm; }
    .national-participant-list col.national-list-col-9 { width: 18mm; }
    .national-participant-list col.national-list-col-10 { width: 12mm; }
    .national-participant-list col.national-list-col-11 { width: 11mm; }
    .national-participant-list col.national-list-col-12 { width: 11mm; }
    .national-participant-list col.national-list-col-13 { width: 11mm; }
    .national-participant-list col.national-list-col-14 { width: 11mm; }
    .national-participant-list col.national-list-col-15 { width: 13mm; }
    .national-participant-list col.national-list-col-16 { width: 13mm; }
    .national-participant-list col.national-list-col-17 { width: 32mm; }
    .national-participant-list col.national-list-col-18 { width: 25mm; }

    .national-participant-list th,
    .national-participant-list td {
        border: 0.45pt solid #000000;
        padding: 0.7mm 0.8mm;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        color: #000000;
        background: #ffffff;
    }

    .national-participant-list thead th {
        font-weight: 700;
        height: 9mm;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .national-participant-list thead tr:first-child th {
        height: 15mm;
    }

    .national-participant-list th.is-vertical {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        text-align: center;
        padding: 1mm 0.4mm;
        overflow: visible;
    }

    .national-participant-list tbody td {
        height: 4.9mm;
        padding-top: 0.45mm;
        padding-bottom: 0.45mm;
    }

    .national-participant-list .national-list-name-cell {
        text-align: center;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .national-participant-list td:nth-child(11),
    .national-participant-list td:nth-child(12),
    .national-participant-list td:nth-child(13),
    .national-participant-list thead tr:nth-child(2) th:nth-child(3),
    .national-participant-list thead tr:nth-child(2) th:nth-child(4),
    .national-participant-list thead tr:nth-child(2) th:nth-child(5) {
        background: #e6f1d2;
    }

    .national-participant-list td:nth-child(14),
    .national-participant-list thead tr:nth-child(2) th:nth-child(6) {
        background: #d7edf2;
    }

    .bracket-print-footer {
        margin-top: auto;
        padding-top: 2.5mm;
        display: flex;
        justify-content: space-between;
        gap: 16mm;
    }

    .bracket-print-signature {
        flex: 1 1 0;
        display: flex;
        align-items: flex-end;
        gap: 4mm;
        min-width: 0;
    }

    .bracket-print-signature-label {
        font-size: 10pt;
        line-height: 1.1;
        white-space: nowrap;
    }

    .bracket-print-signature-line {
        flex: 1 1 auto;
        border-bottom: 1px solid #111111;
        min-width: 40mm;
        height: 0;
    }

    .singleton-modal {
        display: none !important;
    }

    .bracket-print-progress {
        display: none !important;
    }

    .btn,
    .header-buttons,
    .bracket-page-toolbar,
    .bye-info-banner,
    .top-bar,
    .lang-switcher,
    .btn-home,
    .user-menu {
        display: none !important;
    }

    #setup-page,
    #sport-selection-page {
        display: none !important;
    }
}