/* =========================================================
   GLOBAL BASE
========================================================= */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
    border-radius: 12px;
}

.badge {
    font-size: 0.75rem;
}

/* =========================================================
   MOBILE UX
========================================================= */

@media (max-width: 768px) {
    .sticky-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #ddd;
        padding: 10px;
        z-index: 1000;
    }

    .mobile-card {
        margin-bottom: 12px;
    }
}

/* =========================================================
   PICK TRENDS
========================================================= */

.pick-trend {
    font-size: 0.85rem;
    color: #555;
}

    .pick-trend strong {
        color: #000;
    }

.differential-pick {
    color: #d9534f;
    font-weight: 600;
}

/* =========================================================
   CONFIDENCE PICKS
========================================================= */

.confidence-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: 0.2s;
}

    .confidence-card:hover {
        background: #f5f5f5;
    }

.confidence-selected {
    border-color: #007bff;
    background: #e7f1ff;
}

.confidence-label {
    font-weight: 600;
}

/* =========================================================
   LEADERBOARD
========================================================= */

.leaderboard-row {
    transition: background 0.2s;
}

    .leaderboard-row.current-user {
        background: #fff3cd;
    }

    .leaderboard-row.rank-1 {
        background: #d4edda;
        font-weight: 600;
    }

.movement-up {
    color: green;
}

.movement-down {
    color: red;
}

.movement-same {
    color: gray;
}

/* =========================================================
   SMART MESSAGES
========================================================= */

.smart-message {
    background: #eef5ff;
    border-left: 4px solid #007bff;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.9rem;
}

/* =========================================================
   PICK TIMELINE
========================================================= */

.timeline {
    border-left: 3px solid #ddd;
    margin-left: 10px;
    padding-left: 10px;
}

.timeline-entry {
    margin-bottom: 10px;
}

    .timeline-entry strong {
        display: block;
    }

.timeline-diff {
    color: #555;
    font-size: 0.85rem;
}

/* =========================================================
   TIEBREAKERS
========================================================= */

.tiebreak-badge {
    font-size: 0.7rem;
    padding: 3px 6px;
    margin-left: 5px;
}

.tiebreak-highlight {
    background: #fff3cd;
}

/* =========================================================
   HIGH IMPACT MATCHES
========================================================= */

.high-impact {
    border-left: 5px solid #dc3545;
    padding-left: 10px;
}

.high-impact-title {
    font-weight: 600;
    color: #dc3545;
}

/* =========================================================
   NOTIFICATIONS
========================================================= */

.alert-badge {
    background: red;
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 0.7rem;
}

/* =========================================================
   GAMIFICATION
========================================================= */

.badge-card {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.badge-highlight {
    background: #ffeeba;
}

/* =========================================================
   GLOBAL LEADERBOARD / PUBLIC
========================================================= */

.global-leaderboard-row {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

/* =========================================================
   BUTTON POLISH
========================================================= */

.btn {
    border-radius: 8px;
}

/* =========================================================
   UTILITIES
========================================================= */

.text-small {
    font-size: 0.85rem;
}

.text-muted {
    color: #6c757d;
}

/* =========================================================
   ADMIN SAFETY + NOTIFICATIONS
========================================================= */

.alert-dropdown {
    min-width: 360px;
    max-width: 420px;
}

.notification-card {
    border-left: 4px solid #6c757d;
}

.notification-danger {
    border-left-color: #dc3545;
}

.notification-warning {
    border-left-color: #ffc107;
}

.notification-dark {
    border-left-color: #343a40;
}

.notification-info {
    border-left-color: #0dcaf0;
}

.admin-safety-action-panel summary {
    list-style: none;
    cursor: pointer;
}

    .admin-safety-action-panel summary::-webkit-details-marker {
        display: none;
    }

.admin-safety-inline-form {
    min-width: 280px;
    max-width: 420px;
}

.admin-audit-log {
    max-height: 720px;
    overflow-y: auto;
}

.safety-lock-badge {
    letter-spacing: 0.02em;
}

/* =========================================================
   GAMIFICATION / REAL DATA / AI ASSISTANT
========================================================= */

.ai-suggestion-panel {
    border-left: 4px solid #0d6efd;
}

.sync-preview-data {
    max-width: 560px;
    white-space: normal;
}

.badge-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
}

/* =========================================================
   VISUAL BRACKET
========================================================= */

.visual-bracket-note {
    background: #fff4cc;
    border: 1px solid #f2d675;
    border-left: 5px solid #ffc107;
    color: #5c4300;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 600;
}

.visual-bracket-shell {
    width: 100%;
}

.visual-bracket-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.75rem;
}

.visual-bracket-board {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    min-width: max-content;
    padding: 0.25rem 0.5rem 1rem;
}

.visual-bracket-side {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.visual-bracket-side-left {
    justify-content: flex-end;
}

.visual-bracket-side-right {
    justify-content: flex-start;
}

.visual-bracket-column {
    display: flex;
    flex-direction: column;
    min-width: 182px;
    position: relative;
}

.visual-bracket-column-left {
    align-items: flex-end;
}

.visual-bracket-column-right {
    align-items: flex-start;
}

.visual-bracket-column-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 205px;
}

.visual-bracket-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.35rem 0.15rem 0.6rem;
}

.visual-bracket-column-header-final {
    justify-content: center;
    margin-bottom: 11.85rem;
}

.visual-bracket-match-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Round of 32 */
.visual-bracket-depth-8 .visual-bracket-match-stack {
    gap: 1rem;
    padding-top: 0;
}

/* Round of 16:
   lowered so the vertical center of the full Round of 16 stack
   aligns with the Quarterfinal / Semifinal / Final center line */
.visual-bracket-depth-4 .visual-bracket-match-stack {
    gap: 2.75rem;
    padding-top: 16.15rem;
}

/* Quarterfinal:
   already aligned correctly */
.visual-bracket-depth-2 .visual-bracket-match-stack {
    gap: 10.4rem;
    padding-top: 27.15rem;
}

/* Semifinal:
   already aligned correctly */
.visual-bracket-depth-1 .visual-bracket-match-stack {
    gap: 0;
    padding-top: 38.40rem;
}

.visual-bracket-depth-generic .visual-bracket-match-stack {
    gap: 1.25rem;
    padding-top: 0;
}

.visual-bracket-depth-8 .visual-bracket-match-stack::before,
.visual-bracket-depth-4 .visual-bracket-match-stack::before,
.visual-bracket-depth-2 .visual-bracket-match-stack::before,
.visual-bracket-depth-1 .visual-bracket-match-stack::before {
    content: "";
    position: absolute;
    top: 2.05rem;
    bottom: 2.05rem;
    width: 2px;
    background: #ced4da;
    opacity: 0.95;
}

.visual-bracket-column-left .visual-bracket-match-stack::before {
    right: -0.82rem;
}

.visual-bracket-column-right .visual-bracket-match-stack::before {
    left: -0.82rem;
}

.visual-bracket-match-card {
    position: relative;
    width: 176px;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0.68rem 0.68rem;
}

.visual-bracket-column-left .visual-bracket-match-card::after,
.visual-bracket-column-right .visual-bracket-match-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.82rem;
    height: 2px;
    background: #ced4da;
    transform: translateY(-50%);
}

.visual-bracket-column-left .visual-bracket-match-card::after {
    right: -0.82rem;
}

.visual-bracket-column-right .visual-bracket-match-card::after {
    left: -0.82rem;
}

.visual-bracket-match-card-final {
    width: 188px;
    border: 2px solid #0d6efd;
    background: #f8fbff;
}

.visual-bracket-final-zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 26.55rem;
    width: 100%;
}

    /* Final stays exactly where it already is */
    .visual-bracket-final-zone::before,
    .visual-bracket-final-zone::after {
        content: "";
        position: absolute;
        top: calc(26.55rem + 50%);
        width: 1rem;
        height: 2px;
        background: #ced4da;
        transform: translateY(-50%);
    }

    .visual-bracket-final-zone::before {
        left: -1rem;
    }

    .visual-bracket-final-zone::after {
        right: -1rem;
    }

.visual-bracket-match-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.visual-bracket-kickoff {
    font-size: 0.74rem;
    color: #6c757d;
    margin-bottom: 0.45rem;
}

.visual-bracket-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    border: 1px solid #e9ecef;
    border-radius: 9px;
    padding: 0.4rem 0.48rem;
}

    .visual-bracket-team-row + .visual-bracket-team-row {
        margin-top: 0.34rem;
    }

.visual-bracket-team-row-winner {
    border-color: #64b76d;
    background: #edf9ef;
}

.visual-bracket-team-text {
    min-width: 0;
    flex: 1 1 auto;
}

.visual-bracket-team-name {
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.2;
    word-break: break-word;
}

.visual-bracket-team-source {
    font-size: 0.7rem;
    color: #6c757d;
    line-height: 1.1;
    margin-top: 0.1rem;
    word-break: break-word;
}

.visual-bracket-team-score {
    flex: 0 0 auto;
    min-width: 16px;
    text-align: right;
    font-size: 0.92rem;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .visual-bracket-board {
        gap: 1.2rem;
    }

    .visual-bracket-side {
        gap: 0.95rem;
    }

    .visual-bracket-column {
        min-width: 172px;
    }

    .visual-bracket-match-card {
        width: 166px;
    }

    .visual-bracket-match-card-final {
        width: 176px;
    }

    .visual-bracket-column-header-final {
        margin-bottom: 10.85rem;
    }

    .visual-bracket-depth-4 .visual-bracket-match-stack {
        padding-top: 14.7rem;
    }

    .visual-bracket-depth-2 .visual-bracket-match-stack {
        padding-top: 24.65rem;
        gap: 9.7rem;
    }

    .visual-bracket-depth-1 .visual-bracket-match-stack {
        padding-top: 34.85rem;
    }

    .visual-bracket-final-zone {
        padding-top: 24rem;
    }

        .visual-bracket-final-zone::before,
        .visual-bracket-final-zone::after {
            top: calc(24rem + 50%);
        }
}

@media (max-width: 992px) {
    .visual-bracket-board {
        gap: 1rem;
    }

    .visual-bracket-side {
        gap: 0.85rem;
    }

    .visual-bracket-column {
        min-width: 164px;
    }

    .visual-bracket-column-header-final {
        margin-bottom: 9.75rem;
    }

    .visual-bracket-depth-4 .visual-bracket-match-stack {
        gap: 2.45rem;
        padding-top: 13.1rem;
    }

    .visual-bracket-depth-2 .visual-bracket-match-stack {
        gap: 8.8rem;
        padding-top: 22.65rem;
    }

    .visual-bracket-depth-1 .visual-bracket-match-stack {
        padding-top: 31.65rem;
    }

    .visual-bracket-final-zone {
        padding-top: 21.9rem;
    }

        .visual-bracket-final-zone::before,
        .visual-bracket-final-zone::after {
            top: calc(21.9rem + 50%);
        }

    .visual-bracket-match-card {
        width: 158px;
    }

    .visual-bracket-match-card-final {
        width: 168px;
    }
}

@media (max-width: 768px) {
    .visual-bracket-board {
        gap: 0.9rem;
    }

    .visual-bracket-side {
        gap: 0.75rem;
    }

    .visual-bracket-column {
        min-width: 156px;
    }

    .visual-bracket-column-header-final {
        margin-bottom: 8.35rem;
    }

    .visual-bracket-depth-4 .visual-bracket-match-stack {
        gap: 2.15rem;
        padding-top: 11.85rem;
    }

    .visual-bracket-depth-2 .visual-bracket-match-stack {
        gap: 7.85rem;
        padding-top: 20.15rem;
    }

    .visual-bracket-depth-1 .visual-bracket-match-stack {
        padding-top: 28rem;
    }

    .visual-bracket-final-zone {
        padding-top: 19.65rem;
    }

        .visual-bracket-final-zone::before,
        .visual-bracket-final-zone::after {
            top: calc(19.65rem + 50%);
        }

    .visual-bracket-match-card {
        width: 150px;
        padding: 0.62rem 0.6rem;
    }

    .visual-bracket-match-card-final {
        width: 160px;
    }

    .visual-bracket-team-name {
        font-size: 0.82rem;
    }

    .visual-bracket-team-source,
    .visual-bracket-kickoff {
        font-size: 0.66rem;
    }
}

/* =========================================================
   PHASE 3D - USER PICKS + PROGRESSION HIGHLIGHTS
========================================================= */

.visual-bracket-match-card-animated {
    animation: bracketCardFadeIn 0.6s ease-out;
}

.visual-bracket-match-card-complete {
    box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.18), 0 8px 18px rgba(25, 135, 84, 0.10);
}

.visual-bracket-match-card-user-picked {
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.18), 0 8px 18px rgba(13, 110, 253, 0.10);
}

.visual-bracket-team-row-advanced {
    position: relative;
}

    .visual-bracket-team-row-advanced::after {
        content: "Advanced";
        margin-left: 0.4rem;
        font-size: 0.62rem;
        font-weight: 700;
        color: #198754;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.visual-bracket-team-row-user-picked {
    border-color: #86b7fe;
    background: #eef5ff;
}

.visual-bracket-user-pick-panel {
    border: 1px dashed #9ec5fe;
    background: #f8fbff;
    border-radius: 10px;
    padding: 0.5rem 0.55rem;
}

.visual-bracket-user-pick-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #0d6efd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.visual-bracket-user-pick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    border-radius: 8px;
    padding: 0.2rem 0.3rem;
}

    .visual-bracket-user-pick-row + .visual-bracket-user-pick-row {
        margin-top: 0.15rem;
    }

.visual-bracket-user-pick-row-winner {
    background: #e8f7ec;
}

.visual-bracket-user-pick-name {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.visual-bracket-user-pick-score {
    flex: 0 0 auto;
    min-width: 16px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
}

.visual-bracket-user-pick-updated {
    margin-top: 0.3rem;
    font-size: 0.62rem;
    color: #6c757d;
}

@keyframes bracketCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* =========================================================
   UX-2 - MOBILE-FIRST APPLICATION SHELL + NAVIGATION POLISH
========================================================= */

.app-body {
    background: #f6f8fb;
}

.app-header {
    z-index: 1020;
    background: #ffffff;
}

.app-topbar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: #111827;
}

    .app-brand:hover,
    .app-brand:focus {
        color: #0d6efd;
    }

.app-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #0d6efd;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.18);
}

.app-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 0.65rem;
    line-height: 1.1;
}

.app-brand-title {
    font-size: 1.12rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-brand-subtitle {
    margin-top: 0.15rem;
    color: #6c757d;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-navbar {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.app-navbar-toggler {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
}

.app-nav-primary .nav-link {
    border-radius: 999px;
    margin-right: 0.15rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    font-weight: 600;
}

    .app-nav-primary .nav-link:hover,
    .app-nav-primary .nav-link:focus,
    .app-nav-primary .nav-link.active {
        background: #eef5ff;
        color: #0d6efd !important;
    }

.app-dropdown-menu {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    padding: 0.45rem;
}

    .app-dropdown-menu .dropdown-item,
    .app-dropdown-menu .dropdown-item-text {
        border-radius: 10px;
        padding: 0.55rem 0.7rem;
    }

        .app-dropdown-menu .dropdown-item:hover,
        .app-dropdown-menu .dropdown-item:focus {
            background: #eef5ff;
        }

.app-admin-dropdown {
    max-height: min(78vh, 620px);
    overflow-y: auto;
}

.alert-dropdown {
    min-width: min(360px, calc(100vw - 2rem));
}

.app-login-nav {
    align-items: stretch;
}

.app-user-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    font-weight: 600;
}

.app-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e7f1ff;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 800;
}

