.admin-shell[data-v-544b375d] {
    max-width: 1240px;
    margin: 24px auto;
    padding: 16px;
    display: grid;
    gap: 16px;
    color: #172033
}

.admin-card[data-v-544b375d] {
    background: #fffffff5;
    border: 1px solid #dce5f5;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 14px 34px #1f3a6c14
}

.sticky-header[data-v-544b375d] {
    position: sticky;
    top: 8px;
    z-index: 2
}

.admin-titlebar[data-v-544b375d] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px
}

.eyebrow[data-v-544b375d] {
    margin: 0 0 4px;
    color: #0871af;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase
}

h2[data-v-544b375d],
h3[data-v-544b375d],
h4[data-v-544b375d] {
    margin: 0;
    color: #10294a
}

.hint[data-v-544b375d] {
    color: #64748b;
    margin: 5px 0 0;
    font-size: 13px
}

.hint.small[data-v-544b375d] {
    font-size: 12px
}

.muted[data-v-544b375d] {
    color: #64748b;
    font-size: 12px
}

.row[data-v-544b375d] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px
}

.row.two input[data-v-544b375d],
.row.two select[data-v-544b375d],
.row.three input[data-v-544b375d] {
    flex: 1
}

.section-head[data-v-544b375d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px
}

.auth-row input[data-v-544b375d] {
    min-width: 300px
}

input[data-v-544b375d],
select[data-v-544b375d],
button[data-v-544b375d] {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #cbd7ea;
    border-radius: 10px;
    font-family: inherit
}

button[data-v-544b375d] {
    background: #0871af;
    color: #fff;
    border-color: #0871af;
    font-weight: 800;
    cursor: pointer
}

button[data-v-544b375d]:disabled {
    opacity: .55;
    cursor: not-allowed
}

.btn-light[data-v-544b375d] {
    background: #fff;
    color: #075f93;
    border-color: #a7d8ef
}

.btn-danger[data-v-544b375d] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff
}

.error[data-v-544b375d] {
    color: #b42318;
    background: #fff1f0;
    border: 1px solid #ffd4d1;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 800
}

.warning[data-v-544b375d] {
    margin: 0;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 800;
    line-height: 1.4
}

.stats-grid[data-v-544b375d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px
}

.stat[data-v-544b375d] {
    border: 1px solid #d8e7f3;
    border-radius: 10px;
    padding: 12px;
    background: #f8fcff
}

.stat span[data-v-544b375d] {
    color: #64748b;
    font-size: 12px;
    font-weight: 800
}

.stat strong[data-v-544b375d] {
    display: block;
    margin-top: 4px;
    font-size: 25px;
    color: #0871af
}

.tabs[data-v-544b375d] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    border-top: 1px solid #edf3fb;
    padding-top: 14px;
    overflow-x: auto
}

.tab-btn[data-v-544b375d] {
    background: #eaf6ff;
    color: #075f93;
    border-color: transparent;
    white-space: nowrap
}

.tab-btn.active[data-v-544b375d] {
    background: #ffa31a;
    border-color: #f08100;
    color: #fff
}

.table-wrap[data-v-544b375d] {
    width: 100%;
    overflow: auto;
    border: 1px solid #edf2f7;
    border-radius: 10px
}

table[data-v-544b375d] {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px
}

th[data-v-544b375d],
td[data-v-544b375d] {
    border-bottom: 1px solid #edf2f7;
    padding: 9px 10px;
    text-align: left;
    font-size: 13px;
    vertical-align: top
}

th[data-v-544b375d] {
    background: #f8fbff;
    color: #41516b;
    font-size: 12px;
    text-transform: uppercase
}

tr:last-child td[data-v-544b375d] {
    border-bottom: 0
}

.empty-row[data-v-544b375d] {
    text-align: center;
    color: #64748b;
    padding: 18px
}

.match-participants-row>td[data-v-544b375d] {
    padding: 0 10px 12px;
    background: #fbfdff
}

.match-participants-block[data-v-544b375d] {
    border: 1px solid #edf2f7;
    border-radius: 10px;
    background: #fff;
    overflow: hidden
}

.match-participants-head[data-v-544b375d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    background: #f8fbff;
    color: #10294a
}

.match-participants-head span[data-v-544b375d] {
    color: #64748b;
    font-size: 12px;
    font-weight: 900
}

.nested-table[data-v-544b375d] {
    min-width: 680px
}

.nested-table th[data-v-544b375d],
.nested-table td[data-v-544b375d] {
    font-size: 12px;
    padding: 8px 9px
}

.empty-inline[data-v-544b375d] {
    margin: 0;
    padding: 12px;
    color: #64748b;
    font-weight: 800;
    text-align: center
}

.report-scroll-wrap[data-v-544b375d] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible
}

.report-excel-table[data-v-544b375d] {
    min-width: 1580px;
    table-layout: fixed
}

.report-excel-table thead th[data-v-544b375d] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef7ff
}

.report-excel-table th[data-v-544b375d],
.report-excel-table td[data-v-544b375d] {
    white-space: nowrap
}

.report-excel-table th[data-v-544b375d]:nth-child(1),
.report-excel-table td[data-v-544b375d]:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 120px;
    min-width: 120px;
    background: #fff;
    box-shadow: 1px 0 #edf2f7
}

.report-excel-table th[data-v-544b375d]:nth-child(1) {
    z-index: 5;
    background: #eef7ff
}

.report-excel-table th[data-v-544b375d]:nth-child(2),
.report-excel-table td[data-v-544b375d]:nth-child(2) {
    position: sticky;
    left: 120px;
    z-index: 3;
    width: 160px;
    min-width: 160px;
    background: #fff;
    box-shadow: 1px 0 #edf2f7
}

.report-excel-table th[data-v-544b375d]:nth-child(2) {
    z-index: 5;
    background: #eef7ff
}

