:root {
    --btm-navy: #071827;
    --btm-navy-2: #0b2538;
    --btm-orange: #ff7a1a;
    --btm-orange-2: #f49a2e;
    --btm-cyan: #22c7e8;
    --btm-cyan-2: #15a7c9;
    --btm-white: #ffffff;
    --btm-soft: #f4f8fb;
    --btm-border: rgba(7, 24, 39, .12);
    --btm-shadow: 0 16px 38px rgba(7, 24, 39, .12);
}

body {
    background: linear-gradient(180deg, #ffffff 0%, var(--btm-soft) 42%, #ffffff 100%);
    color: #122536;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.btm-navbar {
    background: linear-gradient(90deg, var(--btm-navy), var(--btm-navy-2));
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-toggler-icon { filter: invert(1); }

.brand-logo {
    width: 70px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border-radius: 14px;
    padding: 4px;
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.brand-title {
    color: var(--btm-white);
    font-weight: 900;
    letter-spacing: .2px;
}

.btm-navbar .nav-link {
    color: rgba(255,255,255,.86);
    font-weight: 700;
    border-radius: 999px;
    padding-inline: 13px !important;
}

.btm-navbar .nav-link:hover,
.btm-navbar .nav-link.active {
    color: #fff;
    background: rgba(34, 199, 232, .16);
}

.btn-btm,
.btn-primary {
    --bs-btn-bg: var(--btm-orange);
    --bs-btn-border-color: var(--btm-orange);
    --bs-btn-hover-bg: #e5650f;
    --bs-btn-hover-border-color: #e5650f;
    --bs-btn-active-bg: #d65a0b;
    --bs-btn-active-border-color: #d65a0b;
    color: #fff !important;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(255,122,26,.24);
}

.btn-outline-btm {
    border-color: var(--btm-cyan);
    color: var(--btm-cyan-2);
    border-radius: 999px;
    font-weight: 800;
}
.btn-outline-btm:hover {
    background: var(--btm-cyan);
    color: #062033;
}

.hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(34,199,232,.25), transparent 26%),
        linear-gradient(135deg, var(--btm-navy), #07101d 58%, #0a3047);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--btm-shadow);
    color: #fff;
    position: relative;
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -80px auto;
    width: 220px;
    height: 220px;
    background: var(--btm-orange);
    opacity: .18;
    border-radius: 50%;
}
.hero-logo {
    width: min(100%, 320px);
    background: #fff;
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.text-gradient {
    background: linear-gradient(90deg, var(--btm-orange), var(--btm-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.card-btm {
    border: 1px solid var(--btm-border);
    border-radius: 22px;
    box-shadow: var(--btm-shadow);
    overflow: hidden;
    background: #fff;
}

.stat-card {
    border: 1px solid var(--btm-border);
    border-radius: 22px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7,24,39,.08);
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 950;
    color: var(--btm-navy);
}
.stat-card .stat-label {
    color: #607080;
    font-weight: 700;
}

.badge-btm-orange { background: var(--btm-orange); color: #fff; }
.badge-btm-cyan { background: var(--btm-cyan); color: #062033; }
.badge-btm-navy { background: var(--btm-navy); color: #fff; }

.table thead th {
    background: #ecf7fb;
    color: var(--btm-navy);
    font-weight: 850;
    border-bottom: 0;
}
.table > :not(caption) > * > * {
    vertical-align: middle;
}

.form-control, .form-select {
    border-radius: 14px;
    border-color: var(--btm-border);
    padding: .72rem .9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--btm-cyan);
    box-shadow: 0 0 0 .25rem rgba(34,199,232,.15);
}

.admin-sidebar {
    background: var(--btm-navy);
    border-radius: 24px;
    padding: 18px;
    color: #fff;
    position: sticky;
    top: 96px;
}
.admin-sidebar a {
    display: block;
    color: rgba(255,255,255,.86);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 14px;
    font-weight: 750;
    margin-bottom: 5px;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: rgba(34,199,232,.18);
    color: #fff;
}


.team-logo-sm,
.team-logo-placeholder-sm {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--btm-border);
    border-radius: 12px;
    background: #fff;
}
.team-logo-sm {
    object-fit: contain;
    padding: 3px;
}
.team-logo-placeholder-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: #8b98a8;
    font-size: .7rem;
    font-weight: 800;
}
.min-w-0 { min-width: 0; }

.score-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 38px;
    border-radius: 12px;
    background: var(--btm-navy);
    color: #fff;
    font-weight: 900;
}
.live-dot {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(239,68,68,.8);
    animation: pulse 1.2s infinite;
}
@keyframes pulse {
    to { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
}

.footer-logo {
    width: 52px;
    height: 36px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    padding: 3px;
}
.btm-footer {
    background: var(--btm-navy);
    color: #fff;
}

@media (max-width: 768px) {
    .brand-title { font-size: .95rem; }
    .brand-logo { width: 56px; height: 40px; }
    .hero { border-radius: 18px; }
    .hero-logo { max-width: 240px; }
    .admin-sidebar { position: static; margin-bottom: 1rem; }
}


.tournament-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.tournament-public-card {
    display: block;
    position: relative;
    min-height: 190px;
    border: 1px solid var(--btm-border);
    border-radius: 20px;
    background: #fff;
    color: #122536;
    padding: 26px 20px 20px;
    box-shadow: 0 10px 24px rgba(7,24,39,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tournament-public-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34,199,232,.45);
    box-shadow: 0 16px 34px rgba(7,24,39,.12);
    color: #122536;
}
.tournament-public-status {
    position: absolute;
    top: 24px;
    left: 20px;
    border-radius: 8px;
    padding: .34rem .55rem;
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .02em;
}
.tournament-public-title {
    color: #122536;
    font-weight: 500;
    line-height: 1.18;
    padding-top: 40px;
    max-width: 92%;
}
.tournament-public-description {
    color: #4f5c68;
    line-height: 1.35;
}
.tournament-public-meta {
    color: #122536;
    font-size: .98rem;
    line-height: 1.55;
}

.public-match-list {
    display: grid;
    gap: 20px;
}
.public-match-day {
    display: grid;
    gap: 10px;
}
.public-match-day-title {
    color: #13283a;
    font-weight: 900;
    font-size: .95rem;
}
.public-match-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.public-match-card {
    border: 1px solid var(--btm-border);
    border-radius: 16px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 6px 16px rgba(7,24,39,.06);
}
.public-match-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.public-match-tournament {
    color: #3c4856;
    font-weight: 500;
    font-size: .92rem;
}
.public-match-phase {
    color: #8b98a8;
    font-size: .78rem;
    font-weight: 700;
    margin-top: 1px;
}
.public-match-status {
    border-radius: 8px;
    padding: .34rem .52rem;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .02em;
}
.public-match-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.public-match-teams {
    display: grid;
    gap: 8px;
}
.public-match-team-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.public-match-logo,
.public-match-logo-placeholder {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid var(--btm-border);
    border-radius: 10px;
    background: #fff;
}
.public-match-logo {
    object-fit: contain;
    padding: 3px;
}
.public-match-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: #8b98a8;
    font-size: .6rem;
    font-weight: 900;
}
.public-match-team-name {
    color: #13283a;
    font-size: .94rem;
    font-weight: 900;
}
.public-match-scores {
    display: grid;
    gap: 8px;
}
.public-score-box {
    width: 42px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--btm-navy);
    color: #fff;
    font-weight: 950;
    font-size: .98rem;
}
.public-match-meta {
    color: #4f5c68;
    font-weight: 500;
    font-size: .86rem;
    margin-top: 9px;
}

@media (max-width: 576px) {
    
.tournament-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.tournament-public-card {
    display: block;
    position: relative;
    min-height: 190px;
    border: 1px solid var(--btm-border);
    border-radius: 20px;
    background: #fff;
    color: #122536;
    padding: 26px 20px 20px;
    box-shadow: 0 10px 24px rgba(7,24,39,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tournament-public-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34,199,232,.45);
    box-shadow: 0 16px 34px rgba(7,24,39,.12);
    color: #122536;
}
.tournament-public-status {
    position: absolute;
    top: 24px;
    left: 20px;
    border-radius: 8px;
    padding: .34rem .55rem;
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .02em;
}
.tournament-public-title {
    color: #122536;
    font-weight: 500;
    line-height: 1.18;
    padding-top: 40px;
    max-width: 92%;
}
.tournament-public-description {
    color: #4f5c68;
    line-height: 1.35;
}
.tournament-public-meta {
    color: #122536;
    font-size: .98rem;
    line-height: 1.55;
}

.public-match-list { gap: 16px; }
    .public-match-day-grid { grid-template-columns: 1fr; gap: 10px; }
    .public-match-card { padding: 12px; border-radius: 14px; }
    .public-match-logo,
    .public-match-logo-placeholder { width: 34px; height: 34px; flex-basis: 34px; }
    .public-score-box { width: 38px; min-height: 36px; }
    .public-match-team-name { font-size: .9rem; }
    .public-match-body { gap: 10px; }
}