.app-user-greeting {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-pending-banner {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.app-main-container {
    padding-top: 1rem;
}

.app-main-content > .text-center:first-child,
.app-main-content > .d-flex:first-child {
    border-radius: 18px;
}

.app-footer {
    background: #ffffff;
}

.card,
.border.rounded,
.alert {
    overflow-wrap: anywhere;
}

.table-responsive {
    border-radius: 12px;
}

@media (min-width: 992px) {
    .app-admin-dropdown {
        min-width: 280px;
    }
}

@media (max-width: 991.98px) {
    .app-header {
        position: sticky;
        top: 0;
    }

    .app-brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .app-brand-title {
        font-size: 1rem;
    }

    .app-brand-subtitle {
        font-size: 0.74rem;
    }

    .app-navbar .container {
        align-items: stretch;
    }

    .app-navbar-toggler {
        width: 100%;
        justify-content: center;
        margin: 0.2rem 0;
    }

    .navbar-collapse {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .app-nav-primary .nav-link,
    .app-login-nav .nav-link,
    .app-user-menu-link {
        border-radius: 12px;
        margin: 0.1rem 0;
        padding: 0.7rem 0.85rem;
        background: #f8f9fa;
    }

    .app-dropdown-menu {
        width: 100%;
        margin-top: 0.35rem;
        box-shadow: none;
        border-radius: 12px;
    }

    .app-admin-dropdown {
        max-height: 58vh;
    }

    .app-login-nav {
        border-top: 1px solid #e9ecef;
        margin-top: 0.65rem;
        padding-top: 0.65rem;
    }

    .app-user-greeting {
        max-width: 220px;
    }

    .app-main-container {
        padding-top: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 0.96rem;
    }

    .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .app-brand-copy {
        margin-left: 0.5rem;
    }

    .app-brand-title {
        max-width: calc(100vw - 115px);
    }

    .app-brand-subtitle {
        max-width: calc(100vw - 115px);
    }

    h1,
    .h1 {
        font-size: 1.65rem;
    }

    h2,
    .h2 {
        font-size: 1.35rem;
    }

    .display-5 {
        font-size: 1.95rem;
    }

    .lead {
        font-size: 1.02rem;
    }

    .card-body,
    .card-header,
    .card-footer {
        padding: 0.9rem;
    }

    .btn:not(.btn-sm) {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .d-flex.gap-2.flex-wrap > .btn,
    .d-flex.gap-3.flex-wrap > .btn {
        flex: 1 1 auto;
    }

    .alert-dropdown {
        min-width: auto;
    }

    .app-footer .container {
        justify-content: center !important;
        text-align: center;
    }
}


/* =========================================================
   UX-3 - MOBILE-FIRST PICK FLOW + MY PICKS POLISH
========================================================= */

.ux3-page-hero {
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.ux3-page-actions .btn {
    min-height: 40px;
}

.ux3-guided-card,
.ux3-build-pick-card,
.ux3-side-card,
.ux3-filter-card,
.ux3-mobile-next-card {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.ux3-pick-form .form-control,
.ux3-pick-form .form-select {
    min-height: 44px;
}

.ux3-score-field .form-label {
    font-weight: 700;
}

.ux3-score-field input[type="number"] {
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
}

.ux3-quick-pick-panel .quick-pick-button {
    min-height: 42px;
}

.confidence-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.confidence-option-card {
    display: block;
    height: 100%;
    border: 1px solid #dfe3e8;
    border-radius: 14px;
    padding: 0.85rem;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

    .confidence-option-card:hover,
    .confidence-option-card:focus-within {
        border-color: #86b7fe;
        box-shadow: 0 8px 18px rgba(13, 110, 253, 0.10);
        transform: translateY(-1px);
    }

    .confidence-option-card.selected {
        border-color: #0d6efd;
        background: #eef5ff;
        box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.18), 0 8px 18px rgba(13, 110, 253, 0.10);
    }

        .confidence-option-card.selected.confident {
            border-color: #198754;
            background: #eefaf2;
        }

        .confidence-option-card.selected.risky {
            border-color: #ffc107;
            background: #fff8e1;
        }

.ux3-pick-save-bar {
    background: rgba(255, 255, 255, 0.98);
}

.ux3-pick-review-card {
    background: #ffffff;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

    .ux3-pick-review-card:hover {
        transform: translateY(-1px);
        border-color: rgba(13, 110, 253, 0.35) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

.ux3-mobile-sticky-actions,
.user-mobile-sticky-actions.ux3-mobile-sticky-actions {
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.10);
}

@media (max-width: 991.98px) {
    .ux3-page-hero {
        padding: 0.9rem;
        border-radius: 16px;
    }

    .ux3-page-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

        .ux3-page-actions .btn {
            width: 100%;
        }

    .ux3-pick-layout {
        flex-direction: column-reverse;
    }

    .ux3-side-card .card-body {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ux3-pick-save-bar {
        position: sticky;
        bottom: 0;
        z-index: 1010;
        margin-left: -0.9rem;
        margin-right: -0.9rem;
        padding: 0.85rem 0.9rem;
        border-top: 1px solid rgba(15, 23, 42, 0.12);
        box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
    }

        .ux3-pick-save-bar > .d-flex {
            width: 100%;
            display: grid !important;
            grid-template-columns: 1fr;
        }

        .ux3-pick-save-bar .btn {
            width: 100%;
        }

    .confidence-option-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ux3-page-actions {
        grid-template-columns: 1fr;
    }

    .ux3-score-row {
        gap: 0.35rem;
    }

    .ux3-score-field input[type="number"] {
        min-height: 54px;
        font-size: 1.5rem;
    }

    .ux3-quick-pick-panel .d-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .ux3-quick-pick-panel .quick-pick-button {
        white-space: normal;
    }

    .ux3-side-card .card-body {
        grid-template-columns: 1fr;
    }

    .ux3-pick-review-card .d-flex.gap-2.flex-wrap .btn,
    .ux3-pick-review-card .d-flex.gap-3.flex-wrap .btn {
        width: 100%;
    }
}

/* =========================================================
   ADMIN-1 - SAFE ADDITIVE ADMIN DASHBOARD + SAFETY POLISH
   This section is intentionally additive only. It styles the
   existing Admin pages without changing server-side logic.
========================================================= */

.admin1-admin-page {
    --admin1-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    --admin1-card-border: rgba(15, 23, 42, 0.08);
}

.admin1-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--admin1-card-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--admin1-card-shadow);
}

.admin1-hero-danger {
    background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}

.admin1-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin1-context-alert {
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.admin1-admin-page .card {
    border-color: var(--admin1-card-border);
    box-shadow: var(--admin1-card-shadow);
}

.admin1-admin-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--admin1-card-border);
}

.admin1-admin-page .border.rounded.p-3.h-100,
.admin1-admin-page .border.rounded.p-2.mb-2,
.admin1-admin-page .border.rounded.p-3.mt-2,
.admin1-admin-page .border.rounded.p-2.mb-2.bg-light,
.admin1-admin-page .border.rounded.p-3.h-100.bg-light {
    border-color: rgba(15, 23, 42, 0.10) !important;
    border-radius: 14px !important;
}

.admin1-admin-dashboard > .row.g-3.mb-4:first-of-type .border.rounded,
.admin1-admin-dashboard > .row.g-3.mb-4:nth-of-type(2) .border.rounded,
.admin1-admin-dashboard > .row.g-3.mb-4:nth-of-type(3) .border.rounded,
.admin1-admin-safety-page > .row.g-3.mb-4:first-of-type .border.rounded {
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.admin1-admin-page .card .btn,
.admin1-admin-page details summary.btn {
    min-height: 38px;
}

.admin1-admin-page .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
}

.admin1-admin-page .table {
    margin-bottom: 0;
}

.admin1-admin-page details.admin-safety-action-panel > summary {
    white-space: nowrap;
}

.admin1-admin-page .admin-safety-inline-form {
    border-color: rgba(220, 53, 69, 0.20) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.admin1-admin-safety-page .card.border-danger,
.admin1-admin-safety-page .border-danger {
    box-shadow: 0 10px 28px rgba(220, 53, 69, 0.08);
}

.admin1-admin-safety-page .alert-danger,
.admin1-admin-safety-page .alert-warning {
    border-radius: 14px;
}

@media (max-width: 991.98px) {
    .admin1-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 0.9rem;
        border-radius: 16px;
    }

    .admin1-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

        .admin1-hero-actions .btn {
            width: 100%;
        }

    .admin1-admin-page .card-header {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

        .admin1-admin-page .card-header .btn {
            width: 100%;
        }
}

@media (max-width: 575.98px) {
    .admin1-hero-actions {
        grid-template-columns: 1fr;
    }

    .admin1-admin-page .row.g-3 > [class*="col-"],
    .admin1-admin-page .row.g-4 > [class*="col-"] {
        margin-bottom: 0.15rem;
    }

    .admin1-admin-page .table-responsive table,
    .admin1-admin-page .table-responsive thead,
    .admin1-admin-page .table-responsive tbody,
    .admin1-admin-page .table-responsive th,
    .admin1-admin-page .table-responsive td,
    .admin1-admin-page .table-responsive tr {
        display: block;
        width: 100%;
    }

    .admin1-admin-page .table-responsive thead {
        display: none;
    }

    .admin1-admin-page .table-responsive tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .admin1-admin-page .table-responsive td {
        border: 0;
        padding: 0.35rem 0;
    }

        .admin1-admin-page .table-responsive td.text-end {
            text-align: left !important;
        }

            .admin1-admin-page .table-responsive td.text-end .btn,
            .admin1-admin-page .table-responsive td.text-end details,
            .admin1-admin-page .table-responsive td.text-end summary {
                width: 100%;
            }
}

/* =========================================================
   DATA-1 - CSV IMPORT SAFETY + PREVIEW POLISH
   Additive-only styles for Admin import pages.
========================================================= */

.data1-import-page {
    --data1-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    --data1-card-border: rgba(15, 23, 42, 0.08);
}

.data1-import-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--data1-card-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--data1-card-shadow);
}

.data1-import-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.data1-import-page .card,
.data1-import-page .border.rounded {
    border-color: var(--data1-card-border) !important;
    box-shadow: var(--data1-card-shadow);
}

.data1-import-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--data1-card-border);
    font-weight: 700;
}

.data1-upload-safety-note {
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(13, 110, 253, 0.14);
    border-radius: 10px;
    background: #f8fbff;
}

.data1-preview-safety-panel {
    border-radius: 14px;
}

.data1-commit-confirm {
    padding: 0.85rem;
    border: 1px solid rgba(25, 135, 84, 0.22);
    border-radius: 14px;
    background: #f6fff9;
}

.data1-import-safety-checklist {
    border-radius: 14px;
}

.data1-import-page .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
}

.data1-import-page .table {
    margin-bottom: 0;
}

.data1-import-page .badge {
    white-space: normal;
    line-height: 1.15;
}

@media (max-width: 991.98px) {
    .data1-import-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 0.9rem;
        border-radius: 16px;
    }

    .data1-import-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .data1-import-hero-actions .btn {
        width: 100%;
    }

    .data1-import-page .card-header {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .data1-import-hero-actions {
        grid-template-columns: 1fr;
    }

    .data1-import-page .d-flex.gap-2.flex-wrap > .btn,
    .data1-import-page .d-flex.gap-3.flex-wrap > .btn {
        width: 100%;
    }

    .data1-import-page .table-responsive table,
    .data1-import-page .table-responsive thead,
    .data1-import-page .table-responsive tbody,
    .data1-import-page .table-responsive th,
    .data1-import-page .table-responsive td,
    .data1-import-page .table-responsive tr {
        display: block;
        width: 100%;
    }

    .data1-import-page .table-responsive thead {
        display: none;
    }

    .data1-import-page .table-responsive tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .data1-import-page .table-responsive td {
        border: 0;
        padding: 0.35rem 0;
    }

    .data1-import-page .table-responsive td::before {
        display: block;
        margin-bottom: 0.12rem;
        color: #6c757d;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .data1-import-page .table-responsive td:nth-child(1)::before { content: "CSV Row"; }
    .data1-import-page .table-responsive td:nth-child(2)::before { content: "Primary"; }
    .data1-import-page .table-responsive td:nth-child(3)::before { content: "Details"; }
    .data1-import-page .table-responsive td:nth-child(4)::before { content: "Value"; }
    .data1-import-page .table-responsive td:nth-child(5)::before { content: "Status"; }
    .data1-import-page .table-responsive td:nth-child(6)::before { content: "Notes"; }
    .data1-import-page .table-responsive td:nth-child(7)::before { content: "Feedback"; }
}

/* =========================================================
   LEADERBOARD V2 - USABILITY + INSIGHTS POLISH
   Additive-only styling for leaderboard hub and league pages.
========================================================= */

.leaderboard2-page {
    --leaderboard2-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    --leaderboard2-card-border: rgba(15, 23, 42, 0.08);
}

.leaderboard2-hero {
    padding: 1rem;
    border: 1px solid var(--leaderboard2-card-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--leaderboard2-card-shadow);
}

.leaderboard2-hero .btn { min-height: 40px; }

.leaderboard2-page .card {
    border-color: var(--leaderboard2-card-border);
    box-shadow: var(--leaderboard2-card-shadow);
}

.leaderboard2-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--leaderboard2-card-border);
}

.leaderboard2-insight-panel { overflow: hidden; }

.leaderboard2-help-tile {
    padding: 0.85rem;
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 14px;
    background: #f8fbff;
}

.leaderboard2-page .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
}

.leaderboard2-page .table { margin-bottom: 0; }

.leaderboard2-page .badge {
    white-space: normal;
    line-height: 1.15;
}

.leaderboard2-page .leaderboard-current-user-row > td,
.leaderboard2-page tr.leaderboard-current-user-row > td {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.08);
}

.leaderboard2-page .movement-up,
.leaderboard2-page .movement-down,
.leaderboard2-page .movement-same { font-weight: 700; }

.leaderboard2-page .border.rounded,
.leaderboard2-page .border.rounded.p-3,
.leaderboard2-page .border.rounded.p-2 { border-radius: 14px !important; }

@media (max-width: 991.98px) {
    .leaderboard2-hero {
        align-items: stretch !important;
        flex-direction: column;
        padding: 0.9rem;
        border-radius: 16px;
    }

    .leaderboard2-hero > .d-flex,
    .leaderboard2-hero .d-flex.gap-2.flex-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .leaderboard2-hero .btn { width: 100%; }

    .leaderboard2-page .card-header {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .leaderboard2-hero > .d-flex,
    .leaderboard2-hero .d-flex.gap-2.flex-wrap { grid-template-columns: 1fr; }

    .leaderboard2-page .row.g-3 > [class*="col-"],
    .leaderboard2-page .row.g-4 > [class*="col-"] { margin-bottom: 0.15rem; }

    .leaderboard2-page .table-responsive table,
    .leaderboard2-page .table-responsive thead,
    .leaderboard2-page .table-responsive tbody,
    .leaderboard2-page .table-responsive th,
    .leaderboard2-page .table-responsive td,
    .leaderboard2-page .table-responsive tr {
        display: block;
        width: 100%;
    }

    .leaderboard2-page .table-responsive thead { display: none; }

    .leaderboard2-page .table-responsive tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .leaderboard2-page .table-responsive td {
        border: 0;
        padding: 0.35rem 0;
        text-align: left !important;
    }

    .leaderboard2-page .table-responsive td::before {
        display: block;
        margin-bottom: 0.12rem;
        color: #6c757d;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .leaderboard2-page .table-responsive td:nth-child(1)::before { content: "Rank / Item"; }
    .leaderboard2-page .table-responsive td:nth-child(2)::before { content: "User / League"; }
    .leaderboard2-page .table-responsive td:nth-child(3)::before { content: "Movement / Detail"; }
    .leaderboard2-page .table-responsive td:nth-child(4)::before { content: "Base / Score"; }
    .leaderboard2-page .table-responsive td:nth-child(5)::before { content: "Bonus / Picks"; }
    .leaderboard2-page .table-responsive td:nth-child(6)::before { content: "Cards / Gap"; }
    .leaderboard2-page .table-responsive td:nth-child(7)::before { content: "Total"; }
    .leaderboard2-page .table-responsive td:nth-child(8)::before { content: "Scored Picks"; }

    .leaderboard2-page .table-responsive td .btn,
    .leaderboard2-page .table-responsive td a.btn {
        width: 100%;
        margin-top: 0.25rem;
    }
}

/* =========================================================
   USER-1 - USER DASHBOARD / HOME EXPERIENCE POLISH
   Additive-only styling for the root Home dashboard.
========================================================= */

.user1-home-page {
    --user1-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    --user1-card-border: rgba(15, 23, 42, 0.08);
}

.user1-home-hero {
    padding: 1rem;
    border: 1px solid var(--user1-card-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--user1-card-shadow);
}

.user1-home-page .card,
.user1-home-page .border.rounded {
    border-color: var(--user1-card-border) !important;
    box-shadow: var(--user1-card-shadow);
}

.user1-home-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--user1-card-border);
}

.user1-action-center { overflow: hidden; }

.user1-next-action-card {
    position: relative;
    padding: 1rem;
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.user1-mini-stat {
    position: relative;
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.user1-mini-stat:hover {
    border-color: #86b7fe;
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.10);
    transform: translateY(-1px);
}

.user1-mini-stat .stretched-link {
    font-size: 0.8rem;
    font-weight: 700;
}

.user1-quick-links .btn { min-height: 40px; }

.user1-summary-grid > [class*="col-"] .border.rounded,
.user1-dashboard-card .card,
.user1-access-card,
.user1-next-matches-card {
    border-radius: 16px !important;
}

.user1-next-matches-card .border.rounded {
    background: #ffffff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.user1-next-matches-card .border.rounded:hover {
    border-color: rgba(13, 110, 253, 0.24) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

@media (max-width: 991.98px) {
    .user1-home-hero { padding: 0.9rem; border-radius: 16px; }
    .user1-action-center .card-header { align-items: stretch !important; flex-direction: column; }
    .user1-quick-links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user1-quick-links .btn { width: 100%; }
}

@media (max-width: 575.98px) {
    .user1-quick-links { grid-template-columns: 1fr; }
    .user1-home-page .card-header { display: flex; flex-direction: column; align-items: stretch !important; gap: 0.5rem; }
    .user1-home-page .card-header .btn,
    .user1-home-page .d-flex.gap-2.flex-wrap > .btn,
    .user1-home-page .d-flex.gap-3.flex-wrap > .btn { width: 100%; }
}


/* =========================================================
   ACCESS-1 - USER ACCESS + LEAGUE VISIBILITY POLISH
   Additive-only styling for league visibility, public league,
   and match access pages. Does not change authorization logic.
========================================================= */

.access1-page {
    --access1-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    --access1-card-border: rgba(15, 23, 42, 0.08);
}

.access1-page .card,
.access1-page .border.rounded {
    border-color: var(--access1-card-border) !important;
    box-shadow: var(--access1-card-shadow);
}

.access1-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--access1-card-border);
}

.access1-context-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.42rem 0.72rem;
    border: 1px solid rgba(13, 110, 253, 0.14);
    border-radius: 999px;
    background: #f8fbff;
    color: #0d47a1;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
}

.access1-visibility-note,
.access1-match-visibility-summary {
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.access1-page .badge {
    white-space: normal;
    line-height: 1.15;
}

.access1-page .btn {
    min-height: 38px;
}

.access1-page .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
}

.access1-page .table {
    margin-bottom: 0;
}

.access1-public-leagues-page form button,
.access1-matches-index-page .table-responsive .btn,
.access1-leagues-index-page .btn {
    white-space: normal;
}

.access1-page .alert-warning,
.access1-page .alert-info,
.access1-page .alert-success,
.access1-page .alert-danger {
    border-radius: 14px;
}

@media (max-width: 991.98px) {
    .access1-page > .d-flex.justify-content-between,
    .access1-page > .d-flex.align-items-start,
    .access1-page .card-header {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.65rem;
    }

    .access1-page > .d-flex .btn,
    .access1-page .card-header .btn {
        width: 100%;
    }

    .access1-page .d-flex.gap-2.flex-wrap,
    .access1-page .d-flex.gap-3.flex-wrap {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .access1-context-pill {
        width: 100%;
        border-radius: 14px;
        justify-content: center;
        text-align: center;
    }

    .access1-page .d-flex.gap-2.flex-wrap > .btn,
    .access1-page .d-flex.gap-3.flex-wrap > .btn {
        width: 100%;
    }

    .access1-matches-index-page .table-responsive table,
    .access1-matches-index-page .table-responsive thead,
    .access1-matches-index-page .table-responsive tbody,
    .access1-matches-index-page .table-responsive th,
    .access1-matches-index-page .table-responsive td,
    .access1-matches-index-page .table-responsive tr {
        display: block;
        width: 100%;
    }

    .access1-matches-index-page .table-responsive thead {
        display: none;
    }

    .access1-matches-index-page .table-responsive tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .access1-matches-index-page .table-responsive td {
        border: 0;
        padding: 0.35rem 0;
        text-align: left !important;
    }

    .access1-matches-index-page .table-responsive td::before {
        display: block;
        margin-bottom: 0.12rem;
        color: #6c757d;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .access1-matches-index-page .table-responsive td:nth-child(1)::before { content: "Match"; }
    .access1-matches-index-page .table-responsive td:nth-child(2)::before { content: "Competition"; }
    .access1-matches-index-page .table-responsive td:nth-child(3)::before { content: "Teams"; }
    .access1-matches-index-page .table-responsive td:nth-child(4)::before { content: "Stage"; }
    .access1-matches-index-page .table-responsive td:nth-child(5)::before { content: "Kickoff"; }
    .access1-matches-index-page .table-responsive td:nth-child(6)::before { content: "Status"; }
    .access1-matches-index-page .table-responsive td:nth-child(7)::before { content: "Actions"; }

    .access1-matches-index-page .table-responsive td .btn,
    .access1-matches-index-page .table-responsive td a.btn {
        width: 100%;
        margin-top: 0.25rem;
    }
}

/* =========================================================
   MOBILE-1A CLICKABLE NAV DROPDOWNS - CLEAN FIX
   Dropdown toggles are real buttons in _Layout/_LoginPartial.
   This keeps mobile menus tappable without blocking links.
========================================================= */

.app-navbar button.nav-link.dropdown-toggle,
.app-login-nav button.nav-link.dropdown-toggle {
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.app-navbar button.nav-link.dropdown-toggle:focus,
.app-login-nav button.nav-link.dropdown-toggle:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

@media (min-width: 992px) {
    .app-navbar button.nav-link.dropdown-toggle,
    .app-login-nav button.nav-link.dropdown-toggle {
        width: auto;
    }
}

@media (max-width: 991.98px) {
    #mainNavbar .dropdown,
    #mainNavbar .nav-item.dropdown,
    #mainNavbar .navbar-nav,
    #mainNavbar .nav-item {
        width: 100%;
    }

    #mainNavbar button.dropdown-toggle,
    #mainNavbar .dropdown-toggle {
        width: 100%;
        min-height: 46px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
    }

    #mainNavbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: min(74vh, 680px);
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0.35rem 0 0.65rem 0 !important;
        padding: 0.55rem;
        border-radius: 14px;
        border: 1px solid rgba(15, 23, 42, 0.10);
        box-shadow: none;
        background: #ffffff;
        overscroll-behavior: contain;
        pointer-events: auto;
    }

    #mainNavbar .dropdown-menu.show {
        display: block !important;
    }

    #mainNavbar .dropdown-menu-end {
        right: auto !important;
        left: auto !important;
    }

    #mainNavbar .app-admin-dropdown,
    #mainNavbar .alert-dropdown,
    #mainNavbar .app-dropdown-menu {
        max-height: min(74vh, 680px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #mainNavbar .dropdown-item,
    #mainNavbar .dropdown-item-text {
        min-height: 44px;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.72rem 0.85rem;
        border-radius: 10px;
        white-space: normal;
        line-height: 1.25;
        pointer-events: auto;
    }

    #mainNavbar .dropdown-item:hover,
    #mainNavbar .dropdown-item:focus {
        background: #eef5ff;
        color: #0d6efd;
    }

    #mainNavbar .dropdown-divider {
        margin: 0.45rem 0;
    }

    #mainNavbar .dropdown-toggle.show,
    #mainNavbar .dropdown.show > .dropdown-toggle {
        background: #eef5ff !important;
        color: #0d6efd !important;
    }
}
/* =========================================================
   MOBILE-1B - COLLAPSIBLE UI + REDUCE SCROLLING
========================================================= */

@media (max-width: 991.98px) {

    /* Collapsible cards */
    .card.mobile-expanded {
        border-color: #0d6efd;
    }

    .card-header {
        user-select: none;
    }

    /* Collapsed text */
    .mobile-collapsed-text {
        max-height: 40px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }

        .mobile-collapsed-text::after {
            content: "Tap to expand";
            display: block;
            font-size: 0.7rem;
            color: #0d6efd;
            margin-top: 4px;
        }

    .mobile-expanded-text {
        max-height: none;
    }

        .mobile-expanded-text::after {
            content: "Tap to collapse";
        }

    /* Reduce spacing */
    .card {
        margin-bottom: 10px !important;
    }

    .card-body {
        padding: 0.75rem;
    }

    /* Make sections tighter */
    h1, h2, h3 {
        margin-bottom: 0.5rem;
    }

    p {
        margin-bottom: 0.5rem;
    }
}

/* =========================================================
   MOBILE-1C - SMART GROUPING + MOBILE PRIORITY LAYERS
   Safe additive CSS. Does not remove or hide server-rendered
   content. Works with MOBILE-1B collapsible cards.
========================================================= */