.report-excel-table th[data-v-544b375d]:nth-child(3),
.report-excel-table td[data-v-544b375d]:nth-child(3) {
    width: 170px;
    min-width: 170px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

.report-excel-table th[data-v-544b375d]:nth-child(4),
.report-excel-table td[data-v-544b375d]:nth-child(4) {
    width: 420px;
    min-width: 420px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45
}

.report-excel-table td[data-v-544b375d]:nth-child(5),
.report-excel-table td[data-v-544b375d]:nth-child(n+6):nth-child(-n+12) {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.report-detail-cell[data-v-544b375d] {
    color: #10294a
}

.badge[data-v-544b375d] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e8f7ff;
    color: #075f93;
    font-weight: 900;
    font-size: 12px
}

.action-cell[data-v-544b375d],
.status-actions[data-v-544b375d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.action-cell button[data-v-544b375d],
.status-actions button[data-v-544b375d],
.score-actions button[data-v-544b375d] {
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 12px
}

.score-editor[data-v-544b375d] {
    display: grid;
    grid-template-columns: 76px 124px 64px;
    gap: 6px;
    min-width: 280px
}

.score-editor input[data-v-544b375d],
.score-editor select[data-v-544b375d],
.score-editor button[data-v-544b375d] {
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12px
}

.score-actions[data-v-544b375d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(86px, 1fr));
    gap: 6px;
    min-width: 190px
}

.bill-link[data-v-544b375d] {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    background: #eaf6ff;
    color: #075f93;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer
}

.bet-text[data-v-544b375d] {
    min-width: 260px;
    white-space: pre-wrap;
    line-height: 1.45
}

.match-prize-row.prize-1[data-v-544b375d] {
    background: linear-gradient(90deg, #ffd23f4d, #fff8d7eb)
}

.match-prize-row.prize-2[data-v-544b375d] {
    background: linear-gradient(90deg, #19c7d52e, #effff9eb)
}

.match-prize-row.prize-3[data-v-544b375d] {
    background: linear-gradient(90deg, #00b89429, #effff9e6)
}

.prize-actions[data-v-544b375d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 250px
}

.prize-actions button[data-v-544b375d] {
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px
}

.prize-btn-active[data-v-544b375d] {
    background: linear-gradient(135deg, #ffd23f, #ffe88b) !important;
    color: #563800 !important;
    border-color: #f4a51c73 !important
}

.prize-clear-btn[data-v-544b375d] {
    color: #64748b !important
}

.admin-panel[data-v-544b375d] {
    background: #f8fbff;
    border: 1px solid #e4edf8;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px
}

.detail-list[data-v-544b375d] {
    display: grid;
    gap: 4px;
    min-width: 160px
}

.sub-title[data-v-544b375d] {
    margin: 16px 0 8px;
    color: #10294a
}

.sbd-create-row input[data-v-544b375d] {
    min-width: 180px
}

.sbd-note-cell[data-v-544b375d] {
    min-width: 180px;
    max-width: 320px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45
}

.sbd-edit-input[data-v-544b375d] {
    width: 100%;
    min-width: 180px;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px
}

.sbd-active-edit[data-v-544b375d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    font-weight: 800
}

.sbd-actions[data-v-544b375d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 150px
}

.sbd-actions button[data-v-544b375d] {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px
}

.modal-overlay[data-v-544b375d] {
    position: fixed;
    inset: 0;
    background: #1118278f;
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 16px
}

.modal-card[data-v-544b375d] {
    width: min(760px, 100%);
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 20px 50px #00000040
}

.modal-head[data-v-544b375d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.bill-modal-card[data-v-544b375d] {
    width: min(920px, 96vw);
    max-height: 92vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto
}

.bill-modal-body[data-v-544b375d] {
    display: grid;
    place-items: center;
    min-height: 240px;
    overflow: auto;
    border: 1px solid #e4edf8;
    border-radius: 10px;
    background: #0f172a
}

.bill-modal-body img[data-v-544b375d] {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 68vh;
    object-fit: contain
}

.bill-modal-detail[data-v-544b375d] {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e4edf8;
    border-radius: 10px;
    background: #f8fbff;
    color: #10294a
}

.bill-modal-detail strong[data-v-544b375d] {
    color: #41516b;
    font-size: 12px;
    text-transform: uppercase
}

.team-select-field[data-v-544b375d] {
    display: grid;
    gap: 5px;
    flex: 1;
    min-width: 0
}

.team-select-field span[data-v-544b375d] {
    color: #41516b;
    font-size: 12px;
    font-weight: 900
}

.team-select-field select[data-v-544b375d] {
    width: 100%
}

.date-time-picker[data-v-544b375d] {
    display: grid;
    grid-template-columns: 86px 92px 78px minmax(112px, 1fr);
    gap: 8px
}

.date-time-picker select[data-v-544b375d],
.date-time-picker input[data-v-544b375d] {
    width: 100%;
    min-width: 0
}

.match-team-preview[data-v-544b375d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    background: #f8fbff
}

.match-team-preview>span[data-v-544b375d] {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase
}

.match-team-chip[data-v-544b375d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #10294a
}

.match-team-chip img[data-v-544b375d] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e4edf8;
    padding: 3px
}

.match-team-chip strong[data-v-544b375d] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.rules-strip[data-v-544b375d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 12px
}

.rules-strip.compact[data-v-544b375d] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px
}

.rules-strip div[data-v-544b375d] {
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    background: #0f172a9e
}

.rules-strip strong[data-v-544b375d],
.rules-strip span[data-v-544b375d] {
    display: block
}

.rules-strip strong[data-v-544b375d] {
    color: #86efac;
    font-size: 12px;
    margin-bottom: 4px
}

.rules-strip span[data-v-544b375d] {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.35
}

@media(max-width:900px) {
    .admin-shell[data-v-544b375d] {
        padding: 10px;
        margin: 10px auto
    }

    .admin-titlebar[data-v-544b375d],
    .section-head[data-v-544b375d] {
        flex-direction: column;
        align-items: stretch
    }

    .stats-grid[data-v-544b375d],
    .ops-grid[data-v-544b375d],
    .ops-summary-grid[data-v-544b375d],
    .rules-strip[data-v-544b375d],
    .rules-strip.compact[data-v-544b375d] {
        grid-template-columns: 1fr
    }

    .row[data-v-544b375d] {
        flex-wrap: wrap
    }

    .auth-row input[data-v-544b375d] {
        min-width: 100%
    }

    .row input[data-v-544b375d],
    .row select[data-v-544b375d],
    .row button[data-v-544b375d] {
        flex: 1 1 150px
    }

    .date-time-picker[data-v-544b375d] {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .score-editor[data-v-544b375d] {
        grid-template-columns: 1fr;
        min-width: 170px
    }
}

.admin-shell[data-v-544b375d] {
    max-width: 1320px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 22px;
    color: #07384a
}

.admin-card[data-v-544b375d] {
    border: 1px solid rgba(0, 184, 148, .18);
    border-radius: 14px;
    background: radial-gradient(circle at 100% 0%, rgba(255, 210, 63, .14), transparent 30%), #fffffff5;
    box-shadow: 0 18px 44px #007f731a
}

.sticky-header[data-v-544b375d] {
    top: 10px;
    background: radial-gradient(circle at 12% 10%, rgba(0, 184, 148, .14), transparent 28%), linear-gradient(180deg, #fffffffa, #effff9f0);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px)
}

.eyebrow[data-v-544b375d] {
    color: #007f73
}

h2[data-v-544b375d],
h3[data-v-544b375d],
h4[data-v-544b375d] {
    color: #07384a
}

.hint[data-v-544b375d],
.hint.small[data-v-544b375d],
.muted[data-v-544b375d] {
    color: #55717a
}

input[data-v-544b375d],
select[data-v-544b375d] {
    background: #fff;
    border-color: #00b8943d;
    color: #07384a
}

input[data-v-544b375d]::placeholder {
    color: #7a9299
}

button[data-v-544b375d] {
    border-color: #00b894;
    background: linear-gradient(135deg, #00b894, #19c7d5);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 18px #007f7324
}

.btn-light[data-v-544b375d] {
    background: #fff;
    color: #007f73;
    border-color: #00b8944d;
    box-shadow: none
}

.btn-danger[data-v-544b375d] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff
}

.stats-grid[data-v-544b375d] {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px
}

.stat[data-v-544b375d] {
    flex: 1 0 150px;
    min-height: 52px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-color: #00b89429;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f1fff9)
}

.stat span[data-v-544b375d] {
    color: #55717a;
    font-size: 11px;
    line-height: 1.2
}

.stat strong[data-v-544b375d] {
    color: #007f73;
    margin-top: 0;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap
}

.tabs[data-v-544b375d] {
    border-top-color: #00b89424
}

.tab-btn[data-v-544b375d] {
    background: #f0fffb;
    color: #007f73;
    border-color: #00b8942e;
    box-shadow: none
}

.tab-btn.active[data-v-544b375d] {
    background: linear-gradient(135deg, #ffd23f, #f4a51c);
    border-color: #f4a51c;
    color: #07384a
}

.admin-panel[data-v-544b375d],
.table-wrap[data-v-544b375d] {
    border-color: #00b89429;
    background: #ffffffc2
}

th[data-v-544b375d] {
    background: #00b89417;
    color: #007f73
}

td[data-v-544b375d] {
    color: #07384a;
    border-bottom-color: #007f731a
}

.empty-row[data-v-544b375d] {
    color: #55717a
}

.badge[data-v-544b375d] {
    background: #00b8941f;
    color: #007f73
}

.badge.off[data-v-544b375d] {
    background: #f1f5f9;
    color: #64748b
}

.bill-link[data-v-544b375d] {
    background: #19c7d51f;
    color: #007f73
}

.rules-strip div[data-v-544b375d] {
    border-color: #00b89429;
    background: linear-gradient(180deg, #fff, #f4fffb)
}

.rules-strip strong[data-v-544b375d] {
    color: #007f73
}

.rules-strip span[data-v-544b375d] {
    color: #55717a
}

.modal-card[data-v-544b375d] {
    background: #fff;
    color: #07384a;
    border: 1px solid rgba(0, 184, 148, .2)
}

@media(max-width:560px) {
    .stat[data-v-544b375d] {
        flex-basis: 138px
    }
}

.champion-vote-panel[data-v-620bdfa9] {
    padding-top: 0 !important;
    display: grid;
    gap: 12px
}

.champion-vote-head[data-v-620bdfa9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 184, 148, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, #00b8941f, #ffd23f2e);
    color: #07384a;
    box-shadow: 0 12px 24px #007f731a
}

.champion-vote-head span[data-v-620bdfa9] {
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase
}

.champion-vote-head strong[data-v-620bdfa9] {
    color: #007f73;
    font-size: 14px
}

.champion-top-list[data-v-620bdfa9] {
    display: grid;
    gap: 10px
}

.champion-top-card[data-v-620bdfa9] {
    display: grid;
    grid-template-columns: auto 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 74px;
    padding: 10px;
    border: 1px solid rgba(0, 184, 148, .2);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #effff9);
    color: #07384a;
    box-shadow: 0 12px 26px #007f731a
}

.champion-top-card.top-1[data-v-620bdfa9] {
    border-color: #f4a51c61;
    background: linear-gradient(90deg, #ffd23f3d, #fffffff5)
}

.champion-top-card.top-2[data-v-620bdfa9] {
    border-color: #19c7d552;
    background: linear-gradient(90deg, #19c7d524, #fffffff5)
}

.champion-top-card.top-3[data-v-620bdfa9] {
    border-color: #00b89447;
    background: linear-gradient(90deg, #00b8941f, #fffffff5)
}

.top-rank-badge[data-v-620bdfa9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ffd23f;
    color: #563800;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap
}

.top-2 .top-rank-badge[data-v-620bdfa9] {
    background: #bff7ff;
    color: #075f6f
}

.top-3 .top-rank-badge[data-v-620bdfa9] {
    background: #c8f7e8;
    color: #006f63
}

.champion-top-logo[data-v-620bdfa9] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 184, 148, .24);
    border-radius: 999px;
    background: radial-gradient(circle, #fff, #ebfff8 68%, #fff3b0);
    box-shadow: inset 0 0 0 4px #ffd23f1f
}

.champion-top-logo img[data-v-620bdfa9] {
    width: 34px;
    height: 34px;
    object-fit: contain
}

.champion-top-main[data-v-620bdfa9] {
    display: grid;
    gap: 7px;
    min-width: 0
}

.champion-top-main strong[data-v-620bdfa9] {
    overflow: hidden;
    color: #07384a;
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap
}

.champion-top-track[data-v-620bdfa9] {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #00b8941f
}

.champion-top-track span[data-v-620bdfa9] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00b894, #19c7d5, #ffd23f)
}

.champion-top-score[data-v-620bdfa9] {
    display: grid;
    justify-items: end;
    color: #55717a;
    font-size: 11px;
    font-weight: 900
}

.champion-top-score strong[data-v-620bdfa9] {
    color: #007f73;
    font-size: 20px;
    line-height: 1
}

@media(max-width:760px) {
    .champion-top-card[data-v-620bdfa9] {
        grid-template-columns: auto 44px minmax(0, 1fr) auto;
        gap: 8px
    }

    .top-rank-badge[data-v-620bdfa9] {
        min-width: 46px;
        font-size: 10px
    }
}

.match-prediction[data-v-ea6f7ae1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%
}

.loading-state[data-v-ea6f7ae1],
.empty-state[data-v-ea6f7ae1] {
    text-align: center;
    padding: 3rem;
    background: #ffffffc7;
    border-radius: 14px;
    font-size: 1.05rem;
    color: #07384a
}

.spotlight-card.is-locked[data-v-ea6f7ae1] {
    opacity: .78
}

.full-width[data-v-ea6f7ae1] {
    width: 100% !important;
    max-width: none !important
}

.spotlight-card__body[data-v-ea6f7ae1] {
    grid-template-columns: 1fr !important
}

.spotlight-card[data-v-ea6f7ae1] {
    border: 1px solid rgba(0, 184, 148, .22) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fffffffa, #effff9eb) !important;
    box-shadow: 0 20px 48px #007f7324 !important
}

.spotlight-card__top[data-v-ea6f7ae1] {
    grid-template-columns: minmax(170px, 1fr) auto minmax(150px, 1fr) !important;
    min-height: 58px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #00b894, #19c7d5) !important;
    color: #043946 !important
}

.spotlight-card__time[data-v-ea6f7ae1] {
    font-size: clamp(14px, 1.8vw, 18px) !important;
    letter-spacing: 0 !important
}

.spotlight-card__title[data-v-ea6f7ae1] {
    font-size: clamp(17px, 2.5vw, 25px) !important;
    letter-spacing: 0 !important
}

.spotlight-card__status[data-v-ea6f7ae1] {
    justify-self: end;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ffffff8f;
    color: #065f55;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase
}

.spotlight-card__content h3[data-v-ea6f7ae1],
.spotlight-card__content p[data-v-ea6f7ae1] {
    text-align: center
}

.spotlight-subtitle[data-v-ea6f7ae1] {
    max-width: 620px;
    margin: 0 auto 18px !important;
    color: #54707a !important;
    font-size: 14px !important;
    font-weight: 750 !important
}

.spotlight-matchup[data-v-ea6f7ae1] {
    align-items: stretch !important;
    gap: 14px !important
}

.spotlight-team[data-v-ea6f7ae1] {
    min-height: 210px;
    align-content: center;
    padding: 16px 12px;
    border: 1px solid rgba(0, 184, 148, .2);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #ecfff8);
    box-shadow: 0 12px 26px #007f731a
}

.team-side[data-v-ea6f7ae1] {
    color: #54707a;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase
}

.spotlight-logo-ring[data-v-ea6f7ae1] {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(0, 184, 148, .28);
    border-radius: 999px;
    background: radial-gradient(circle, #fff, #ebfff8 62%, #fff3b0);
    box-shadow: inset 0 0 0 6px #ffd23f29, 0 12px 24px #007f7329
}

.spotlight-team img[data-v-ea6f7ae1] {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain
}

.spotlight-team strong[data-v-ea6f7ae1] {
    color: #007f73 !important;
    font-size: clamp(18px, 2.4vw, 26px) !important;
    line-height: 1.08;
    text-align: center
}

.spotlight-center[data-v-ea6f7ae1] {
    align-content: center;
    padding: 16px;
    border: 1px solid rgba(244, 165, 28, .32);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff9dc, #fff)
}

.versus-badge[data-v-ea6f7ae1] {
    display: inline-grid;
    place-items: center;
    min-width: 54px;
    min-height: 34px;
    margin-bottom: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd23f, #ffe68a);
    color: #563800;
    font-size: 15px;
    font-weight: 950
}

.score-input[data-v-ea6f7ae1] {
    width: 100%;
    height: 54px;
    text-align: center;
    border: 1px solid rgba(0, 184, 148, .32) !important;
    border-radius: 13px !important;
    background: #fff;
    color: #07384a;
    font-size: 26px;
    font-weight: 950
}

.odds-row[data-v-ea6f7ae1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 4px
}

.odds-chip[data-v-ea6f7ae1] {
    background: #f4fffb;
    border: 1px solid rgba(0, 184, 148, .24);
    color: #007f73;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 900
}

.match-form[data-v-ea6f7ae1] {
    margin-top: 18px;
    background: #ffffffd1 !important;
    padding: 16px;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 184, 148, .18) !important
}

.form-grid[data-v-ea6f7ae1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem
}

.form-group[data-v-ea6f7ae1] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left
}

.form-group label[data-v-ea6f7ae1] {
    font-weight: 850;
    color: #07384a
}

.form-group input[data-v-ea6f7ae1] {
    width: 100%;
    padding: .9rem;
    border-radius: 11px;
    border: 1px solid rgba(0, 184, 148, .24);
    background: #fff;
    color: #07384a;
    font-size: 1rem
}

.submit-action[data-v-ea6f7ae1] {
    margin-top: 1rem;
    text-align: center
}

.warning-time[data-v-ea6f7ae1] {
    color: #b42318;
    font-weight: 700;
    margin-bottom: 8px
}

@media(max-width:760px) {
    .spotlight-card__top[data-v-ea6f7ae1] {
        grid-template-columns: 1fr !important;
        text-align: center
    }

    .spotlight-card__time[data-v-ea6f7ae1],
    .spotlight-card__title[data-v-ea6f7ae1],
    .spotlight-card__status[data-v-ea6f7ae1] {
        justify-self: center;
        text-align: center !important
    }

    .spotlight-matchup[data-v-ea6f7ae1] {
        grid-template-columns: minmax(72px, 1fr) minmax(96px, 1.05fr) minmax(72px, 1fr) !important;
        gap: 7px !important;
        align-items: stretch !important
    }

    .spotlight-team[data-v-ea6f7ae1] {
        min-height: 126px;
        padding: 10px 5px;
        border-radius: 13px;
        gap: 7px
    }

    .team-side[data-v-ea6f7ae1] {
        font-size: 9px
    }

    .spotlight-logo-ring[data-v-ea6f7ae1] {
        width: 60px;
        height: 60px;
        border-width: 1px;
        box-shadow: inset 0 0 0 3px #ffd23f29, 0 8px 14px #007f731f
    }

    .spotlight-team img[data-v-ea6f7ae1] {
        width: 42px !important;
        height: 42px !important
    }

    .spotlight-team strong[data-v-ea6f7ae1] {
        font-size: 12px !important;
        line-height: 1.12;
        overflow-wrap: anywhere
    }

    .spotlight-center[data-v-ea6f7ae1] {
        padding: 10px 7px;
        border-radius: 13px
    }

    .versus-badge[data-v-ea6f7ae1] {
        min-width: 42px;
        min-height: 28px;
        font-size: 13px
    }

    .spotlight-scoreboxes[data-v-ea6f7ae1] {
        gap: 7px !important
    }

    .score-input[data-v-ea6f7ae1] {
        height: 44px;
        min-width: 0;
        padding: 4px !important;
        font-size: 21px
    }

    .form-grid[data-v-ea6f7ae1] {
        grid-template-columns: 1fr;
        gap: .8rem
    }
}

.bet-event[data-v-07dcb6a2] {
    display: grid;
    gap: 12px
}

.bet-event.is-locked[data-v-07dcb6a2] {
    opacity: .72
}

.bet-rules[data-v-07dcb6a2] {
    padding: 12px;
    border: 1px solid #d8e7f3;
    border-radius: 12px;
    background: #f8fcff
}

.bet-rules h3[data-v-07dcb6a2] {
    margin: 0 0 6px;
    color: #0871af
}

.bet-rules p[data-v-07dcb6a2] {
    margin: 0;
    color: #123047;
    font-weight: 700;
    line-height: 1.45
}

.notice[data-v-07dcb6a2] {
    margin: 0;
    color: #b42318;
    font-weight: 800
}

.bet-form[data-v-07dcb6a2] {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d7deef;
    border-radius: 12px;
    background: #fff
}

.row[data-v-07dcb6a2] {
    display: grid;
    gap: 10px
}

.row.two[data-v-07dcb6a2] {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

label[data-v-07dcb6a2] {
    display: grid;
    gap: 6px;
    color: #1f2d5c;
    font-weight: 900
}

label span[data-v-07dcb6a2] {
    font-size: 13px
}

input[data-v-07dcb6a2],
select[data-v-07dcb6a2],
textarea[data-v-07dcb6a2],
button[data-v-07dcb6a2] {
    font-family: inherit
}

input[data-v-07dcb6a2],
select[data-v-07dcb6a2],
textarea[data-v-07dcb6a2] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 11px;
    border: 1px solid #ccd2e0;
    border-radius: 10px
}

textarea[data-v-07dcb6a2] {
    min-height: 48px;
    resize: vertical;
    line-height: 1.35
}

button[data-v-07dcb6a2] {
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid #0871af;
    border-radius: 10px;
    background: #0871af;
    color: #fff;
    font-weight: 900;
    cursor: pointer
}

button[data-v-07dcb6a2]:disabled {
    opacity: .55;
    cursor: not-allowed
}

.btn-light[data-v-07dcb6a2] {
    background: #fff;
    color: #075f93;
    border-color: #a7d8ef
}

.bill-preview[data-v-07dcb6a2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #f8fbff
}

.bill-preview img[data-v-07dcb6a2] {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #d8e7f3
}

.bill-note[data-v-07dcb6a2] {
    margin: 0;
    padding: 10px 11px;
    border-radius: 10px;
    background: #fff8e8;
    color: #8a4b00;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4
}

.form-actions[data-v-07dcb6a2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.success-msg[data-v-07dcb6a2] {
    color: #166534;
    font-weight: 800
}

.error-msg[data-v-07dcb6a2] {
    color: #b42318;
    font-weight: 800
}

@media(max-width:760px) {
    .row.two[data-v-07dcb6a2] {
        grid-template-columns: 1fr
    }

    .form-actions button[data-v-07dcb6a2] {
        width: 100%
    }
}

.champion-prediction[data-v-cfdda353] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%
}

.champion-form[data-v-cfdda353] {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.form-group[data-v-cfdda353] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left
}

.form-group label[data-v-cfdda353] {
    font-weight: 600;
    color: #111
}

.form-group input[data-v-cfdda353] {
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    font-size: 1rem
}

.form-group input[data-v-cfdda353]:focus {
    outline: none;
    border-color: gold
}

.team-card[data-v-cfdda353] {
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 4px 10px;
    gap: 2px
}

.team-card b[data-v-cfdda353] {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    text-align: center
}

.team-card strong[data-v-cfdda353] {
    font-size: 15px !important;
    margin-top: 2px
}

.team-card .team-logo-wrap[data-v-cfdda353] {
    flex-shrink: 0
}

.team-card.selected[data-v-cfdda353] {
    border-color: gold;
    background: #ffd70026
}

.team-card.selected[data-v-cfdda353]:after {
    content: "✓";
    position: absolute;
    top: 5px;
    right: 5px;
    background: gold;
    color: #000;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

.submit-action[data-v-cfdda353] {
    margin-top: 2rem;
    text-align: center;
    padding: 1.5rem;
    background: #0003;
    border-radius: 12px
}

.highlight-team[data-v-cfdda353] {
    color: gold;
    font-size: 1.2rem
}

.btn-submit[data-v-cfdda353] {
    background: #1d4ed8;
    color: #fff;
    font-weight: 900;
    font-size: 1.3rem;
    padding: 1.2rem 3rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s;
    margin: 1rem auto 0;
    text-transform: uppercase;
    box-shadow: 0 4px 15px #1d4ed84d;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 60px;
    width: 100%
}

.btn-submit[data-v-cfdda353]:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    box-shadow: none
}

.btn-submit[data-v-cfdda353]:not(:disabled):hover {
    transform: translateY(-2px);
    background: #1e40af;
    box-shadow: 0 6px 20px #1d4ed880
}

.msg-wrapper[data-v-cfdda353] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem
}

.msg-box[data-v-cfdda353] {
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    box-shadow: 0 4px 12px #0000000d
}

.success-msg[data-v-cfdda353] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    margin: 0
}

.error-msg[data-v-cfdda353] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    margin: 0
}

.prediction-panel.single-column[data-v-8c2d91f9] {
    justify-content: center
}

.prediction-history-container[data-v-f27cb90c] {
    width: 100%;
    max-width: 760px;
    margin: .5rem auto 0;
    animation: fadeInUp-f27cb90c .5s ease-out;
    --history-emerald: #00b894;
    --history-emerald-deep: #007f73;
    --history-cyan: #19c7d5;
    --history-yellow: #ffd23f;
    --history-yellow-deep: #f4a51c;
    --history-ink: #07384a;
    --history-muted: #55717a;
    --history-line: rgba(0, 184, 148, .2);
    --history-soft: rgba(235, 255, 248, .88)
}

.history-card[data-v-f27cb90c] {
    background: linear-gradient(180deg, #fffffff0, #effff9e6), var(--history-soft);
    border: 1px solid var(--history-line);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 18px 40px #007f731c;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px)
}

.sbd-entry-card[data-v-f27cb90c] {
    background: radial-gradient(circle at 18% 0%, rgba(255, 210, 63, .24), transparent 32%), linear-gradient(180deg, #fffffff5, #ecfff9eb);
    border: 1px solid var(--history-line);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    box-shadow: 0 18px 40px #007f731f;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: center
}

.sbd-entry-desc[data-v-f27cb90c] {
    color: var(--history-muted);
    font-size: .95rem;
    line-height: 1.5;
    margin: .75rem 0 1.5rem
}

.sbd-entry-form[data-v-f27cb90c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 340px;
    margin: 0 auto
}

.sbd-input[data-v-f27cb90c] {
    width: 100%;
    height: 46px;
    border: 1.5px solid rgba(0, 184, 148, .34);
    border-radius: 12px;
    background: #fffffff2;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--history-ink);
    text-align: center;
    transition: all .3s ease;
    box-shadow: inset 0 1px #ffffffe6
}

.sbd-input[data-v-f27cb90c]:focus {
    outline: none;
    border-color: var(--history-emerald);
    box-shadow: 0 0 0 4px #00b89426
}

.sbd-submit-btn[data-v-f27cb90c] {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--history-emerald), var(--history-cyan));
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px #007f733d;
    transition: all .3s ease
}

.sbd-submit-btn[data-v-f27cb90c]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px #007f7352
}

.change-sbd-btn[data-v-f27cb90c] {
    margin-left: auto;
    background: #ffd23f38;
    color: #936600;
    border: 1px solid rgba(244, 165, 28, .34);
    padding: .4rem .8rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s ease
}

.change-sbd-btn[data-v-f27cb90c]:hover {
    background: var(--history-yellow);
    color: var(--history-ink);
    box-shadow: 0 8px 18px #f4a51c33
}

.empty-state-content[data-v-f27cb90c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem
}

.empty-icon[data-v-f27cb90c] {
    margin-bottom: 1rem
}

.empty-state-content h4[data-v-f27cb90c] {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--history-ink)
}

.empty-state-content p[data-v-f27cb90c] {
    margin: 0 0 1.5rem;
    font-size: .9rem;
    color: var(--history-muted);
    max-width: 280px;
    line-height: 1.4
}

.action-btn[data-v-f27cb90c] {
    background: linear-gradient(135deg, var(--history-emerald), var(--history-cyan));
    color: #fff;
    border: none;
    padding: .6rem 1.2rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px #007f7338;
    transition: all .2s ease
}

.action-btn[data-v-f27cb90c]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px #007f734d
}

.history-header[data-v-f27cb90c] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 184, 148, .2);
    padding-bottom: .75rem
}

