@import url("../vendor/fontawesome/css/all.min.css");

/* Ajustes responsivos conservadores carregados por ultimo.
   Objetivo: corrigir tablets/iPads/notebooks pequenos sem redesenhar o desktop/mobile existentes. */

:root {
    --ux-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--ux-font);
    letter-spacing: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.sidebar-nav-icon,
.bottom-nav-icon {
    color: var(--primary, #37e375);
}

.sidebar-nav-icon i,
.bottom-nav-icon i {
    color: inherit;
}

.dashboard-content,
.dashboard-premium-content,
.league-content,
.bets-content,
.ranking-content,
.ranking-premium-content,
.history-content,
.history-premium-content,
.games-content,
.profile-content,
.private-ranking-content,
.dashboard-main-grid,
.dashboard-secondary-grid,
.games-layout,
.games-summary-grid,
.profile-premium-layout,
.ranking-premium-layout,
.private-ranking-layout,
.history-premium-layout,
.league-layout,
.bets-layout,
.dashboard-card,
.games-panel,
.games-summary-card,
.profile-card,
.ranking-card,
.private-ranking-card,
.history-card,
.league-card,
.match-card,
.game-card,
.desktop-topbar-area,
.topbar-right,
.topbar-league-form,
.round-countdown,
.user-chip {
    min-width: 0;
}

.league-select,
.user-name,
.sidebar-profile-info strong,
.sidebar-profile-info span,
.selected-team-text,
.game-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 901px) and (max-width: 1180px) {
    body {
        overflow-x: hidden;
    }

    .app-topbar,
    .profile-topbar,
    .bets-topbar.app-topbar {
        gap: 14px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .desktop-topbar-area {
        gap: 14px !important;
    }

    .topbar-league-form {
        min-width: 180px !important;
        max-width: 240px !important;
    }

    .round-countdown {
        min-width: 174px !important;
    }

    .round-countdown > span {
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .countdown-boxes strong {
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 17px !important;
    }

    .countdown-boxes b {
        font-size: 15px !important;
    }

    .topbar-primary-action,
    .desktop-only-action {
        display: none !important;
    }

    .user-name {
        max-width: 92px !important;
    }

    .dashboard-content,
    .dashboard-premium-content,
    .games-content,
    .profile-content,
    .ranking-premium-content,
    .history-premium-content,
    .league-content,
    .bets-content,
    .private-ranking-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .dashboard-main-grid,
    .dashboard-secondary-grid,
    .profile-premium-layout,
    .games-layout,
    .history-premium-layout,
    .ranking-premium-layout,
    .private-ranking-layout,
    .league-layout,
    .bets-layout {
        grid-template-columns: 1fr !important;
    }

    .games-summary-grid,
    .dashboard-quick-grid,
    .profile-stats-grid,
    .ranking-summary-grid,
    .private-ranking-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    body {
        overflow-x: hidden;
        padding-bottom: 84px;
    }

    .app-sidebar,
    .profile-sidebar,
    .league-sidebar,
    .sidebar {
        display: none !important;
    }

    .app-shell,
    .profile-shell,
    .league-shell,
    .ranking-shell,
    .history-shell,
    .games-shell {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .app-topbar,
    .profile-topbar,
    .bets-topbar.app-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 110 !important;
        width: calc(100% - 28px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 14px auto 0 !important;
        padding: 12px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-areas:
            "brand notif avatar"
            "league league league"
            "countdown countdown countdown"
            "cta cta cta" !important;
        gap: 10px !important;
        align-items: center !important;
        border-radius: 20px !important;
        overflow: visible !important;
    }

    .mobile-brand-area,
    .topbar-left.mobile-brand-area {
        grid-area: brand !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .brand-logo {
        width: 112px !important;
        max-width: 112px !important;
        height: auto !important;
    }

    .desktop-topbar-area {
        display: contents !important;
    }

    .topbar-league-form {
        grid-area: league !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .league-select {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        font-size: 14px !important;
    }

    .topbar-divider {
        display: none !important;
    }

    .round-countdown {
        grid-area: countdown !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    .round-countdown > span {
        width: 100% !important;
        white-space: normal !important;
    }

    .countdown-boxes {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    .topbar-right {
        display: contents !important;
    }

    .notification-wrapper,
    .topbar-right > .notification-btn {
        grid-area: notif !important;
        justify-self: end !important;
    }

    .notification-btn {
        display: inline-flex !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .topbar-user-chip,
    .user-chip.topbar-user-chip {
        grid-area: avatar !important;
        justify-self: end !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .topbar-user-chip .user-name,
    .user-chip.topbar-user-chip .user-name {
        display: none !important;
    }

    .topbar-user-chip .user-avatar,
    .topbar-user-chip .user-avatar-img,
    .user-chip.topbar-user-chip .user-avatar,
    .user-chip.topbar-user-chip .user-avatar-img {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 50% !important;
    }

    .topbar-primary-action,
    .desktop-only-action {
        grid-area: cta !important;
        width: 100% !important;
        min-height: 42px !important;
        display: inline-flex !important;
        justify-content: center !important;
    }

    .logout-btn {
        display: none !important;
    }

    .dashboard-content,
    .dashboard-premium-content,
    .league-content,
    .bets-content,
    .ranking-content,
    .ranking-premium-content,
    .history-content,
    .history-premium-content,
    .games-content,
    .profile-content,
    .private-ranking-content {
        width: 100% !important;
        max-width: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .dashboard-premium-content::before {
        content: none !important;
        display: none !important;
    }

    .dashboard-main-grid,
    .dashboard-secondary-grid,
    .profile-premium-layout,
    .games-layout,
    .history-premium-layout,
    .ranking-premium-layout,
    .private-ranking-layout,
    .league-layout,
    .bets-layout {
        grid-template-columns: 1fr !important;
    }

    .games-summary-grid,
    .dashboard-quick-grid,
    .profile-stats-grid,
    .ranking-summary-grid,
    .private-ranking-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        z-index: 220 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        background: rgba(28, 28, 28, 0.97) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 18px !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(14px) !important;
        pointer-events: auto !important;
        overflow: hidden !important;
    }

    .bottom-nav-item {
        min-width: 0 !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 3px !important;
        border-radius: 16px !important;
        text-decoration: none !important;
        pointer-events: auto !important;
        overflow: hidden !important;
    }

    .mobile-bottom-nav > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .mobile-bottom-nav .bottom-nav-item {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 2px !important;
        overflow: hidden !important;
    }

    .bottom-nav-icon {
        width: 22px !important;
        height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--primary, #37e375) !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .bottom-nav-icon i {
        color: inherit !important;
        font-size: inherit !important;
        line-height: 1 !important;
    }

    .bottom-nav-label {
        max-width: 100% !important;
        font-size: 9px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 15px;
    }

    button,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .dashboard-premium-content::before {
        content: none !important;
        display: none !important;
    }

    .bottom-nav-label {
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }
    .logo-img {
        width: 120px !important;
        height: auto !important;
    }
}

@media (max-width: 430px) {
    .mobile-bottom-nav {
        gap: 2px !important;
        padding: 7px !important;
    }

    .mobile-bottom-nav .bottom-nav-item {
        min-height: 50px !important;
        gap: 2px !important;
    }

    .bottom-nav-icon {
        width: 21px !important;
        height: 21px !important;
        font-size: 19px !important;
    }

    .bottom-nav-label {
        display: block !important;
        font-size: 8px !important;
    }
}

@media (max-width: 380px) {
    .mobile-bottom-nav {
        left: max(6px, env(safe-area-inset-left)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        gap: 3px !important;
        padding: 7px !important;
    }

    .bottom-nav-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 18px !important;
    }

    .bottom-nav-label {
        font-size: 7.5px !important;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .login-page,
    .register-page,
    .auth-page {
        grid-template-columns: 1fr !important;
    }

    .login-panel,
    .register-panel,
    .auth-panel {
        order: 1;
        padding: 30px 22px 16px !important;
    }

    .login-brand,
    .register-brand,
    .auth-brand {
        order: 2;
        padding: 10px 22px 36px !important;
    }

    .login-card,
    .register-card,
    .auth-card {
        max-width: 520px !important;
    }

    .brand-content {
        max-width: 720px !important;
        text-align: center !important;
    }

    .brand-content h1 {
        font-size: 36px !important;
    }

    .brand-content p {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }

    .brand-highlights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .login-card,
    .register-card,
    .auth-card {
        border-radius: 20px !important;
    }

    .logo-img {
        margin-bottom: 0 !important;
    }

    .brand-content h1 {
        font-size: 28px !important;
    }

    .brand-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .brand-highlights {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Padrao global do top header das paginas internas. */
.app-topbar,
.profile-topbar,
.bets-topbar.app-topbar,
.private-rankings-premium-page .app-topbar.dashboard-like-topbar,
.private-ranking-detail-premium-page .app-topbar.dashboard-like-topbar,
.ranking-premium-page .app-topbar,
.pro-plan-page .app-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 140 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 78px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 14px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    background: linear-gradient(90deg, rgba(12, 18, 18, 0.96), rgba(15, 22, 21, 0.94)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.app-topbar .mobile-brand-area,
.profile-topbar .mobile-brand-area,
.bets-topbar.app-topbar .mobile-brand-area {
    display: none !important;
}

.app-topbar .desktop-topbar-area,
.profile-topbar .desktop-topbar-area,
.bets-topbar.app-topbar .desktop-topbar-area,
.private-rankings-premium-page .dashboard-like-topbar .desktop-topbar-area,
.private-ranking-detail-premium-page .desktop-topbar-area,
.ranking-premium-page .desktop-topbar-area,
.pro-plan-page .desktop-topbar-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 26px !important;
}

.app-topbar .topbar-league-form,
.profile-topbar .topbar-league-form,
.bets-topbar.app-topbar .topbar-league-form {
    width: clamp(220px, 20vw, 300px) !important;
    min-width: 220px !important;
    max-width: 300px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.app-topbar .topbar-league-form label,
.profile-topbar .topbar-league-form label,
.bets-topbar.app-topbar .topbar-league-form label {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.app-topbar .league-select,
.profile-topbar .league-select,
.bets-topbar.app-topbar .league-select {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 42px 0 16px !important;
    color: #f7f7f7 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.app-topbar .topbar-divider,
.profile-topbar .topbar-divider,
.bets-topbar.app-topbar .topbar-divider {
    width: 1px !important;
    min-width: 1px !important;
    height: 48px !important;
    min-height: 48px !important;
    background: rgba(255, 255, 255, 0.11) !important;
    display: block !important;
}

.app-topbar .round-countdown,
.profile-topbar .round-countdown,
.bets-topbar.app-topbar .round-countdown,
.private-rankings-premium-page .dashboard-like-topbar .round-countdown,
.private-ranking-detail-premium-page .round-countdown,
.ranking-premium-page .round-countdown,
.pro-plan-page .round-countdown {
    width: auto !important;
    min-width: 220px !important;
    max-width: 270px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-topbar .round-countdown > span,
.profile-topbar .round-countdown > span,
.bets-topbar.app-topbar .round-countdown > span,
.private-rankings-premium-page .dashboard-like-topbar .round-countdown > span,
.private-ranking-detail-premium-page .round-countdown > span,
.ranking-premium-page .round-countdown > span,
.pro-plan-page .round-countdown > span {
    width: 100% !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.app-topbar .round-countdown > span::before,
.profile-topbar .round-countdown > span::before,
.bets-topbar.app-topbar .round-countdown > span::before {
    content: none !important;
    display: none !important;
}

.app-topbar .countdown-boxes,
.profile-topbar .countdown-boxes,
.bets-topbar.app-topbar .countdown-boxes {
    display: grid !important;
    grid-template-columns: 44px 12px 44px 12px 44px !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
}

.app-topbar .countdown-boxes strong,
.profile-topbar .countdown-boxes strong,
.bets-topbar.app-topbar .countdown-boxes strong {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f8f8f8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.app-topbar .countdown-boxes b,
.profile-topbar .countdown-boxes b,
.bets-topbar.app-topbar .countdown-boxes b {
    width: 12px !important;
    min-width: 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.app-topbar .countdown-labels,
.profile-topbar .countdown-labels,
.bets-topbar.app-topbar .countdown-labels,
.app-topbar .round-countdown small,
.profile-topbar .round-countdown small,
.bets-topbar.app-topbar .round-countdown small {
    width: auto !important;
    display: grid !important;
    grid-template-columns: 44px 12px 44px 12px 44px !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.46) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

.app-topbar .countdown-labels span:nth-child(1),
.profile-topbar .countdown-labels span:nth-child(1),
.bets-topbar.app-topbar .countdown-labels span:nth-child(1) {
    grid-column: 1 !important;
}

.app-topbar .countdown-labels span:nth-child(2),
.profile-topbar .countdown-labels span:nth-child(2),
.bets-topbar.app-topbar .countdown-labels span:nth-child(2) {
    grid-column: 3 !important;
}

.app-topbar .countdown-labels span:nth-child(3),
.profile-topbar .countdown-labels span:nth-child(3),
.bets-topbar.app-topbar .countdown-labels span:nth-child(3) {
    grid-column: 5 !important;
}

.app-topbar .topbar-right,
.profile-topbar .topbar-right,
.bets-topbar.app-topbar .topbar-right {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
}

.app-topbar .topbar-primary-action,
.profile-topbar .topbar-primary-action,
.bets-topbar.app-topbar .topbar-primary-action,
.private-rankings-premium-page .topbar-primary-action,
.private-ranking-detail-premium-page .topbar-primary-action,
.ranking-premium-page .topbar-primary-action,
.pro-plan-page .topbar-primary-action {
    min-width: 180px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #07130c !important;
    background: linear-gradient(135deg, #38e878, #25c765) !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 14px 34px rgba(40, 216, 104, 0.22) !important;
    white-space: nowrap !important;
}

.app-topbar .notification-btn,
.profile-topbar .notification-btn,
.bets-topbar.app-topbar .notification-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
}

.app-topbar .topbar-user-chip,
.profile-topbar .topbar-user-chip,
.bets-topbar.app-topbar .topbar-user-chip {
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 14px 4px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 22px !important;
    white-space: nowrap !important;
}

.app-topbar .topbar-user-chip .user-avatar,
.app-topbar .topbar-user-chip .user-avatar-img,
.profile-topbar .topbar-user-chip .user-avatar,
.profile-topbar .topbar-user-chip .user-avatar-img,
.bets-topbar.app-topbar .topbar-user-chip .user-avatar,
.bets-topbar.app-topbar .topbar-user-chip .user-avatar-img {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
}

.app-topbar .topbar-user-chip .user-name,
.profile-topbar .topbar-user-chip .user-name,
.bets-topbar.app-topbar .topbar-user-chip .user-name {
    max-width: 112px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.user-pro-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    color: #07110d;
    background: linear-gradient(135deg, #43f58a, #22c96b);
    border: 1px solid rgba(94, 255, 157, 0.62);
    box-shadow: 0 0 14px rgba(55, 227, 117, 0.22);
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-topbar .logout-btn,
.profile-topbar .logout-btn,
.bets-topbar.app-topbar .logout-btn {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
}

@media (min-width: 901px) and (max-width: 1180px) {
    .app-topbar,
    .profile-topbar,
    .bets-topbar.app-topbar,
    .private-rankings-premium-page .app-topbar.dashboard-like-topbar,
    .private-ranking-detail-premium-page .app-topbar.dashboard-like-topbar,
    .ranking-premium-page .app-topbar,
    .pro-plan-page .app-topbar {
        min-height: 76px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 16px !important;
    }

    .app-topbar .desktop-topbar-area,
    .profile-topbar .desktop-topbar-area,
    .bets-topbar.app-topbar .desktop-topbar-area {
        gap: 16px !important;
    }

    .app-topbar .topbar-league-form,
    .profile-topbar .topbar-league-form,
    .bets-topbar.app-topbar .topbar-league-form {
        min-width: 190px !important;
        max-width: 230px !important;
    }

    .app-topbar .round-countdown,
    .profile-topbar .round-countdown,
    .bets-topbar.app-topbar .round-countdown {
        min-width: 190px !important;
        max-width: 230px !important;
    }

    .app-topbar .topbar-primary-action,
    .profile-topbar .topbar-primary-action,
    .bets-topbar.app-topbar .topbar-primary-action {
        min-width: 150px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (max-width: 900px) {
    .app-sidebar,
    .profile-sidebar,
    .league-sidebar,
    .sidebar {
        display: none !important;
    }

    .app-shell,
    .profile-shell,
    .league-shell,
    .ranking-shell,
    .history-shell,
    .games-shell,
    .pro-plan-app-shell,
    .private-rankings-premium-page .app-shell,
    .private-ranking-detail-premium-page .app-shell {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
    }

    .app-topbar,
    .profile-topbar,
    .bets-topbar.app-topbar,
    .private-rankings-premium-page .app-topbar.dashboard-like-topbar,
    .private-ranking-detail-premium-page .app-topbar.dashboard-like-topbar,
    .ranking-premium-page .app-topbar,
    .pro-plan-page .app-topbar {
        position: sticky !important;
        top: 0 !important;
        width: calc(100% - 28px) !important;
        min-height: 0 !important;
        margin: 10px auto 0 !important;
        padding: 12px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-areas:
            "brand notif avatar"
            "league league league"
            "countdown countdown countdown"
            "cta cta cta" !important;
        gap: 10px !important;
        align-items: center !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    .app-topbar .mobile-brand-area,
    .profile-topbar .mobile-brand-area,
    .bets-topbar.app-topbar .mobile-brand-area,
    .app-topbar .topbar-left.mobile-brand-area,
    .profile-topbar .topbar-left.mobile-brand-area {
        grid-area: brand !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .app-topbar .brand-logo,
    .profile-topbar .brand-logo,
    .bets-topbar.app-topbar .brand-logo {
        width: 112px !important;
        max-width: 112px !important;
        height: auto !important;
        display: block !important;
    }

    .app-topbar .desktop-topbar-area,
    .profile-topbar .desktop-topbar-area,
    .bets-topbar.app-topbar .desktop-topbar-area,
    .private-rankings-premium-page .dashboard-like-topbar .desktop-topbar-area,
    .private-ranking-detail-premium-page .desktop-topbar-area,
    .ranking-premium-page .desktop-topbar-area,
    .pro-plan-page .desktop-topbar-area {
        display: contents !important;
    }

    .app-topbar .topbar-league-form,
    .profile-topbar .topbar-league-form,
    .bets-topbar.app-topbar .topbar-league-form {
        grid-area: league !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .app-topbar .league-select,
    .profile-topbar .league-select,
    .bets-topbar.app-topbar .league-select {
        height: 42px !important;
        min-height: 42px !important;
    }

    .app-topbar .topbar-divider,
    .profile-topbar .topbar-divider,
    .bets-topbar.app-topbar .topbar-divider {
        display: none !important;
    }

    .app-topbar .round-countdown,
    .profile-topbar .round-countdown,
    .bets-topbar.app-topbar .round-countdown,
    .private-rankings-premium-page .dashboard-like-topbar .round-countdown,
    .private-ranking-detail-premium-page .round-countdown,
    .ranking-premium-page .round-countdown,
    .pro-plan-page .round-countdown {
        grid-area: countdown !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        align-items: center !important;
        text-align: center !important;
    }

    .app-topbar .round-countdown > span,
    .profile-topbar .round-countdown > span,
    .bets-topbar.app-topbar .round-countdown > span {
        white-space: normal !important;
    }

    .app-topbar .countdown-boxes,
    .profile-topbar .countdown-boxes,
    .bets-topbar.app-topbar .countdown-boxes,
    .app-topbar .countdown-labels,
    .profile-topbar .countdown-labels,
    .bets-topbar.app-topbar .countdown-labels,
    .app-topbar .round-countdown small,
    .profile-topbar .round-countdown small,
    .bets-topbar.app-topbar .round-countdown small {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .app-topbar .topbar-right,
    .profile-topbar .topbar-right,
    .bets-topbar.app-topbar .topbar-right {
        display: contents !important;
    }

    .app-topbar .notification-wrapper,
    .profile-topbar .notification-wrapper,
    .bets-topbar.app-topbar .notification-wrapper,
    .app-topbar .topbar-right > .notification-btn,
    .profile-topbar .topbar-right > .notification-btn {
        grid-area: notif !important;
        justify-self: end !important;
    }

    .app-topbar .notification-btn,
    .profile-topbar .notification-btn,
    .bets-topbar.app-topbar .notification-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
    }

    .app-topbar .topbar-user-chip,
    .profile-topbar .topbar-user-chip,
    .bets-topbar.app-topbar .topbar-user-chip {
        grid-area: avatar !important;
        justify-self: end !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .app-topbar .topbar-user-chip .user-name,
    .profile-topbar .topbar-user-chip .user-name,
    .bets-topbar.app-topbar .topbar-user-chip .user-name {
        display: none !important;
    }

    .app-topbar .topbar-user-chip .user-pro-badge,
    .profile-topbar .topbar-user-chip .user-pro-badge,
    .bets-topbar.app-topbar .topbar-user-chip .user-pro-badge {
        min-width: 26px !important;
        height: 16px !important;
        padding: 0 5px !important;
        font-size: 8px !important;
    }

    .app-topbar .topbar-user-chip .user-avatar,
    .app-topbar .topbar-user-chip .user-avatar-img,
    .profile-topbar .topbar-user-chip .user-avatar,
    .profile-topbar .topbar-user-chip .user-avatar-img,
    .bets-topbar.app-topbar .topbar-user-chip .user-avatar,
    .bets-topbar.app-topbar .topbar-user-chip .user-avatar-img {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .app-topbar .topbar-primary-action,
    .profile-topbar .topbar-primary-action,
    .bets-topbar.app-topbar .topbar-primary-action,
    .private-rankings-premium-page .topbar-primary-action,
    .private-ranking-detail-premium-page .topbar-primary-action,
    .ranking-premium-page .topbar-primary-action,
    .pro-plan-page .topbar-primary-action {
        grid-area: cta !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 16px !important;
        display: inline-flex !important;
    }

    .app-topbar .logout-btn,
    .profile-topbar .logout-btn,
    .bets-topbar.app-topbar .logout-btn {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .app-topbar,
    .profile-topbar,
    .bets-topbar.app-topbar,
    .private-rankings-premium-page .app-topbar.dashboard-like-topbar,
    .private-ranking-detail-premium-page .app-topbar.dashboard-like-topbar,
    .ranking-premium-page .app-topbar,
    .pro-plan-page .app-topbar {
        width: calc(100% - 12px) !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    .app-topbar .brand-logo,
    .profile-topbar .brand-logo,
    .bets-topbar.app-topbar .brand-logo {
        width: 98px !important;
        max-width: 98px !important;
    }

    .app-topbar .countdown-boxes,
    .profile-topbar .countdown-boxes,
    .bets-topbar.app-topbar .countdown-boxes,
    .app-topbar .countdown-labels,
    .profile-topbar .countdown-labels,
    .bets-topbar.app-topbar .countdown-labels,
    .app-topbar .round-countdown small,
    .profile-topbar .round-countdown small,
    .bets-topbar.app-topbar .round-countdown small {
        grid-template-columns: 40px 10px 40px 10px 40px !important;
    }

    .app-topbar .countdown-boxes strong,
    .profile-topbar .countdown-boxes strong,
    .bets-topbar.app-topbar .countdown-boxes strong {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 17px !important;
    }
}

@media (min-width: 901px) {
    .games-premium-page > .app-topbar.dashboard-like-topbar,
    .history-wrapper > .app-topbar,
    .ranking-wrapper.ranking-premium-page > .app-topbar,
    .ranking-wrapper.private-rankings-premium-page > .app-topbar.dashboard-like-topbar,
    .ranking-wrapper.private-ranking-detail-premium-page > .app-topbar.dashboard-like-topbar {
        width: calc(100% - 260px) !important;
        margin-left: 260px !important;
    }
}

/* Correção mobile: selo PRO no avatar do app-topbar
   Mantém o avatar circular e posiciona o PRO como badge flutuante,
   evitando corte em telas pequenas. */
@media (max-width: 900px) {
    .app-topbar .topbar-user-chip,
    .profile-topbar .topbar-user-chip,
    .bets-topbar.app-topbar .topbar-user-chip,
    .user-chip.topbar-user-chip {
        position: relative !important;
        overflow: visible !important;
    }

    .app-topbar .topbar-user-chip .user-pro-badge,
    .profile-topbar .topbar-user-chip .user-pro-badge,
    .bets-topbar.app-topbar .topbar-user-chip .user-pro-badge,
    .user-chip.topbar-user-chip .user-pro-badge {
        position: absolute !important;
        right: -8px !important;
        bottom: -5px !important;
        z-index: 3 !important;
        min-width: 25px !important;
        height: 15px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 380px) {
    .app-topbar .topbar-user-chip .user-pro-badge,
    .profile-topbar .topbar-user-chip .user-pro-badge,
    .bets-topbar.app-topbar .topbar-user-chip .user-pro-badge,
    .user-chip.topbar-user-chip .user-pro-badge {
        right: -6px !important;
        bottom: -4px !important;
        min-width: 23px !important;
        height: 14px !important;
        font-size: 6.5px !important;
    }
}

/* iPad Air/Mini: ajuste final escopado para ranking, privados, historico, jogos e liga. */
@media (min-width: 761px) and (max-width: 1180px) {
    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page),
    .history-wrapper,
    body.games-premium-page,
    .league-page {
        padding-bottom: 92px !important;
        overflow-x: hidden !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .app-sidebar,
    .history-wrapper .app-sidebar,
    .games-premium-page > .app-sidebar,
    .league-page .league-sidebar,
    .league-page .app-sidebar,
    .league-page .sidebar {
        display: none !important;
    }

    .league-page .league-shell {
        margin-left: 0 !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) > .app-topbar,
    .history-wrapper > .app-topbar,
    .games-premium-page > .app-topbar,
    .league-page .app-topbar {
        position: relative !important;
        top: auto !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 12px auto 0 !important;
        padding: 12px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 34px 34px !important;
        grid-template-areas:
            "brand notif avatar"
            "league league league"
            "counter counter counter"
            "cta cta cta" !important;
        gap: 10px 8px !important;
        align-items: center !important;
        justify-content: stretch !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at top left, rgba(55, 227, 117, 0.10), transparent 34%),
            rgba(5, 14, 14, 0.96) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
        overflow: visible !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .mobile-brand-area,
    .history-wrapper .mobile-brand-area,
    .games-premium-page .mobile-brand-area,
    .league-page .mobile-brand-area {
        grid-area: brand !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .brand-logo,
    .history-wrapper .brand-logo,
    .games-premium-page .brand-logo,
    .league-page .brand-logo {
        width: 96px !important;
        max-width: 96px !important;
        height: auto !important;
        display: block !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .desktop-topbar-area,
    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-right,
    .history-wrapper .desktop-topbar-area,
    .history-wrapper .topbar-right,
    .games-premium-page .desktop-topbar-area,
    .games-premium-page .topbar-right,
    .league-page .desktop-topbar-area,
    .league-page .topbar-right {
        display: contents !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-league-form,
    .history-wrapper .topbar-league-form,
    .games-premium-page .topbar-league-form,
    .league-page .topbar-league-form {
        grid-area: league !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-league-form label,
    .history-wrapper .topbar-league-form label,
    .games-premium-page .topbar-league-form label,
    .league-page .topbar-league-form label {
        width: 100% !important;
        text-align: left !important;
        font-size: 8px !important;
        line-height: 1 !important;
        color: rgba(255, 255, 255, 0.56) !important;
        letter-spacing: 0.08em !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .league-select,
    .history-wrapper .league-select,
    .games-premium-page .league-select,
    .league-page .league-select {
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        line-height: 38px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        padding: 0 12px !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-divider,
    .history-wrapper .topbar-divider,
    .games-premium-page .topbar-divider,
    .league-page .topbar-divider {
        display: none !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .round-countdown,
    .history-wrapper .round-countdown,
    .games-premium-page .round-countdown,
    .league-page .round-countdown {
        grid-area: counter !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        text-align: center !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .round-countdown > span,
    .ranking-wrapper.ranking-premium-page .round-countdown-title,
    .history-wrapper .round-countdown > span,
    .games-premium-page .round-countdown > span,
    .league-page .round-countdown > span,
    .league-page .round-countdown-title {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .countdown-boxes,
    .history-wrapper .countdown-boxes,
    .games-premium-page .countdown-boxes,
    .league-page .countdown-boxes {
        width: 154px !important;
        max-width: 154px !important;
        display: grid !important;
        grid-template-columns: 40px 17px 40px 17px 40px !important;
        gap: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        justify-items: center !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .countdown-boxes strong,
    .history-wrapper .countdown-boxes strong,
    .games-premium-page .countdown-boxes strong,
    .league-page .countdown-boxes strong {
        width: 40px !important;
        min-width: 40px !important;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 16px !important;
        border-radius: 11px !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .countdown-boxes b,
    .history-wrapper .countdown-boxes b,
    .games-premium-page .countdown-boxes b,
    .league-page .countdown-boxes b {
        width: 17px !important;
        min-width: 17px !important;
        font-size: 15px !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .countdown-labels,
    .history-wrapper .countdown-labels,
    .league-page .countdown-labels,
    .ranking-wrapper:is(.private-rankings-premium-page, .private-ranking-detail-premium-page) .round-countdown small,
    .games-premium-page .round-countdown small {
        width: 154px !important;
        max-width: 154px !important;
        display: grid !important;
        grid-template-columns: 40px 17px 40px 17px 40px !important;
        gap: 0 !important;
        margin: 4px auto 0 !important;
        justify-content: center !important;
        justify-items: center !important;
        text-align: center !important;
        font-size: 7px !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-primary-action,
    .history-wrapper .topbar-primary-action,
    .games-premium-page .topbar-primary-action,
    .league-page .topbar-primary-action {
        grid-area: cta !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .notification-btn,
    .history-wrapper .notification-btn,
    .games-premium-page .notification-btn,
    .league-page .notification-btn {
        grid-area: notif !important;
        justify-self: end !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 12px !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-user-chip,
    .history-wrapper .topbar-user-chip,
    .games-premium-page .topbar-user-chip,
    .league-page .topbar-user-chip {
        grid-area: avatar !important;
        justify-self: end !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: 0 !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-user-chip .user-name,
    .history-wrapper .topbar-user-chip .user-name,
    .games-premium-page .topbar-user-chip .user-name,
    .league-page .topbar-user-chip .user-name,
    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .logout-btn,
    .history-wrapper .logout-btn,
    .games-premium-page .logout-btn,
    .league-page .logout-btn {
        display: none !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-user-chip .user-avatar,
    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .topbar-user-chip .user-avatar-img,
    .history-wrapper .topbar-user-chip .user-avatar,
    .history-wrapper .topbar-user-chip .user-avatar-img,
    .games-premium-page .topbar-user-chip .user-avatar,
    .games-premium-page .topbar-user-chip .user-avatar-img,
    .league-page .topbar-user-chip .user-avatar,
    .league-page .topbar-user-chip .user-avatar-img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 50% !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .ranking-content,
    .history-wrapper > main.history-content-page.history-premium-content,
    .games-premium-page .games-content,
    .league-page .league-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 18px 16px 36px !important;
        box-sizing: border-box !important;
    }

    .ranking-wrapper.ranking-premium-page .ranking-center-viewport,
    .ranking-wrapper.private-rankings-premium-page .private-premium-center,
    .ranking-wrapper.private-ranking-detail-premium-page .private-premium-center,
    .history-wrapper .history-center,
    .history-wrapper .history-center-viewport,
    .history-wrapper .history-page-inner,
    .games-premium-page .games-center {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .ranking-wrapper.ranking-premium-page .ranking-premium-layout,
    .history-wrapper .history-detail-layout,
    .games-premium-page .games-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ranking-wrapper.ranking-premium-page .ranking-side-column,
    .history-wrapper .history-side-column,
    .games-premium-page .games-side-column {
        display: none !important;
    }

    .games-premium-page .games-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-main-column,
    .ranking-wrapper.private-rankings-premium-page .private-premium-side-column {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-side-column {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-side-column .private-premium-panel {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-create-panel,
    .ranking-wrapper.private-rankings-premium-page .private-premium-tip-card {
        min-height: 100% !important;
        padding: 18px !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-form,
    .ranking-wrapper.private-rankings-premium-page .private-premium-form .form-group,
    .ranking-wrapper.private-rankings-premium-page .private-premium-form input,
    .ranking-wrapper.private-rankings-premium-page .private-premium-form select,
    .ranking-wrapper.private-rankings-premium-page .private-premium-submit {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-section-header.compact h2 {
        font-size: 20px !important;
        line-height: 1.12 !important;
    }

    .ranking-wrapper.private-rankings-premium-page .private-premium-section-header.compact p,
    .ranking-wrapper.private-rankings-premium-page .private-premium-tip-card li {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .games-premium-page .game-card {
        grid-template-columns: 64px minmax(0, 1fr) 88px minmax(0, 1fr) !important;
        grid-template-areas:
            "date home score away"
            "place place place place"
            "status status status status" !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .games-premium-page .game-date { grid-area: date !important; }
    .games-premium-page .game-team-home { grid-area: home !important; }
    .games-premium-page .game-score-box { grid-area: score !important; }
    .games-premium-page .game-team-away { grid-area: away !important; }
    .games-premium-page .game-place { grid-area: place !important; }
    .games-premium-page .game-status {
        grid-area: status !important;
        justify-self: stretch !important;
        width: 100% !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .mobile-bottom-nav,
    .history-wrapper .mobile-bottom-nav,
    .games-premium-page .mobile-bottom-nav,
    .league-page .mobile-bottom-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        z-index: 220 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 10px !important;
        background: rgba(28, 28, 28, 0.97) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(14px) !important;
        overflow: hidden !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .bottom-nav-item,
    .history-wrapper .bottom-nav-item,
    .games-premium-page .bottom-nav-item,
    .league-page .bottom-nav-item {
        min-width: 0 !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 2px !important;
        border-radius: 16px !important;
        color: var(--muted, #bdbdbd) !important;
        text-decoration: none !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .bottom-nav-item.active,
    .history-wrapper .bottom-nav-item.active,
    .games-premium-page .bottom-nav-item.active,
    .league-page .bottom-nav-item.active {
        color: var(--primary, #37e375) !important;
        background: rgba(55, 227, 117, 0.12) !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .bottom-nav-icon,
    .history-wrapper .bottom-nav-icon,
    .games-premium-page .bottom-nav-icon,
    .league-page .bottom-nav-icon {
        width: 22px !important;
        height: 22px !important;
        font-size: 21px !important;
        line-height: 1 !important;
        color: var(--primary, #37e375) !important;
    }

    .ranking-wrapper:is(.ranking-premium-page, .private-rankings-premium-page, .private-ranking-detail-premium-page) .bottom-nav-label,
    .history-wrapper .bottom-nav-label,
    .games-premium-page .bottom-nav-label,
    .league-page .bottom-nav-label {
        display: block !important;
        max-width: 100% !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* iPad Air/Mini: header da pagina de liga isolado do restante dos overrides. */
@media (min-width: 761px) and (max-width: 1180px) {
    .league-page .bets-topbar.app-topbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 12px auto 0 !important;
        padding: 12px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 34px 34px !important;
        grid-template-areas:
            "brand notif avatar"
            "league league league"
            "counter counter counter"
            "cta cta cta" !important;
        gap: 10px 8px !important;
        align-items: center !important;
        justify-content: stretch !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .league-page .bets-topbar .topbar-left.mobile-brand-area {
        grid-area: brand !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-self: start !important;
    }

    .league-page .bets-topbar .desktop-topbar-area,
    .league-page .bets-topbar .topbar-right {
        display: contents !important;
    }

    .league-page .bets-topbar .topbar-league-form {
        grid-area: league !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .league-page .bets-topbar .round-countdown {
        grid-area: counter !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: stretch !important;
    }

    .league-page .bets-topbar .topbar-primary-action {
        grid-area: cta !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: stretch !important;
    }

    .league-page .bets-topbar .notification-wrapper {
        grid-area: notif !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: end !important;
        position: relative !important;
    }

    .league-page .bets-topbar .notification-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
    }

    .league-page .bets-topbar .user-chip.topbar-user-chip {
        grid-area: avatar !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: end !important;
        position: relative !important;
        overflow: visible !important;
    }
}

@media (min-width: 761px) {
    .logout-btn i {
        display: none;
    }
}

@media (max-width: 760px) {
    .app-topbar,
    .profile-topbar,
    .bets-topbar.app-topbar {
        position: relative !important;
    }

    .app-topbar .logout-btn,
    .profile-topbar .logout-btn,
    .bets-topbar.app-topbar .logout-btn,
    .ranking-wrapper .app-topbar .logout-btn,
    .history-wrapper .app-topbar .logout-btn,
    .games-premium-page .app-topbar .logout-btn,
    .league-page .app-topbar .logout-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 8 !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        color: var(--primary, #37e375) !important;
        box-shadow: none !important;
        font-size: 0 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .app-topbar .logout-btn i,
    .profile-topbar .logout-btn i,
    .bets-topbar.app-topbar .logout-btn i {
        display: none !important;
    }

    .app-topbar .logout-btn::before,
    .profile-topbar .logout-btn::before,
    .bets-topbar.app-topbar .logout-btn::before {
        content: "\f2f5";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: var(--primary, #37e375);
        font-size: 14px;
        line-height: 1;
    }

    .app-topbar .logout-btn span,
    .profile-topbar .logout-btn span,
    .bets-topbar.app-topbar .logout-btn span {
        display: none !important;
    }

    .app-topbar .topbar-user-chip,
    .profile-topbar .topbar-user-chip,
    .bets-topbar.app-topbar .topbar-user-chip,
    .user-chip.topbar-user-chip {
        margin-right: 42px !important;
    }
}

/* =========================================================
   RESPONSIVE HARDENING - 2026-05-22
   ========================================================= */
html,
body {
    max-width: 100%;
}

body {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    body {
        overflow-x: hidden;
    }
}

.app-shell,
.dashboard-page,
.ranking-wrapper,
.history-wrapper,
.games-premium-page,
.league-page,
.profile-page,
.tournament-page,
.private-rankings-premium-page,
.private-ranking-detail-premium-page,
main,
section,
article,
aside,
header,
footer {
    min-width: 0;
    max-width: 100%;
}

.app-topbar,
.topbar-right,
.desktop-topbar-area,
.topbar-user-chip,
.user-chip,
.ranking-header-actions,
.ranking-filters,
.dashboard-filter-bar,
.private-ranking-card,
.private-ranking-header,
.private-premium-card,
.ranking-side-card,
.dashboard-card,
.game-panel,
.game-card,
.profile-card,
.history-card,
.league-card,
.match-card {
    min-width: 0;
}

.app-topbar .user-name,
.topbar-user-chip .user-name,
.user-chip .user-name {
    max-width: clamp(72px, 16vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-header-actions,
.ranking-filters,
.dashboard-filter-bar,
.private-ranking-tabs,
.filter-tabs,
.tabs,
.badge-tabs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#ranking-container,
.ranking-shell,
.ranking-table-wrap,
.history-table-wrap,
.games-table-wrap,
.table-scroll,
.standings-table-wrap,
.tournament-table-wrap,
.league-table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#ranking-container table,
.ranking-table-wrap table,
.history-table-wrap table,
.games-table-wrap table,
.table-scroll table,
.standings-table-wrap table,
.tournament-table-wrap table,
.league-table-wrap table {
    max-width: none;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

:is(.dashboard-card,
.ranking-side-card,
.private-premium-card,
.private-ranking-card,
.history-card,
.game-card,
.profile-card,
.league-card,
.match-card,
.tournament-card) :is(h1, h2, h3, p, strong, label) {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .app-shell,
    .dashboard-page,
    .ranking-wrapper,
    .history-wrapper,
    .games-premium-page,
    .league-page,
    .profile-page,
    .tournament-page,
    .private-rankings-premium-page,
    .private-ranking-detail-premium-page {
        width: 100%;
        max-width: 100vw;
    }

    .ranking-header-actions,
    .ranking-filters,
    .dashboard-filter-bar,
    .private-ranking-tabs,
    .filter-tabs,
    .tabs,
    .badge-tabs {
        padding-bottom: 2px;
    }

    .ranking-header-actions > *,
    .ranking-filters > *,
    .dashboard-filter-bar > *,
    .private-ranking-tabs > *,
    .filter-tabs > *,
    .tabs > *,
    .badge-tabs > * {
        flex: 0 0 auto;
    }

    .mobile-bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    .app-topbar .user-name,
    .topbar-user-chip .user-name,
    .user-chip .user-name {
        max-width: 96px;
    }

    .ranking-header-actions,
    .ranking-filters,
    .dashboard-filter-bar {
        gap: 8px;
    }
}

/* Dropdown affordance padrao para o seletor "Torneio atual" */
.topbar-league-form {
    position: relative;
}

.topbar-league-form .league-select {
    padding-right: 44px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.topbar-league-form::after {
    content: "\f078";
    position: absolute;
    right: 16px;
    bottom: 15px;
    z-index: 1;
    color: var(--primary, #37e375);
    font-family: "Font Awesome 6 Free";
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 760px) {
    .topbar-league-form::after {
        right: 14px;
        bottom: 12px;
        font-size: 13px;
    }
}

/* Fundo unico para os containers principais das telas autenticadas.
   Os cards internos continuam com seus proprios fundos e estados visuais. */
main.dashboard-content,
main.dashboard-premium-content,
main.stats-content,
main.league-content,
main.bets-content,
main.ranking-content,
main.ranking-premium-content,
main.ranking-dashboard-content,
main.history-content,
main.history-content-page,
main.history-premium-content,
main.games-content,
main.profile-content,
main.profile-premium-content,
main.pro-plan-content,
main.tournament-content,
main.private-ranking-content,
main.private-premium-content,
main.private-detail-content,
.history-wrapper .history-center,
.history-wrapper .history-center-viewport,
.history-wrapper .history-page-inner {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fundo base sem brilho verde para as areas principais. */
.app-shell,
.dashboard-page,
.ranking-wrapper,
.history-wrapper,
.games-premium-page,
.league-page,
.profile-page,
.tournament-page,
.private-rankings-premium-page,
.private-ranking-detail-premium-page,
.pro-plan-app-shell {
    background: #1C1C1C !important;
    background-image: none !important;
}