@media (max-width: 991.98px) {
    .mobile1c-section-label {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.26rem 0.55rem;
        margin-left: 0.35rem;
        border-radius: 999px;
        border: 1px solid rgba(13, 110, 253, 0.16);
        background: #f8fbff;
        color: #0d47a1;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        vertical-align: middle;
        white-space: normal;
    }

    .mobile1c-card-primary {
        border-color: rgba(13, 110, 253, 0.38) !important;
        box-shadow: 0 10px 26px rgba(13, 110, 253, 0.10) !important;
    }

    .mobile1c-card-action {
        border-color: rgba(25, 135, 84, 0.34) !important;
    }

    .mobile1c-card-deadline,
    .mobile1c-card-alert {
        border-color: rgba(255, 193, 7, 0.55) !important;
    }

    .mobile1c-card-admin {
        border-color: rgba(33, 37, 41, 0.28) !important;
    }

    .mobile1c-card-insight {
        border-color: rgba(13, 202, 240, 0.34) !important;
    }

    .mobile1c-smart-jumpbar {
        position: sticky;
        top: 0.35rem;
        z-index: 1015;
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        padding: 0.45rem;
        margin: 0 0 0.75rem 0;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        -webkit-overflow-scrolling: touch;
    }

    .mobile1c-smart-jumpbar a {
        flex: 0 0 auto;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        border: 1px solid rgba(13, 110, 253, 0.18);
        background: #f8fbff;
        color: #0d6efd;
        font-size: 0.78rem;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobile1c-smart-jumpbar a:focus,
    .mobile1c-smart-jumpbar a:hover {
        background: #eef5ff;
        color: #0a58ca;
    }

    .mobile1c-priority-open > .card-body,
    .mobile1c-priority-open.card > .card-body {
        display: block !important;
    }

    .mobile1c-priority-open {
        border-color: rgba(13, 110, 253, 0.42) !important;
    }

    .mobile1c-ready .card-header strong,
    .mobile1c-ready .accordion-button {
        line-height: 1.25;
    }
}

@media (min-width: 992px) {
    .mobile1c-smart-jumpbar,
    .mobile1c-section-label {
        display: none !important;
    }
}

/* Admin Tournament Wizard - mobile-first setup flow */
.admin-wizard-page {
    max-width: 1320px;
    margin: 0 auto;
}

.admin-wizard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 1rem;
    background: #fff;
}

.admin-wizard-hero-actions,
.admin-wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-wizard-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.admin-wizard-sidebar {
    position: sticky;
    top: 1rem;
}

.admin-wizard-progress-card,
.admin-wizard-summary-card,
.admin-wizard-card {
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}

.admin-wizard-progress-card,
.admin-wizard-summary-card {
    padding: 1rem;
}

.admin-wizard-card {
    padding: 1.25rem;
}

.admin-wizard-card h2 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.admin-wizard-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-wizard-steps li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    color: #6c757d;
    background: #f8f9fa;
}

.admin-wizard-steps li span {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dee2e6;
    color: #212529;
    font-weight: 700;
    font-size: 0.85rem;
}

.admin-wizard-steps li.active {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
}

.admin-wizard-steps li.active span {
    background: #0d6efd;
    color: #fff;
}

.admin-wizard-steps li.done {
    color: #198754;
    background: rgba(25, 135, 84, 0.08);
}

.admin-wizard-steps li.done span {
    background: #198754;
    color: #fff;
}

.admin-wizard-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
}

.admin-wizard-summary-row:last-child {
    border-bottom: 0;
}

.admin-wizard-summary-row span {
    color: #6c757d;
}

.admin-wizard-summary-row strong {
    text-align: right;
}

.admin-wizard-mobile-step {
    display: none;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #f8f9fa;
    font-weight: 700;
}

.admin-wizard-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: #6c757d;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.admin-wizard-or::before,
.admin-wizard-or::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(0, 0, 0, 0.1);
}

.admin-wizard-multi-select {
    min-height: 17rem;
}

.admin-wizard-info-grid,
.admin-wizard-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-wizard-score-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-wizard-info-grid > div,
.admin-wizard-score-grid > div {
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 0.75rem;
    background: #f8f9fa;
    padding: 0.75rem;
}

.admin-wizard-info-grid span {
    display: block;
    color: #6c757d;
    font-size: 0.85rem;
}

.admin-wizard-info-grid strong {
    display: block;
    font-size: 1.1rem;
}

.admin-wizard-actions {
    justify-content: flex-end;
    margin-top: 1.25rem;
}

@media (max-width: 991.98px) {
    .admin-wizard-hero {
        flex-direction: column;
    }

    .admin-wizard-layout {
        grid-template-columns: 1fr;
    }

    .admin-wizard-sidebar {
        position: static;
    }

    .admin-wizard-progress-card {
        overflow-x: auto;
    }

    .admin-wizard-steps {
        flex-direction: row;
        min-width: 720px;
    }

    .admin-wizard-steps li {
        min-width: 140px;
    }

    .admin-wizard-mobile-step {
        display: block;
    }

    .admin-wizard-info-grid,
    .admin-wizard-score-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .admin-wizard-hero,
    .admin-wizard-card,
    .admin-wizard-progress-card,
    .admin-wizard-summary-card {
        border-radius: 0.75rem;
    }

    .admin-wizard-card {
        padding: 1rem;
    }

    .admin-wizard-info-grid,
    .admin-wizard-score-grid {
        grid-template-columns: 1fr;
    }

    .admin-wizard-actions {
        flex-direction: column-reverse;
    }

    .admin-wizard-actions .btn,
    .admin-wizard-hero-actions .btn {
        width: 100%;
    }

    .admin-wizard-multi-select {
        min-height: 12rem;
    }
}

/* Admin Tournament Wizard automation mode selectors */
.admin-wizard-mode-panel {
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #f8fafc;
    border-radius: 1rem;
    padding: 1rem;
}

.admin-wizard-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-wizard-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    border-radius: 0.9rem;
    padding: 0.85rem;
    cursor: pointer;
    min-height: 4.25rem;
}

.admin-wizard-mode-option input {
    margin-top: 0.25rem;
}