.header-icon[data-v-f27cb90c] {
    color: var(--history-emerald-deep);
    filter: drop-shadow(0 4px 8px rgba(0, 184, 148, .18))
}

.history-header h3[data-v-f27cb90c] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--history-ink);
    letter-spacing: .5px
}

.history-loading[data-v-f27cb90c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2rem 0;
    color: var(--history-emerald-deep);
    font-weight: 500
}

.spinner[data-v-f27cb90c] {
    width: 32px;
    height: 32px;
    border: 4px solid rgba(0, 184, 148, .12);
    border-left-color: var(--history-emerald);
    border-radius: 50%;
    animation: spin-f27cb90c 1s linear infinite
}

.history-list[data-v-f27cb90c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: .25rem
}

.history-list[data-v-f27cb90c]::-webkit-scrollbar {
    width: 6px
}

.history-list[data-v-f27cb90c]::-webkit-scrollbar-track {
    background: #007f7314;
    border-radius: 10px
}

.history-list[data-v-f27cb90c]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--history-emerald), var(--history-yellow));
    border-radius: 10px
}

.history-item[data-v-f27cb90c] {
    background: #fffffff5;
    border: 1px solid rgba(0, 184, 148, .18);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: all .3s ease
}

.history-item[data-v-f27cb90c]:hover {
    transform: translateY(-2px);
    border-color: #00b89457;
    box-shadow: 0 10px 22px #007f731c
}

.history-item.champion[data-v-f27cb90c] {
    border-left: 5px solid var(--history-yellow)
}

.history-item.match[data-v-f27cb90c] {
    border-left: 5px solid var(--history-emerald)
}

.history-item.odds[data-v-f27cb90c] {
    border-left: 5px solid var(--history-cyan)
}

.item-badge-row[data-v-f27cb90c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem
}

.badge[data-v-f27cb90c] {
    font-size: .75rem;
    font-weight: 800;
    padding: .25rem .6rem;
    border-radius: 999px;
    text-transform: uppercase
}

.badge.champion[data-v-f27cb90c] {
    background: #ffd23f40;
    color: #936600;
    border: 1px solid rgba(244, 165, 28, .34)
}

.badge.match[data-v-f27cb90c] {
    background: #00b8941f;
    color: var(--history-emerald-deep);
    border: 1px solid rgba(0, 184, 148, .25)
}

.badge.odds[data-v-f27cb90c] {
    background: #19c7d51f;
    color: #077182;
    border: 1px solid rgba(25, 199, 213, .28)
}

.timestamp[data-v-f27cb90c] {
    font-size: .75rem;
    font-weight: 500;
    color: var(--history-muted)
}

.item-body[data-v-f27cb90c] {
    width: 100%
}

.champion-content[data-v-f27cb90c] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: linear-gradient(135deg, #ffd23f29, #ffffffb8);
    border: 1px solid rgba(255, 210, 63, .25);
    padding: .5rem .75rem;
    border-radius: 10px
}

.team-logo[data-v-f27cb90c] {
    width: 32px;
    height: 32px;
    object-fit: contain
}

.team-name[data-v-f27cb90c] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--history-ink)
}

.match-content[data-v-f27cb90c] {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.match-teams-row[data-v-f27cb90c] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .5rem 0;
    background: #00b8940f;
    border: 1px solid rgba(0, 184, 148, .12);
    border-radius: 10px
}

.team-info[data-v-f27cb90c] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 800;
    color: var(--history-ink)
}

.team-info.home[data-v-f27cb90c] {
    justify-content: flex-end;
    text-align: right
}

.team-info.away[data-v-f27cb90c] {
    justify-content: flex-start;
    text-align: left
}

.mini-logo[data-v-f27cb90c] {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.predicted-score[data-v-f27cb90c] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--history-ink);
    background: linear-gradient(135deg, var(--history-yellow), #ffe88b);
    padding: .2rem .75rem;
    border-radius: 999px;
    box-shadow: 0 8px 18px #f4a51c2e
}

.match-details-row[data-v-f27cb90c] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap
}

.detail-badge[data-v-f27cb90c] {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #effff9e6;
    border: 1px solid rgba(0, 184, 148, .16);
    padding: .3rem .6rem;
    border-radius: 8px;
    font-size: .75rem
}

.detail-badge .label[data-v-f27cb90c] {
    color: var(--history-muted);
    font-weight: 600
}

.detail-badge .value[data-v-f27cb90c] {
    color: var(--history-emerald-deep);
    font-weight: 800
}

.odds-content[data-v-f27cb90c] {
    display: grid;
    gap: .75rem
}

.odds-main[data-v-f27cb90c] {
    display: grid;
    gap: .45rem;
    background: linear-gradient(135deg, #19c7d51a, #ffffffc2);
    border: 1px solid rgba(25, 199, 213, .2);
    padding: .75rem;
    border-radius: 10px
}

.odds-round[data-v-f27cb90c] {
    width: fit-content;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #ffd23f42;
    color: #936600;
    font-size: .72rem;
    font-weight: 900
}

.odds-main p[data-v-f27cb90c] {
    margin: 0;
    color: var(--history-ink);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.45;
    white-space: pre-wrap
}

.odds-meta-row[data-v-f27cb90c] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.status-pill[data-v-f27cb90c],
.points-pill[data-v-f27cb90c],
.admin-note[data-v-f27cb90c] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 850
}

.status-pill[data-v-f27cb90c] {
    background: #00b8941a;
    color: var(--history-emerald-deep);
    border: 1px solid rgba(0, 184, 148, .2)
}

.status-pill.pending[data-v-f27cb90c] {
    background: #ffd23f3d;
    color: #936600;
    border-color: #f4a51c4d
}

.status-pill.invalid[data-v-f27cb90c],
.status-pill.lose[data-v-f27cb90c] {
    background: #ef44441a;
    color: #b42318;
    border-color: #ef444438
}

.points-pill[data-v-f27cb90c] {
    background: #19c7d51a;
    color: #077182;
    border: 1px solid rgba(25, 199, 213, .22)
}

.admin-note[data-v-f27cb90c] {
    background: #effff9e6;
    color: var(--history-muted);
    border: 1px solid rgba(0, 184, 148, .14)
}

@keyframes spin-f27cb90c {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeInUp-f27cb90c {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:480px) {
    .team-info[data-v-f27cb90c] {
        font-size: .78rem !important;
        gap: .25rem !important
    }

    .mini-logo[data-v-f27cb90c] {
        width: 18px !important;
        height: 18px !important
    }

    .predicted-score[data-v-f27cb90c] {
        font-size: 1rem !important;
        padding: .15rem .5rem !important;
        gap: .25rem !important
    }

    .detail-badge[data-v-f27cb90c] {
        padding: .2rem .4rem !important;
        font-size: .7rem !important
    }

    .history-card[data-v-f27cb90c] {
        padding: 1rem !important
    }

    .history-header h3[data-v-f27cb90c] {
        font-size: 1rem !important
    }
}

.prize-card[data-v-4e71322e] {
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid #d4def8;
    background: #fff
}

.prize-card h3[data-v-4e71322e] {
    margin: 0 0 10px;
    font-size: 22px;
    color: #163d2a
}

.prize-card ul[data-v-4e71322e] {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    color: #163d2a
}

.prize-card li[data-v-4e71322e] {
    color: #163d2a;
    font-weight: 700
}

.prize-note[data-v-4e71322e] {
    margin: 10px 0 0;
    color: #e63d3d;
    font-weight: 700
}

.leaderboard-table[data-v-4e71322e] {
    width: 100%;
    border-collapse: collapse
}

.leaderboard-table th[data-v-4e71322e],
.leaderboard-table td[data-v-4e71322e] {
    border-bottom: 1px solid #e7ecfa;
    padding: 8px;
    text-align: left;
    color: #163d2a
}

.leaderboard-table th[data-v-4e71322e] {
    font-weight: 800
}

.leaderboard-table tr.match-prize-row td[data-v-4e71322e] {
    font-weight: 850
}

.leaderboard-table tr.match-prize-row.prize-1 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #ffd23f5c, #fff8d7eb);
    color: #5f4300
}

.leaderboard-table tr.match-prize-row.prize-2 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #19c7d533, #effff9f0);
    color: #075f6f
}

.leaderboard-table tr.match-prize-row.prize-3 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #00b8942e, #effff9eb);
    color: #006f63
}

.match-prize-badge[data-v-4e71322e] {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #ffd23f;
    color: #563800;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap
}

.match-prize-row.prize-2 .match-prize-badge[data-v-4e71322e] {
    background: #bff7ff;
    color: #075f6f
}

.match-prize-row.prize-3 .match-prize-badge[data-v-4e71322e] {
    background: #c8f7e8;
    color: #006f63
}

.leaderboard-table tr.worldcup-top-row td[data-v-4e71322e],
.leaderboard-table tr.champion-top-row td[data-v-4e71322e] {
    font-weight: 900
}

.leaderboard-table tr.worldcup-top-row.top-1 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #ffd23f5c, #fff8d7eb)
}

.leaderboard-table tr.champion-top-row.top-1 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #ffd23f52, #fff8d7e6)
}

.leaderboard-table tr.worldcup-top-row.top-2 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #19c7d52e, #effff9eb)
}

.leaderboard-table tr.champion-top-row.top-2 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #19c7d529, #effff9e6)
}

.leaderboard-table tr.worldcup-top-row.top-3 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #00b89429, #effff9e6)
}

.leaderboard-table tr.champion-top-row.top-3 td[data-v-4e71322e] {
    background: linear-gradient(90deg, #00b89424, #effff9e0)
}

.leaderboard-table tr.worldcup-top-row td[data-v-4e71322e]:first-child {
    color: #007f73
}

.top-rank-badge[data-v-4e71322e] {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #ffd23f;
    color: #563800;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap
}

.top-rank-badge.top-2[data-v-4e71322e] {
    background: #bff7ff;
    color: #075f6f
}

.top-rank-badge.top-3[data-v-4e71322e] {
    background: #c8f7e8;
    color: #006f63
}

#event-rules .landing-rules[data-v-4e71322e] {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.leaderboard-stack[data-v-4e71322e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px
}

.leaderboard-stat-panel[data-v-4e71322e] {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(0, 184, 148, .22);
    border-radius: 14px;
    background: radial-gradient(circle at 100% 0%, rgba(255, 210, 63, .22), transparent 34%), linear-gradient(180deg, #fffffff5, #effff9e6);
    box-shadow: 0 14px 32px #007f731a;
    overflow-x: auto
}

.leaderboard-stack .leaderboard-stat-panel[data-v-4e71322e],
.leaderboard-rank-panel[data-v-4e71322e] {
    margin-top: 0
}

.leaderboard-stat-panel h3[data-v-4e71322e] {
    margin: 0 0 6px;
    color: #007f73;
    font-size: 16px;
    font-weight: 950
}

.leaderboard-stat-panel p[data-v-4e71322e] {
    margin: 0 0 10px;
    color: #55717a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4
}

.champion-bar-chart[data-v-4e71322e] {
    display: grid;
    gap: 10px;
    margin-top: 12px
}

.champion-bar-row[data-v-4e71322e] {
    display: grid;
    grid-template-columns: 84px minmax(150px, 1fr) minmax(180px, 2fr) 74px;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(0, 184, 148, .18);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #f0fff9);
    box-shadow: 0 10px 22px #007f7314
}

.champion-bar-row.top-1[data-v-4e71322e] {
    border-color: #f4a51c61;
    background: linear-gradient(90deg, #ffd23f3d, #fffffff0)
}

.champion-bar-row.top-2[data-v-4e71322e] {
    border-color: #19c7d54d;
    background: linear-gradient(90deg, #19c7d524, #fffffff0)
}

.champion-bar-row.top-3[data-v-4e71322e] {
    border-color: #00b89447;
    background: linear-gradient(90deg, #00b8941f, #fffffff0)
}

.champion-bar-rank[data-v-4e71322e] {
    display: flex;
    align-items: center;
    gap: 6px
}

.champion-bar-rank>strong[data-v-4e71322e] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #eef7ff;
    color: #007f73;
    font-size: 14px
}

.champion-bar-team[data-v-4e71322e] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.champion-logo-wrap[data-v-4e71322e] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(0, 184, 148, .24);
    border-radius: 999px;
    background: radial-gradient(circle, #fff, #ebfff8 70%, #fff3b0)
}

.champion-logo-wrap img[data-v-4e71322e] {
    width: 28px;
    height: 28px;
    object-fit: contain
}

.champion-bar-team strong[data-v-4e71322e] {
    overflow: hidden;
    color: #07384a;
    font-size: 14px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap
}

.champion-bar-track[data-v-4e71322e] {
    height: 18px;
    overflow: hidden;
    border: 1px solid rgba(0, 184, 148, .18);
    border-radius: 999px;
    background: #effff9e6
}

.champion-bar-track span[data-v-4e71322e] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00b894, #19c7d5, #ffd23f)
}

.champion-bar-value[data-v-4e71322e] {
    display: grid;
    justify-items: end;
    color: #55717a;
    font-size: 12px;
    font-weight: 900
}

.champion-bar-value strong[data-v-4e71322e] {
    color: #007f73;
    font-size: 20px;
    line-height: 1
}

.empty-chart[data-v-4e71322e] {
    margin: 12px 0 0;
    padding: 14px;
    border: 1px solid rgba(0, 184, 148, .14);
    border-radius: 12px;
    background: #effff9b8;
    color: #55717a;
    font-weight: 850;
    text-align: center
}

.leaderboard-actions[data-v-4e71322e] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 10px 0 0
}

.leaderboard-actions button[data-v-4e71322e] {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(0, 127, 115, .16);
    border-radius: 8px;
    background: #ffffff9e;
    color: #55717a;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: none
}

.leaderboard-actions button[data-v-4e71322e]:nth-child(2) {
    border-color: #007f7329;
    background: #ffffff9e;
    color: #55717a
}

.leaderboard-actions button[data-v-4e71322e]:hover {
    transform: translateY(-1px);
    color: #007f73;
    border-color: #00b89447
}

.stat-table th[data-v-4e71322e] {
    color: #007f73;
    background: #00b89414
}

.stat-table td[data-v-4e71322e] {
    vertical-align: middle
}

.stat-subline[data-v-4e71322e] {
    display: block;
    margin-top: 3px;
    color: #55717a;
    font-size: 12px;
    font-weight: 700
}

.stat-team[data-v-4e71322e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.stat-team img[data-v-4e71322e] {
    width: 28px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 4px 10px #007f7324
}

.sbd-hint[data-v-4e71322e] {
    width: min(360px, 100%);
    margin: 2px auto 8px;
    color: #075f93;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35
}

.sbd-toolbar[data-v-4e71322e] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 6px 0 16px
}

.sbd-btn[data-v-4e71322e] {
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid #9fdaf1;
    border-radius: 12px;
    background: #fff;
    color: #075f93;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px #0871af1f
}

.sbd-contact-btn[data-v-4e71322e] {
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid #e28a00;
    border-radius: 12px;
    background: linear-gradient(#ffc260, #ffa31a);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px #e28a0038
}

.sbd-pill[data-v-4e71322e] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 12px;
    border: 1px solid #9fdaf1;
    background: #fff;
    color: #075f93;
    font-weight: 800
}

.modal-overlay[data-v-4e71322e] {
    position: fixed;
    inset: 0;
    background: #1118278f;
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 16px
}

.modal-card[data-v-4e71322e] {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 20px 50px #00000040;
    display: grid;
    gap: 10px
}

.modal-card h3[data-v-4e71322e] {
    margin: 0;
    color: #1f2d5c
}

.modal-card input[data-v-4e71322e] {
    padding: 10px;
    border: 1px solid #ccd2e0;
    border-radius: 8px
}

.modal-actions[data-v-4e71322e] {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.modal-actions button[data-v-4e71322e] {
    padding: 8px 12px;
    border: 1px solid #2252b8;
    border-radius: 8px;
    background: #2252b8;
    color: #fff;
    cursor: pointer
}

.modal-actions .btn-light[data-v-4e71322e] {
    background: #fff;
    color: #1f2d5c;
    border-color: #b9c6ea
}

.invalid-sbd-card p[data-v-4e71322e] {
    margin: 0;
    color: #1f2d5c;
    font-weight: 700;
    line-height: 1.45
}

.contact-links[data-v-4e71322e] {
    display: grid;
    gap: 8px
}

.contact-links a[data-v-4e71322e] {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eef4ff;
    color: #1d3f8c;
    font-weight: 800;
    text-decoration: none;
    text-align: center
}

.contact-links a[data-v-4e71322e]:hover {
    background: #dce9ff
}

@media(max-width:760px) {
    #event-rules .landing-rules[data-v-4e71322e] {
        grid-template-columns: 1fr
    }

    .champion-bar-row[data-v-4e71322e] {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .champion-bar-rank[data-v-4e71322e],
    .champion-bar-team[data-v-4e71322e] {
        justify-content: center
    }

    .champion-bar-value[data-v-4e71322e] {
        justify-items: center
    }

    .leaderboard-actions button[data-v-4e71322e] {
        flex: 0 0 auto
    }

    .sbd-toolbar[data-v-4e71322e] {
        flex-wrap: wrap
    }

    .sbd-btn[data-v-4e71322e],
    .sbd-contact-btn[data-v-4e71322e] {
        flex: 1 1 140px
    }

    .modal-actions[data-v-4e71322e] {
        flex-wrap: wrap
    }

    .modal-actions button[data-v-4e71322e] {
        flex: 1 1 auto
    }
}

:root {
    --font-roboto: Roboto;
    --green: #3575e8;
    --deep-green: #1f55c9;
    --soft-green: #dce9ff;
    --panel-green: rgba(221, 234, 255, .88);
    --line-green: #9fbcff;
    --blue: #2f50c8;
    --red: #f23b3b;
    --text: #143816
}

body:not(:has(.admin-shell)) {
    --ui-emerald: #00c48c;
    --ui-emerald-deep: #009f79;
    --ui-cyan: #23bfd7;
    --ui-yellow: #ffd34d;
    --ui-yellow-deep: #f4a51c;
    --ui-ink: #093348;
    --ui-muted: #5d7480
}

body:not(:has(.admin-shell)) .prediction-panel,
body:not(:has(.admin-shell)) .spotlight-panel {
    padding: 18px
}

body:not(:has(.admin-shell)) .vote-column,
body:not(:has(.admin-shell)) .champion-prediction,
body:not(:has(.admin-shell)) .match-prediction,
body:not(:has(.admin-shell)) .bet-event {
    color: var(--ui-ink)
}

body:not(:has(.admin-shell)) .vote-column h3,
body:not(:has(.admin-shell)) .champion-form h3,
body:not(:has(.admin-shell)) .bet-rules h3,
body:not(:has(.admin-shell)) .spotlight-card__content h3 {
    display: inline-flex;
    align-self: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 10px !important;
    padding: 10px 18px;
    border: 1px solid rgba(0, 196, 140, .28);
    border-radius: 12px;
    background: linear-gradient(135deg, #00c48c24, #ffd34d2e);
    color: var(--ui-emerald-deep) !important;
    font-size: clamp(18px, 3vw, 28px) !important;
    line-height: 1.15 !important;
    text-align: center;
    text-shadow: none !important
}

body:not(:has(.admin-shell)) .champion-form,
body:not(:has(.admin-shell)) .vote-form,
body:not(:has(.admin-shell)) .bet-form,
body:not(:has(.admin-shell)) .match-form,
body:not(:has(.admin-shell)) .submit-action {
    border: 1px solid rgba(35, 191, 215, .2) !important;
    border-radius: 14px !important;
    background: #ffffffb8 !important;
    box-shadow: 0 12px 30px #23bfd71a
}

body:not(:has(.admin-shell)) .form-group label,
body:not(:has(.admin-shell)) label,
body:not(:has(.admin-shell)) label span {
    color: var(--ui-ink) !important
}

body:not(:has(.admin-shell)) input,
body:not(:has(.admin-shell)) select,
body:not(:has(.admin-shell)) textarea {
    border-color: #23bfd747 !important;
    background: #fffffff2 !important;
    color: var(--ui-ink) !important;
    box-shadow: inset 0 1px #fffc
}

body:not(:has(.admin-shell)) input:focus,
body:not(:has(.admin-shell)) select:focus,
body:not(:has(.admin-shell)) textarea:focus {
    outline: none;
    border-color: var(--ui-emerald) !important;
    box-shadow: 0 0 0 3px #00c48c29
}

body:not(:has(.admin-shell)) .team-card {
    border: 1px solid rgba(35, 191, 215, .28) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #fffffff5, #e9fff7e0) !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 10px 22px #23bfd71a !important
}

body:not(:has(.admin-shell)) .team-card:hover {
    transform: translateY(-2px);
    border-color: #00c48c99 !important;
    box-shadow: 0 16px 28px #00c48c29 !important
}

body:not(:has(.admin-shell)) .team-logo-wrap {
    border: 2px solid rgba(0, 196, 140, .28) !important;
    background: radial-gradient(circle, #fff, #e9fff7 72%) !important;
    box-shadow: inset 0 0 0 4px #ffd34d29, 0 8px 18px #23bfd724
}

body:not(:has(.admin-shell)) .team-logo {
    border-radius: 50%
}

body:not(:has(.admin-shell)) .team-card strong {
    color: var(--ui-emerald-deep) !important
}

body:not(:has(.admin-shell)) .team-card b {
    color: var(--ui-ink) !important
}

body:not(:has(.admin-shell)) .team-card.selected {
    border-color: var(--ui-yellow-deep) !important;
    background: linear-gradient(180deg, #fff7d1fa, #e4fff5f0) !important;
    box-shadow: 0 16px 30px #f4a51c2e !important
}

body:not(:has(.admin-shell)) .team-card.selected:after {
    background: var(--ui-yellow) !important;
    color: #4a3100 !important
}

body:not(:has(.admin-shell)) .btn-submit,
body:not(:has(.admin-shell)) .bet-form button[type=submit],
body:not(:has(.admin-shell)) .match-form .btn-submit {
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--ui-emerald), var(--ui-cyan)) !important;
    color: #053246 !important;
    box-shadow: 0 14px 28px #00c48c33 !important
}

body:not(:has(.admin-shell)) .btn-submit:disabled {
    background: #d7e7eb !important;
    color: #78909a !important;
    box-shadow: none !important
}

body:not(:has(.admin-shell)) .warning,
body:not(:has(.admin-shell)) .warning-time,
body:not(:has(.admin-shell)) .notice,
body:not(:has(.admin-shell)) .bill-note {
    margin: 0 auto 10px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(244, 165, 28, .28) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ffd34d3d, #ffffffbd) !important;
    color: #8a5700 !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    text-align: center !important
}

body:not(:has(.admin-shell)) .selected-info {
    color: var(--ui-ink);
    font-weight: 800
}

body:not(:has(.admin-shell)) .highlight-team {
    color: var(--ui-emerald-deep) !important
}

body:not(:has(.admin-shell)) .msg-box,
body:not(:has(.admin-shell)) .success-msg,
body:not(:has(.admin-shell)) .error-msg {
    border-radius: 12px !important
}

body:not(:has(.admin-shell)) .success-msg {
    background: #e8fff5 !important;
    color: #05724f !important;
    border-color: #00c48c47 !important
}

body:not(:has(.admin-shell)) .error-msg {
    background: #fff4e2 !important;
    color: #8a5700 !important;
    border-color: #f4a51c4d !important
}

body:not(:has(.admin-shell)) .bet-rules {
    border-color: #00c48c38 !important;
    background: linear-gradient(135deg, #e8fff5e0, #fff8dbb8) !important
}

body:not(:has(.admin-shell)) .bet-rules p {
    color: var(--ui-ink) !important
}

body {
    background: radial-gradient(circle at 14% 8%, rgba(255, 216, 77, .42), transparent 22%), radial-gradient(circle at 82% 6%, rgba(38, 198, 218, .36), transparent 24%), linear-gradient(180deg, #f3fdff, #ddfff1 48%, #eff8ff) !important;
    color: #083348 !important
}

.brand-header,
.tabs-wrap-simple,
.spotlight-panel,
.prediction-panel,
.landing-info-panel,
.event-note-board,
.quick-card {
    background: #ffffffe0 !important;
    border-color: #00b1d23d !important;
    color: #083348 !important;
    box-shadow: 0 18px 44px #00b1d224 !important
}

.brand-header {
    justify-content: center !important
}

.brand-header:after {
    display: none !important
}

.hero {
    width: min(1180px, 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 14px !important
}

.hero-title,
h1.hero-title {
    width: min(940px, 100%) !important;
    margin: 0 auto 4px !important;
    display: block !important;
    text-align: center !important;
    color: #007ea7 !important;
    font-size: clamp(34px, 6vw, 72px) !important;
    line-height: .98 !important;
    text-shadow: 0 3px 0 #fff, 0 14px 28px rgba(0, 177, 210, .2) !important
}

.hero-title span,
.hero-title strong {
    display: block !important;
    text-align: center !important
}

.hero-title strong {
    margin-top: 8px !important;
    color: #12b981 !important;
    font-size: .5em !important;
    text-shadow: 0 3px 0 #fff, 0 14px 28px rgba(18, 185, 129, .2) !important
}

.countdown-card {
    align-self: center !important;
    justify-self: center !important;
    margin: 0 auto 4px !important
}

.sbd-hint {
    margin: 0 auto !important;
    text-align: center !important;
    color: #0b5a78 !important
}

.sbd-toolbar {
    justify-content: center !important
}

.tabs-wrap-simple {
    width: min(980px, 100%) !important;
    margin-inline: auto !important
}

.tabs-wrap-simple .tab {
    color: #0b5a78 !important;
    background: transparent !important;
    box-shadow: none !important
}

.tabs-wrap-simple .tab.active,
.sbd-btn,
.modal-actions button,
.landing-info-head button,
.contact-links a:first-child {
    background: linear-gradient(135deg, #22e59b, #20c7ff) !important;
    border-color: transparent !important;
    color: #063044 !important;
    box-shadow: 0 12px 28px #20c7ff38 !important
}

.sbd-contact-btn,
.contact-links a:nth-child(2) {
    background: linear-gradient(135deg, #ffe66d, #ffb13b) !important;
    border-color: transparent !important;
    color: #3a2600 !important;
    box-shadow: 0 12px 28px #ffb13b3d !important
}

.quick-menu {
    background: transparent !important
}

.landing-info-head h2,
.event-note-board h2,
.landing-contact p,
.landing-rules li,
.event-note-grid p,
.spotlight-panel,
.prediction-panel {
    color: #083348 !important
}

.landing-rules article,
.event-note-grid p {
    background: #ffffffbd !important;
    border-color: #00b1d22e !important
}

.landing-rules h3,
.event-note-grid strong {
    color: #e38400 !important
}

.modal-overlay {
    background: #083c5257 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important
}

.modal-card {
    background: #fffffffa !important;
    border: 1px solid rgba(0, 177, 210, .24) !important;
    color: #083348 !important;
    box-shadow: 0 24px 70px #00b1d238 !important
}

.modal-card h3 {
    color: #007ea7 !important
}

@media(max-width:760px) {

    .hero-title,
    h1.hero-title {
        width: 100% !important;
        text-align: center !important;
        font-size: clamp(32px, 10vw, 44px) !important
    }

    .quick-menu {
        background: #ffffffe6 !important
    }
}

:root {
    --event-mint: #19d38b;
    --event-cyan: #1fb6ff;
    --event-yellow: #ffd24a;
    --event-ink: #093347;
    --event-card: rgba(255, 255, 255, .9)
}

body {
    background: radial-gradient(circle at 12% 10%, rgba(255, 210, 74, .38), transparent 23%), radial-gradient(circle at 78% 4%, rgba(31, 182, 255, .32), transparent 25%), linear-gradient(180deg, #e9fbff, #dffcf2 42%, #eef8ff) !important;
    color: var(--event-ink)
}

.brand-header {
    justify-content: center;
    background: #ffffffd1;
    border-color: #1fb6ff52;
    box-shadow: 0 16px 42px #1fb6ff29
}

.brand-header:after {
    display: none
}

.hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center
}

.hero-title,
h1.hero-title {
    width: min(920px, 100%);
    margin-inline: auto;
    text-align: center;
    color: #0d7194;
    text-shadow: 0 3px 0 #ffffff, 0 16px 34px rgba(31, 182, 255, .2)
}

.hero-title strong {
    color: #0fbf7a;
    text-shadow: 0 3px 0 #ffffff, 0 14px 30px rgba(25, 211, 139, .2)
}

.countdown-card {
    justify-self: center;
    margin-inline: auto
}

.sbd-hint {
    width: min(640px, 100%);
    margin-inline: auto;
    color: #0b5a78;
    text-align: center
}

.sbd-toolbar {
    justify-content: center
}

.sbd-btn,
.sbd-contact-btn,
.tabs-wrap-simple .tab.active,
.landing-info-head button,
.modal-actions button,
.contact-links a {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--event-mint), var(--event-cyan)) !important;
    color: #063044 !important;
    box-shadow: 0 12px 28px #1fb6ff2e !important
}

.sbd-contact-btn,
.contact-links a:nth-child(2) {
    background: linear-gradient(135deg, var(--event-yellow), #ff9f1c) !important;
    color: #3d2600 !important
}

.sbd-pill {
    border-color: #1fb6ff57;
    background: #fff;
    color: #0b5a78
}

.tabs-wrap-simple,
.spotlight-panel,
.prediction-panel,
.landing-info-panel,
.event-note-board,
.quick-card {
    border-color: #1fb6ff3d !important;
    background: var(--event-card) !important;
    color: var(--event-ink) !important;
    box-shadow: 0 20px 48px #1fb6ff24 !important
}

.tabs-wrap-simple .tab {
    color: #0b5a78
}

.landing-info-head h2,
.event-note-board h2,
.landing-contact p,
.landing-rules li,
.event-note-grid p {
    color: var(--event-ink)
}

.landing-rules article,
.event-note-grid p {
    background: #ffffffc7;
    border-color: #1fb6ff33
}

.landing-rules h3,
.event-note-grid strong {
    color: #e48600
}

.quick-card {
    color: #0b5a78 !important
}

.quick-card:hover {
    border-color: #19d38b94 !important
}

.modal-overlay {
    background: #082c3e6b !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px)
}

.modal-card {
    border: 1px solid rgba(31, 182, 255, .22) !important;
    border-radius: 14px !important;
    background: #fffffff5 !important;
    color: var(--event-ink) !important;
    box-shadow: 0 24px 70px #1fb6ff38 !important
}

.modal-card h3 {
    color: #0d7194 !important
}

.modal-card input {
    border-color: #1fb6ff42 !important;
    background: #fff;
    color: var(--event-ink)
}

@media(max-width:760px) {

    .hero-title,
    h1.hero-title {
        text-align: center
    }

    .quick-menu {
        background: #ffffffd6 !important
    }
}

.hero-title strong {
    margin-top: 6px;
    color: #22c55e;
    font-size: .48em;
    letter-spacing: 0;
    text-shadow: 0 14px 32px rgba(34, 197, 94, .2)
}

.sbd-btn,
.sbd-contact-btn,
.sbd-pill {
    border-radius: 10px;
    box-shadow: none
}

.spotlight-panel *,
.prediction-panel *,
.landing-info-panel *,
.event-note-board * {
    letter-spacing: 0
}

.quick-card:hover {
    transform: translateY(-1px);
    border-color: #22c55e8a
}

body:not(:has(.admin-shell)) .brand-header {
    justify-content: center !important;
    gap: 12px !important
}

body:not(:has(.admin-shell)) .sbd-hint,
body:not(:has(.admin-shell)) .warning,
body:not(:has(.admin-shell)) .warning-time,
body:not(:has(.admin-shell)) .notice,
body:not(:has(.admin-shell)) .bill-note,
body:not(:has(.admin-shell)) .sbd-pill {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(244, 165, 28, .34) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ffd23f47, #ffffffd6) !important;
    color: #765000 !important;
    font-weight: 850 !important;
    line-height: 1.42 !important;
    text-align: center !important;
    box-shadow: 0 10px 20px #f4a51c1f !important
}

body:not(:has(.admin-shell)) .sbd-btn,
body:not(:has(.admin-shell)) .tabs-wrap-simple .tab.active,
body:not(:has(.admin-shell)) .btn-submit,
body:not(:has(.admin-shell)) .bet-form button[type=submit],
body:not(:has(.admin-shell)) .match-form .btn-submit,
body:not(:has(.admin-shell)) .modal-card button:not(.btn-light) {
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--landing-emerald), var(--landing-cyan)) !important;
    color: #043946 !important;
    box-shadow: 0 14px 28px #00b89433 !important
}

body:not(:has(.admin-shell)) .highlight-team,
body:not(:has(.admin-shell)) .landing-info-head h2,
body:not(:has(.admin-shell)) .event-note-board h2,
body:not(:has(.admin-shell)) .landing-rules h3,
body:not(:has(.admin-shell)) .event-note-grid strong {
    color: var(--landing-emerald-deep) !important
}

html body:not(:has(.admin-shell)) {
    --landing-emerald: #00b894;
    --landing-emerald-deep: #007f73;
    --landing-cyan: #19c7d5;
    --landing-yellow: #ffd23f;
    --landing-yellow-deep: #f4a51c;
    --landing-ink: #07384a;
    --landing-muted: #54707a;
    background: radial-gradient(circle at 12% 8%, rgba(255, 210, 63, .46), transparent 21%), radial-gradient(circle at 88% 6%, rgba(25, 199, 213, .38), transparent 24%), linear-gradient(180deg, #f4fffb, #dffff2 47%, #f6fbff) !important;
    color: var(--landing-ink) !important
}

body:not(:has(.admin-shell)) .brand-header,
body:not(:has(.admin-shell)) .tabs-wrap-simple,
body:not(:has(.admin-shell)) .spotlight-panel,
body:not(:has(.admin-shell)) .prediction-panel,
body:not(:has(.admin-shell)) .landing-info-panel,
body:not(:has(.admin-shell)) .event-note-board,
body:not(:has(.admin-shell)) .modal-card {
    border: 1px solid rgba(0, 184, 148, .22) !important;
    border-radius: 16px !important;
    background: #ffffffe6 !important;
    color: var(--landing-ink) !important;
    box-shadow: 0 20px 48px #007f7324 !important
}

body:not(:has(.admin-shell)) .brand-header {
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 4px !important
}

body:not(:has(.admin-shell)) .brand-header:after {
    display: none !important
}

body:not(:has(.admin-shell)) .hero {
    width: min(1180px, 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important
}

body:not(:has(.admin-shell)) .hero-title,
body:not(:has(.admin-shell)) h1.hero-title {
    width: min(940px, 100%) !important;
    margin: 0 auto 2px !important;
    color: var(--landing-emerald-deep) !important;
    text-align: center !important;
    line-height: .98 !important;
    text-shadow: 0 3px 0 #ffffff, 0 16px 30px rgba(0, 184, 148, .18) !important
}

body:not(:has(.admin-shell)) .hero-title span,
body:not(:has(.admin-shell)) .hero-title strong {
    display: block !important;
    width: 100% !important;
    text-align: center !important
}

body:not(:has(.admin-shell)) .hero-title strong {
    margin-top: 6px !important;
    color: #009b8a !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .95), 0 12px 24px rgba(25, 199, 213, .2) !important
}

body:not(:has(.admin-shell)) .sbd-hint {
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(255, 210, 63, .45) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ffd23f3d, #ffffffc2) !important;
    color: #7a5400 !important;
    font-weight: 850 !important;
    text-align: center !important
}

body:not(:has(.admin-shell)) .sbd-toolbar {
    justify-content: center !important;
    gap: 8px !important
}

body:not(:has(.admin-shell)) .sbd-btn,
body:not(:has(.admin-shell)) .sbd-contact-btn,
body:not(:has(.admin-shell)) .tabs-wrap-simple .tab.active,
body:not(:has(.admin-shell)) .btn-submit,
body:not(:has(.admin-shell)) .bet-form button[type=submit],
body:not(:has(.admin-shell)) .match-form .btn-submit,
body:not(:has(.admin-shell)) .modal-card button:not(.btn-light) {
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--landing-emerald), var(--landing-cyan)) !important;
    color: #043946 !important;
    box-shadow: 0 14px 28px #00b89433 !important
}

body:not(:has(.admin-shell)) .sbd-contact-btn,
body:not(:has(.admin-shell)) .btn-light,
body:not(:has(.admin-shell)) .landing-info-head button,
body:not(:has(.admin-shell)) .contact-links a {
    border: 1px solid rgba(244, 165, 28, .4) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--landing-yellow), #ffe68a) !important;
    color: #563800 !important;
    box-shadow: 0 12px 24px #f4a51c2e !important
}

body:not(:has(.admin-shell)) .tabs-wrap-simple {
    padding: 7px !important;
    gap: 8px !important
}

body:not(:has(.admin-shell)) .tabs-wrap-simple .tab {
    min-height: 44px !important;
    border: 1px solid rgba(0, 184, 148, .14) !important;
    border-radius: 12px !important;
    background: #f4fffbcc !important;
    color: var(--landing-emerald-deep) !important
}

body:not(:has(.admin-shell)) .tabs-wrap-simple .tab.active {
    border-color: transparent !important;
    color: #043946 !important
}

body:not(:has(.admin-shell)) .quick-menu {
    background: #ffffffc7 !important;
    border: 1px solid rgba(0, 184, 148, .22) !important;
    box-shadow: 0 18px 44px #007f7329 !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px)
}

body:not(:has(.admin-shell)) .quick-card {
    border: 1px solid rgba(0, 184, 148, .22) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, #fff, #edfff8) !important;
    color: var(--landing-ink) !important;
    box-shadow: none !important
}

body:not(:has(.admin-shell)) .quick-card:hover {
    border-color: #f4a51c8f !important;
    background: linear-gradient(180deg, #fff8d6, #edfff8) !important
}

body:not(:has(.admin-shell)) .vote-column,
body:not(:has(.admin-shell)) .champion-prediction,
body:not(:has(.admin-shell)) .match-prediction,
body:not(:has(.admin-shell)) .bet-event {
    color: var(--landing-ink) !important
}

body:not(:has(.admin-shell)) .vote-column h3,
body:not(:has(.admin-shell)) .champion-form h3,
body:not(:has(.admin-shell)) .bet-rules h3,
body:not(:has(.admin-shell)) .spotlight-card__content h3 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    padding: 10px 18px !important;
    border: 1px solid rgba(0, 184, 148, .24) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #00b89424, #ffd23f33) !important;
    color: var(--landing-emerald-deep) !important;
    font-size: clamp(18px, 3vw, 28px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-shadow: none !important
}

body:not(:has(.admin-shell)) .champion-form,
body:not(:has(.admin-shell)) .vote-form,
body:not(:has(.admin-shell)) .match-form,
body:not(:has(.admin-shell)) .bet-form,
body:not(:has(.admin-shell)) .submit-action,
body:not(:has(.admin-shell)) .bet-rules,
body:not(:has(.admin-shell)) .spotlight-card,
body:not(:has(.admin-shell)) .loading-state,
body:not(:has(.admin-shell)) .empty-state {
    border: 1px solid rgba(0, 184, 148, .18) !important;
    border-radius: 14px !important;
    background: #ffffffc7 !important;
    color: var(--landing-ink) !important;
    box-shadow: 0 12px 28px #007f731a !important
}

body:not(:has(.admin-shell)) .form-group label,
body:not(:has(.admin-shell)) label,
body:not(:has(.admin-shell)) label span {
    color: var(--landing-ink) !important
}

body:not(:has(.admin-shell)) input,
body:not(:has(.admin-shell)) select,
body:not(:has(.admin-shell)) textarea {
    border: 1px solid rgba(0, 184, 148, .24) !important;
    border-radius: 11px !important;
    background: #fffffff5 !important;
    color: var(--landing-ink) !important;
    box-shadow: inset 0 1px #fffc !important
}

body:not(:has(.admin-shell)) input:focus,
body:not(:has(.admin-shell)) select:focus,
body:not(:has(.admin-shell)) textarea:focus {
    outline: none !important;
    border-color: var(--landing-emerald) !important;
    box-shadow: 0 0 0 3px #00b89429 !important
}

body:not(:has(.admin-shell)) .team-grid {
    gap: 10px !important
}

body:not(:has(.admin-shell)) .team-card {
    min-height: 104px !important;
    border: 1px solid rgba(0, 184, 148, .24) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, #fff, #ecfff8) !important;
    color: var(--landing-ink) !important;
    box-shadow: 0 10px 22px #007f731a !important
}

body:not(:has(.admin-shell)) .team-card:hover {
    transform: translateY(-2px) !important;
    border-color: #00b89494 !important;
    box-shadow: 0 16px 30px #00b89426 !important
}

body:not(:has(.admin-shell)) .team-card.selected {
    border-color: var(--landing-yellow-deep) !important;
    background: linear-gradient(180deg, #fff7d0, #eafff7) !important;
    box-shadow: 0 16px 30px #f4a51c33 !important
}

body:not(:has(.admin-shell)) .team-card.selected:after {
    background: var(--landing-yellow) !important;
    color: #4d3300 !important
}

body:not(:has(.admin-shell)) .team-logo-wrap,
body:not(:has(.admin-shell)) .team-card .team-logo-wrap {
    width: 46px !important;
    height: 46px !important;
    border: 2px solid rgba(0, 184, 148, .3) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #fff, #ebfff8 66%, #fff3b0) !important;
    box-shadow: inset 0 0 0 4px #ffd23f29, 0 8px 18px #007f7321 !important
}

body:not(:has(.admin-shell)) .team-card strong {
    color: var(--landing-emerald-deep) !important
}

body:not(:has(.admin-shell)) .team-card b {
    color: var(--landing-ink) !important
}

body:not(:has(.admin-shell)) .warning,
body:not(:has(.admin-shell)) .warning-time,
body:not(:has(.admin-shell)) .notice,
body:not(:has(.admin-shell)) .bill-note,
body:not(:has(.admin-shell)) .sbd-pill {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(244, 165, 28, .34) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ffd23f47, #ffffffd6) !important;
    color: #765000 !important;
    font-weight: 850 !important;
    line-height: 1.42 !important;
    text-align: center !important;
    box-shadow: 0 10px 20px #f4a51c1f !important
}

body:not(:has(.admin-shell)) .selected-info {
    color: var(--landing-ink) !important;
    font-weight: 850 !important
}

body:not(:has(.admin-shell)) .highlight-team {
    color: var(--landing-emerald-deep) !important
}

body:not(:has(.admin-shell)) .success-msg,
body:not(:has(.admin-shell)) .error-msg,
body:not(:has(.admin-shell)) .msg-box {
    border-radius: 12px !important
}

body:not(:has(.admin-shell)) .success-msg {
    border: 1px solid rgba(0, 184, 148, .28) !important;
    background: #e8fff5 !important;
    color: #05745a !important
}

body:not(:has(.admin-shell)) .error-msg {
    border: 1px solid rgba(244, 165, 28, .34) !important;
    background: #fff5d8 !important;
    color: #765000 !important
}

body:not(:has(.admin-shell)) .landing-info-head h2,
body:not(:has(.admin-shell)) .event-note-board h2,
body:not(:has(.admin-shell)) .landing-rules h3,
body:not(:has(.admin-shell)) .event-note-grid strong {
    color: var(--landing-emerald-deep) !important
}

body:not(:has(.admin-shell)) .landing-contact p,
body:not(:has(.admin-shell)) .landing-rules li,
body:not(:has(.admin-shell)) .event-note-grid p,
body:not(:has(.admin-shell)) .bet-rules p {
    color: var(--landing-ink) !important
}

body:not(:has(.admin-shell)) .landing-rules article,
body:not(:has(.admin-shell)) .event-note-grid p {
    border: 1px solid rgba(0, 184, 148, .18) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, #fff, #effff9) !important
}

@media(max-width:760px) {
    body:not(:has(.admin-shell)) .hero {
        gap: 10px !important
    }

    body:not(:has(.admin-shell)) .hero-title,
    body:not(:has(.admin-shell)) h1.hero-title {
        font-size: clamp(30px, 9.4vw, 42px) !important
    }

    body:not(:has(.admin-shell)) .prediction-panel,
    body:not(:has(.admin-shell)) .spotlight-panel {
        padding: 12px !important;
        border-radius: 14px !important
    }

    body:not(:has(.admin-shell)) .quick-menu {
        border-radius: 15px !important
    }

    body:not(:has(.admin-shell)) .quick-card {
        height: 58px !important;
        border-radius: 11px !important
    }

    body:not(:has(.admin-shell)) .team-logo-wrap,
    body:not(:has(.admin-shell)) .team-card .team-logo-wrap {
        width: 42px !important;
        height: 42px !important
    }
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-roboto), Arial, Helvetica, sans-serif;
    color: var(--text);
    background: linear-gradient(#ffffff14, #ffffff14), url(images/event/top-bg.webp) center top / 820px auto repeat-x, url(images/ui/prediction-bg.svg) center top / cover fixed no-repeat;
    overflow-x: hidden
}

body:before,
body:after {
    position: fixed;
    z-index: 0;
    width: 105px;
    height: 105px;
    content: "";
    border-radius: 50%;
    filter: blur(1px);
    opacity: .72;
    background: radial-gradient(circle, #fff 0 18%, transparent 19%), conic-gradient(from -40deg, #d62727 0 26%, #fff 27% 50%, #d62727 51% 70%, #fff 71% 100%)
}

body:before {
    top: 205px;
    left: 22%;
    transform: rotate(-26deg)
}

body:after {
    top: 305px;
    right: 22%;
    transform: rotate(28deg)
}

button,
input {
    font: inherit
}

button {
    cursor: pointer
}

.topbar {
    position: fixed;
    top: 8px;
    left: 14px;
    right: 14px;
    z-index: 5;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 16px;
    border-radius: 7px;
    background: #fffffff5;
    box-shadow: 0 2px 8px #0000002e;
    font-size: 14px;
    font-weight: 700;
    color: #101010
}

.back-btn {
    width: 25px;
    height: 25px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 20px;
    color: #333
}

.quick-menu {
    position: fixed;
    top: 0;
    right: 12px;
    z-index: 7;
    display: grid;
    gap: 10px
}

.quick-card {
    width: 78px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 6px 6px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 11px;
    color: #fff;
    box-shadow: inset 0 1px #ffffff40, 0 4px 9px #0000002e;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.05;
    text-align: center
}

.quick-card span {
    display: block;
    width: 100%;
    overflow-wrap: anywhere
}

.quick-icon {
    width: 42px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block
}

.quick-card-brown {
    background: linear-gradient(#b4773c, #8c4c1e)
}

.quick-card-green {
    background: linear-gradient(#72a3ff, var(--green))
}

.quick-card-blue {
    background: linear-gradient(#4e7be0, #204da8)
}

.quick-card-red {
    background: linear-gradient(#ff8b70, #e53f3f)
}

.page-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 72px 44px 130px
}

.hero {
    width: min(960px, 100%);
    margin: 0 auto;
    text-align: center
}

h1 {
    margin: 0 0 20px;
    color: var(--green);
    font-size: clamp(26px, 3.2vw, 45px);
    font-weight: 950;
    font-style: italic;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--deep-green), 0 3px 4px rgba(0, 0, 0, .24)
}

.countdown-card {
    position: relative;
    width: 520px;
    max-width: 100%;
    aspect-ratio: 520 / 145;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 17px 105px 44px 132px;
    border: 0;
    border-radius: 0;
    background: url(images/event/countdown-frame.webp) center / contain no-repeat;
    box-shadow: none;
    overflow: visible
}

.countdown-art {
    display: none
}

.countdown-content {
    position: relative;
    z-index: 1;
    width: 270px
}

.countdown-content h2 {
    margin: 0 0 8px;
    color: var(--green);
    font-size: 19px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #fff, 1px 2px 0 var(--deep-green)
}

.timer {
    display: flex;
    justify-content: flex-start;
    gap: 8px
}

.time-box {
    width: 56px;
    height: 41px;
    display: grid;
    place-content: center;
    border-radius: 5px;
    color: #fff;
    line-height: 1;
    box-shadow: inset 0 1px #ffffff40
}

.time-box strong {
    font-size: 19px
}

.time-box span {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700
}

.time-green {
    background: var(--green)
}

.time-red {
    background: #f42d3e
}

.time-blue {
    background: #2438bd
}

.time-dark {
    background: #353535
}

.mascot {
    display: none
}

.mascot-left {
    left: 18px
}

.mascot-right {
    right: 15px
}

.prediction-count {
    min-width: 190px;
    height: 37px;
    margin-bottom: 17px;
    border: 1px solid var(--deep-green);
    border-radius: 20px;
    background: linear-gradient(#72a3ff, var(--green));
    color: #fff;
    box-shadow: inset 0 2px 1px #ffffff85, 0 2px 3px #0000002e;
    font-size: 14px;
    font-weight: 900
}

.tabs-wrap {
    width: min(1000px, 100%);
    margin: 0 auto 12px;
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    align-items: center;
    gap: 8px
}

.tabs-wrap-simple {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 16px;
    width: min(1000px, 100%)
}

.tabs-wrap-simple .tab {
    min-width: 160px;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s ease
}

.tabs-wrap-simple .tab:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 2px 1px #fffc, 0 4px 8px #0000001a
}

.tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(136px, max-content);
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.tabs::-webkit-scrollbar {
    display: none
}

.tab,
.tab-arrow {
    border: 0;
    color: #fff;
    font-weight: 900
}

.tab {
    min-height: 42px;
    padding: 7px 16px;
    border-radius: 18px;
    background: #d6e5ff;
    color: #7593c9;
    box-shadow: inset 0 2px 1px #ffffffbf, 0 2px #aac4ff;
    font-size: 12px;
    line-height: 1.15
}

.tab.active {
    background: linear-gradient(#72a3ff, var(--green));
    color: #fff;
    box-shadow: inset 0 2px 1px #ffffffb8, 0 2px 0 var(--deep-green)
}

.tab-arrow {
    width: 22px;
    height: 28px;
    background: transparent;
    color: var(--green);
    font-size: 24px;
    transition: opacity .2s ease
}

.tab-arrow.disabled,
.tab-arrow:disabled {
    opacity: .35;
    cursor: default
}

.spotlight-panel {
    width: min(1000px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 26px
}

.spotlight-card {
    overflow: hidden;
    border-radius: 28px;
    background: #fffffff2;
    box-shadow: 0 18px 45px #12225424
}

.spotlight-card__top {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 18px;
    padding: 0 22px;
    min-height: 58px;
    color: #fff;
    font-weight: 950;
    text-transform: uppercase
}

.spotlight-card.open .spotlight-card__top {
    background: linear-gradient(90deg, #5f33af, #7d3dd2)
}

.spotlight-card.closed .spotlight-card__top {
    background: linear-gradient(90deg, #b8b8bf, #d8d8de)
}

.spotlight-card__time {
    text-align: left;
    font-size: clamp(16px, 2vw, 21px)
}

.spotlight-card__title {
    text-align: center;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: 1px
}

.spotlight-card__body {
    display: grid;
    grid-template-columns: minmax(240px, 38%) 1fr;
    gap: 26px;
    padding: 20px 22px 24px
}

.spotlight-card__poster {
    min-height: 310px;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    padding: 28px 18px 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffffff0, #f6f7faf5)
}

.poster-laliga:before,
.poster-ucl:before {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    opacity: .22
}

.poster-laliga:before {
    background: radial-gradient(circle at 20% 20%, #ff5574, transparent 30%), radial-gradient(circle at 80% 30%, #6b6fff, transparent 34%), linear-gradient(135deg, #ececf6, #fff)
}

.poster-ucl:before {
    background: radial-gradient(circle at 50% 20%, #6f81c8, transparent 28%), linear-gradient(135deg, #ececec, #fff)
}

.poster-league {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    color: #7f8898;
    font-size: 26px;
    font-weight: 900
}

.poster-players {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    margin-top: auto
}

.poster-players img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 18px
}

.spotlight-card__content {
    display: grid;
    align-content: start
}

.spotlight-card__content h3 {
    margin: 4px 0 6px;
    color: #111;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 950;
    line-height: 1
}

.spotlight-card__content p {
    margin: 0 0 20px;
    color: #111;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 800
}

.spotlight-matchup {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(220px, 280px) minmax(120px, 1fr);
    align-items: start;
    gap: 18px
}

.spotlight-team {
    display: grid;
    justify-items: center;
    gap: 10px
}

.spotlight-team img {
    width: 110px;
    height: 110px;
    object-fit: contain
}

.spotlight-team strong {
    color: #111;
    font-size: clamp(16px, 1.6vw, 20px)
}

.spotlight-center {
    display: grid;
    justify-items: center;
    gap: 12px
}

.spotlight-scoreboxes {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.spotlight-scoreboxes span {
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font-size: 24px;
    font-weight: 900
}

.spotlight-meta,
.spotlight-entry input,
.spotlight-result small {
    color: #111;
    font-size: 15px;
    font-weight: 700;
    text-align: center
}

.spotlight-entry {
    width: 100%;
    display: grid;
    gap: 14px
}

.spotlight-entry input {
    width: 100%;
    height: 40px;
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    background: #fff
}

.spotlight-entry button {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #7b41d9, #6525ba);
    color: #fff;
    font-size: 17px;
    font-weight: 950
}

.spotlight-result {
    display: grid;
    justify-items: center;
    gap: 6px
}

.spotlight-result strong {
    color: #111;
    font-size: 58px;
    line-height: 1
}

.spotlight-card__footer {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #111;
    font-size: 17px;
    font-weight: 900
}

.spotlight-card__footer a {
    color: #111
}

.prediction-panel {
    width: min(1000px, 100%);
    min-height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 36% 1fr;
    gap: 36px;
    padding: 22px 26px 18px;
    border: 3px solid var(--line-green);
    border-radius: 22px;
    background: var(--panel-green);
    box-shadow: inset 0 1px #ffffffc2
}

.ranking-column {
    padding-top: 60px
}

.podium {
    height: 176px;
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: end;
    gap: 12px;
    margin-bottom: 15px
}

.podium-item {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    color: #fff;
    min-height: 82px;
    padding-top: 8px;
    background: linear-gradient(135deg, transparent 0 18px, var(--deep-green) 19px), linear-gradient(var(--green), rgba(53, 117, 232, .15));
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase
}

.podium-item.first {
    min-height: 112px
}

.podium-item.first .flag-circle {
    width: 82px;
    height: 92px;
    margin-top: -84px;
    margin-bottom: 8px;
    border: 0;
    border-radius: 0;
    background: url(images/event/top1-frame.webp) center / contain no-repeat;
    box-shadow: none;
    overflow: visible
}

.podium-item.first .flag-circle img {
    position: absolute;
    top: 26px;
    left: 50%;
    width: 43px;
    height: 43px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    transform: translate(-50%)
}

.flag-circle {
    position: relative;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-top: -46px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e2e2;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #00000014
}

.flag-circle img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover
}

.podium-item strong {
    margin-top: 18px
}

.leaderboard {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    border: 1px solid #c9c9c9;
    border-radius: 7px;
    overflow: hidden;
    background: #fff
}

.leaderboard li {
    height: 35px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid #d7d7d7;
    color: #30415b;
    font-size: 13px
}

.leaderboard span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.leaderboard li:last-child {
    border-bottom: 0
}

.leaderboard-logo-wrap {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #00000014;
    flex: 0 0 auto;
    overflow: hidden
}

.leaderboard-logo {
    width: 24px;
    height: 24px;
    object-fit: cover
}

.leaderboard em {
    font-style: normal
}

.vote-column {
    min-width: 0
}

.vote-column h3 {
    position: relative;
    width: 390px;
    max-width: 100%;
    margin: -1px auto 23px;
    padding: 12px 22px 10px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase
}

.vote-column h3:before,
.vote-column h3:after {
    position: absolute;
    top: 0;
    width: 55px;
    height: 100%;
    content: "";
    background: repeating-linear-gradient(90deg, #fff 0 5px, transparent 5px 10px)
}

.vote-column h3:before {
    left: -58px
}

.vote-column h3:after {
    right: -58px
}

.vote-form {
    display: grid;
    grid-template-columns: 1fr 116px;
    gap: 14px;
    width: min(360px, 100%);
    margin: 0 auto 8px
}

.vote-form input {
    min-width: 0;
    height: 34px;
    padding: 0 18px;
    border: 1px solid #a8a8a8;
    border-radius: 17px;
    background: #fff;
    color: #657068;
    font-size: 12px;
    outline: none
}

.vote-form button {
    height: 34px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(#8db5ff, #5488ed);
    color: #fff;
    font-size: 13px;
    font-weight: 900
}

.warning {
    margin: 0 0 21px;
    color: #e43a3a;
    font-size: 12px
}

.team-grid {
    max-height: 375px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding-right: 4px;
    overflow: auto
}

.team-card {
    min-height: 84px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 8px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    background: #ffffffe6;
    color: #111;
    font-size: 11px
}

.team-card:hover {
    border-color: var(--green);
    box-shadow: 0 0 0 2px #3575e829
}

.team-logo-wrap {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #00000014;
    overflow: hidden
}

.team-logo {
    width: 48px;
    height: 48px;
    object-fit: cover
}

.team-card strong {
    font-size: 16px;
    line-height: 1
}

.team-card b {
    font-size: 10px;
    line-height: 1.15;
    text-align: center
}

.team-card-loading {
    grid-column: 1 / -1;
    min-height: 68px;
    color: #30415b;
    font-weight: 800
}

.draggable-badge {
    position: fixed;
    z-index: 8;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto
}

.draggable-badge.dragging {
    cursor: grabbing
}

.draggable-badge img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none
}

.corner-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(80, 80, 80, .55);
    border-radius: 50%;
    background: #ffffffdb;
    color: #505050cc;
    box-shadow: none;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer
}

.corner-mascot {
    position: fixed;
    z-index: 3;
    display: grid;
    justify-items: center;
    pointer-events: none
}

.corner-left {
    left: 4px;
    bottom: 0;
    width: 300px;
    height: 380px
}

.corner-right {
    right: 10px;
    bottom: 0;
    width: 320px;
    height: 380px
}

.corner-character {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    object-fit: contain
}

.corner-left .corner-character {
    left: 0;
    bottom: 18px;
    width: 250px
}

.corner-right .corner-character {
    right: 0;
    width: 320px
}

@media(max-width:1100px) {
    .quick-menu {
        top: 50px;
        right: 8px;
        gap: 8px
    }

    .quick-card {
        width: 70px;
        height: 64px;
        padding: 4px 4px 5px;
        font-size: 10px
    }

    .quick-icon {
        width: 36px;
        height: 28px
    }

    .spotlight-panel {
        width: min(1000px, 100%);
        margin: 0 auto;
        display: grid;
        gap: 26px
    }

    .spotlight-card {
        overflow: hidden;
        border-radius: 28px;
        background: #fffffff2;
        box-shadow: 0 18px 45px #12225424
    }

    .spotlight-card__top {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        align-items: center;
        gap: 18px;
        padding: 0 22px;
        min-height: 58px;
        color: #fff;
        font-weight: 950;
        text-transform: uppercase
    }

    .spotlight-card.open .spotlight-card__top {
        background: linear-gradient(90deg, #5f33af, #7d3dd2)
    }

    .spotlight-card.closed .spotlight-card__top {
        background: linear-gradient(90deg, #b8b8bf, #d8d8de)
    }

    .spotlight-card__time {
        text-align: left;
        font-size: clamp(16px, 2vw, 21px)
    }

    .spotlight-card__title {
        text-align: center;
        font-size: clamp(24px, 3vw, 34px);
        letter-spacing: 1px
    }

    .spotlight-card__body {
        display: grid;
        grid-template-columns: minmax(240px, 38%) 1fr;
        gap: 26px;
        padding: 20px 22px 24px
    }

    .spotlight-card__poster {
        min-height: 310px;
        position: relative;
        display: grid;
        align-content: start;
        justify-items: center;
        padding: 28px 18px 16px;
        border-radius: 22px;
        background: linear-gradient(180deg, #fffffff0, #f6f7faf5)
    }

    .poster-laliga:before,
    .poster-ucl:before {
        position: absolute;
        inset: 0;
        content: "";
        border-radius: inherit;
        opacity: .22
    }

    .poster-laliga:before {
        background: radial-gradient(circle at 20% 20%, #ff5574, transparent 30%), radial-gradient(circle at 80% 30%, #6b6fff, transparent 34%), linear-gradient(135deg, #ececf6, #fff)
    }

    .poster-ucl:before {
        background: radial-gradient(circle at 50% 20%, #6f81c8, transparent 28%), linear-gradient(135deg, #ececec, #fff)
    }

    .poster-league {
        position: relative;
        z-index: 1;
        margin-bottom: 18px;
        color: #7f8898;
        font-size: 26px;
        font-weight: 900
    }

    .poster-players {
        position: relative;
        z-index: 1;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        gap: 12px;
        margin-top: auto
    }

    .poster-players img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: 18px
    }

    .spotlight-card__content {
        display: grid;
        align-content: start
    }

    .spotlight-card__content h3 {
        margin: 4px 0 6px;
        color: #111;
        font-size: clamp(28px, 3vw, 42px);
        font-weight: 950;
        line-height: 1
    }

    .spotlight-card__content p {
        margin: 0 0 20px;
        color: #111;
        font-size: clamp(18px, 2vw, 28px);
        font-weight: 800
    }

    .spotlight-matchup {
        display: grid;
        grid-template-columns: minmax(120px, 1fr) minmax(220px, 280px) minmax(120px, 1fr);
        align-items: start;
        gap: 18px
    }

    .spotlight-team {
        display: grid;
        justify-items: center;
        gap: 10px
    }

    .spotlight-team img {
        width: 110px;
        height: 110px;
        object-fit: contain
    }

    .spotlight-team strong {
        color: #111;
        font-size: clamp(16px, 1.6vw, 20px)
    }

    .spotlight-center {
        display: grid;
        justify-items: center;
        gap: 12px
    }

    .spotlight-scoreboxes {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .spotlight-scoreboxes span {
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid #9e9e9e;
        border-radius: 4px;
        background: #fff;
        color: #111;
        font-size: 24px;
        font-weight: 900
    }

    .spotlight-meta,
    .spotlight-entry input,
    .spotlight-result small {
        color: #111;
        font-size: 15px;
        font-weight: 700;
        text-align: center
    }

    .spotlight-entry {
        width: 100%;
        display: grid;
        gap: 14px
    }

    .spotlight-entry input {
        width: 100%;
        height: 40px;
        border: 1px solid #9e9e9e;
        border-radius: 4px;
        background: #fff
    }

    .spotlight-entry button {
        width: 100%;
        height: 48px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(180deg, #7b41d9, #6525ba);
        color: #fff;
        font-size: 17px;
        font-weight: 950
    }

    .spotlight-result {
        display: grid;
        justify-items: center;
        gap: 6px
    }

    .spotlight-result strong {
        color: #111;
        font-size: 58px;
        line-height: 1
    }

    .spotlight-card__footer {
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        color: #111;
        font-size: 17px;
        font-weight: 900
    }

    .spotlight-card__footer a {
        color: #111
    }

    .prediction-panel {
        grid-template-columns: 1fr
    }

    .ranking-column {
        padding-top: 18px
    }

    .tabs {
        overflow-x: auto;
        padding-bottom: 4px
    }
}

@media(max-width:760px) {

    body:before,
    body:after {
        display: none
    }

    .corner-mascot,
    .draggable-badge {
        display: none !important
    }

    .topbar {
        left: 10px;
        right: 10px
    }

    .page-shell {
        padding: 66px 14px 112px !important
    }

    .quick-menu {
        top: auto;
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, .68);
        border-radius: 18px;
        background: #0d2565c2;
        box-shadow: 0 12px 34px #0b1d4d47;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px)
    }

    .quick-card {
        width: 100%;
        height: 58px;
        min-width: 0;
        gap: 3px;
        padding: 5px 2px 6px;
        border-width: 1px;
        border-radius: 13px;
        box-shadow: inset 0 1px #ffffff40;
        font-size: 9px;
        line-height: 1.08
    }

    .quick-card span {
        min-width: 0;
        max-width: 100%;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow-wrap: anywhere
    }

    .quick-icon {
        width: 26px;
        height: 24px
    }

    h1 {
        margin-bottom: 16px
    }

    .countdown-card {
        padding: 3.2% 16% 8.5% 22% !important
    }

    .countdown-content {
        width: 100%
    }

    .countdown-content h2 {
        margin-bottom: 5px;
        font-size: clamp(11px, 3.5vw, 19px)
    }

    .timer {
        flex-wrap: nowrap;
        gap: 5px
    }

    .time-box {
        width: clamp(35px, 11vw, 56px);
        height: clamp(29px, 8vw, 41px)
    }

    .time-box strong {
        font-size: clamp(13px, 4vw, 19px)
    }

    .time-box span {
        font-size: clamp(8px, 2.4vw, 11px)
    }

    .spotlight-panel {
        width: 100%;
        margin: 0 auto;
        display: grid;
        gap: 16px
    }

    .spotlight-card {
        border-radius: 16px
    }

    .spotlight-card__top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px;
        padding: 10px 16px;
        min-height: auto;
        text-align: center
    }

    .spotlight-card__time {
        text-align: center !important;
        font-size: 13px !important
    }

    .spotlight-card__title {
        text-align: center !important;
        font-size: 16px !important
    }

    .spotlight-card__body {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px 12px !important
    }

    .spotlight-card__poster {
        min-height: auto;
        padding: 16px
    }

    .poster-league {
        font-size: 18px;
        margin-bottom: 8px
    }

    .poster-players {
        display: none !important
    }

    .spotlight-card__content {
        width: 100%
    }

    .spotlight-card__content h3 {
        font-size: 20px !important
    }

    .spotlight-card__content p {
        font-size: 14px !important;
        margin-bottom: 12px
    }

    .spotlight-matchup {
        grid-template-columns: 1fr auto 1fr !important;
        gap: 8px !important;
        align-items: center !important
    }

    .spotlight-team img {
        width: 64px !important;
        height: 64px !important
    }

    .spotlight-team strong {
        font-size: 12px !important
    }

    .spotlight-center {
        gap: 6px
    }

    .spotlight-scoreboxes {
        gap: 6px !important
    }

    .spotlight-scoreboxes span {
        height: 36px;
        font-size: 18px
    }

    .spotlight-scoreboxes input {
        height: 36px !important;
        font-size: 18px !important
    }

    .spotlight-entry button {
        height: 40px;
        font-size: 14px
    }

    .prediction-panel {
        grid-template-columns: 1fr !important;
        padding: 16px 12px !important;
        gap: 20px !important
    }

    .podium {
        gap: 6px !important;
        height: 140px
    }

    .podium-item {
        min-height: 60px
    }

    .podium-item.first {
        min-height: 85px
    }

    .podium-item.first .flag-circle {
        width: 60px;
        height: 68px;
        margin-top: -62px
    }

    .podium-item.first .flag-circle img {
        top: 18px;
        width: 32px;
        height: 32px
    }

    .flag-circle {
        width: 44px;
        height: 44px;
        margin-top: -36px
    }

    .flag-circle img {
        width: 38px;
        height: 38px
    }

    .vote-column h3 {
        width: 100%;
        font-size: 13px;
        padding: 8px 12px;
        margin-bottom: 14px
    }

    .vote-column h3:before,
    .vote-column h3:after {
        display: none !important
    }

    .vote-form {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 12px !important
    }

    .team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        max-height: 240px !important
    }

    .team-card {
        min-height: 70px !important;
        padding: 6px 2px !important
    }

    .team-logo-wrap,
    .team-logo {
        width: 34px !important;
        height: 34px !important
    }

    .team-card strong {
        font-size: 12px !important
    }

    .team-card b {
        font-size: 8px !important
    }

    .tabs-wrap-simple {
        gap: 8px !important;
        padding: 0 !important;
        width: 100% !important
    }

    .tabs-wrap-simple .tab {
        min-width: unset !important;
        flex: 1 !important;
        font-size: 13px !important;
        padding: 10px 4px !important;
        white-space: nowrap !important
    }
}

.history-page-wrapper {
    min-height: 100vh;
    padding: 40px 20px 100px;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden
}

.history-page-header {
    width: 100%;
    max-width: 630px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 12px 24px;
    background: #0f205cd9;
    border: 1.5px solid rgba(159, 188, 255, .3);
    border-radius: 16px;
    box-shadow: 0 8px 32px #00000040;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    gap: 1rem;
    z-index: 5
}

.back-home-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff26;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275)
}

.back-home-btn:hover {
    background: #fff;
    color: #1a348b;
    transform: translate(-4px);
    box-shadow: 0 4px 15px #ffffff4d
}

.history-page-title {
    font-size: 1.35rem;
    font-weight: 950;
    color: #fff;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--deep-green), 0 3px 6px rgba(0, 0, 0, .3);
    margin: 0
}

.history-page-content {
    width: 100%;
    max-width: 630px;
    z-index: 5;
    animation: fadeInUp .6s cubic-bezier(.16, 1, .3, 1)
}

@media(max-width:760px) {
    .history-page-wrapper {
        padding: 24px 12px 80px
    }

    .history-page-header {
        margin-bottom: 1.5rem
    }

    .history-page-title {
        font-size: 1.1rem
    }

    .back-home-btn {
        padding: 6px 12px;
        font-size: 12px
    }
}

:root {
    --ku-blue: #39a2d6;
    --ku-blue-deep: #0871af;
    --ku-orange: #ffa31a;
    --ku-orange-deep: #f08100;
    --green: #39a2d6;
    --deep-green: #0871af;
    --soft-green: #e8f7ff;
    --panel-green: rgba(232, 247, 255, .92);
    --line-green: #8ed9f6;
    --blue: #0871af;
    --red: #ffa31a;
    --text: #123047
}

body {
    background: linear-gradient(180deg, #ffffff1f, #e8f7ff7a), radial-gradient(circle at 15% 10%, rgba(255, 163, 26, .26), transparent 22%), radial-gradient(circle at 85% 4%, rgba(57, 162, 214, .22), transparent 24%), url(images/event/top-bg.webp) center top / 820px auto repeat-x, url(images/ui/prediction-bg.svg) center top / cover fixed no-repeat
}

.brand-header {
    position: relative;
    z-index: 6;
    width: min(960px, calc(100% - 28px));
    min-height: 52px;
    margin: 10px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 14px;
    border: 1px solid rgba(142, 217, 246, .68);
    border-radius: 14px;
    background: #ffffffe0;
    box-shadow: 0 10px 24px #0871af1f
}

.brand-header-logo {
    height: auto;
    display: block;
    object-fit: contain
}

.brand-header-logo.main {
    width: clamp(150px, 28vw, 260px);
    max-height: 42px
}

.brand-header-logo.ku {
    width: clamp(58px, 9vw, 92px);
    max-height: 38px
}

@media(max-width:760px) {
    .brand-header {
        min-height: 46px;
        margin-top: 8px;
        gap: 10px;
        padding: 7px 10px
    }

    .brand-header-logo.main {
        width: clamp(138px, 54vw, 210px)
    }

    .brand-header-logo.ku {
        width: clamp(50px, 18vw, 72px)
    }
}

h1 {
    color: var(--ku-blue);
    text-shadow: 3px 3px 0 #ffffff, 0 3px 10px rgba(8, 113, 175, .24)
}

.quick-card-red {
    background: linear-gradient(#62c4ef, var(--ku-blue-deep))
}

.quick-card-green {
    background: linear-gradient(#ffc260, var(--ku-orange-deep))
}

.quick-card-blue {
    background: linear-gradient(#5cc7f4, var(--ku-blue))
}

.prediction-count,
.tab.active,
.sbd-contact-btn {
    background: linear-gradient(#ffc260, var(--ku-orange));
    border-color: var(--ku-orange-deep);
    color: #fff
}

.sbd-btn,
.sbd-pill {
    border-color: #9fdaf1;
    color: var(--ku-blue-deep)
}

.tabs-wrap-simple .tab.active {
    background: linear-gradient(#62c4ef, var(--ku-blue));
    box-shadow: inset 0 2px 1px #ffffffb8, 0 2px 0 var(--ku-blue-deep)
}

.prediction-panel,
.history-card {
    background: var(--panel-green);
    border-color: var(--line-green)
}

.time-green {
    background: var(--ku-blue)
}

.time-red {
    background: var(--ku-orange)
}

.time-blue {
    background: var(--ku-blue-deep)
}

.time-dark {
    background: #273047
}

.event-note-board {
    position: relative;
    z-index: 1;
    width: min(960px, calc(100% - 28px));
    margin: -92px auto 92px;
    padding: 16px;
    border: 1px solid rgba(142, 217, 246, .78);
    border-radius: 14px;
    background: #ffffffe6;
    box-shadow: 0 14px 32px #0871af1f
}

.event-note-board h2 {
    margin: 0 0 10px;
    color: #0871af;
    font-size: 18px;
    line-height: 1.2
}

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

.event-note-grid p {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4fbff;
    color: #123047;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45
}

.event-note-grid strong {
    color: #f08100
}

.landing-info-panel {
    position: relative;
    z-index: 2;
    width: min(960px, calc(100% - 28px));
    margin: -104px auto 120px;
    padding: 16px;
    border: 1px solid rgba(142, 217, 246, .82);
    border-radius: 14px;
    background: #fffffff5;
    box-shadow: 0 18px 42px #0871af29
}

.landing-info-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.landing-info-head h2 {
    margin: 0;
    color: #0871af;
    font-size: 20px
}

.landing-info-head button {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #a7d8ef;
    border-radius: 10px;
    background: #fff;
    color: #075f93;
    font-weight: 900;
    cursor: pointer
}

.landing-contact,
.landing-rules {
    display: grid;
    gap: 12px
}

.landing-contact p {
    margin: 0;
    color: #123047;
    font-weight: 800
}

.landing-rules {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.landing-rules article {
    padding: 12px;
    border-radius: 12px;
    background: #f8fcff;
    border: 1px solid #d8e7f3
}

.landing-rules h3 {
    margin: 0 0 8px;
    color: #f08100;
    font-size: 15px
}

.landing-rules ul {
    margin: 0;
    padding-left: 18px
}

.landing-rules li {
    margin: 5px 0;
    color: #123047;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45
}

.landing-leaderboard {
    overflow-x: auto
}

.hero {
    padding-top: 0
}

.page-shell {
    padding-top: 22px
}

.hero-title,
h1.hero-title {
    width: min(720px, 100%);
    margin: 0 auto 12px;
    display: grid;
    gap: 4px;
    color: #0871af;
    font-style: normal;
    font-size: clamp(24px, 3.7vw, 38px);
    line-height: 1.08;
    letter-spacing: 0;
    text-shadow: 0 2px 0 #fff, 0 8px 18px rgba(8, 113, 175, .2)
}

.hero-title span,
.hero-title strong {
    display: block
}

.hero-title strong {
    color: #f49a0b;
    font-size: .72em;
    font-weight: 950;
    text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(244, 154, 11, .2)
}

.countdown-card {
    margin-bottom: 14px
}

.prediction-count {
    min-height: 44px;
    margin-bottom: 10px;
    padding: 10px 18px;
    border-radius: 14px;
    font-size: clamp(13px, 2.5vw, 16px);
    letter-spacing: 0
}

.tabs-wrap-simple {
    gap: 8px
}

.tabs-wrap-simple .tab {
    min-height: 42px;
    border-radius: 12px;
    letter-spacing: 0
}

.quick-card {
    border-radius: 14px
}

.quick-icon {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 2px 2px rgba(6, 54, 87, .18))
}

.quick-card span {
    letter-spacing: 0
}

.quick-card-red,
.quick-card-blue,
.quick-card-green {
    border-color: #ffffffc2
}

@media(max-width:760px) {
    .brand-header {
        margin-top: 6px;
        margin-bottom: 0
    }

    .page-shell {
        padding-top: 12px !important
    }

    .hero-title,
    h1.hero-title {
        width: min(340px, 100%);
        margin-bottom: 8px;
        font-size: clamp(22px, 6.8vw, 28px)
    }

    .hero-title strong {
        font-size: .76em
    }

    .prediction-count {
        width: min(330px, 100%);
        min-height: 42px;
        margin-bottom: 8px;
        padding-inline: 12px
    }

    .tabs-wrap-simple .tab {
        min-height: 40px;
        border-radius: 11px
    }

    .quick-menu {
        border-radius: 15px;
        gap: 7px;
        padding: 7px
    }

    .quick-card {
        height: 60px;
        border-radius: 11px;
        padding: 6px 3px;
        font-size: 9px
    }

    .quick-icon {
        width: 27px;
        height: 27px
    }

    .event-note-board {
        width: calc(100% - 28px);
        margin: -78px auto 104px;
        padding: 12px;
        border-radius: 12px
    }

    .event-note-board h2 {
        font-size: 16px
    }

    .event-note-grid {
        grid-template-columns: 1fr;
        gap: 7px
    }

    .event-note-grid p {
        padding: 9px 10px;
        font-size: 12px
    }

    .landing-info-panel {
        width: calc(100% - 28px);
        margin: -84px auto 104px;
        padding: 12px;
        border-radius: 12px
    }

    .landing-info-head h2 {
        font-size: 17px
    }

    .landing-rules {
        grid-template-columns: 1fr
    }
}

body {
    background: radial-gradient(circle at 12% 8%, rgba(34, 197, 94, .24), transparent 24%), radial-gradient(circle at 82% 0%, rgba(56, 189, 248, .18), transparent 26%), linear-gradient(180deg, #07111f, #0f172a 54%, #111827) !important
}

.brand-header {
    width: min(1180px, calc(100% - 28px));
    min-height: 58px;
    margin-top: 14px;
    justify-content: flex-start;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 12px;
    background: #0f172ac7;
    box-shadow: 0 18px 50px #0000003d;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px)
}

.brand-header:after {
    content: "World Cup Event";
    margin-left: auto;
    color: #93c5fd;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase
}

.page-shell {
    padding-top: 18px
}

.hero {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: 18px;
    align-items: start
}

.hero-title,
h1.hero-title {
    grid-column: 1 / -1;
    width: min(980px, 100%);
    margin: 0;
    text-align: left;
    color: #f8fafc;
    font-size: clamp(32px, 5vw, 72px);
    line-height: .95;
    text-shadow: none
}

.hero-title strong {
    margin-top: 6px;
    color: #22c55e;
    font-size: .48em;
    text-shadow: 0 14px 32px rgba(34, 197, 94, .2)
}

.countdown-card {
    justify-self: start;
    margin: 0;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .28))
}

.sbd-hint,
.sbd-toolbar,
.tabs-wrap-simple,
.spotlight-panel,
.prediction-panel {
    grid-column: 1 / -1
}

.sbd-hint {
    width: min(620px, 100%);
    margin: 2px 0 0;
    color: #cbd5e1;
    text-align: left
}

.sbd-toolbar {
    justify-content: flex-start;
    margin-bottom: 2px
}

.tabs-wrap-simple {
    width: 100%;
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;
    background: #0f172ab3;
    box-shadow: inset 0 1px #ffffff0f
}

.tabs-wrap-simple .tab {
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #cbd5e1;
    box-shadow: none
}

.tabs-wrap-simple .tab.active {
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    color: #052e1a;
    box-shadow: 0 12px 28px #22c55e3d
}

.spotlight-panel,
.prediction-panel,
.landing-info-panel,
.event-note-board {
    border: 1px solid rgba(148, 163, 184, .2) !important;
    border-radius: 14px !important;
    background: #0f172ad1 !important;
    color: #e5e7eb;
    box-shadow: 0 24px 70px #00000042 !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px)
}

.landing-info-panel,
.event-note-board {
    width: min(1180px, calc(100% - 28px));
    margin: -92px auto 116px
}

.landing-info-head h2,
.event-note-board h2 {
    color: #f8fafc
}

.landing-info-head button {
    background: #0f172ae6;
    color: #93c5fd;
    border-color: #93c5fd5c
}

.landing-contact p,
.landing-rules li,
.event-note-grid p {
    color: #cbd5e1
}

.landing-rules article,
.event-note-grid p {
    border: 1px solid rgba(148, 163, 184, .16);
    background: #1e293bb8
}

.landing-rules h3,
.event-note-grid strong {
    color: #fbbf24
}

.quick-menu {
    top: 86px;
    right: 24px;
    gap: 8px
}

.quick-card {
    width: 92px;
    height: 76px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 12px;
    background: #0f172ac7 !important;
    color: #e5e7eb;
    box-shadow: 0 14px 38px #00000038
}

.quick-icon {
    width: 32px;
    height: 32px
}

@media(max-width:980px) {
    .hero {
        grid-template-columns: 1fr
    }

    .countdown-card {
        justify-self: center
    }
}

@media(max-width:760px) {
    .brand-header {
        width: calc(100% - 20px);
        min-height: 50px;
        border-radius: 11px
    }

    .brand-header:after {
        display: none
    }

    .hero-title,
    h1.hero-title {
        width: 100%;
        font-size: clamp(30px, 10vw, 42px);
        text-align: center
    }

    .hero-title strong {
        font-size: .54em
    }

    .sbd-hint {
        text-align: center;
        margin-inline: auto
    }

    .sbd-toolbar {
        justify-content: center
    }

    .quick-menu {
        background: #020617d1;
        border-color: #94a3b833
    }

    .quick-card {
        height: 58px;
        box-shadow: none
    }

    .landing-info-panel,
    .event-note-board {
        margin: -74px auto 104px
    }
}

body:not(:has(.admin-shell)) .corner-mascot {
    z-index: 0 !important;
    opacity: .82;
    pointer-events: none !important
}

body:not(:has(.admin-shell)) .page-shell,
body:not(:has(.admin-shell)) .brand-header,
body:not(:has(.admin-shell)) .quick-menu,
body:not(:has(.admin-shell)) .landing-info-panel,
body:not(:has(.admin-shell)) .event-note-board,
body:not(:has(.admin-shell)) .modal-overlay {
    position: relative;
    z-index: 5 !important
}

body:not(:has(.admin-shell)) .quick-menu,
body:not(:has(.admin-shell)) .modal-overlay {
    position: fixed
}

body:not(:has(.admin-shell)) .draggable-badge {
    z-index: 9999 !important;
    isolation: isolate
}

@media(max-width:760px) {
    body:not(:has(.admin-shell)) .tabs-wrap-simple {
        width: min(100%, calc(100vw - 28px)) !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 7px !important;
        overflow: hidden !important;
        box-sizing: border-box !important
    }

    body:not(:has(.admin-shell)) .tabs-wrap-simple .tab {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        padding: 8px 5px !important;
        display: grid !important;
        place-items: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        font-size: clamp(11px, 3.1vw, 13px) !important;
        line-height: 1.12 !important
    }
}

@media(max-width:1180px) {
    body:not(:has(.admin-shell)) .corner-mascot {
        opacity: .38
    }
}

body:not(:has(.admin-shell)) .event-info-board {
    position: relative;
    z-index: 5;
    width: min(1180px, calc(100% - 28px));
    margin: -84px auto 16px;
    padding: 18px;
    border: 1px solid rgba(0, 184, 148, .22);
    border-radius: 16px;
    background: #ffffffeb;
    color: var(--landing-ink, #07384a);
    box-shadow: 0 20px 48px #007f7324
}

body:not(:has(.admin-shell)) .event-info-head {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
    text-align: center
}

body:not(:has(.admin-shell)) .event-info-head span {
    width: fit-content;
    margin: 0 auto;
    padding: 5px 10px;
    border: 1px solid rgba(244, 165, 28, .34);
    border-radius: 999px;
    background: #ffd23f38;
    color: #765000;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase
}

body:not(:has(.admin-shell)) .event-info-head h2 {
    margin: 0;
    color: var(--landing-emerald-deep, #007f73);
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.08
}

body:not(:has(.admin-shell)) .event-info-head p {
    width: min(680px, 100%);
    margin: 0 auto;
    color: var(--landing-muted, #54707a);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45
}

body:not(:has(.admin-shell)) .event-info-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px
}

body:not(:has(.admin-shell)) .event-info-card {
    min-height: 118px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 13px;
    border: 1px solid rgba(0, 184, 148, .2);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #effff9);
    color: var(--landing-ink, #07384a);
    text-align: left;
    box-shadow: 0 10px 22px #007f7314;
    cursor: pointer
}

body:not(:has(.admin-shell)) .event-info-card:hover {
    transform: translateY(-2px);
    border-color: #f4a51c85;
    background: linear-gradient(180deg, #fff8d6, #edfff8);
    box-shadow: 0 16px 30px #00b89424
}

body:not(:has(.admin-shell)) .event-info-card.is-active {
    border-color: #f4a51ca3;
    background: linear-gradient(180deg, #fff4bd, #eafff7);
    box-shadow: 0 16px 30px #f4a51c29
}

body:not(:has(.admin-shell)) .event-info-card strong {
    color: var(--landing-emerald-deep, #007f73);
    font-size: 16px;
    line-height: 1.1
}

body:not(:has(.admin-shell)) .event-info-card span {
    color: var(--landing-muted, #54707a);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35
}

body:not(:has(.admin-shell)) .landing-prizes article {
    background: linear-gradient(180deg, #fff8d6, #effff9) !important
}

@media(max-width:980px) {
    body:not(:has(.admin-shell)) .event-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:760px) {
    body:not(:has(.admin-shell)) .event-info-board {
        width: calc(100% - 28px);
        margin: -72px auto 12px;
        padding: 13px;
        border-radius: 14px
    }

    body:not(:has(.admin-shell)) .event-info-grid {
        grid-template-columns: 1fr;
        gap: 8px
    }

    body:not(:has(.admin-shell)) .event-info-card {
        min-height: 82px;
        padding: 12px
    }
}

body:not(:has(.admin-shell)) .landing-info-panel {
    margin: 0 auto 16px !important;
    scroll-margin-top: 18px
}

body:not(:has(.admin-shell)) .event-detail-section:last-of-type {
    margin-bottom: 112px !important
}

body:not(:has(.admin-shell)) .countdown-card {
    width: min(560px, 100%) !important;
    aspect-ratio: auto !important;
    margin: 2px auto 4px !important;
    padding: 14px !important;
    display: block !important;
    border: 1px solid rgba(0, 184, 148, .24) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ffd23f2e, #ffffffeb 42%, #e8fff6f2) !important;
    box-shadow: 0 18px 42px #007f7324 !important;
    filter: none !important;
    overflow: visible !important
}

body:not(:has(.admin-shell)) .countdown-card:before,
body:not(:has(.admin-shell)) .countdown-card:after {
    content: "";
    position: absolute;
    z-index: 9;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

body:not(:has(.admin-shell)) .countdown-card:before {
    left: -42px;
    bottom: -34px;
    width: 122px;
    height: 133px;
    background-image: url(images/event/mascot-left.webp);
    opacity: .92;
    filter: drop-shadow(0 12px 20px rgba(0, 127, 115, .22))
}

body:not(:has(.admin-shell)) .countdown-card:after {
    right: -28px;
    top: -28px;
    width: 80px;
    height: 80px;
    background-image: url(images/event/ball.webp);
    opacity: .9;
    transform: rotate(12deg);
    filter: drop-shadow(0 10px 18px rgba(244, 165, 28, .2))
}

body:not(:has(.admin-shell)) .countdown-content {
    position: relative !important;
    z-index: 7 !important;
    width: 100% !important;
    display: grid !important;
    gap: 10px !important
}

body:not(:has(.admin-shell)) .countdown-content h2 {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(244, 165, 28, .32) !important;
    border-radius: 999px !important;
    background: #ffd23f38 !important;
    color: #007f73 !important;
    font-size: clamp(14px, 2.2vw, 18px) !important;
    font-style: normal !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: normal !important
}

body:not(:has(.admin-shell)) .timer {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important
}

body:not(:has(.admin-shell)) .time-box {
    width: 100% !important;
    min-width: 0 !important;
    height: 72px !important;
    display: grid !important;
    place-content: center !important;
    border: 1px solid rgba(0, 184, 148, .18) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fff, #eafff7) !important;
    color: #07384a !important;
    box-shadow: inset 0 1px #ffffffe6, 0 10px 22px #007f731a !important;
    line-height: 1 !important
}

body:not(:has(.admin-shell)) .time-box strong {
    color: #007f73 !important;
    font-size: clamp(22px, 4.2vw, 34px) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important
}

body:not(:has(.admin-shell)) .time-box span {
    margin-top: 5px !important;
    color: #765000 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important
}

body:not(:has(.admin-shell)) .time-red,
body:not(:has(.admin-shell)) .time-dark {
    background: linear-gradient(180deg, #fff8d6, #fff) !important
}

body:not(:has(.admin-shell)) .time-blue,
body:not(:has(.admin-shell)) .time-green {
    background: linear-gradient(180deg, #fff, #eafff7) !important
}

@media(max-width:760px) {
    body:not(:has(.admin-shell)) .landing-info-panel {
        margin: 0 auto 12px !important;
        scroll-margin-top: 12px
    }

    body:not(:has(.admin-shell)) .event-detail-section:last-of-type {
        margin-bottom: 104px !important
    }

    body:not(:has(.admin-shell)) .countdown-card {
        width: min(340px, 100%) !important;
        padding: 11px !important;
        border-radius: 14px !important
    }

    body:not(:has(.admin-shell)) .countdown-card:before {
        left: -30px;
        bottom: -26px;
        width: 77px;
        height: 88px;
        opacity: .78
    }

    body:not(:has(.admin-shell)) .countdown-card:after {
        right: -20px;
        top: -18px;
        width: 54px;
        height: 54px;
        opacity: .78
    }

    body:not(:has(.admin-shell)) .countdown-content {
        gap: 8px !important
    }

    body:not(:has(.admin-shell)) .countdown-content h2 {
        padding: 6px 10px !important;
        font-size: clamp(12px, 3.5vw, 15px) !important
    }

    body:not(:has(.admin-shell)) .timer {
        gap: 6px !important
    }

    body:not(:has(.admin-shell)) .time-box {
        height: 58px !important;
        border-radius: 12px !important
    }

    body:not(:has(.admin-shell)) .time-box strong {
        font-size: clamp(18px, 6vw, 24px) !important
    }

    body:not(:has(.admin-shell)) .time-box span {
        margin-top: 4px !important;
        font-size: 10px !important
    }
}

body:not(:has(.admin-shell)) .prediction-panel.single-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important
}

body:not(:has(.admin-shell)) .champion-prediction {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important
}

body:not(:has(.admin-shell)) .champion-form {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 16px !important;
    overflow: visible !important
}

body:not(:has(.admin-shell)) .champion-form h3 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 720px !important;
    justify-self: center !important;
    margin: 0 auto 2px !important;
    padding: 11px 16px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important
}

body:not(:has(.admin-shell)) .champion-form h3:before,
body:not(:has(.admin-shell)) .champion-form h3:after {
    display: none !important;
    content: none !important
}

body:not(:has(.admin-shell)) .champion-form .form-group {
    min-width: 0 !important;
    margin: 0 !important
}

body:not(:has(.admin-shell)) .champion-form .form-group input {
    min-height: 44px !important;
    padding: 10px 12px !important
}

body:not(:has(.admin-shell)) .champion-form .team-grid {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important
}

body:not(:has(.admin-shell)) .champion-form .team-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 96px !important;
    height: 96px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    position: relative !important;
    text-align: center !important
}

body:not(:has(.admin-shell)) .champion-form .team-card-content {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: 36px minmax(28px, max-content) !important;
    align-content: center !important;
    justify-items: center !important;
    place-items: center !important;
    gap: 3px !important;
    padding: 7px 6px !important;
    box-sizing: border-box !important;
    text-align: center !important
}

body:not(:has(.admin-shell)) .champion-form .team-logo-wrap {
    width: 54px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fff, #f4fffb) !important;
    box-shadow: inset 0 0 0 1px #ffd23f33, 0 8px 18px #007f7321 !important;
    overflow: hidden !important
}

body:not(:has(.admin-shell)) .champion-form .team-logo {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 8px !important
}

body:not(:has(.admin-shell)) .champion-form .team-card strong,
body:not(:has(.admin-shell)) .champion-form .team-card b {
    width: 100% !important;
    display: block !important;
    text-align: center !important
}

body:not(:has(.admin-shell)) .champion-form .team-card b {
    justify-self: center !important;
    margin: 0 auto !important;
    padding: 0 3px !important;
    max-height: 30px !important;
    align-self: center !important;
    color: var(--landing-ink, #07384a) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important
}

body:not(:has(.admin-shell)) .champion-form .submit-action {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px !important;
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important
}

body:not(:has(.admin-shell)) .champion-form .btn-submit {
    width: min(360px, 100%) !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 11px 18px !important;
    font-size: 15px !important
}

body:not(:has(.admin-shell)) .champion-form .msg-wrapper {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important
}

@media(max-width:760px) {
    body:not(:has(.admin-shell)) .champion-form {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 10px !important
    }

    body:not(:has(.admin-shell)) .champion-form h3 {
        max-width: 100% !important;
        padding: 10px 12px !important;
        font-size: clamp(16px, 4.8vw, 20px) !important
    }

    body:not(:has(.admin-shell)) .champion-form .team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important
    }

    body:not(:has(.admin-shell)) .champion-form .team-card {
        min-height: 90px !important;
        height: 90px !important
    }

    body:not(:has(.admin-shell)) .champion-form .team-card-content {
        grid-template-rows: 34px minmax(28px, max-content) !important;
        gap: 3px !important;
        padding: 7px 4px !important
    }

    body:not(:has(.admin-shell)) .champion-form .team-logo-wrap {
        width: 50px !important;
        height: 32px !important
    }

    body:not(:has(.admin-shell)) .champion-form .team-logo {
        width: 100% !important;
        height: 100% !important
    }
}

body:not(:has(.admin-shell)) .sbd-toolbar {
    align-items: center !important
}

body:not(:has(.admin-shell)) .sbd-toolbar .sbd-btn,
body:not(:has(.admin-shell)) .sbd-toolbar .sbd-contact-btn,
body:not(:has(.admin-shell)) .sbd-toolbar .sbd-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
    margin: 0 !important;
    line-height: 1 !important
}