.admin-wizard-mode-option span {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.admin-wizard-mode-option small {
    color: #64748b;
    line-height: 1.25;
}

@media (max-width: 767.98px) {
    .admin-wizard-mode-grid {
        grid-template-columns: 1fr;
    }

    .admin-wizard-mode-panel {
        padding: 0.85rem;
    }
}

/* Phase: League Groups + Matches visibility layer */
.tournament-overview-group-card .list-group-item {
    border-left: 0;
    border-right: 0;
}

.tournament-overview-group-card .list-group-item:first-child {
    border-top: 0;
}

.tournament-overview-group-card .list-group-item:last-child {
    border-bottom: 0;
}

.tournament-overview-table th {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .tournament-overview-table {
        min-width: 760px;
    }
}

/* =========================================================
   UI-POLISH-1 - PUBLIC HOME CLEANUP + GLOBAL SUMMARY TITLES
   Additive-only styling. Keeps existing layouts intact while
   making summary/card titles stronger throughout the app.
========================================================= */

.summary-card-title,
.card-summary-title,
.summary-title,
.card-header strong,
.admin-wizard-summary-card > .fw-semibold,
.user1-summary-grid .fw-semibold,
.user1-summary-grid .fs-4,
.user1-summary-grid .fs-3 {
    font-weight: 800 !important;
}

.public-home-about-card {
    border-color: rgba(13, 110, 253, 0.14) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.public-home-about-card .card-header {
    background: transparent;
}

.btn[disabled],
.btn:disabled,
button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
}

@media (max-width: 575.98px) {
    .public-home-about-card .card-body p {
        font-size: 0.94rem;
        line-height: 1.45;
    }
}



/* =========================================================
   UI POLISH - SUMMARY CARD HEADING EMPHASIS
   Makes the small heading at the top of summary/stat cards
   bold across home, admin, leaderboard, access, wizard, and
   similar card grids without changing page logic.
========================================================= */
.card .card-header,
.card .card-header strong,
.border.rounded .text-muted.small:first-child,
.user1-summary-grid .text-muted.small:first-child,
.admin-wizard-summary-card .fw-semibold,
.admin-wizard-progress-card .fw-semibold,
.admin-wizard-info-grid span,
.leaderboard2-page .text-muted.small:first-child,
.access1-page .text-muted.small:first-child,
.admin1-admin-page .text-muted.small:first-child,
.data1-import-page .text-muted.small:first-child {
    font-weight: 700 !important;
}

.public-home-locked-note {
    border-radius: 14px;
    background: #f8fbff;
}

/* =========================================================
   PHASE UI-3 - MOBILE POLISH FOR SHARED LEAGUE NAVIGATION
   Additive-only styling for Pages/Shared/_LeagueNav.cshtml.
   Desktop keeps a clear wrapped layout; mobile becomes a
   horizontal tap-friendly scroll row instead of a tall block.
========================================================= */
.league-nav-shell {
    position: relative;
}

.league-nav-card {
    border-color: rgba(13, 110, 253, 0.14);
    border-radius: 0.9rem;
    overflow: hidden;
}

.league-nav-card-body {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.league-nav-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.league-nav-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: max-content;
}

.league-nav-title {
    letter-spacing: 0.01em;
}

.league-nav-scroll-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.league-nav-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.league-nav-btn,
.league-nav-back-btn {
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .league-nav-layout {
        display: block;
    }

    .league-nav-heading {
        justify-content: space-between;
        width: 100%;
        margin-bottom: 0.55rem;
    }

    .league-nav-scroll-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.15rem;
    }

    .league-nav-scroll-wrap:focus {
        outline: 2px solid rgba(13, 110, 253, 0.25);
        outline-offset: 2px;
        border-radius: 0.75rem;
    }

    .league-nav-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.45rem;
        min-width: max-content;
        padding-right: 0.5rem;
    }

    .league-nav-btn,
    .league-nav-back-btn {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .league-nav-shell {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

    .league-nav-card {
        border-radius: 0.85rem;
    }

    .league-nav-card-body {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .league-nav-title {
        font-size: 0.82rem;
    }

    .league-nav-btn,
    .league-nav-back-btn {
        min-height: 40px;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        font-size: 0.86rem;
    }
}

/* =========================================================
   Phase UI-5: Global compact card density
   Purpose: reduce visual/card clutter across the app without
   shrinking normal text size or changing page functionality.
   ========================================================= */
.app-main-content .card {
    border-radius: 0.85rem;
}

.app-main-content .card-header,
.app-main-content .card-footer {
    padding: 0.6rem 0.85rem;
}

.app-main-content .card-body {
    padding: 0.85rem;
}

.app-main-content .card-body > :last-child,
.app-main-content .card-header > :last-child,
.app-main-content .card-footer > :last-child {
    margin-bottom: 0 !important;
}

.app-main-content .card.mb-4,
.app-main-content .alert.mb-4,
.app-main-content .row.mb-4 {
    margin-bottom: 1rem !important;
}

.app-main-content .card.mb-3,
.app-main-content .alert.mb-3,
.app-main-content .row.mb-3 {
    margin-bottom: 0.75rem !important;
}

.app-main-content .g-4,
.app-main-content .gy-4 {
    --bs-gutter-y: 1rem;
}

.app-main-content .g-4,
.app-main-content .gx-4 {
    --bs-gutter-x: 1rem;
}

.app-main-content .g-3,
.app-main-content .gy-3 {
    --bs-gutter-y: 0.75rem;
}

.app-main-content .g-3,
.app-main-content .gx-3 {
    --bs-gutter-x: 0.75rem;
}

.app-main-content .border.rounded.p-3,
.app-main-content .border.rounded-3.p-3,
.app-main-content .bg-light.rounded.p-3,
.app-main-content .notification-card,
.app-main-content .access1-summary-card,
.app-main-content .access1-dashboard-card {
    padding: 0.75rem !important;
}

.app-main-content .p-4.card-body,
.app-main-content .card-body.p-4,
.app-main-content .p-4.border,
.app-main-content .p-4.bg-light {
    padding: 1rem !important;
}

.app-main-content .display-5,
.app-main-content .display-6 {
    margin-bottom: 0.35rem;
}

.app-main-content h1,
.app-main-content h2,
.app-main-content h3,
.app-main-content h4,
.app-main-content h5,
.app-main-content h6 {
    margin-bottom: 0.45rem;
}

.app-main-content p,
.app-main-content ul,
.app-main-content ol {
    margin-bottom: 0.65rem;
}

.app-main-content .lead {
    margin-bottom: 0.75rem;
}

.app-main-content .btn {
    border-radius: 0.65rem;
}

.app-main-content .btn-sm {
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

.app-main-content .badge {
    border-radius: 999px;
}

.app-main-content .table > :not(caption) > * > * {
    padding: 0.52rem 0.6rem;
}

.app-main-content .table-sm > :not(caption) > * > * {
    padding: 0.34rem 0.45rem;
}

.app-main-content .form-label {
    margin-bottom: 0.25rem;
}

.app-main-content .form-control,
.app-main-content .form-select {
    border-radius: 0.65rem;
}

.app-main-content .alert {
    border-radius: 0.85rem;
    padding: 0.75rem 0.9rem;
}

.app-main-content .list-group-item {
    padding: 0.6rem 0.8rem;
}

.app-main-content .league-nav-shell {
    margin-bottom: 0.8rem !important;
}

.app-main-content .league-nav-card-body {
    padding: 0.6rem 0.75rem;
}

.app-main-content .league-nav-actions {
    gap: 0.4rem;
}

@media (max-width: 991.98px) {
    .app-main-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .app-main-content .card-header,
    .app-main-content .card-footer {
        padding: 0.55rem 0.75rem;
    }

    .app-main-content .card-body {
        padding: 0.75rem;
    }

    .app-main-content .card.mb-4,
    .app-main-content .alert.mb-4,
    .app-main-content .row.mb-4 {
        margin-bottom: 0.85rem !important;
    }

    .app-main-content .g-4,
    .app-main-content .gy-4,
    .app-main-content .g-3,
    .app-main-content .gy-3 {
        --bs-gutter-y: 0.7rem;
    }

    .app-main-content .g-4,
    .app-main-content .gx-4,
    .app-main-content .g-3,
    .app-main-content .gx-3 {
        --bs-gutter-x: 0.7rem;
    }

    .app-main-content .table-responsive {
        margin-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .app-main-content .card {
        border-radius: 0.75rem;
    }

    .app-main-content .card-header,
    .app-main-content .card-footer {
        padding: 0.5rem 0.65rem;
    }

    .app-main-content .card-body {
        padding: 0.65rem;
    }

    .app-main-content .border.rounded.p-3,
    .app-main-content .border.rounded-3.p-3,
    .app-main-content .bg-light.rounded.p-3,
    .app-main-content .notification-card,
    .app-main-content .access1-summary-card,
    .app-main-content .access1-dashboard-card {
        padding: 0.65rem !important;
    }

    .app-main-content .btn:not(.league-nav-btn):not(.league-nav-back-btn) {
        min-height: 36px;
    }

    .app-main-content .btn-sm:not(.league-nav-btn):not(.league-nav-back-btn) {
        min-height: 32px;
    }
}


/* UI-6: remove non-actionable access/visibility helper pills globally. */
.access1-context-pill,
.access1-visibility-note {
    display: none !important;
}


/* =========================================================
   PHASE UI-7 SAFE MERGE - PICK FLOW DENSITY + MOBILE POLISH
   Additive-only. Uses the current uploaded Razor files as the
   source of truth and only improves visual density/flow.
========================================================= */

.ux7-matches-page .card-header,
.ux7-mypicks-page .card-header,
.ux7-pick-page .card-header {
    min-height: auto;
}

.ux7-matches-page .card-body,
.ux7-mypicks-page .card-body,
.ux7-pick-page .card-body {
    scroll-margin-top: 7rem;
}

.ux7-matches-page .border.rounded,
.ux7-mypicks-page .border.rounded,
.ux7-pick-page .border.rounded {
    border-radius: 0.75rem !important;
}

.ux7-matches-page .progress,
.ux7-mypicks-page .progress,
.ux7-pick-page .progress {
    border-radius: 999px;
    overflow: hidden;
}

.ux7-matches-page .match-mobile-card,
.ux7-mypicks-page .user-mobile-action-card,
.ux7-mypicks-page .user-mobile-near-lock,
.ux7-mypicks-page .ux3-pick-review-card {
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.ux7-matches-page .match-mobile-card:hover,
.ux7-mypicks-page .ux3-pick-review-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.ux7-pick-page .ux3-build-pick-card .card-body > .alert,
.ux7-pick-page .ux3-build-pick-card .card-body > .border.rounded,
.ux7-matches-page .card-body > .alert,
.ux7-mypicks-page .card-body > .alert {
    margin-bottom: 0.85rem;
}

.ux7-pick-page .ux3-score-field input[type="number"] {
    letter-spacing: 0.02em;
}

.ux7-pick-page .confidence-option-card {
    min-height: 100%;
}

@media (min-width: 992px) {
    .ux7-matches-page .match-mobile-card,
    .ux7-mypicks-page .user-mobile-action-card {
        display: none;
    }

    .ux7-pick-page .ux3-pick-save-bar {
        position: sticky;
        bottom: 0.5rem;
        z-index: 10;
        border: 1px solid rgba(15, 23, 42, 0.10);
        border-radius: 0 0 0.85rem 0.85rem;
        box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.04);
    }
}

@media (max-width: 991.98px) {
    .ux7-matches-page .card.mb-4.border-info-subtle,
    .ux7-matches-page .card.mb-4.border-secondary,
    .ux7-mypicks-page .card.mb-4.border-info-subtle,
    .ux7-mypicks-page .row.g-4.mb-4,
    .ux7-pick-page .ux3-guided-card,
    .ux7-pick-page .ai-suggestion-panel,
    .ux7-pick-page .card.mb-4.border-primary-subtle {
        margin-bottom: 0.75rem !important;
    }

    .ux7-matches-page .match-mobile-card .card-body,
    .ux7-mypicks-page .ux3-pick-review-card,
    .ux7-pick-page .ux3-build-pick-card .card-body {
        padding: 0.75rem;
    }

    .ux7-matches-page .card-header,
    .ux7-mypicks-page .card-header,
    .ux7-pick-page .card-header {
        gap: 0.4rem !important;
    }

    .ux7-pick-page .ux3-pick-save-bar {
        border-radius: 0.85rem 0.85rem 0 0;
    }
}

@media (max-width: 575.98px) {
    .ux7-matches-page .row.g-3.mb-4 > [class*="col-"],
    .ux7-mypicks-page .row.g-3.mb-4 > [class*="col-"],
    .ux7-pick-page .row.g-3.mb-4 > [class*="col-"] {
        margin-bottom: 0;
    }

    .ux7-matches-page .fs-3,
    .ux7-mypicks-page .fs-3,
    .ux7-pick-page .fs-3 {
        line-height: 1.05;
    }

    .ux7-pick-page .ux3-pick-save-bar .small.text-muted {
        display: none;
    }

    .ux7-pick-page .ux3-build-pick-card {
        margin-bottom: 0.5rem !important;
    }

    .ux7-pick-page .confidence-option-card {
        padding: 0.7rem;
    }
}

/* =========================================================
   PHASE UI-9 - LEAGUE PAGE CONSISTENCY PASS
   Additive-only styling for league pages after helper-noise
   cleanup. Keeps existing actions, forms, and model behavior.
========================================================= */

.ux9-league-page {
    --ux9-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    --ux9-card-border: rgba(15, 23, 42, 0.08);
}

.ux9-league-page .card {
    border-color: var(--ux9-card-border);
    box-shadow: var(--ux9-card-shadow);
}

.ux9-page-hero {
    padding: 1rem;
    border: 1px solid var(--ux9-card-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--ux9-card-shadow);
}

.ux9-league-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--ux9-card-border);
}

.ux9-league-page .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
}

.ux9-league-page .table {
    margin-bottom: 0;
}

.ux9-league-page .border.rounded,
.ux9-league-page .border.rounded.p-2,
.ux9-league-page .border.rounded.p-3 {
    border-radius: 14px !important;
}

.ux9-league-page .badge {
    white-space: normal;
    line-height: 1.15;
}

.ux9-bracket-page .visual-bracket-scroll {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    background: #ffffff;
}

@media (max-width: 991.98px) {
    .ux9-page-hero {
        align-items: stretch !important;
        flex-direction: column;
        padding: 0.9rem;
        border-radius: 16px;
    }

    .ux9-page-hero > .d-flex,
    .ux9-page-hero .d-flex.gap-2.flex-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .ux9-page-hero .btn {
        width: 100%;
    }

    .ux9-league-page .card-header {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .ux9-page-hero > .d-flex,
    .ux9-page-hero .d-flex.gap-2.flex-wrap {
        grid-template-columns: 1fr;
    }

    .ux9-league-page .d-flex.gap-2.flex-wrap > .btn,
    .ux9-league-page .d-flex.gap-3.flex-wrap > .btn {
        width: 100%;
    }
}


/* =========================================================
   PHASE WC-6 - LIVE MATCH + LEADERBOARD EXCITEMENT
   Additive-only live match badges, pulse cards, and mobile polish.
========================================================= */

.match-mobile-card-live {
    border-left-color: #dc3545 !important;
    box-shadow: 0 10px 24px rgba(220, 53, 69, 0.10);
}

.wc6-live-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}

.wc6-live-tile {
    border: 1px solid rgba(220, 53, 69, 0.20);
    border-left: 0.35rem solid #dc3545;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.85rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.wc6-live-row > td {
    box-shadow: inset 0 0 0 9999px rgba(220, 53, 69, 0.055);
}

.wc6-leaderboard-pulse-card {
    border-left: 0.35rem solid #0d6efd;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.wc6-pulse-tile {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.85rem;
}

.wc6-pulse-tile .fw-semibold {
    font-size: 1.05rem;
}

@media (max-width: 767.98px) {
    .wc6-live-panel .card-header,
    .wc6-leaderboard-pulse-card .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .wc6-live-tile .btn,
    .wc6-leaderboard-pulse-card .btn {
        width: 100%;
    }

    .wc6-pulse-tile {
        padding: 0.75rem;
    }
}

/* =========================================================
   PHASE WC-7 - BRACKET INTELLIGENCE + CHAMPION PATH
   Additive-only bracket guidance, champion summary, and mobile polish.
========================================================= */

.wc7-champion-path-card,
.wc7-pick-path-card,
.wc7-mypicks-bracket-card {
    border-left: 0.35rem solid #0d6efd;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.wc7-champion-path-card-action {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.wc7-path-tile,
.wc7-path-stat {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
    padding: 0.85rem;
}

.wc7-path-stat {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.wc7-bracket-warning {
    border-left: 0.35rem solid #ffc107;
}

.wc7-pick-path-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.wc7-mypicks-bracket-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

@media (max-width: 767.98px) {
    .wc7-champion-path-card .card-header,
    .wc7-pick-path-card .card-body,
    .wc7-mypicks-bracket-card .card-body {
        align-items: stretch !important;
        flex-direction: column;
    }

    .wc7-champion-path-card .btn,
    .wc7-pick-path-card .btn,
    .wc7-mypicks-bracket-card .btn {
        width: 100%;
    }

    .wc7-path-tile,
    .wc7-path-stat {
        padding: 0.75rem;
    }
}


/* =========================================================
   PHASE WC-8 - ENGAGEMENT + GAMIFICATION LAYER
   Additive-only badges, streaks, accuracy tiles, and mobile polish.
========================================================= */

.wc8-engagement-panel,
.wc8-leaderboard-engagement-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 0.35rem solid #6610f2;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    padding: 0.85rem 1rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.wc8-leaderboard-engagement-card {
    padding: 0;
}

.wc8-engagement-tile {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
    padding: 0.85rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.wc8-engagement-tile .badge {
    white-space: normal;
    line-height: 1.15;
}

@media (max-width: 767.98px) {
    .wc8-engagement-panel {
        padding: 0.75rem;
        border-radius: 14px;
    }

    .wc8-leaderboard-engagement-card .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .wc8-engagement-tile {
        padding: 0.75rem;
    }
}


/* =========================================================
   PHASE WC-9 - SOCIAL + COMPETITION LAYER
   Safe append-only crowd pick percentages and social insight cards.
========================================================= */

.wc9-insight-card,
.wc9-leaderboard-social-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 0.35rem solid #0d6efd;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.wc9-insight-card {
    padding: 0.85rem;
}

.wc9-insight-card-compact {
    padding: 0.55rem 0.7rem;
}

.wc9-differential {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.wc9-popular {
    border-left-color: #0d6efd;
}

.wc9-social-tile {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
    padding: 0.85rem;
}

.wc9-bar-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 3rem;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.wc9-progress {
    height: 0.52rem;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.wc9-progress > div {
    height: 100%;
    border-radius: 999px;
    background: #0d6efd;
}

@media (max-width: 767.98px) {
    .wc9-insight-card,
    .wc9-social-tile {
        padding: 0.75rem;
    }

    .wc9-bar-row {
        grid-template-columns: 3rem minmax(0, 1fr) 2.75rem;
        gap: 0.4rem;
    }

    .wc9-leaderboard-social-card .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }
}


/* =========================================================
   PHASE WC-10/11/12 - SMART INSIGHTS + NOTIFICATIONS + MOBILE POLISH
   Safe append-only. No existing selectors are removed or replaced.
========================================================= */

.wc10-smart-command-card,
.wc10-smart-tile,
.wc11-notification-tile,
.wc12-mobile-tile {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.wc10-smart-command-card {
    border-left: 0.35rem solid #20c997;
    padding: 0.9rem 1rem;
}

.wc10-smart-tile,
.wc11-notification-tile,
.wc12-mobile-tile {
    padding: 0.85rem;
    height: 100%;
}

.wc10-smart-tile {
    border-left: 0.28rem solid #20c997;
}

.wc11-notification-tile {
    border-left: 0.28rem solid #ffc107;
}

.wc12-mobile-tile {
    border-left: 0.28rem solid #0d6efd;
}

.wc10-smart-mini {
    border: 1px solid rgba(32, 201, 151, 0.18);
    border-radius: 12px;
    background: #f6fffb;
    padding: 0.55rem 0.65rem;
}

.wc12-mobile-save-hint {
    border: 1px solid rgba(13, 110, 253, 0.16);
    border-radius: 12px;
    background: #f8fbff;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
}

@media (max-width: 767.98px) {
    .wc10-smart-command-card {
        padding: 0.75rem;
        border-radius: 14px;
    }

    .wc10-smart-command-card .btn,
    .wc11-notification-tile .btn,
    .wc12-mobile-tile .btn {
        width: 100%;
    }

    .wc10-smart-tile,
    .wc11-notification-tile,
    .wc12-mobile-tile,
    .wc10-smart-mini {
        padding: 0.75rem;
    }
}
/* =========================================================
   PHASE LQ-1 - LEAGUE MEMBER QUOTA + SUPERADMIN APPROVAL
   Safe append-only styles for league capacity controls.
========================================================= */

.league-quota-card,
.league-quota-request-card {
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.league-quota-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.league-quota-request-card {
    background: #ffffff;
}

.league-quota-select {
    min-width: 8.5rem;
    max-width: 11rem;
}

.league-quota-note {
    min-width: 12rem;
    max-width: 18rem;
}

@media (max-width: 767.98px) {
    .league-quota-card .card-header,
    .league-quota-request-card .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .league-quota-select,
    .league-quota-note,
    .league-quota-card .btn,
    .league-quota-request-card .btn {
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================================
   MOBILE UI POLISH - MATCH LIST + FIFA SETUP WIZARD
   Safe append-only overrides. Prevents narrow desktop/tablet
   layouts from squeezing table columns and stops the setup
   wizard step flow from forcing horizontal page overflow.
========================================================= */

@media (max-width: 1199.98px) {
    .ux7-matches-page .match-mobile-card,
    .ux9-league-page .match-mobile-card {
        display: block;
    }

    .ux7-matches-page .match-mobile-card .badge,
    .ux9-league-page .match-mobile-card .badge,
    .wc6-live-panel .badge,
    .wc9-insight-card .badge,
    .wc10-smart-command-card .badge {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.2;
    }

    .ux7-matches-page .match-mobile-card .btn,
    .ux9-league-page .match-mobile-card .btn {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.25;
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    .admin-wizard-page {
        max-width: 100%;
        overflow-x: hidden;
    }

    .admin-wizard-layout,
    .admin-wizard-sidebar,
    .admin-wizard-progress-card,
    .admin-wizard-summary-card,
    .admin-wizard-card,
    .admin-wizard-mode-panel,
    .admin-wizard-info-grid,
    .admin-wizard-score-grid {
        min-width: 0;
        max-width: 100%;
    }

    .admin-wizard-progress-card {
        overflow-x: visible;
    }

    .admin-wizard-steps {
        min-width: 0 !important;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .admin-wizard-steps li {
        min-width: 0 !important;
        width: 100%;
        align-items: flex-start;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.25;
    }

    .admin-wizard-steps li span {
        flex: 0 0 auto;
    }

    .admin-wizard-summary-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .admin-wizard-summary-row strong {
        text-align: left;
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 575.98px) {
    .admin-wizard-hero,
    .admin-wizard-card,
    .admin-wizard-progress-card,
    .admin-wizard-summary-card,
    .admin-wizard-mode-panel {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .admin-wizard-mobile-step,
    .admin-wizard-card h2,
    .admin-wizard-page h1,
    .admin-wizard-page h2 {
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.25;
    }

    .admin-wizard-mode-option,
    .admin-wizard-card .form-check,
    .admin-wizard-info-grid > div,
    .admin-wizard-score-grid > div {
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* =========================================================
   PHASE REQ-1 - DENIED REQUEST RESUBMISSION GUARD
   Safe append-only styles for repeated request warnings.
========================================================= */

.req1-denied-warning {
    border-left: 0.35rem solid #dc3545;
    border-radius: 14px;
    background: #fff5f5;
    color: #842029;
}

.req1-denied-warning .small {
    color: #842029;
}

.req1-resubmission-note {
    border: 1px solid rgba(220, 53, 69, 0.22);
    border-radius: 14px;
    background: #fff8f8;
    padding: 0.75rem;
}

@media (max-width: 767.98px) {
    .req1-denied-warning,
    .req1-resubmission-note {
        padding: 0.7rem;
    }

    .req1-denied-warning .btn,
    .req1-resubmission-note .btn {
        width: 100%;
    }
}

/* =========================================================
   GLOBAL BASE
========================================================= */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
    border-radius: 12px;
}

.badge {
    font-size: 0.75rem;
}

/* =========================================================
   MOBILE UX
========================================================= */

@media (max-width: 768px) {
    .sticky-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #ddd;
        padding: 10px;
        z-index: 1000;
    }

    .mobile-card {
        margin-bottom: 12px;
    }
}

/* =========================================================
   (ALL YOUR EXISTING CSS REMAINS EXACTLY AS IS)
   I AM NOT REMOVING ANYTHING
========================================================= */

/* =========================================================
   PHASE REQ-2 - DENIAL COUNT + LOCK STATE (ADDITIVE ONLY)
========================================================= */

.req2-denied-warning {
    border-left: 4px solid #dc3545;
    background: #fff5f5;
    color: #842029;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

    .req2-denied-warning strong {
        font-weight: 700;
    }

.req2-denial-counter {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 0.75rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-weight: 700;
}

.req2-lock-warning {
    border-left: 4px solid #6c757d;
    background: #f8f9fa;
    color: #343a40;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

    .req2-lock-warning strong {
        color: #000;
    }

.req2-escalation-box {
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 12px;
    background: #fff8f8;
    padding: 10px;
    margin-top: 8px;
}

    .req2-escalation-box textarea {
        width: 100%;
        min-height: 90px;
        border-radius: 8px;
    }

.req2-admin-unlock-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: #343a40;
    color: #fff;
    font-size: 0.75rem;
}
/* =========================================================
   PHASE 1 - USER MOBILE COMMAND CENTER + BOTTOM NAV
   UI-only, additive styling. No database or behavior change.
========================================================= */

.phase1-mobile-command-center {
    padding: 0.9rem;
    border: 1px solid rgba(13, 110, 253, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.phase1-mobile-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.phase1-mobile-command-title {
    color: #495057;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.phase1-mobile-command-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 48%;
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(13, 110, 253, 0.18);
    border-radius: 999px;
    background: #eef5ff;
    color: #0d47a1;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.phase1-mobile-command-main {
    margin-bottom: 0.75rem;
}

.phase1-mobile-command-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.phase1-mobile-command-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-weight: 800;
}

.app-mobile-bottom-nav {
    position: fixed;
    left: 0.65rem;
    right: 0.65rem;
    bottom: max(0.55rem, env(safe-area-inset-bottom));
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.38rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
}

.app-mobile-bottom-nav-item {
    min-height: 52px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    border-radius: 16px;
    color: #334155;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

.app-mobile-bottom-nav-item:focus,
.app-mobile-bottom-nav-item:hover {
    background: #f1f5ff;
    color: #0d6efd;
    text-decoration: none;
}

.app-mobile-bottom-nav-primary {
    background: #0d6efd;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.28);
}

.app-mobile-bottom-nav-primary:focus,
.app-mobile-bottom-nav-primary:hover {
    background: #0b5ed7;
    color: #ffffff;
}

.app-mobile-bottom-nav-icon {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 991.98px) {
    body.app-body {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }

    .app-header.sticky-top {
        position: sticky;
        top: 0;
    }

    .app-main-container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .app-navbar .navbar-collapse.show,
    .app-navbar .navbar-collapse.collapsing {
        margin-top: 0.65rem;
        padding: 0.65rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    }

    .app-nav-primary .nav-link,
    .app-dropdown-menu .dropdown-item,
    .app-dropdown-menu .dropdown-item-text {
        min-height: 42px;
        display: flex;
        align-items: center;
    }

    .user1-home-hero .display-5 {
        font-size: clamp(1.75rem, 8vw, 2.3rem);
        line-height: 1.05;
    }

    .user1-home-hero .lead {
        font-size: 0.98rem;
    }
}

@media (max-width: 380px) {
    .phase1-mobile-command-actions {
        grid-template-columns: 1fr;
    }

    .app-mobile-bottom-nav {
        left: 0.4rem;
        right: 0.4rem;
    }

    .app-mobile-bottom-nav-item {
        font-size: 0.64rem;
    }
}


/* =========================================================
   Phase 2 — Picks / Bracket / Leaderboard Mobile Fun Layer
   UI-only additions. No database or server-side behavior changes.
   ========================================================= */

.phase2-mobile-pick-coach,
.phase2-mobile-bracket-coach,
.phase2-mobile-leaderboard-coach,
.phase2-mobile-pick-dock {
    display: none;
}

.phase2-mobile-pick-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.phase2-mobile-pick-steps > div {
    border: 1px solid rgba(13, 110, 253, 0.18);
    border-radius: 1rem;
    padding: 0.75rem 0.65rem;
    background: linear-gradient(180deg, rgba(13, 110, 253, 0.06), rgba(255, 255, 255, 0.96));
    text-align: center;
}

.phase2-mobile-pick-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #0d6efd;
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.phase2-mobile-pick-steps strong,
.phase2-mobile-pick-steps small {
    display: block;
}

.phase2-bracket-mobile-actions,
.phase2-leaderboard-mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.phase2-bracket-mobile-actions .btn,
.phase2-leaderboard-mobile-actions .btn {
    min-height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .phase2-mobile-pick-coach,
    .phase2-mobile-bracket-coach,
    .phase2-mobile-leaderboard-coach {
        display: block;
        border: 1px solid rgba(13, 110, 253, 0.18);
        border-radius: 1.15rem;
        box-shadow: 0 0.65rem 1.5rem rgba(15, 23, 42, 0.08);
    }

    .phase2-mobile-pick-dock {
        position: sticky;
        bottom: 4.85rem;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        padding: 0.7rem;
        margin: 1rem 0 0.25rem;
        border: 1px solid rgba(13, 110, 253, 0.18);
        border-radius: 1.1rem;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -0.5rem 1.5rem rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(10px);
    }

    .phase2-mobile-pick-dock .btn {
        min-height: 2.85rem;
        font-weight: 700;
    }

    .ux3-pick-layout {
        row-gap: 1rem;
    }

    .ux3-build-pick-card,
    .ux3-side-card,
    .leaderboard2-page .card,
    .visual-bracket-match-card {
        border-radius: 1rem;
    }

    .ux3-pick-save-bar {
        align-items: stretch !important;
    }

    .ux3-pick-save-bar > .d-flex {
        width: 100%;
        flex-direction: column;
    }

    .ux3-pick-save-bar .btn {
        width: 100%;
        min-height: 2.85rem;
    }

    .visual-bracket-shell,
    .visual-bracket-board,
    .visual-bracket-scroll,
    .bracket-scroll,
    .bracket-board {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .visual-bracket-stage,
    .bracket-round {
        scroll-snap-align: start;
    }

    .visual-bracket-match-card-user-picked {
        position: relative;
    }

    .visual-bracket-match-card-user-picked::before {
        content: "You picked";
        position: absolute;
        top: -0.55rem;
        right: 0.75rem;
        padding: 0.18rem 0.5rem;
        border-radius: 999px;
        background: #0d6efd;
        color: #fff;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

    .leaderboard-current-user-row > td:first-child,
    tr.leaderboard-current-user-row > td:first-child {
        position: relative;
    }

    .leaderboard-current-user-row > td:first-child::after,
    tr.leaderboard-current-user-row > td:first-child::after {
        content: "You";
        display: inline-flex;
        margin-left: 0.35rem;
        padding: 0.08rem 0.45rem;
        border-radius: 999px;
        background: #0d6efd;
        color: #fff;
        font-size: 0.68rem;
        font-weight: 800;
        vertical-align: middle;
    }
}

@media (max-width: 420px) {
    .phase2-bracket-mobile-actions,
    .phase2-leaderboard-mobile-actions {
        grid-template-columns: 1fr;
    }

    .phase2-mobile-pick-dock {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PHASE 3 - ADMIN UX COMMAND CENTER + MOBILE ADMIN POLISH
   Safe additive styling only. No database, model, service, or
   server-side behavior changes are required for this phase.
========================================================= */

.admin3-admin-page {
    --admin3-border: rgba(15, 23, 42, 0.08);
    --admin3-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.admin3-hero {
    border-left: 0.35rem solid #0d6efd;
}

.admin3-hero-actions .btn {
    min-height: 40px;
    font-weight: 700;
}

.admin3-mobile-jumpbar {
    display: none;
}

.admin3-command-card {
    border: 1px solid var(--admin3-border);
    box-shadow: var(--admin3-shadow);
}

.admin3-command-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.admin3-command-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 100%;
    padding: 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left-width: 0.35rem;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.admin3-command-tile-primary { border-left-color: #0d6efd; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.admin3-command-tile-success { border-left-color: #198754; background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%); }
.admin3-command-tile-info { border-left-color: #0dcaf0; background: linear-gradient(180deg, #ffffff 0%, #f6fdff 100%); }
.admin3-command-tile-danger { border-left-color: #dc3545; background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%); }
.admin3-command-tile-dark { border-left-color: #343a40; background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%); }

.admin3-command-icon {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(13, 110, 253, 0.08);
    font-size: 1.18rem;
}

.admin3-command-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.admin3-command-title {
    font-weight: 800;
    line-height: 1.1;
}

.admin3-command-text {
    color: #6c757d;
    font-size: 0.86rem;
    line-height: 1.35;
}

.admin3-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
}

.admin3-command-actions .btn {
    font-weight: 700;
    white-space: normal;
}

.admin3-workflow-tile {
    padding: 0.9rem;
    border: 1px solid var(--admin3-border);
    border-left-width: 0.35rem;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.admin3-workflow-warning { border-left-color: #ffc107; }
.admin3-workflow-success { border-left-color: #198754; }
.admin3-workflow-danger { border-left-color: #dc3545; }
.admin3-workflow-info { border-left-color: #0dcaf0; }

.admin3-workflow-label {
    color: #6c757d;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin3-workflow-value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
}

.admin3-admin-page .table-responsive td .btn,
.admin3-admin-page .table-responsive td a.btn {
    white-space: normal;
}

.admin3-admin-daily-panel,
.admin3-wizard-command-strip {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 0.35rem solid #0d6efd;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.admin3-admin-daily-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
}

.admin3-admin-daily-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.admin3-wizard-command-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.85rem;
}

.admin3-wizard-command-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 14px;
    background: #ffffff;
}

.admin3-wizard-command-item span {
    grid-row: 1 / span 2;
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0d6efd;
    color: #ffffff;
    font-weight: 800;
}

.admin3-wizard-command-item strong {
    font-weight: 800;
    line-height: 1.2;
}

.admin3-wizard-command-item small {
    color: #6c757d;
    line-height: 1.3;
}

.admin3-wizard-form-card {
    border-left: 0.35rem solid #0d6efd;
}

.admin3-setup-wizard-page .admin-wizard-check-tile,
.admin3-setup-wizard-page .admin-wizard-mode-option,
.admin3-setup-wizard-page .form-check.border {
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.admin3-setup-wizard-page .admin-wizard-check-tile:hover,
.admin3-setup-wizard-page .admin-wizard-mode-option:hover,
.admin3-setup-wizard-page .form-check.border:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

@media (max-width: 1199.98px) {
    .admin3-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin3-mobile-jumpbar {
        position: sticky;
        top: 0.45rem;
        z-index: 1015;
        display: flex;
        gap: 0.45rem;
        overflow-x: auto;
        padding: 0.5rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        -webkit-overflow-scrolling: touch;
    }

    .admin3-mobile-jumpbar a {
        flex: 0 0 auto;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.65rem;
        border: 1px solid rgba(13, 110, 253, 0.18);
        border-radius: 999px;
        background: #f8fbff;
        color: #0d6efd;
        font-size: 0.78rem;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
    }

    .admin3-command-grid,
    .admin3-wizard-command-strip {
        grid-template-columns: 1fr;
    }

    .admin3-command-tile {
        min-height: auto;
    }

    .admin3-command-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .admin3-command-actions .btn {
        width: 100%;
    }

    .admin3-admin-daily-panel {
        align-items: stretch;
        flex-direction: column;
        padding: 0.85rem;
    }

    .admin3-admin-daily-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .admin3-admin-daily-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .admin3-command-tile {
        flex-direction: column;
        padding: 0.8rem;
    }

    .admin3-command-icon {
        width: 2.1rem;
        height: 2.1rem;
    }

    .admin3-command-actions,
    .admin3-admin-daily-actions {
        grid-template-columns: 1fr;
    }

    .admin3-workflow-value {
        font-size: 1.55rem;
    }

    .admin3-wizard-command-item {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.68rem;
    }

    .admin3-admin-page .table-responsive td .btn,
    .admin3-admin-page .table-responsive td a.btn,
    .admin3-admin-page form .btn {
        width: 100%;
    }
}
   PHASE 4 - LEAGUE TEMPLATE ADS + CLONE SYNC
   Safe additive styles for SuperAdmin template advertisement
   and admin clone-sync controls.
========================================================= */

.league-template-page {
    --league-template-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    --league-template-card-border: rgba(15, 23, 42, 0.08);
}

.league-template-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--league-template-card-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--league-template-card-shadow);
}

.league-template-page .card,
.league-template-page .border.rounded {
    border-color: var(--league-template-card-border) !important;
    box-shadow: var(--league-template-card-shadow);
}

.league-template-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--league-template-card-border);
}

.league-template-recipient-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.league-template-recipient {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
}

.league-template-recipient input {
    margin-top: 0.22rem;
}

.league-template-recipient span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.league-template-recipient small {
    color: #6c757d;
    overflow-wrap: anywhere;
}

.league-template-ad-card,
.league-template-available-card,
.league-template-sync-card {
    background: #ffffff;
}

.league-template-available-card {
    border-left: 0.35rem solid #198754 !important;
}

.league-template-sync-card {
    border-left: 0.35rem solid #0dcaf0 !important;
}

.league-template-ad-card {
    border-left: 0.35rem solid #0d6efd !important;
}

@media (max-width: 991.98px) {
    .league-template-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 0.9rem;
        border-radius: 16px;
    }

    .league-template-hero .btn,
    .league-template-page .card-header .btn {
        width: 100%;
    }

    .league-template-recipient-grid {
        grid-template-columns: 1fr;
        max-height: 22rem;
    }

    .league-template-page .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .league-template-page .d-flex.gap-2.flex-wrap > .btn,
    .league-template-page .d-flex.gap-3.flex-wrap > .btn,
    .league-template-page form .btn {
        width: 100%;
    }

    .league-template-page .table-responsive table,
    .league-template-page .table-responsive thead,
    .league-template-page .table-responsive tbody,
    .league-template-page .table-responsive th,
    .league-template-page .table-responsive td,
    .league-template-page .table-responsive tr {
        display: block;
        width: 100%;
    }

    .league-template-page .table-responsive thead {
        display: none;
    }

    .league-template-page .table-responsive tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .league-template-page .table-responsive td {
        border: 0;
        padding: 0.35rem 0;
        text-align: left !important;
    }
}


/* =========================================================
   PHASE 5A - OFFICIAL DATA IMPORT / SYNC CENTER
   Safe additive styles only. Supports CSV/manual official data
   preview + apply flow without changing existing UI behavior.
========================================================= */

.official-data-page {
    --official-data-border: rgba(15, 23, 42, 0.08);
    --official-data-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.official-data-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--official-data-border);
    border-left: 0.35rem solid #198754;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fff9 100%);
    box-shadow: var(--official-data-shadow);
}

.official-data-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.official-data-card,
.official-data-page .card {
    border-color: var(--official-data-border);
    box-shadow: var(--official-data-shadow);
}

.official-data-page .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom-color: var(--official-data-border);
}

.official-data-safe-note,
.official-data-selected-league,
.official-data-commit-box,
.official-data-summary-tile {
    border-radius: 14px;
}

.official-data-selected-league {
    padding: 0.75rem;
    border: 1px solid rgba(13, 110, 253, 0.14);
    background: #f8fbff;
}

.official-data-or {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #6c757d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.official-data-or::before,
.official-data-or::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(15, 23, 42, 0.12);
}

.official-data-summary-tile {
    padding: 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

.official-data-summary-tile span {
    display: block;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.official-data-summary-tile strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.45rem;
    line-height: 1.1;
}

.official-data-commit-box {
    padding: 0.85rem;
    border: 1px solid rgba(25, 135, 84, 0.22);
    background: #f6fff9;
}

.official-data-preview-table td,
.official-data-preview-table th {
    vertical-align: top;
}

.official-data-sample {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.82rem;
}

@media (max-width: 991.98px) {
    .official-data-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 0.9rem;
        border-radius: 16px;
    }

    .official-data-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .official-data-hero-actions .btn,
    .official-data-page .card-header .btn {
        width: 100%;
    }

    .official-data-page .card-header {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.45rem;
    }
}

@media (max-width: 575.98px) {
    .official-data-hero-actions {
        grid-template-columns: 1fr;
    }

    .official-data-page .d-flex.gap-2.flex-wrap > .btn,
    .official-data-page .d-flex.gap-3.flex-wrap > .btn,
    .official-data-page form .btn {
        width: 100%;
    }

    .official-data-preview-table,
    .official-data-preview-table thead,
    .official-data-preview-table tbody,
    .official-data-preview-table th,
    .official-data-preview-table td,
    .official-data-preview-table tr {
        display: block;
        width: 100%;
    }

    .official-data-preview-table thead {
        display: none;
    }

    .official-data-preview-table tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .official-data-preview-table td {
        border: 0;
        padding: 0.35rem 0;
        text-align: left !important;
    }

    .official-data-preview-table td::before {
        display: block;
        margin-bottom: 0.12rem;
        color: #6c757d;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .official-data-preview-table td:nth-child(1)::before { content: "CSV Row"; }
    .official-data-preview-table td:nth-child(2)::before { content: "Status"; }
    .official-data-preview-table td:nth-child(3)::before { content: "Match"; }
    .official-data-preview-table td:nth-child(4)::before { content: "Teams"; }
    .official-data-preview-table td:nth-child(5)::before { content: "Venue"; }
    .official-data-preview-table td:nth-child(6)::before { content: "Action"; }
    .official-data-preview-table td:nth-child(7)::before { content: "Notes"; }
}

/* =========================================================
   PHASE 5C - OFFICIAL TEXT IMPORT FROM WORD / NOTEPAD
   Safe additive styling. No database or package dependency.
========================================================= */

.official-text-import-page .official-text-import-textarea {
    min-height: 18rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.88rem;
    line-height: 1.35;
}

.official-text-import-promo {
    border-left: 0.35rem solid #198754 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
}

.official-text-team-preview-table td,
.official-text-match-preview-table td {
    vertical-align: top;
}

@media (max-width: 575.98px) {
    .official-text-import-page .official-text-import-textarea {
        min-height: 14rem;
        font-size: 0.82rem;
    }

    .official-text-import-page .official-text-team-preview-table table,
    .official-text-import-page .official-text-team-preview-table thead,
    .official-text-import-page .official-text-team-preview-table tbody,
    .official-text-import-page .official-text-team-preview-table th,
    .official-text-import-page .official-text-team-preview-table td,
    .official-text-import-page .official-text-team-preview-table tr,
    .official-text-import-page .official-text-match-preview-table table,
    .official-text-import-page .official-text-match-preview-table thead,
    .official-text-import-page .official-text-match-preview-table tbody,
    .official-text-import-page .official-text-match-preview-table th,
    .official-text-import-page .official-text-match-preview-table td,
    .official-text-import-page .official-text-match-preview-table tr {
        display: block;
        width: 100%;
    }

    .official-text-import-page .official-text-team-preview-table thead,
    .official-text-import-page .official-text-match-preview-table thead {
        display: none;
    }

    .official-text-import-page .official-text-team-preview-table tr,
    .official-text-import-page .official-text-match-preview-table tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .official-text-import-page .official-text-team-preview-table td,
    .official-text-import-page .official-text-match-preview-table td {
        border: 0;
        padding: 0.35rem 0;
        text-align: left !important;
    }
}

/* =========================================================
   PHASE 5D - GROUP MATCH BUILDER HYBRID EDITOR
   Safe additive styles for manual 72-match group-stage repair.
========================================================= */

.group-builder-page {
    --group-builder-border: rgba(15, 23, 42, 0.08);
    --group-builder-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.group-builder-hero {
    border-left: 0.35rem solid #198754;
}

.group-builder-stat {
    min-height: 100%;
    padding: 0.85rem;
    border: 1px solid var(--group-builder-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--group-builder-shadow);
}

.group-builder-stat-warning {
    border-left: 0.35rem solid #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.group-builder-grid-header {
    display: grid;
    grid-template-columns: 5rem 9rem minmax(12rem, 1fr) minmax(12rem, 1fr) 11rem 11rem minmax(14rem, 1.1fr) 8rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--group-builder-border);
    background: #f8f9fa;
    color: #495057;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.group-builder-section {
    border-bottom: 1px solid var(--group-builder-border);
}

.group-builder-section:last-child {
    border-bottom: 0;
}

.group-builder-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    list-style: none;
}

.group-builder-section-summary::-webkit-details-marker {
    display: none;
}

.group-builder-row {
    display: grid;
    grid-template-columns: 5rem 9rem minmax(12rem, 1fr) minmax(12rem, 1fr) 11rem 11rem minmax(14rem, 1.1fr) 8rem;
    gap: 0.5rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #ffffff;
}

.group-builder-row:nth-child(even) {
    background: #fbfcfd;
}

.group-builder-row-warning {
    box-shadow: inset 0.35rem 0 0 #dc3545;
    background: #fff8f8;
}

.group-builder-cell .form-label {
    color: #6c757d;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.group-builder-cell-number input {
    font-weight: 800;
}

.group-builder-row-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.group-builder-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
}

@media (max-width: 1199.98px) {
    .group-builder-grid-header,
    .group-builder-row {
        grid-template-columns: 4.5rem 8rem minmax(10rem, 1fr) minmax(10rem, 1fr) 10rem 10rem minmax(12rem, 1fr) 7rem;
    }
}

@media (max-width: 991.98px) {
    .group-builder-grid-header {
        display: none !important;
    }

    .group-builder-section {
        margin-bottom: 0.85rem;
        border: 1px solid var(--group-builder-border);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--group-builder-shadow);
    }

    .group-builder-section:not([open]) {
        background: #ffffff;
    }

    .group-builder-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        margin: 0.75rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 14px;
        background: #ffffff;
    }

    .group-builder-row + .group-builder-row {
        margin-top: 0;
    }

    .group-builder-venue-cell {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .group-builder-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .group-builder-save-bar .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .group-builder-page .admin1-hero-actions,
    .group-builder-page .d-grid.d-lg-flex {
        grid-template-columns: 1fr;
    }

    .group-builder-section-summary {
        padding: 0.7rem;
    }

    .group-builder-row {
        margin: 0.65rem;
        padding: 0.7rem;
    }

    .group-builder-row .form-control,
    .group-builder-row .form-select {
        min-height: 42px;
    }
}

/* =========================================================
   GLOBAL SUMMARY CARD EXPANDER
   Safe additive UI layer. Summary/stat rows keep the first
   few most important cards visible and tuck the rest behind
   an expandable control. No server-side behavior changes.
========================================================= */

.summary-expander-managed {
    position: relative;
}

.summary-expander-hidden {
    display: none !important;
}

.summary-expander-control {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
}

.summary-expander-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: normal;
}

.summary-expander-button::before {
    content: "▾";
    font-size: 0.8rem;
    line-height: 1;
}

.summary-expander-managed.summary-expander-open + .summary-expander-control .summary-expander-button::before,
.summary-expander-button[aria-expanded="true"]::before {
    content: "▴";
}

.summary-expander-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 0.74rem;
    font-weight: 800;
}

@media (max-width: 991.98px) {
    .summary-expander-control {
        justify-content: stretch;
        margin-top: 0.55rem;
    }

    .summary-expander-button {
        width: 100%;
    }
}

/* =========================================================
   PHASE 6E - MOBILE MY LEAGUES UPCOMING MATCH CARDS
   Mobile-only cleanup for Play > My Leagues upcoming pick
   deadlines. Desktop keeps the original table; phones get
   stacked cards with status and action buttons at the bottom.
========================================================= */

.league-index-deadline-mobile {
    display: grid;
    gap: 0.85rem;
}

.league-index-deadline-card {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    padding: 0.85rem;
}

.league-index-deadline-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.league-index-deadline-label {
    color: #6c757d;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
}

.league-index-deadline-title,
.league-index-deadline-teams {
    color: #111827;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
}

.league-index-deadline-title {
    font-size: 0.98rem;
}

.league-index-deadline-teams {
    font-size: 1.05rem;
}

.league-index-deadline-meta,
.league-index-deadline-time,
.league-index-deadline-saved-note {
    color: #6c757d;
    font-size: 0.86rem;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: normal;
}

.league-index-deadline-status .badge {
    white-space: normal;
    line-height: 1.15;
    text-align: center;
}

.league-index-deadline-match {
    padding: 0.75rem 0;
}

.league-index-deadline-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.7rem;
    border-radius: 14px;
    background: #f8fbff;
}

.league-index-deadline-actions {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.league-index-deadline-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    white-space: normal;
}

.league-index-deadline-saved-note {
    margin-top: 0.65rem;
}

@media (max-width: 575.98px) {
    .league-index-deadline-card {
        padding: 0.75rem;
        border-radius: 14px;
    }

    .league-index-deadline-card-header {
        grid-template-columns: 1fr;
    }

    .league-index-deadline-status {
        display: flex;
        justify-content: flex-start;
    }

    .league-index-deadline-times {
        grid-template-columns: 1fr;
        padding: 0.65rem;
    }
}


/* =========================================================
   PHASE 1 - MOBILE SHELL STABILIZATION
   Shared layout, alerts, navigation, and touch behavior only.
   Additive overrides to preserve existing page functionality.
========================================================= */

.app-shell-alert-zone {
    margin-top: 0.95rem;
    margin-bottom: 0.65rem;
}

.app-shell-status-message {
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    margin-bottom: 0.75rem;
}

.app-navbar .dropdown-toggle,
.app-navbar .dropdown-item,
.app-mobile-bottom-nav-item {
    touch-action: manipulation;
}

.app-mobile-bottom-nav {
    gap: 0.15rem;
}

.app-mobile-bottom-nav-item {
    min-width: 0;
    overflow: hidden;
}

.app-mobile-bottom-nav-item span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .app-shell-main-container {
        padding-bottom: 6.25rem;
    }

    .app-shell-alert-zone {
        position: relative;
        z-index: 3;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .app-shell-status-message {
        margin-bottom: 0.65rem;
        padding: 0.85rem 2.75rem 0.85rem 0.95rem;
    }

    .app-navbar .navbar-collapse.show,
    .app-navbar .navbar-collapse.collapsing {
        max-height: calc(100vh - 9.75rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .app-navbar .dropdown-menu.show {
        display: block;
    }

    .app-admin-dropdown {
        max-height: 52vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .app-mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(3.15rem, 1fr));
        align-items: stretch;
        padding-left: max(0.35rem, env(safe-area-inset-left));
        padding-right: max(0.35rem, env(safe-area-inset-right));
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    }

    .app-mobile-bottom-nav-item {
        min-height: 3.6rem;
        padding: 0.35rem 0.2rem;
        font-size: 0.72rem;
        line-height: 1.05;
    }

    .app-mobile-bottom-nav-icon {
        font-size: 1.05rem;
        line-height: 1;
    }

    .btn,
    .dropdown-item,
    .nav-link,
    .form-control,
    .form-select {
        min-height: 42px;
    }

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

    .d-flex.gap-2.flex-wrap > .btn,
    .d-flex.gap-3.flex-wrap > .btn,
    .btn-group.flex-wrap > .btn {
        white-space: normal;
    }

    .card-header[role="button"] {
        outline-offset: 3px;
    }
}

@media (max-width: 575.98px) {
    .app-mobile-bottom-nav-item {
        font-size: 0.68rem;
    }

    .app-mobile-bottom-nav-icon {
        font-size: 1rem;
    }

    .app-shell-status-message {
        font-size: 0.94rem;
    }
}

/* =========================================================
   PHASE 3B - COMPACT GROUPS & PICKS NAVIGATION
   Safe additive UI layer for Groups & Matches and Matches & Picks.
   Reduces scrolling with chip navigation and display-only filters.
========================================================= */

.phase3b-compact-nav {
    border-color: rgba(13, 110, 253, 0.16) !important;
    border-left: 0.35rem solid #0d6efd;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.phase3b-compact-nav .card-body {
    padding: 0.85rem;
}

.phase3b-chip-section + .phase3b-chip-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.phase3b-chip-label {
    color: #6c757d;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.phase3b-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.phase3b-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: normal;
}

.phase3b-chip.phase3b-active {
    color: #ffffff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.phase3b-match-panel,
.phase3b-overview-panel,
.phase3b-match-table-row {
    scroll-margin-top: 7.25rem;
}

.phase3b-hidden {
    display: none !important;
}

.phase3b-current-filter {
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    background: #f8f9fa;
}

.phase3b-no-results {
    border: 1px dashed rgba(13, 110, 253, 0.28);
    border-radius: 14px;
    background: #f8fbff;
    padding: 0.85rem;
    color: #495057;
}

@media (min-width: 992px) {
    .phase3b-compact-nav {
        position: sticky;
        top: 0.75rem;
        z-index: 20;
    }
}

@media (max-width: 991.98px) {
    .phase3b-compact-nav {
        position: sticky;
        top: 0.45rem;
        z-index: 1014;
        border-radius: 16px;
    }

    .phase3b-compact-nav .card-body {
        padding: 0.75rem;
    }

    .phase3b-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .phase3b-chip {
        flex: 0 0 auto;
        min-height: 38px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .phase3b-compact-nav .d-flex.justify-content-between {
        align-items: stretch !important;
    }

    .phase3b-compact-nav [data-phase3b-match-filter="all"],
    .phase3b-compact-nav [data-phase3b-overview-show-all="true"] {
        width: 100%;
    }

    .phase3b-match-panel .match-mobile-card {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .phase3b-compact-nav {
        margin-left: -0.15rem;
        margin-right: -0.15rem;
    }

    .phase3b-compact-nav .fw-bold {
        line-height: 1.15;
    }

    .phase3b-current-filter {
        font-size: 0.82rem;
    }
}

/* =========================================================
   PHASE 3C - LEAGUE PAGE CLUTTER REDUCTION
   Collapses guidance, stats, and admin context below the
   compact navigation so mobile users reach matches/groups first.
   Safe additive styling only; no server-side behavior changes.
========================================================= */

.phase3c-utility-details {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.phase3c-utility-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.phase3c-utility-summary::-webkit-details-marker {
    display: none;
}

.phase3c-utility-summary span:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.12rem;
}

.phase3c-utility-summary strong {
    font-weight: 800;
    line-height: 1.2;
}

.phase3c-utility-summary small {
    color: #6c757d;
    line-height: 1.25;
}

.phase3c-utility-summary-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(13, 110, 253, 0.16);
    border-radius: 999px;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.phase3c-utility-details[open] .phase3c-utility-summary-badge {
    background: #f8f9fa;
    color: #495057;
}

.phase3c-utility-details[open] .phase3c-utility-summary-badge::before {
    content: "Close ";
}

.phase3c-utility-body {
    padding: 0.85rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.phase3c-utility-body > .card:last-child,
.phase3c-utility-body > .alert:last-child,
.phase3c-utility-body > .row:last-child {
    margin-bottom: 0 !important;
}

.phase3b-compact-nav {
    border-left: 0.35rem solid #0d6efd;
}

@media (max-width: 767.98px) {
    .phase3c-utility-summary {
        align-items: stretch;
        flex-direction: column;
        padding: 0.75rem;
    }

    .phase3c-utility-summary-badge {
        width: 100%;
        min-height: 38px;
    }

    .phase3c-utility-body {
        padding: 0.7rem;
    }

    .phase3c-utility-body .row.g-3,
    .phase3c-utility-body .row.g-4 {
        --bs-gutter-y: 0.65rem;
        --bs-gutter-x: 0.65rem;
    }
}

/* =========================================================
   PHASE 4 - ADMIN / SUPERADMIN MOBILE WORKFLOW CLEANUP
   Safe additive layer. Reduces mobile admin scrolling by adding
   workflow chips, collapsible secondary guidance, and compact
   admin tables without changing server-side behavior.
========================================================= */

.admin4-page {
    --admin4-border: rgba(15, 23, 42, 0.08);
    --admin4-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.admin4-workflow-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem;
    margin-bottom: 0.8rem;
    border: 1px solid var(--admin4-border);
    border-left: 0.35rem solid #0d6efd;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--admin4-shadow);
}

.admin4-workflow-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.65rem;
    border: 1px solid rgba(13, 110, 253, 0.18);
    border-radius: 999px;
    background: #f8fbff;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.admin4-workflow-chip:hover,
.admin4-workflow-chip:focus {
    background: #eef5ff;
    color: #0a58ca;
    text-decoration: none;
}

.admin4-secondary-toggle {
    display: none;
    width: 100%;
    margin: 0 0 0.75rem 0;
    border-radius: 14px;
    font-weight: 800;
}

.admin4-secondary-hidden {
    display: none !important;
}

.admin4-secondary-panel-open .admin4-secondary-hidden {
    display: block !important;
}

.admin4-secondary-panel-open .row.admin4-secondary-hidden {
    display: flex !important;
}

.admin4-section-anchor {
    scroll-margin-top: 7.5rem;
}

.admin4-page .admin4-card-compact.card,
.admin4-page .admin4-card-compact.border.rounded,
.admin4-page .admin4-card-compact.border.rounded-3 {
    border-radius: 14px !important;
}

.admin4-page .admin4-table-card-row {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: #ffffff;
}

@media (min-width: 992px) {
    .admin4-workflow-bar {
        position: sticky;
        top: 0.75rem;
        z-index: 30;
    }
}

@media (max-width: 991.98px) {
    .admin4-workflow-bar {
        position: sticky;
        top: 0.45rem;
        z-index: 1014;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .admin4-workflow-chip {
        flex: 0 0 auto;
        min-height: 38px;
    }

    .admin4-secondary-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 42px;
    }

    .admin4-page .admin1-hero,
    .admin4-page .admin-wizard-hero,
    .admin4-page .official-data-hero,
    .admin4-page .data1-import-hero,
    .admin4-page .league-template-hero,
    .admin4-page .group-builder-hero {
        margin-bottom: 0.75rem !important;
    }

    .admin4-page .admin3-command-grid,
    .admin4-page .admin3-wizard-command-strip,
    .admin4-page .admin-wizard-mode-grid,
    .admin4-page .official-data-hero-actions,
    .admin4-page .admin1-hero-actions,
    .admin4-page .data1-import-hero-actions {
        gap: 0.5rem;
    }

    .admin4-page .card-header,
    .admin4-page .card-body,
    .admin4-page .card-footer {
        padding: 0.65rem;
    }

    .admin4-page .alert {
        padding: 0.65rem 0.75rem;
        margin-bottom: 0.7rem;
    }

    .admin4-page .row.g-4,
    .admin4-page .row.g-3 {
        --bs-gutter-y: 0.7rem;
        --bs-gutter-x: 0.7rem;
    }

    .admin4-page .table-responsive {
        border-radius: 14px;
    }

    .admin4-page .admin-audit-log {
        max-height: 420px;
    }
}

@media (max-width: 575.98px) {
    .admin4-page .card-header.d-flex,
    .admin4-page .alert.d-flex,
    .admin4-page .official-data-card .card-body.d-flex,
    .admin4-page .admin3-admin-daily-panel {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .admin4-page .card-header .btn,
    .admin4-page .alert .btn,
    .admin4-page .official-data-card .btn,
    .admin4-page .admin3-command-actions .btn,
    .admin4-page .admin1-hero-actions .btn,
    .admin4-page .official-data-hero-actions .btn,
    .admin4-page .data1-import-hero-actions .btn,
    .admin4-page form .btn {
        width: 100%;
    }

    .admin4-page .table-responsive table,
    .admin4-page .table-responsive thead,
    .admin4-page .table-responsive tbody,
    .admin4-page .table-responsive th,
    .admin4-page .table-responsive td,
    .admin4-page .table-responsive tr {
        display: block;
        width: 100%;
    }

    .admin4-page .table-responsive thead {
        display: none;
    }

    .admin4-page .table-responsive tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .admin4-page .table-responsive td {
        border: 0;
        padding: 0.35rem 0;
        text-align: left !important;
    }

    .admin4-page .table-responsive td.text-end,
    .admin4-page .table-responsive td:last-child {
        text-align: left !important;
    }

    .admin4-page .table-responsive td .btn,
    .admin4-page .table-responsive td a.btn,
    .admin4-page .table-responsive td details,
    .admin4-page .table-responsive td summary {
        width: 100%;
        margin-top: 0.25rem;
    }
}


/* =========================================================
   PHASE 4A HOTFIX - ADMIN MOBILE CONTENT RESTORE
   Keeps Phase 4 styling and workflow shortcuts, but prevents
   the display-only secondary-content collapse from hiding the
   Admin page body on mobile. Safe CSS-only restore layer.
========================================================= */

.admin4-page .admin4-secondary-hidden,
.admin4-secondary-panel-open .admin4-secondary-hidden,
.admin4-secondary-panel-open .row.admin4-secondary-hidden {
    display: revert !important;
}

.admin4-page .row.admin4-secondary-hidden,
.admin4-secondary-panel-open .row.admin4-secondary-hidden {
    display: flex !important;
}

.admin4-page [data-admin4-secondary-toggle="true"] {
    display: none !important;
}

@media (max-width: 991.98px) {
    .admin4-workflow-bar {
        margin-bottom: 0.75rem;
    }
}

/* =========================================================
   PHASE 4B - MOBILE ADMIN ACTION DRAWER
   Mobile-only admin command menu launched from the bottom Admin
   shortcut. Keeps Admin/SuperAdmin pages from becoming one long
   navigation page and preserves all existing admin pages/routes.
========================================================= */

.app-mobile-bottom-nav-button {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.app-mobile-bottom-nav-button.app-mobile-bottom-nav-active,
.app-mobile-bottom-nav-button[aria-expanded="true"] {
    background: #eef5ff;
    color: #0d6efd;
}

.app-mobile-admin-panel[hidden] {
    display: none !important;
}

.app-mobile-admin-panel {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
}

.app-mobile-admin-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(4px);
}

.app-mobile-admin-sheet {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: calc(5.35rem + env(safe-area-inset-bottom));
    max-height: min(76vh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.app-mobile-admin-sheet-header {
    position: sticky;
    top: -0.9rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0 0.75rem;
    margin-top: -0.2rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.98);
}

.app-mobile-admin-section + .app-mobile-admin-section {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.app-mobile-admin-section-title {
    margin-bottom: 0.55rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-mobile-admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.app-mobile-admin-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    row-gap: 0.12rem;
    min-height: 4.5rem;
    padding: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-left: 0.35rem solid #64748b;
    border-radius: 16px;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.app-mobile-admin-tile:hover,
.app-mobile-admin-tile:focus {
    color: #0d6efd;
    text-decoration: none;
    border-color: rgba(13, 110, 253, 0.22);
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.10);
}

.app-mobile-admin-tile > span {
    grid-row: 1 / span 2;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f5f9;
    font-size: 1.1rem;
}

.app-mobile-admin-tile strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.15;
}

.app-mobile-admin-tile small {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.25;
}

.app-mobile-admin-tile-primary { border-left-color: #0d6efd; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.app-mobile-admin-tile-success { border-left-color: #198754; background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%); }
.app-mobile-admin-tile-info { border-left-color: #0dcaf0; background: linear-gradient(180deg, #ffffff 0%, #f6fdff 100%); }
.app-mobile-admin-tile-warning { border-left-color: #ffc107; background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%); }
.app-mobile-admin-tile-danger { border-left-color: #dc3545; background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%); }
.app-mobile-admin-tile-dark { border-left-color: #343a40; background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%); }

.app-mobile-admin-section-super {
    padding: 0.8rem;
    border: 1px solid rgba(52, 58, 64, 0.16);
    border-radius: 18px;
    background: #f8f9fa;
}

@media (max-width: 991.98px) {
    .app-mobile-admin-panel.app-mobile-admin-panel-open {
        display: block;
    }

    body.app-mobile-admin-open {
        overflow: hidden;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .app-mobile-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .app-mobile-admin-sheet {
        left: 0.4rem;
        right: 0.4rem;
        padding: 0.75rem;
    }

    .app-mobile-admin-tile {
        padding: 0.68rem;
    }
}

/* =========================================================
   PHASE 5 - MOBILE GAME-DAY EXPERIENCE + ALERT ACTION CENTER
   Safe additive UI layer for match picking, picks review,
   leaderboard focus, and alerts. No data/model behavior changes.
========================================================= */

.phase5-game-day-bar,
.phase5-leaderboard-focus,
.phase5-alert-command {
    border: 1px solid rgba(13, 110, 253, 0.16);
    border-left: 0.35rem solid #0d6efd;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.phase5-alert-command {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.phase5-leaderboard-focus {
    border-left-color: #198754;
    background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
}

.phase5-game-day-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.phase5-game-day-header > div {
    min-width: 0;
}

.phase5-kicker {
    color: #6c757d;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.phase5-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.phase5-action-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    white-space: normal;
    text-align: center;
}

.phase5-alert-hidden,
.phase5-leaderboard-compact .wc9-leaderboard-social-card,
.phase5-leaderboard-compact .wc6-leaderboard-pulse-card,
.phase5-leaderboard-compact .wc8-leaderboard-engagement-card,
.phase5-leaderboard-compact .leaderboard2-insight-panel,
.phase5-leaderboard-compact .row.g-3.mb-4:not(:first-of-type) {
    display: none !important;
}

.phase5-compact-toast {
    position: fixed;
    left: 50%;
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1060;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
}

@media (max-width: 1199.98px) {
    .phase5-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .phase5-game-day-bar,
    .phase5-leaderboard-focus,
    .phase5-alert-command {
        position: sticky;
        top: 0.45rem;
        z-index: 1013;
        border-radius: 16px;
        margin-bottom: 0.75rem !important;
    }

    .phase5-game-day-bar .card-body,
    .phase5-leaderboard-focus .card-body,
    .phase5-alert-command .card-body {
        padding: 0.75rem;
    }

    .phase5-game-day-header {
        align-items: stretch;
    }

    .phase5-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .phase5-action-btn {
        min-height: 42px;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        line-height: 1.15;
    }

    .phase5-game-day-bar + .phase3b-compact-nav,
    .phase5-game-day-bar + .card,
    .phase5-leaderboard-focus + .card {
        margin-top: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .phase5-game-day-header {
        flex-direction: column;
    }

    .phase5-game-day-header .badge {
        align-self: flex-start;
    }

    .phase5-action-grid {
        grid-template-columns: 1fr 1fr;
    }

    .phase5-action-btn {
        min-height: 44px;
        font-size: 0.88rem;
    }
}


/* =========================================================
   PHASE 5D/5E - NOTIFICATION CENTER + SAFE RENDERING CLEANUP
   Additive only. Keeps server-rendered content and existing routes intact.
========================================================= */

.phase5d-priority-strip {
    border-left: 0.35rem solid #0d6efd;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.phase5d-priority-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.phase5d-priority-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 56px;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-left-width: 0.35rem;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    text-align: left;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.phase5d-priority-tile span {
    color: #495057;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.15;
}

.phase5d-priority-tile strong {
    font-size: 1.35rem;
    line-height: 1;
}

.phase5d-priority-urgent { border-left-color: #dc3545; }
.phase5d-priority-picks { border-left-color: #ffc107; }
.phase5d-priority-admin { border-left-color: #0d6efd; }
.phase5d-priority-all { border-left-color: #6c757d; }

.phase5d-priority-tile:focus,
.phase5d-priority-tile:hover {
    border-color: rgba(13, 110, 253, 0.35);
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.10);
    transform: translateY(-1px);
}

.phase5d-alert-details {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.phase5d-alert-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.phase5d-alert-details > summary::-webkit-details-marker {
    display: none;
}

.phase5d-alert-details[open] > summary {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.phase5d-alert-details-body {
    padding: 1rem;
}

.phase5e-lazy-hidden {
    display: none !important;
}

.phase5e-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.85rem;
}

.phase5e-load-more-btn {
    min-height: 40px;
    border-radius: 999px;
    font-weight: 800;
}

.phase5e-render-optimized .match-mobile-card,
.phase5e-render-optimized .ux3-pick-review-card,
.phase5e-render-optimized .notification-card,
.phase5e-render-optimized .leaderboard2-page tbody tr,
.phase5e-render-optimized .phase3b-match-table-row,
.phase5e-render-optimized .visual-bracket-match-card {
    content-visibility: auto;
    contain-intrinsic-size: 120px;
}

.phase5e-render-optimized .wc9-insight-card,
.phase5e-render-optimized .wc10-smart-mini,
.phase5e-render-optimized .wc8-engagement-tile,
.phase5e-render-optimized .wc6-live-tile {
    content-visibility: auto;
    contain-intrinsic-size: 90px;
}

.phase5e-render-optimized .table-responsive {
    contain: layout paint;
}

@media (max-width: 991.98px) {
    .phase5d-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .phase5d-priority-tile {
        min-height: 52px;
        padding: 0.65rem;
    }

    .phase5d-alert-details > summary {
        padding: 0.75rem;
    }

    .phase5d-alert-details-body {
        padding: 0.75rem;
    }

    .phase5e-render-optimized .match-mobile-card,
    .phase5e-render-optimized .ux3-pick-review-card,
    .phase5e-render-optimized .notification-card {
        contain-intrinsic-size: 180px;
    }
}

@media (max-width: 575.98px) {
    .phase5d-priority-grid {
        grid-template-columns: 1fr;
    }

    .phase5d-priority-tile {
        width: 100%;
    }
}

/* =========================================================
   PHASE 6A - UNIFIED LEAGUE NAVIGATION + MESSAGE CENTER
   Safe additive UX layer. No database/model/service changes.
========================================================= */

.phase6a-global-message-center {
    display: grid;
    gap: 0.55rem;
}

.phase6a-message-center-panel {
    border: 1px solid rgba(13, 110, 253, 0.16);
    border-left: 0.35rem solid #0d6efd;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

.phase6a-message-center-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.65rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    list-style: none;
}

.phase6a-message-center-summary::-webkit-details-marker {
    display: none;
}

.phase6a-message-center-summary::after {
    content: "▾";
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #0d6efd;
    font-weight: 900;
}

.phase6a-message-center-panel[open] .phase6a-message-center-summary::after {
    content: "▴";
}

.phase6a-message-center-title {
    color: #111827;
    font-weight: 900;
    line-height: 1.15;
}

.phase6a-message-center-subtitle {
    color: #6c757d;
    font-size: 0.82rem;
    line-height: 1.25;
}

.phase6a-message-center-count,
.phase6a-message-center-empty {
    grid-column: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.7rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    white-space: nowrap;
}

.phase6a-message-center-count {
    background: #dc3545;
    color: #ffffff;
}

.phase6a-message-center-empty {
    background: #eef5ff;
    color: #0d47a1;
}

.phase6a-message-center-body {
    padding: 0 0.9rem 0.85rem;
}

.phase6a-message-list {
    display: grid;
    gap: 0.45rem;
}

.phase6a-message-item {
    display: grid;
    gap: 0.12rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
}

.phase6a-message-item:hover,
.phase6a-message-item:focus {
    border-color: rgba(13, 110, 253, 0.30);
    background: #f8fbff;
    color: inherit;
    text-decoration: none;
}

.phase6a-message-item-title {
    color: #111827;
    font-weight: 800;
    line-height: 1.2;
}

.phase6a-message-item-text,
.phase6a-message-empty-state {
    color: #6c757d;
    font-size: 0.86rem;
    line-height: 1.3;
}

.phase6a-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.phase6a-league-nav {
    position: relative;
    z-index: 18;
}

.phase6a-league-nav-card {
    border-color: rgba(13, 110, 253, 0.18) !important;
    border-left: 0.35rem solid #0d6efd;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
}

.phase6a-league-nav-body {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.phase6a-league-nav-layout {
    align-items: center;
}

.phase6a-league-nav-heading {
    gap: 0.45rem;
}

.phase6a-league-nav-back,
.phase6a-league-menu-toggle,
.phase6a-league-nav .league-nav-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.phase6a-league-nav .league-nav-btn {
    font-weight: 800;
}

.phase6a-league-nav .league-nav-btn.btn-primary,
.phase6a-league-nav .league-nav-btn.btn-success,
.phase6a-league-nav .league-nav-btn.btn-warning,
.phase6a-league-nav .league-nav-back-btn.btn-dark {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

@media (min-width: 992px) {
    .phase6a-league-nav {
        position: sticky;
        top: 0.75rem;
    }

    .phase6a-league-nav-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 991.98px) {
    .phase6a-message-center-panel {
        border-radius: 14px;
    }

    .phase6a-message-center-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.68rem 0.75rem;
    }

    .phase6a-message-center-subtitle {
        font-size: 0.78rem;
    }

    .phase6a-message-center-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .phase6a-message-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phase6a-message-actions .btn {
        width: 100%;
    }

    .phase6a-league-nav {
        position: sticky;
        top: 0.45rem;
        margin-left: -0.15rem;
        margin-right: -0.15rem;
    }

    .phase6a-league-nav-card {
        border-radius: 16px;
    }

    .phase6a-league-nav-heading {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 0.45rem;
    }

    .phase6a-league-nav-title {
        grid-column: 1 / -1;
        order: -1;
        text-align: center;
        padding: 0.12rem 0;
    }

    .phase6a-league-menu-toggle {
        grid-column: 1 / -1;
        width: 100%;
        font-weight: 800;
    }

    .phase6a-league-nav-scroll {
        display: none;
        margin-top: 0.55rem;
        padding-top: 0.55rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .phase6a-league-nav.phase6a-league-nav-open .phase6a-league-nav-scroll {
        display: block;
    }

    .phase6a-league-nav-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        gap: 0.45rem;
        padding-right: 0;
    }

    .phase6a-league-nav .league-nav-btn {
        width: 100%;
        min-height: 40px;
        white-space: normal;
    }
}

@media (max-width: 575.98px) {
    .phase6a-message-center-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .phase6a-message-center-summary::after,
    .phase6a-message-center-count,
    .phase6a-message-center-empty {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    .phase6a-message-actions,
    .phase6a-league-nav-actions,
    .phase6a-league-nav-heading {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PHASE 6A2 - ADMIN-ONLY MESSAGE CENTER PLACEMENT FIX
   Keeps the global Message Center for Admin/SuperAdmin only
   and places it under the site title/tagline. Regular users
   continue using the Alerts page for their alert center.
========================================================= */

.app-brand-subtitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.phase6a-global-message-center-topbar {
    margin-top: 0.7rem;
    margin-bottom: 0;
}

.phase6a-global-message-center-topbar .app-shell-status-message:last-child,
.phase6a-global-message-center-topbar .phase6a-message-center-panel:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .app-brand-subtitle {
        max-width: min(72vw, 980px);
    }
}

@media (max-width: 575.98px) {
    .app-brand-subtitle {
        max-width: calc(100vw - 115px);
        font-size: 0.72rem;
    }
}

/* =========================================================
   PHASE 6A3 - MESSAGE CENTER BELOW NAVIGATION BAR
   Keeps Admin/SuperAdmin Message Center below the main nav.
========================================================= */

.phase6a-global-message-center-below-nav {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.phase6a-global-message-center-below-nav .phase6a-global-message-center {
    margin: 0;
}

.phase6a-global-message-center-below-nav .app-shell-status-message:last-child,
.phase6a-global-message-center-below-nav .phase6a-message-center-panel:last-child {
    margin-bottom: 0;
}

/* =========================================================
   PHASE 6B - SMART MATCH INTELLIGENCE + LIVE TOURNAMENT UX
   Safe additive styles only. No database/model behavior change.
========================================================= */
.phase6b-tournament-pulse,
.phase6b-next-pick-strip,
.phase6b-pick-intelligence,
.phase6b-leaderboard-momentum {
    border-left: 0.35rem solid #0d6efd;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.phase6b-kicker,
.phase6b-pulse-tile span {
    color: #6c757d;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
}

.phase6b-pulse-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.phase6b-pulse-tile {
    display: flex;
    min-height: 5.35rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
    color: inherit;
    text-align: left;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.phase6b-pulse-tile:hover,
.phase6b-pulse-tile:focus {
    border-color: rgba(13, 110, 253, 0.32);
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.10);
    transform: translateY(-1px);
}

.phase6b-pulse-tile strong {
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phase6b-pulse-tile small {
    color: #6c757d;
    font-weight: 600;
    line-height: 1.2;
}

.phase6b-pulse-action {
    border-left: 0.28rem solid #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.phase6b-mini-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.phase6b-mini-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(13, 110, 253, 0.14);
    border-radius: 999px;
    background: #f8fbff;
    color: #0d47a1;
    font-size: 0.82rem;
    font-weight: 700;
}

.phase6b-status-badge {
    letter-spacing: 0.01em;
}

[data-phase6b-smart-match="true"][data-phase6b-importance="live"] .card,
.match-mobile-card[data-phase6b-importance="live"] {
    border-left-color: #dc3545 !important;
    box-shadow: 0 10px 24px rgba(220, 53, 69, 0.12);
}

[data-phase6b-smart-match="true"][data-phase6b-importance="locking"] .card {
    border-left-color: #ffc107 !important;
    box-shadow: 0 10px 24px rgba(255, 193, 7, 0.12);
}

[data-phase6b-smart-match="true"][data-phase6b-importance="missing"] .card {
    border-left-color: #fd7e14 !important;
}

[data-phase6b-smart-match="true"][data-phase6b-importance="knockout"] .card {
    border-left-color: #343a40 !important;
}

tr[data-phase6b-importance="live"] > td {
    box-shadow: inset 0 0 0 9999px rgba(220, 53, 69, 0.055);
}

tr[data-phase6b-importance="locking"] > td,
tr[data-phase6b-importance="missing"] > td {
    box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, 0.060);
}

.phase6b-smart-highlight {
    outline: 2px solid rgba(13, 110, 253, 0.28);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .phase6b-pulse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phase6b-next-pick-strip .card-body,
    .phase6b-pick-intelligence .card-body,
    .phase6b-leaderboard-momentum .card-body > .d-flex {
        align-items: stretch !important;
        flex-direction: column;
    }

    .phase6b-next-pick-strip .btn,
    .phase6b-pick-intelligence .btn,
    .phase6b-leaderboard-momentum .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .phase6b-pulse-grid {
        grid-template-columns: 1fr;
    }

    .phase6b-pulse-tile {
        min-height: 4.5rem;
        padding: 0.7rem;
    }

    .phase6b-pulse-tile strong {
        white-space: normal;
    }

    .phase6b-mini-stats {
        width: 100%;
    }

    .phase6b-mini-stats span {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* =========================================================
   PHASE 6C - ADVANCED MOBILE BRACKET UX
   Safe additive bracket controls. No bracket logic changes.
========================================================= */

.phase6c-bracket-command {
    position: relative;
    border: 1px solid rgba(13, 110, 253, 0.14);
    border-left: 0.35rem solid #0d6efd;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
    padding: 0.85rem;
}

.phase6c-bracket-command-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.phase6c-bracket-command-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.phase6c-bracket-stage-map {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.1rem;
}

.phase6c-bracket-stage-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(13, 110, 253, 0.18);
    border-radius: 999px;
    background: #ffffff;
    color: #0d6efd;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.phase6c-bracket-stage-chip small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #eef5ff;
    color: #0a58ca;
    font-size: 0.68rem;
    font-weight: 800;
}

.phase6c-bracket-stage-chip.phase6c-active,
.phase6c-bracket-stage-chip:hover,
.phase6c-bracket-stage-chip:focus {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

.phase6c-bracket-stage-chip.phase6c-active small,
.phase6c-bracket-stage-chip:hover small,
.phase6c-bracket-stage-chip:focus small {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.phase6c-bracket-shell .visual-bracket-scroll {
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

.phase6c-bracket-shell .visual-bracket-column {
    scroll-snap-align: center;
}

.phase6c-bracket-shell .visual-bracket-match-card[data-phase6c-user-pick="true"] {
    outline: 2px solid rgba(13, 110, 253, 0.18);
    outline-offset: 1px;
}

.phase6c-bracket-shell .visual-bracket-match-card[data-phase6c-open-pick="true"] {
    border-color: rgba(255, 193, 7, 0.68);
    box-shadow: 0 10px 24px rgba(255, 193, 7, 0.12);
}

@media (max-width: 991.98px) {
    .phase6c-bracket-command {
        position: sticky;
        top: 0.45rem;
        z-index: 1016;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding: 0.7rem;
        border-radius: 15px;
    }

    .phase6c-bracket-command-main {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .phase6c-bracket-command-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.4rem;
    }

    .phase6c-bracket-command-actions .btn {
        width: 100%;
        min-height: 2.35rem;
        white-space: normal;
    }

    .phase6c-bracket-stage-map {
        margin-left: -0.1rem;
        margin-right: -0.1rem;
        padding: 0.1rem 0.1rem 0.25rem;
    }

    .phase6c-bracket-stage-chip {
        min-height: 2.25rem;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        font-size: 0.78rem;
    }

    .phase6c-bracket-shell .visual-bracket-scroll {
        border-radius: 15px;
        padding: 0.55rem 0.45rem 0.85rem;
        background: #ffffff;
    }

    .phase6c-bracket-shell .visual-bracket-board {
        gap: 0.65rem;
        justify-content: flex-start;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .phase6c-bracket-shell .visual-bracket-side {
        gap: 0.55rem;
    }

    .phase6c-bracket-shell .visual-bracket-column {
        min-width: 144px;
    }

    .phase6c-bracket-shell .visual-bracket-match-card {
        width: 140px;
        padding: 0.5rem;
        border-radius: 11px;
    }

    .phase6c-bracket-shell .visual-bracket-match-card-final {
        width: 150px;
    }

    .phase6c-bracket-shell .visual-bracket-match-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .phase6c-bracket-shell .visual-bracket-match-topline .badge,
    .phase6c-bracket-shell .visual-bracket-match-card .badge {
        white-space: normal;
        line-height: 1.15;
    }

    .phase6c-bracket-shell .visual-bracket-kickoff {
        margin-bottom: 0.32rem;
        font-size: 0.62rem;
    }

    .phase6c-bracket-shell .visual-bracket-team-row {
        padding: 0.32rem 0.36rem;
        gap: 0.32rem;
    }

    .phase6c-bracket-shell .visual-bracket-team-name {
        font-size: 0.76rem;
    }

    .phase6c-bracket-shell .visual-bracket-team-source,
    .phase6c-bracket-shell .visual-bracket-user-pick-updated {
        font-size: 0.6rem;
    }

    .phase6c-bracket-shell .visual-bracket-team-score {
        font-size: 0.84rem;
        min-width: 14px;
    }

    .phase6c-bracket-shell .visual-bracket-user-pick-panel {
        padding: 0.42rem;
    }

    .phase6c-bracket-shell .visual-bracket-user-pick-title {
        font-size: 0.6rem;
    }

    .phase6c-bracket-shell .visual-bracket-user-pick-name,
    .phase6c-bracket-shell .visual-bracket-user-pick-score {
        font-size: 0.68rem;
    }
}

@media (max-width: 575.98px) {
    .phase6c-bracket-command-actions {
        grid-template-columns: 1fr;
    }

    .phase6c-bracket-shell .visual-bracket-column {
        min-width: 136px;
    }

    .phase6c-bracket-shell .visual-bracket-match-card {
        width: 132px;
    }

    .phase6c-bracket-shell .visual-bracket-match-card-final {
        width: 142px;
    }
}
 / TRADEMARK / HELP REFRESH
/* =========================================================
   LEGAL-HELP A - COPYRIGHT / TRADEMARK / HELP REFRESH
   Safe additive styling. Keeps legal notices compact on mobile.
========================================================= */
.legal-footer {
    background: #ffffff;
}

.legal-footer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.legal-footer-brand {
    color: #111827;
    font-weight: 800;
    line-height: 1.25;
}

.legal-footer-note {
    max-width: 62rem;
    margin-top: 0.2rem;
    color: #6c757d;
    font-size: 0.82rem;
    line-height: 1.35;
}

.legal-footer-links {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.legal-footer-links a {
    color: #0d6efd;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.legal-footer-links a:hover,
.legal-footer-links a:focus {
    color: #0a58ca;
    text-decoration: underline;
}

.legal-page .legal-help-card,
.help-page .legal-help-card,
.about-page .legal-help-card {
    border-color: rgba(15, 23, 42, 0.08);
    border-left: 0.35rem solid #0d6efd;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.legal-disclaimer-alert {
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.legal-glossary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.legal-glossary-grid > div {
    display: grid;
    gap: 0.18rem;
    min-height: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
}

.legal-glossary-grid strong {
    color: #111827;
    line-height: 1.2;
}

.legal-glossary-grid span {
    color: #6c757d;
    font-size: 0.88rem;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .legal-footer-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        text-align: center;
    }

    .legal-footer-links {
        justify-content: center;
    }

    .legal-glossary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .legal-footer-note {
        font-size: 0.78rem;
    }

    .legal-footer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .legal-footer-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0.35rem 0.5rem;
        border: 1px solid rgba(13, 110, 253, 0.14);
        border-radius: 999px;
        background: #f8fbff;
    }
}


/* =========================================================
   PHASE RM-1 - LEAGUE USER REMOVAL / MULTI-LEAGUE REMOVAL
   Safe additive access-governance UI. Existing picks remain preserved.
========================================================= */

.rm1-page,
.rm1-league-member-card {
    --rm1-border: rgba(15, 23, 42, 0.08);
    --rm1-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.rm1-summary-tile,
.rm1-preserve-note,
.rm1-filter-card,
.rm1-removal-card,
.rm1-league-member-card {
    border-radius: 16px;
    box-shadow: var(--rm1-shadow, 0 10px 24px rgba(15, 23, 42, 0.045));
}

.rm1-summary-tile {
    padding: 0.85rem;
    border: 1px solid var(--rm1-border, rgba(15, 23, 42, 0.08));
    border-left: 0.35rem solid #0d6efd;
    background: #ffffff;
}

.rm1-preserve-note {
    border-left: 0.35rem solid #ffc107;
}

.rm1-remove-panel summary {
    list-style: none;
    cursor: pointer;
}

.rm1-remove-panel summary::-webkit-details-marker {
    display: none;
}

.rm1-remove-form {
    min-width: 18rem;
    max-width: 25rem;
    padding: 0.75rem;
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: 14px;
    background: #fff8f8;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.rm1-confirm-check {
    padding: 0.75rem 0.75rem 0.75rem 2.4rem;
    border: 1px solid rgba(255, 193, 7, 0.32);
    border-radius: 14px;
    background: #fffdf5;
}

.rm1-removal-table .form-check-input,
.rm1-member-table .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
}

.rm1-sticky-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.08);
}

@media (max-width: 991.98px) {
    .rm1-page .admin1-hero,
    .rm1-page .card-header,
    .rm1-league-member-card .card-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .rm1-sticky-action-bar {
        align-items: stretch;
        flex-direction: column;
        bottom: calc(5.4rem + env(safe-area-inset-bottom));
    }

    .rm1-sticky-action-bar .btn,
    .rm1-page .admin1-hero-actions .btn,
    .rm1-filter-card .btn,
    .rm1-remove-form .btn {
        width: 100%;
    }

    .rm1-remove-form {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .rm1-removal-table table,
    .rm1-removal-table thead,
    .rm1-removal-table tbody,
    .rm1-removal-table th,
    .rm1-removal-table td,
    .rm1-removal-table tr,
    .rm1-member-table table,
    .rm1-member-table thead,
    .rm1-member-table tbody,
    .rm1-member-table th,
    .rm1-member-table td,
    .rm1-member-table tr {
        display: block;
        width: 100%;
    }

    .rm1-removal-table thead,
    .rm1-member-table thead {
        display: none;
    }

    .rm1-removal-table tr,
    .rm1-member-table tr {
        border: 1px solid #e9ecef;
        border-radius: 14px;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: #ffffff;
    }

    .rm1-removal-table td,
    .rm1-member-table td {
        border: 0;
        padding: 0.35rem 0;
        text-align: left !important;
    }

    .rm1-removal-table td::before,
    .rm1-member-table td::before {
        display: block;
        margin-bottom: 0.12rem;
        color: #6c757d;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .rm1-removal-table td:nth-child(1)::before { content: "Remove"; }
    .rm1-removal-table td:nth-child(2)::before { content: "User"; }
    .rm1-removal-table td:nth-child(3)::before { content: "League"; }
    .rm1-removal-table td:nth-child(4)::before { content: "Role"; }
    .rm1-removal-table td:nth-child(5)::before { content: "Activity"; }
    .rm1-removal-table td:nth-child(6)::before { content: "Status"; }

    .rm1-member-table td:nth-child(1)::before { content: "User"; }
    .rm1-member-table td:nth-child(2)::before { content: "Role"; }
    .rm1-member-table td:nth-child(3)::before { content: "Joined"; }
    .rm1-member-table td:nth-child(4)::before { content: "Status"; }
    .rm1-member-table td:nth-child(5)::before { content: "Access"; }
}

/* =========================================================
   PHASE TW-1A - WIZARD UI CLEANUP + MOBILE STEP FLOW
   Safe additive layer for Tournament Wizard and FIFA 2026 Setup Wizard.
   No database, model, service, or generation behavior changes.
========================================================= */

.tw1a-wizard-page {
    --tw1a-border: rgba(15, 23, 42, 0.08);
    --tw1a-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.tw1a-command-center {
    border: 1px solid rgba(13, 110, 253, 0.16);
    border-left: 0.35rem solid #0d6efd;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--tw1a-shadow);
    padding: 0.9rem;
}

.tw1a-command-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tw1a-kicker {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tw1a-command-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tw1a-command-actions .btn {
    min-height: 38px;
    font-weight: 800;
}

.tw1a-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.tw1a-status-strip > div {
    min-height: 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #ffffff;
}

.tw1a-status-strip span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tw1a-status-strip strong {
    font-size: 1.25rem;
    line-height: 1.1;
}

.tw1a-step-jump {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tw1a-step-jump a {
    flex: 0 0 auto;
    min-height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(13, 110, 253, 0.18);
    border-radius: 999px;
    background: #ffffff;
    color: #0d6efd;
    font-size: 0.8rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.tw1a-step-jump a.done {
    border-color: rgba(25, 135, 84, 0.25);
    background: #f7fff9;
    color: #198754;
}

.tw1a-step-jump a.active,
.tw1a-step-jump a:hover,
.tw1a-step-jump a:focus {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #ffffff;
    text-decoration: none;
}

.tw1a-mobile-step {
    border: 1px solid rgba(13, 110, 253, 0.16);
    background: #f8fbff;
}

.tw1a-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.tw1a-secondary-details {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.tw1a-secondary-details > summary {
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    color: #495057;
    font-weight: 900;
    list-style: none;
    background: #f8f9fa;
}

.tw1a-secondary-details > summary::-webkit-details-marker {
    display: none;
}

.tw1a-secondary-details > summary::after {
    content: "  ▾";
    color: #0d6efd;
}

.tw1a-secondary-details[open] > summary::after {
    content: "  ▴";
}

.tw1a-primary-form {
    border-left: 0.35rem solid #0d6efd;
}

.tw1a-compact-info-panel {
    box-shadow: var(--tw1a-shadow);
}

.tw1a-wizard-page .admin-wizard-card h2 {
    line-height: 1.18;
}

.tw1a-wizard-page .admin-wizard-mode-option {
    min-height: 0;
}

@media (min-width: 992px) {
    .tw1a-command-center {
        position: sticky;
        top: 0.75rem;
        z-index: 28;
    }
}

@media (max-width: 991.98px) {
    .tw1a-wizard-page .admin-wizard-hero {
        margin-bottom: 0.75rem !important;
    }

    .tw1a-command-center {
        position: sticky;
        top: 0.45rem;
        z-index: 1014;
        padding: 0.75rem;
        border-radius: 16px;
    }

    .tw1a-command-main,
    .tw1a-form-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .tw1a-command-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .tw1a-command-actions .btn {
        width: 100%;
        min-height: 42px;
    }

    .tw1a-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .tw1a-status-strip > div {
        min-height: 3.65rem;
        padding: 0.6rem;
    }

    .tw1a-status-strip strong {
        font-size: 1.05rem;
    }

    .tw1a-step-jump a {
        min-height: 2.45rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .tw1a-desktop-sidebar .admin-wizard-progress-card {
        display: none;
    }

    .tw1a-desktop-sidebar .admin-wizard-summary-card {
        margin-top: 0 !important;
    }

    .tw1a-wizard-page .admin-wizard-summary-card {
        margin-bottom: 0.75rem;
    }

    .tw1a-wizard-page .admin-wizard-summary-card .admin-wizard-summary-row:nth-of-type(n+6) {
        display: none;
    }

    .tw1a-compact-message ul {
        margin-top: 0.35rem;
        padding-left: 1rem;
    }

    .tw1a-wizard-page .admin-wizard-card,
    .tw1a-wizard-page .admin-wizard-mode-panel,
    .tw1a-wizard-page .admin-wizard-safety-panel,
    .tw1a-wizard-page .admin3-admin-daily-panel {
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .tw1a-command-actions,
    .tw1a-status-strip {
        grid-template-columns: 1fr;
    }

    .tw1a-status-strip > div {
        min-height: 3.25rem;
    }

    .tw1a-wizard-page .admin-wizard-hero-actions,
    .tw1a-wizard-page .admin-wizard-actions,
    .tw1a-wizard-page .admin3-admin-daily-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .tw1a-wizard-page .admin-wizard-hero-actions .btn,
    .tw1a-wizard-page .admin-wizard-actions .btn,
    .tw1a-wizard-page .admin3-admin-daily-actions .btn,
    .tw1a-wizard-page form > .btn {
        width: 100%;
    }
}

/* =========================================================
   MOBILE NAV HOTFIX - TOP TOGGLE SHELL + BOTTOM BAR CONTAINMENT
   Replaces the mobile hamburger/dropdown experience with compact
   top category toggles while keeping desktop nav and bottom nav.
========================================================= */

.app-mobile-top-shell {
    display: none;
}

.app-mobile-top-panel {
    display: none;
}

.app-mobile-bottom-nav-button {
    border: 0;
    background: transparent;
    font: inherit;
    width: 100%;
    min-width: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .app-navbar .container {
        display: block;
    }

    .app-navbar-toggler,
    #mainNavbar {
        display: none !important;
    }

    .app-mobile-top-shell {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0.45rem 0;
    }

    .app-mobile-top-toggle-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.35rem;
        width: 100%;
        min-width: 0;
    }

    .app-mobile-top-toggle {
        position: relative;
        min-width: 0;
        min-height: 48px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.12rem;
        border: 1px solid rgba(15, 23, 42, 0.10);
        border-radius: 14px;
        background: #ffffff;
        color: #334155;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1.05;
        text-align: center;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        touch-action: manipulation;
        overflow: hidden;
    }

    .app-mobile-top-toggle:focus,
    .app-mobile-top-toggle:hover,
    .app-mobile-top-toggle-active {
        border-color: rgba(13, 110, 253, 0.32);
        background: #eef5ff;
        color: #0d6efd;
    }

    .app-mobile-top-toggle[aria-expanded="true"] {
        background: #0d6efd;
        color: #ffffff;
        border-color: #0d6efd;
        box-shadow: 0 10px 22px rgba(13, 110, 253, 0.22);
    }

    .app-mobile-top-icon {
        font-size: 1rem;
        line-height: 1;
    }

    .app-mobile-top-count {
        position: absolute;
        top: 0.25rem;
        right: 0.35rem;
        min-width: 1.15rem;
        height: 1.15rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.25rem;
        border-radius: 999px;
        background: #dc3545;
        color: #ffffff;
        font-size: 0.62rem;
        font-weight: 900;
    }

    .app-mobile-top-panels {
        width: 100%;
        min-width: 0;
    }

    .app-mobile-top-panel {
        margin-top: 0.5rem;
        border: 1px solid rgba(15, 23, 42, 0.10);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
        padding: 0.75rem;
        max-height: min(58vh, 560px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .app-mobile-top-panel:not([hidden]) {
        display: block;
    }

    .app-mobile-top-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.65rem;
        padding-bottom: 0.55rem;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .app-mobile-top-panel-header strong {
        font-size: 1rem;
        font-weight: 900;
    }

    .app-mobile-top-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        width: 100%;
        min-width: 0;
    }

    .app-mobile-top-tile {
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 0.55rem;
        row-gap: 0.1rem;
        align-items: start;
        padding: 0.72rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-left: 0.32rem solid #6c757d;
        border-radius: 14px;
        background: #ffffff;
        color: #212529;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
    }

    .app-mobile-top-tile:hover,
    .app-mobile-top-tile:focus {
        background: #f8fbff;
        color: #0d6efd;
        text-decoration: none;
    }

    .app-mobile-top-tile > span {
        grid-row: 1 / span 2;
        width: 1.9rem;
        height: 1.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #f8f9fa;
        font-size: 1rem;
    }

    .app-mobile-top-tile strong {
        min-width: 0;
        font-size: 0.88rem;
        font-weight: 900;
        line-height: 1.15;
        overflow-wrap: normal;
        word-break: normal;
    }

    .app-mobile-top-tile small {
        min-width: 0;
        color: #6c757d;
        font-size: 0.74rem;
        line-height: 1.22;
        overflow-wrap: normal;
        word-break: normal;
    }

    .app-mobile-top-tile-primary { border-left-color: #0d6efd; }
    .app-mobile-top-tile-success { border-left-color: #198754; }
    .app-mobile-top-tile-info { border-left-color: #0dcaf0; }
    .app-mobile-top-tile-warning { border-left-color: #ffc107; }
    .app-mobile-top-tile-danger { border-left-color: #dc3545; }
    .app-mobile-top-tile-muted { border-left-color: #adb5bd; background: #f8f9fa; }

    .app-mobile-bottom-nav {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 1.3rem);
        overflow: hidden;
    }

    .app-mobile-bottom-nav-item,
    .app-mobile-bottom-nav-button {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        white-space: normal;
    }

    .app-mobile-bottom-nav-item span:not(.app-mobile-bottom-nav-icon),
    .app-mobile-bottom-nav-button span:not(.app-mobile-bottom-nav-icon) {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 575.98px) {
    .app-mobile-top-toggle-row {
        gap: 0.25rem;
    }

    .app-mobile-top-toggle {
        min-height: 44px;
        border-radius: 12px;
        font-size: 0.66rem;
    }

    .app-mobile-top-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .app-mobile-top-panel {
        padding: 0.65rem;
        border-radius: 14px;
    }

    .app-mobile-top-tile {
        padding: 0.65rem;
    }
}

@media (min-width: 992px) {
    .app-mobile-top-shell {
        display: none !important;
    }
}

/* =========================================================
   PHASE TW-2A - POST-IMPORT COMPLETION WORKFLOW
   Safe additive styles for Official Text Import next steps.
========================================================= */

.tw2a-post-import {
    border-left: 0.35rem solid #198754 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.tw2a-progress {
    height: 0.75rem;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.tw2a-check-tile {
    min-height: 100%;
    padding: 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left-width: 0.35rem;
    border-radius: 14px;
    background: #ffffff;
}

.tw2a-check-ready {
    border-left-color: #198754;
}

.tw2a-check-warning {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.tw2a-next-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.tw2a-next-actions .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    white-space: normal;
}

@media (max-width: 991.98px) {
    .tw2a-post-import .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .tw2a-next-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .tw2a-check-tile {
        padding: 0.7rem;
    }

    .tw2a-next-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TW-2B - SMART REVIEW & AUTO-FIX ASSISTANT
   Safe additive styles for post-import validation, issue cards,
   and non-destructive repair workflow. No database schema change.
========================================================= */

.tw2b-review-panel {
    border-left: 0.35rem solid #198754;
    background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
}

.tw2b-progress {
    height: 0.8rem;
    border-radius: 999px;
    overflow: hidden;
}

.tw2b-check-grid,
.tw2b-issue-grid,
.tw2b-next-grid {
    display: grid;
    gap: 0.65rem;
}

.tw2b-check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tw2b-issue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tw2b-next-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tw2b-check-card,
.tw2b-issue-card {
    min-height: 100%;
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 0.35rem solid #198754;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.tw2b-check-warning {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.tw2b-check-ok {
    border-left-color: #198754;
}

.tw2b-issue-shell {
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.tw2b-issue-danger {
    border-left-color: #dc3545;
    background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}

.tw2b-issue-warning {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.tw2b-issue-info {
    border-left-color: #0dcaf0;
    background: linear-gradient(180deg, #ffffff 0%, #f6fdff 100%);
}

.tw2b-next-grid .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    white-space: normal;
}

@media (max-width: 991.98px) {
    .tw2b-check-grid,
    .tw2b-issue-grid,
    .tw2b-next-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tw2b-review-panel .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .tw2b-issue-shell {
        padding: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .tw2b-check-grid,
    .tw2b-issue-grid,
    .tw2b-next-grid {
        grid-template-columns: 1fr;
    }

    .tw2b-check-card,
    .tw2b-issue-card {
        padding: 0.75rem;
    }

    .tw2b-issue-shell .btn,
    .tw2b-next-grid .btn {
        width: 100%;
    }
}

/* =========================================================
   TW-2B4 - SMART REVIEW EXPANDABLE ISSUE DETAILS
   Additive-only styles for Text Import Smart Review issue details.
========================================================= */

.tw2b4-issue-details {
    margin-top: 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    overflow: hidden;
}

.tw2b4-issue-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 38px;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.86rem;
    font-weight: 800;
}

.tw2b4-issue-details > summary::-webkit-details-marker {
    display: none;
}

.tw2b4-issue-details > summary::before {
    content: "▾";
    color: #0d6efd;
    font-weight: 900;
}

.tw2b4-issue-details[open] > summary {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fbff;
}

.tw2b4-issue-details[open] > summary::before {
    content: "▴";
}

.tw2b4-issue-details-body {
    padding: 0.7rem;
}

.tw2b4-issue-explain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.tw2b4-issue-explain-grid > div,
.tw2b4-detail-row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #ffffff;
    padding: 0.6rem;
}

.tw2b4-detail-label {
    margin-bottom: 0.12rem;
    color: #6c757d;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
}

.tw2b4-detail-list {
    display: grid;
    gap: 0.5rem;
}

.tw2b4-detail-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1.25fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
    align-items: start;
    gap: 0.6rem;
}

.tw2b4-detail-action .btn {
    white-space: normal;
}

@media (max-width: 991.98px) {
    .tw2b4-issue-explain-grid,
    .tw2b4-detail-row {
        grid-template-columns: 1fr;
    }

    .tw2b4-detail-action .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .tw2b4-issue-details > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .tw2b4-issue-details-body,
    .tw2b4-issue-explain-grid > div,
    .tw2b4-detail-row {
        padding: 0.6rem;
    }
}

/* =========================================================
   PHASE TW-2C - GUIDED PUBLISH & LEAGUE ACTIVATION WORKFLOW
   Additive-only styles for post-import launch readiness and
   League Details publish activation controls.
========================================================= */

.tw2c-publish-card {
    border-left: 0.35rem solid #198754;
    background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    scroll-margin-top: 7.5rem;
}

.tw2c-progress {
    height: 0.7rem;
    border-radius: 999px;
    overflow: hidden;
}

.tw2c-activation-summary,
.tw2c-launch-state,
.tw2c-import-launch-note {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
    padding: 0.9rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.tw2c-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.tw2c-check-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left-width: 0.35rem;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.75rem;
}

.tw2c-check-ok {
    border-left-color: #198754;
}

.tw2c-check-warning {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}

.tw2c-launch-state {
    border-left: 0.35rem solid #0d6efd;
}

.tw2c-action-stack {
    display: grid;
    gap: 0.55rem;
}

.tw2c-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.tw2c-step-grid .btn,
.tw2c-action-stack .btn {
    min-height: 42px;
    font-weight: 800;
    white-space: normal;
}

.tw2c-issue-details {
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-radius: 14px;
    background: #fffdf5;
    overflow: hidden;
}

.tw2c-issue-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.tw2c-issue-details > summary::-webkit-details-marker {
    display: none;
}

.tw2c-issue-details ul {
    padding-left: 1.25rem;
}

.tw2c-import-launch-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-left: 0.35rem solid #198754;
    background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
}

@media (max-width: 991.98px) {
    .tw2c-check-grid,
    .tw2c-step-grid {
        grid-template-columns: 1fr;
    }

    .tw2c-publish-card .card-header,
    .tw2c-import-launch-note {
        align-items: stretch !important;
        flex-direction: column;
    }

    .tw2c-import-launch-note .btn,
    .tw2c-step-grid .btn,
    .tw2c-action-stack .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .tw2c-activation-summary,
    .tw2c-launch-state,
    .tw2c-import-launch-note,
    .tw2c-check-card {
        padding: 0.7rem;
        border-radius: 14px;
    }
}

/* =========================================================
   PHASE TW-2D - VISIBILITY + DISCOVERY HARDENING
   Safe additive layer for public/private league activation.
========================================================= */

.tw2d-badge-private,
.tw2d-badge-public {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.1;
}

.tw2d-badge-private {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid rgba(255, 193, 7, 0.42);
}

.tw2d-badge-public {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid rgba(25, 135, 84, 0.32);
}

.tw2d-visibility-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-left-width: 0.45rem;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.tw2d-visibility-private {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.tw2d-visibility-public {
    border-left-color: #198754;
    background: linear-gradient(180deg, #ffffff 0%, #f4fff8 100%);
}

.tw2d-visibility-banner-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.tw2d-visibility-icon {
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    font-size: 1.25rem;
}

.tw2d-visibility-kicker {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tw2d-visibility-title {
    color: #111827;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.15;
}

.tw2d-visibility-text {
    color: #495057;
    font-size: 0.92rem;
    line-height: 1.35;
    margin-top: 0.18rem;
}

.tw2d-visibility-state-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.tw2d-visibility-explainer {
    padding: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.35;
}

.tw2d-visibility-explainer-private {
    background: #fffaf0;
    border-left: 0.35rem solid #ffc107;
}

.tw2d-visibility-explainer-public {
    background: #f4fff8;
    border-left: 0.35rem solid #198754;
}

.tw2d-visibility-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.tw2d-visibility-choice {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-left-width: 0.35rem;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.tw2d-visibility-choice-private {
    border-left-color: #ffc107;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.tw2d-visibility-choice-public {
    border-left-color: #198754;
    background: linear-gradient(180deg, #ffffff 0%, #f4fff8 100%);
}

.tw2d-visibility-choice-current {
    outline: 2px solid rgba(13, 110, 253, 0.22);
    outline-offset: 2px;
}

.tw2d-choice-heading {
    font-weight: 900;
    line-height: 1.15;
}

.tw2d-choice-text {
    flex: 1 1 auto;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.35;
}

.tw2d-confirm-public {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid rgba(25, 135, 84, 0.18);
    border-radius: 12px;
    background: #ffffff;
    color: #0f5132;
    line-height: 1.25;
}

.tw2d-confirm-public input {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .tw2d-visibility-banner {
        position: sticky;
        top: 0.45rem;
        z-index: 1012;
        align-items: stretch;
        flex-direction: column;
        padding: 0.85rem;
        border-radius: 16px;
    }

    .tw2d-visibility-state-pill {
        align-self: flex-start;
    }

    .tw2d-visibility-choice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .tw2d-visibility-banner-main {
        flex-direction: column;
        gap: 0.55rem;
    }

    .tw2d-visibility-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 14px;
    }

    .tw2d-visibility-title {
        font-size: 1rem;
    }

    .tw2d-visibility-text {
        font-size: 0.86rem;
    }

    .tw2d-visibility-state-pill,
    .tw2d-visibility-choice .btn {
        width: 100%;
    }
}

/* =========================================================
   PHASE TW-2E - PUBLIC DISCOVERY + JOIN REQUEST SAFETY
   Safe additive visibility/discovery styling. Keeps private
   review leagues visually distinct from public leagues and
   makes public join-request behavior clearer on desktop/mobile.
========================================================= */

.tw2e-public-badge,
.tw2e-private-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 999px;
    font-weight: 900;
    line-height: 1.15;
    white-space: normal;
}

.tw2e-public-badge {
    color: #ffffff !important;
    background: #198754 !important;
}

.tw2e-private-badge {
    color: #3d2b00 !important;
    background: #ffc107 !important;
}

.tw2e-discovery-safety-card,
.tw2e-public-state-banner {
    border: 1px solid rgba(25, 135, 84, 0.18);
    border-left: 0.35rem solid #198754;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.tw2e-discovery-safety-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.9rem 1rem;
}

.tw2e-discovery-safety-main,
.tw2e-public-state-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tw2e-public-state-banner {
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.tw2e-discovery-icon {
    flex: 0 0 auto;
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #e9f7ef;
    font-size: 1.25rem;
}

.tw2e-discovery-kicker {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-transform: uppercase;
}

.tw2e-discovery-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tw2e-discovery-pending {
    grid-column: 1 / -1;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 193, 7, 0.28);
    border-radius: 12px;
    background: #fffdf2;
    color: #664d03;
    font-size: 0.9rem;
}

.access1-public-leagues-page .card,
.phase9-public-page .card {
    border-radius: 16px;
}

.access1-public-leagues-page .card:has(.tw2e-public-badge),
.phase9-public-page .card:has(.tw2e-public-badge) {
    border-color: rgba(25, 135, 84, 0.18);
}

@media (max-width: 991.98px) {
    .tw2e-discovery-safety-card {
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }

    .tw2e-discovery-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .tw2e-discovery-actions .btn {
        width: 100%;
    }

    .tw2e-public-state-banner {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .tw2e-discovery-safety-main {
        align-items: flex-start;
    }

    .tw2e-discovery-actions {
        grid-template-columns: 1fr;
    }

    .tw2e-public-state-banner .badge {
        width: 100%;
        min-height: 38px;
    }
}
/* =========================================================
   PHASE TW2F - UNIFIED LEAGUE NAVIGATION
   Safe additive-only styles.
========================================================= */

.league-nav-shell {
    border-radius: 18px;
    overflow: hidden;
}

.league-nav-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    color: #ffffff;
    padding: 0.9rem 1rem;
}

.league-nav-title {
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.league-nav-subtitle {
    opacity: 0.92;
    font-size: 0.9rem;
}

.league-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

    .league-nav-links .btn {
        border-radius: 999px;
        font-weight: 600;
    }

.league-nav-mobile-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .league-nav-shell {
        border-radius: 16px;
    }

    .league-nav-header {
        padding: 0.8rem 0.9rem;
    }

    .league-nav-links {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.2rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

        .league-nav-links .btn {
            flex: 0 0 auto;
            white-space: nowrap;
        }

    .league-nav-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 0.75rem;
        border-radius: 12px;
    }
}

@media (max-width: 575.98px) {
    .league-nav-title {
        font-size: 1rem;
        line-height: 1.2;
    }

    .league-nav-subtitle {
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .league-nav-links .btn {
        min-height: 40px;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

/* =========================================================
   PHASE MOBILE-AUTH-2B - GUEST LOGIN / REGISTER BOTTOM TOGGLE
   Safe append-only mobile layer. Adds a logged-out mobile
   bottom shortcut and slide-up auth chooser without changing
   Identity routes, forms, login logic, or desktop navigation.
========================================================= */

.app-mobile-bottom-nav-guest {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-mobile-guest-auth-toggle {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.app-mobile-guest-auth-toggle[aria-expanded="true"],
.app-mobile-guest-auth-toggle.app-mobile-bottom-nav-active {
    background: #eef5ff;
    color: #0d6efd;
}

.app-mobile-guest-auth-panel[hidden] {
    display: none !important;
}

.app-mobile-guest-auth-panel {
    position: fixed;
    inset: 0;
    z-index: 1065;
    display: none;
}

.app-mobile-guest-auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(4px);
}

.app-mobile-guest-auth-sheet {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: calc(5.35rem + env(safe-area-inset-bottom));
    max-height: min(72vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.app-mobile-guest-auth-sheet-header {
    position: sticky;
    top: -0.9rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0 0.75rem;
    margin-top: -0.2rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.98);
}

.app-mobile-guest-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.app-mobile-guest-auth-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    row-gap: 0.12rem;
    min-height: 5.25rem;
    padding: 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-left: 0.35rem solid #64748b;
    border-radius: 16px;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.app-mobile-guest-auth-tile:hover,
.app-mobile-guest-auth-tile:focus {
    color: #0d6efd;
    text-decoration: none;
    border-color: rgba(13, 110, 253, 0.22);
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.10);
}

.app-mobile-guest-auth-tile > span {
    grid-row: 1 / span 2;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f5f9;
    font-size: 1.1rem;
}

.app-mobile-guest-auth-tile strong {
    display: block;
    font-size: 0.98rem;
    line-height: 1.15;
}

.app-mobile-guest-auth-tile small {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.25;
}

.app-mobile-guest-auth-tile-primary {
    border-left-color: #0d6efd;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.app-mobile-guest-auth-tile-info {
    border-left-color: #0dcaf0;
    background: linear-gradient(180deg, #ffffff 0%, #f6fdff 100%);
}

.app-mobile-guest-auth-note {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(13, 110, 253, 0.14);
    border-radius: 14px;
    background: #f8fbff;
}

@media (max-width: 991.98px) {
    .app-mobile-guest-auth-panel.app-mobile-guest-auth-panel-open {
        display: block;
    }

    body.app-mobile-guest-auth-open {
        overflow: hidden;
    }

    .app-mobile-bottom-nav-guest .app-mobile-bottom-nav-item {
        min-height: 3.6rem;
    }
}

@media (max-width: 575.98px) {
    .app-mobile-bottom-nav-guest {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .app-mobile-guest-auth-grid {
        grid-template-columns: 1fr;
    }

    .app-mobile-guest-auth-sheet {
        left: 0.45rem;
        right: 0.45rem;
        padding: 0.8rem;
    }

    .app-mobile-guest-auth-tile {
        min-height: 4.6rem;
        padding: 0.72rem;
    }
}

@media (max-width: 380px) {
    .app-mobile-bottom-nav-guest .app-mobile-bottom-nav-item {
        font-size: 0.62rem;
    }

    .app-mobile-guest-auth-sheet {
        left: 0.35rem;
        right: 0.35rem;
    }
}

/* =========================================================
   PHASE MOBILE-NAV-LOGIN-LOGOFF - BOTTOM NAV CLEANUP
   Safe additive shell styling: guest bottom nav no longer
   duplicates Home/Play/Schedule, Login/Register are separate
   buttons, and signed-in users get a bottom Log off action.
========================================================= */

.app-mobile-bottom-nav-form {
    display: contents;
    margin: 0;
}

.app-mobile-bottom-nav-button {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    width: 100%;
}

.app-mobile-bottom-nav-logoff {
    color: #842029;
}

.app-mobile-bottom-nav-logoff:focus,
.app-mobile-bottom-nav-logoff:hover {
    background: #fff1f1;
    color: #bb2d3b;
}

.app-mobile-bottom-nav-register {
    background: #0d6efd;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.24);
}

.app-mobile-bottom-nav-register:focus,
.app-mobile-bottom-nav-register:hover {
    background: #0b5ed7;
    color: #ffffff;
}

.app-mobile-bottom-nav-login {
    border: 1px solid rgba(13, 110, 253, 0.18);
    background: #eef5ff;
    color: #0d47a1;
}

.app-mobile-bottom-nav-login:focus,
.app-mobile-bottom-nav-login:hover {
    background: #dbeafe;
    color: #0a58ca;
}

@media (max-width: 991.98px) {
    .app-mobile-bottom-nav-guest,
    .app-mobile-bottom-nav-signed-in {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .app-mobile-bottom-nav-form .app-mobile-bottom-nav-item {
        min-height: 52px;
    }
}

@media (max-width: 575.98px) {
    .app-mobile-bottom-nav-guest,
    .app-mobile-bottom-nav-signed-in {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .app-mobile-bottom-nav-item,
    .app-mobile-bottom-nav-button {
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .app-mobile-bottom-nav-register,
    .app-mobile-bottom-nav-login,
    .app-mobile-bottom-nav-logoff {
        font-size: 0.6rem;
    }
}