/* MarketBet premium theme layer.
   This file is intentionally additive: it overrides visual styles without changing app logic. */

:root {
    --mb-bg: #02060b;
    --mb-bg-deep: #03040a;
    --mb-surface: #080a14;
    --mb-surface-2: #101321;
    --mb-cyan: #00CFFF;
    --mb-cyan-2: #58ebff;
    --mb-purple: #a855f7;
    --mb-text: #f8fbff;
    --mb-muted: #c8d5f2;
    --mb-muted-2: #96a0bf;
    --mb-border: rgba(0, 217, 255, 0.18);
    --mb-border-strong: rgba(0, 207, 255, 0.34);
    --mb-glow: 0 0 28px rgba(0, 207, 255, 0.14);
    --mb-card-shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
}

html,
body {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 207, 255, 0.10), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(168, 85, 247, 0.10), transparent 26%),
        linear-gradient(180deg, var(--mb-bg-deep) 0%, var(--mb-bg) 44%, #000 100%) !important;
    color: var(--mb-text) !important;
    font-family: "Open Sans", Arial, sans-serif !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 72%);
    z-index: 0;
}

.layout,
.main,
.container,
.payment-container,
body > .container {
    position: relative;
    z-index: 1;
}

/* Login */
body > .container {
    max-width: 520px !important;
    padding: 38px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 217, 255, 0.10), transparent 34%),
        linear-gradient(180deg, var(--mb-surface-2) 0%, var(--mb-surface) 100%) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--mb-card-shadow), var(--mb-glow) !important;
}

.main-logo,
.sidebar-logo {
    filter: drop-shadow(0 0 18px rgba(0, 207, 255, 0.20));
}

h1,
h2,
h3,
.payment-header h1 {
    color: var(--mb-text) !important;
    letter-spacing: 0 !important;
}

p,
label,
.payment-header p,
.header p,
.proxy-generator p,
.connect-options p,
.info-block p,
.pix-instructions,
.status-message {
    color: var(--mb-muted) !important;
}

.small-info,
.info-box,
.info-box-config {
    background: rgba(0, 207, 255, 0.08) !important;
    border: 1px solid var(--mb-border-strong) !important;
    color: #eaf7ff !important;
    box-shadow: 0 0 22px rgba(0, 207, 255, 0.10) !important;
}

.small-info {
    animation: none !important;
}

.login-tabs {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
}

.tab-btn {
    border-radius: 11px !important;
    color: var(--mb-muted) !important;
    min-height: 46px;
}

.tab-btn.active,
button[type="submit"],
.btn-full-width,
.btn-proceed,
.generate-button,
#refresh-button,
.renew-button,
#copy-proxy-list,
#download-proxy-list,
.btn-check-status,
.copy-button,
.copy-btn {
    background: linear-gradient(135deg, var(--mb-cyan) 0%, #19c8f3 100%) !important;
    color: #03111d !important;
    border: 1px solid rgba(88, 235, 255, 0.45) !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 30px rgba(0, 207, 255, 0.18) !important;
}

.btn-cancel,
.btn-back,
.connect-links a,
.sidebar-footer .footer-link {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(0, 207, 255, 0.28) !important;
    color: #eaf7ff !important;
    border-radius: 12px !important;
}

.whatsapp,
.connect-links a.whatsapp {
    border-color: rgba(34, 197, 94, 0.42) !important;
    color: #dffff0 !important;
}

.store,
.connect-links a.store {
    border-color: rgba(0, 207, 255, 0.34) !important;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="file"],
select,
textarea,
.form-control,
#pix-code-text,
.select2-container--default .select2-selection--single {
    background: rgba(2, 6, 11, 0.78) !important;
    border: 1px solid rgba(0, 207, 255, 0.22) !important;
    border-radius: 12px !important;
    color: var(--mb-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--mb-muted-2) !important;
}

input:focus,
select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: rgba(88, 235, 255, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(0, 207, 255, 0.16), 0 0 24px rgba(0, 207, 255, 0.11) !important;
}

#error-message,
#error-message-proxy,
.error-message {
    background: rgba(255, 77, 109, 0.10) !important;
    border: 1px solid rgba(255, 77, 109, 0.42) !important;
    color: #ffb3bf !important;
    border-radius: 14px !important;
}

/* Dashboard shell */
.sidebar {
    background:
        radial-gradient(circle at top, rgba(0, 207, 255, 0.08), transparent 28%),
        linear-gradient(180deg, #050811 0%, #03040a 100%) !important;
    border-right: 1px solid var(--mb-border) !important;
    box-shadow: 14px 0 45px rgba(0, 0, 0, 0.32) !important;
}

.sidebar-links a {
    color: #c8d8ea !important;
    border: 1px solid transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 12px !important;
    min-height: 42px;
}

.sidebar-links a:hover,
.sidebar-links a.active {
    background: rgba(0, 207, 255, 0.09) !important;
    border-color: rgba(0, 207, 255, 0.18) !important;
    border-left-color: var(--mb-cyan) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 18px rgba(0, 207, 255, 0.07) !important;
}

.sidebar-links a i,
.config-section h2 i {
    color: var(--mb-cyan) !important;
}

#sb-add-gb {
    background: linear-gradient(135deg, var(--mb-cyan) 0%, #58ebff 100%) !important;
    color: #03111d !important;
    border: 1px solid rgba(88, 235, 255, 0.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 35px rgba(0, 207, 255, 0.20) !important;
}

.main {
    background: transparent !important;
}

.header,
.payment-header {
    padding: 6px 0 4px;
}

.header h1,
.payment-header h1 {
    font-size: clamp(1.65rem, 2.3vw, 2.35rem) !important;
}

.card,
.proxy-generator,
.config-section,
.payment-card,
.modal-container {
    background:
        radial-gradient(circle at top right, rgba(0, 217, 255, 0.08), transparent 34%),
        linear-gradient(180deg, var(--mb-surface-2) 0%, var(--mb-surface) 100%) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--mb-card-shadow) !important;
}

.cards .card {
    text-align: left !important;
    min-height: 130px;
}

.card h3,
.config-section h2,
.payment-card h2 {
    color: #eaf7ff !important;
    border-color: rgba(0, 207, 255, 0.15) !important;
}

.card .value,
.package-price,
.price-discounted,
.proxy-code,
.detail-value,
#api-key-display {
    color: var(--mb-cyan-2) !important;
}

.proxy-code,
#proxy-list-output,
#pix-code-text {
    font-family: Consolas, "Courier New", monospace !important;
}

.proxy-line,
.host-selector {
    background: rgba(2, 6, 11, 0.55) !important;
    border: 1px solid rgba(0, 207, 255, 0.14) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
}

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

.progress-bar {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(0, 207, 255, 0.12);
}

.progress-fill {
    background: linear-gradient(90deg, #22c55e 0%, var(--mb-cyan) 100%) !important;
    box-shadow: 0 0 18px rgba(0, 207, 255, 0.24);
}

.chart-container {
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(0, 207, 255, 0.10);
    padding: 12px;
}

.table-responsive,
.blocked-list-area {
    border: 1px solid rgba(0, 207, 255, 0.15) !important;
    border-radius: 16px !important;
    background: rgba(2, 6, 11, 0.55) !important;
}

table th {
    color: #eaf7ff !important;
    background: rgba(0, 207, 255, 0.07) !important;
}

table td {
    color: var(--mb-muted) !important;
    border-color: rgba(0, 207, 255, 0.10) !important;
}

/* Renew modal */
.modal-overlay {
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(10px);
}

.package-option {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(0, 207, 255, 0.16) !important;
    border-radius: 18px !important;
}

.package-option:hover,
.package-option.selected {
    border-color: rgba(88, 235, 255, 0.72) !important;
    box-shadow: 0 0 28px rgba(0, 207, 255, 0.16) !important;
}

.package-option.most-popular {
    box-shadow: 0 0 24px rgba(0, 207, 255, 0.18) !important;
    animation: none !important;
}

.badge-popular,
.package-option.most-popular::before {
    background: var(--mb-cyan) !important;
    color: #03111d !important;
    border-radius: 999px !important;
}

.status-pending {
    background: rgba(251, 191, 36, 0.14) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.status-approved {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #7dff8d !important;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.status-rejected {
    background: rgba(255, 77, 109, 0.12) !important;
    color: #ff6b7d !important;
    border: 1px solid rgba(255, 77, 109, 0.28);
}

#menu-toggle {
    background: rgba(0, 207, 255, 0.14) !important;
    border: 1px solid rgba(0, 207, 255, 0.34) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30) !important;
}

@media (max-width: 991px) {
    .main {
        padding: 82px 16px 24px !important;
    }

    .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .cards {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .proxy-line,
    .host-selector,
    .action-buttons,
    .payment-actions,
    .modal-footer,
    .input-group-custom {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .copy-btn,
    .action-buttons button,
    .btn-proceed,
    .btn-cancel,
    .btn-back,
    .btn-check-status {
        width: 100% !important;
        min-height: 46px;
    }

    .chart-container {
        height: 320px !important;
    }

    .modal-container {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
        border-radius: 18px !important;
    }

    body > .container {
        padding: 26px 20px !important;
        border-radius: 20px !important;
    }
}

/* Softer MarketBet pass: keep cyan as an accent, not as the whole interface. */
:root {
    --mb-border: rgba(0, 207, 255, 0.10);
    --mb-border-strong: rgba(0, 207, 255, 0.20);
    --mb-glow: 0 0 18px rgba(0, 207, 255, 0.07);
    --mb-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
}

body::before {
    opacity: 0.28;
}

body > .container,
.card,
.proxy-generator,
.config-section,
.payment-card,
.modal-container {
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, 0.035), transparent 34%),
        linear-gradient(180deg, #101321 0%, #080a14 100%) !important;
    border-color: rgba(0, 207, 255, 0.11) !important;
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.34) !important;
}

.sidebar {
    background:
        radial-gradient(circle at top left, rgba(0, 207, 255, 0.045), transparent 30%),
        linear-gradient(180deg, #050811 0%, #03040a 100%) !important;
    border-right-color: rgba(0, 207, 255, 0.12) !important;
    box-shadow: 10px 0 36px rgba(0, 0, 0, 0.34) !important;
}

.sidebar-links a {
    color: #c8d5f2 !important;
    background: transparent !important;
}

.sidebar-links a i {
    color: #19c8f3 !important;
    opacity: 0.88;
}

.sidebar-links a:hover,
.sidebar-links a.active {
    background: rgba(0, 207, 255, 0.055) !important;
    border-color: rgba(0, 207, 255, 0.12) !important;
    border-left-color: #00CFFF !important;
    box-shadow: none !important;
}

.card h3,
.config-section h2,
.payment-card h2 {
    color: #f8fbff !important;
}

.config-section h2 i {
    color: #19c8f3 !important;
}

.card .value,
.package-price,
.price-discounted,
.detail-value,
#api-key-display {
    color: #58ebff !important;
    text-shadow: none !important;
}

.proxy-code {
    color: #19c8f3 !important;
    background: rgba(8, 10, 20, 0.82) !important;
}

.proxy-line,
.host-selector,
.chart-container,
.table-responsive,
.blocked-list-area {
    border-color: rgba(0, 207, 255, 0.09) !important;
    background: rgba(2, 6, 11, 0.46) !important;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="file"],
select,
textarea,
.form-control,
#pix-code-text,
.select2-container--default .select2-selection--single {
    border-color: rgba(0, 207, 255, 0.14) !important;
    background: rgba(2, 6, 11, 0.74) !important;
}

input:focus,
select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: rgba(0, 207, 255, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(0, 207, 255, 0.09) !important;
}

.small-info,
.info-box,
.info-box-config {
    background: rgba(0, 207, 255, 0.045) !important;
    border-color: rgba(0, 207, 255, 0.16) !important;
    box-shadow: none !important;
}

.progress-fill {
    background: #00CFFF !important;
    box-shadow: none !important;
}

button[type="submit"],
.btn-full-width,
.btn-proceed,
.renew-button,
#open-renew-modal,
#sb-add-gb {
    background: #00CFFF !important;
    color: #03111d !important;
    border-color: rgba(88, 235, 255, 0.34) !important;
    box-shadow: 0 10px 22px rgba(0, 207, 255, 0.14) !important;
}

#refresh-button,
.copy-btn,
.generate-button,
#copy-proxy-list,
#download-proxy-list,
.btn-check-status,
.copy-button {
    background: rgba(255, 255, 255, 0.025) !important;
    color: #eaf7ff !important;
    border: 1px solid rgba(0, 207, 255, 0.22) !important;
    box-shadow: none !important;
}

#refresh-button:hover,
.copy-btn:hover,
.generate-button:hover,
#copy-proxy-list:hover,
#download-proxy-list:hover,
.btn-check-status:hover,
.copy-button:hover,
.btn-cancel:hover,
.btn-back:hover {
    background: rgba(0, 207, 255, 0.08) !important;
    border-color: rgba(0, 207, 255, 0.28) !important;
}

.package-option {
    background: rgba(255, 255, 255, 0.018) !important;
    border-color: rgba(0, 207, 255, 0.11) !important;
}

.package-option:hover,
.package-option.selected {
    border-color: rgba(0, 207, 255, 0.36) !important;
    box-shadow: none !important;
}

.package-option.most-popular {
    box-shadow: none !important;
}

.badge-popular,
.package-option.most-popular::before {
    background: #00CFFF !important;
    box-shadow: none !important;
}

table th {
    background: rgba(255, 255, 255, 0.025) !important;
}

#menu-toggle {
    background: rgba(8, 10, 20, 0.92) !important;
    border-color: rgba(0, 207, 255, 0.22) !important;
    box-shadow: none !important;
}

/* =========================================================
   MARKETBET CHECKER - DASHBOARD PREMIUM V2
   Substituir do bloco "Dashboard product redesign" até o final
========================================================= */

.dashboard-layout .main {
    padding: 34px clamp(22px, 4vw, 52px) 56px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 207, 255, 0.06), transparent 26%),
        radial-gradient(circle at 92% 6%, rgba(168, 85, 247, 0.055), transparent 26%),
        linear-gradient(180deg, #02060b 0%, #03040a 42%, #000000 100%) !important;
}

#dashboard-container {
    max-width: 1180px !important;
    margin: 0 auto !important;
}

/* Sidebar mais premium, menos pesada */
.sidebar {
    background:
        radial-gradient(circle at top center, rgba(0, 207, 255, 0.055), transparent 30%),
        linear-gradient(180deg, #050811 0%, #02040a 100%) !important;
    border-right: 1px solid rgba(0, 207, 255, 0.10) !important;
    box-shadow: 12px 0 42px rgba(0, 0, 0, 0.38) !important;
}

.sidebar-logo {
    max-width: 104px !important;
    margin-bottom: 24px !important;
    filter: drop-shadow(0 0 14px rgba(0, 207, 255, 0.16)) !important;
}

.sidebar-links a {
    min-height: 42px !important;
    padding: 11px 12px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    color: #c8d5f2 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    border: 1px solid transparent !important;
    border-left: 3px solid transparent !important;
    transition: 0.18s ease !important;
}

.sidebar-links a i {
    color: #00CFFF !important;
    opacity: 0.9 !important;
}

.sidebar-links a:hover,
.sidebar-links a.active {
    background: rgba(0, 207, 255, 0.075) !important;
    border-color: rgba(0, 207, 255, 0.14) !important;
    border-left-color: #00CFFF !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 18px rgba(0, 207, 255, 0.045) !important;
}

#sb-add-gb {
    min-height: 46px !important;
    border-radius: 14px !important;
    background: #00CFFF !important;
    color: #03111d !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 26px rgba(0, 207, 255, 0.18) !important;
}

/* Hero do painel mais próximo da Home MarketBet */
.checker-hero {
    position: relative !important;
    display: block !important;
    padding: clamp(26px, 3.2vw, 38px) !important;
    margin-bottom: 24px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 82% 8%, rgba(168, 85, 247, 0.10), transparent 32%),
        radial-gradient(circle at 14% 0%, rgba(0, 207, 255, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(12, 18, 32, 0.96), rgba(3, 4, 10, 0.98)) !important;
    border: 1px solid rgba(0, 207, 255, 0.14) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    overflow: hidden !important;
}

.checker-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, transparent, rgba(0, 207, 255, 0.06), transparent) !important;
    opacity: 0.45 !important;
    pointer-events: none !important;
}

.checker-hero > * {
    position: relative !important;
    z-index: 2 !important;
}

.checker-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-bottom: 12px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: rgba(0, 207, 255, 0.075) !important;
    border: 1px solid rgba(0, 207, 255, 0.18) !important;
    color: #00CFFF !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

.checker-hero h1 {
    max-width: 760px !important;
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: clamp(2rem, 3.8vw, 3.6rem) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
}

.checker-hero-subtitle {
    max-width: 700px !important;
    margin: 0 0 18px !important;
    color: #c8d5f2 !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
}

/* Chips usuário / ID */
.checker-hero .info-block > p:not(.checker-hero-subtitle) {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 8px 8px 0 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #b9c7e8 !important;
    font-size: 0.86rem !important;
}

/* Seletor de servidor */
.checker-hero .host-selector {
    max-width: 760px !important;
    margin: 14px 0 18px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(2, 6, 11, 0.58) !important;
    border: 1px solid rgba(0, 207, 255, 0.12) !important;
}

.checker-hero .host-selector label {
    color: #ffffff !important;
    font-weight: 900 !important;
}

.checker-hero .host-selector select {
    min-width: 260px !important;
    min-height: 40px !important;
}

/* Cards das proxies */
.checker-proxy-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
}

.checker-proxy-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 168px !important;
    padding: 20px !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, 0.055), transparent 36%),
        linear-gradient(180deg, rgba(16, 19, 33, 0.95), rgba(8, 10, 20, 0.98)) !important;
    border: 1px solid rgba(0, 207, 255, 0.13) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24) !important;
}

.checker-proxy-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.checker-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 12px !important;
    background: rgba(0, 207, 255, 0.09) !important;
    border: 1px solid rgba(0, 207, 255, 0.16) !important;
    color: #00CFFF !important;
}

.checker-proxy-heading strong {
    display: block !important;
    margin-bottom: 3px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
}

.checker-proxy-heading small {
    display: block !important;
    color: #96a0bf !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
}

.checker-proxy-card .proxy-code {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    background: rgba(2, 6, 11, 0.74) !important;
    border: 1px solid rgba(0, 207, 255, 0.10) !important;
    color: #c8d5f2 !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

.checker-proxy-card .copy-btn {
    align-self: flex-start !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: #00CFFF !important;
    color: #03111d !important;
    border: 0 !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(0, 207, 255, 0.15) !important;
}

/* Métricas */
.checker-balance-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.checker-metric-card {
    position: relative !important;
    min-height: 142px !important;
    padding: 22px !important;
    text-align: left !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, 0.06), transparent 36%),
        linear-gradient(180deg, rgba(16, 19, 33, 0.96), rgba(8, 10, 20, 0.98)) !important;
    border: 1px solid rgba(0, 207, 255, 0.12) !important;
}

.checker-metric-card::after {
    content: "" !important;
    position: absolute !important;
    right: -42px !important;
    top: -58px !important;
    width: 128px !important;
    height: 128px !important;
    border-radius: 50% !important;
    background: rgba(0, 207, 255, 0.045) !important;
    pointer-events: none !important;
}

.checker-metric-card .checker-icon {
    margin-bottom: 18px !important;
}

.checker-metric-card h3 {
    margin: 0 0 8px !important;
    color: #f8fbff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.checker-metric-card .value {
    margin-bottom: 8px !important;
    color: #58ebff !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
}

.checker-metric-card p {
    margin: 0 !important;
    color: #96a0bf !important;
    font-size: 0.86rem !important;
    line-height: 1.4 !important;
}

/* Gráfico */
.checker-consumption-card {
    padding: 24px !important;
    margin-bottom: 18px !important;
    border-radius: 24px !important;
    text-align: left !important;
}

.checker-consumption-card h3 {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-size: 1.38rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-align: left !important;
    text-transform: none !important;
}

.checker-consumption-subtitle {
    margin: 0 0 16px !important;
    color: #96a0bf !important;
    font-size: 0.93rem !important;
}

.checker-consumption-card #filters {
    display: flex !important;
    justify-content: flex-end !important;
    margin: -50px 0 16px !important;
}

.checker-consumption-card #period-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    background: rgba(2, 6, 11, 0.50) !important;
    border: 1px solid rgba(0, 207, 255, 0.12) !important;
}

.checker-consumption-card #period-select {
    min-height: 38px !important;
    border-radius: 10px !important;
}

.checker-consumption-card .chart-container {
    height: 330px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 11, 0.52) !important;
    border: 1px solid rgba(0, 207, 255, 0.09) !important;
}

/* Barra de uso */
.checker-progress-section {
    margin: 0 0 24px !important;
    padding: 0 4px !important;
}

.checker-progress-section h3 {
    margin-bottom: 8px !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
}

.progress-bar {
    height: 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(0, 207, 255, 0.10) !important;
}

.progress-fill {
    border-radius: 999px !important;
    background: #00CFFF !important;
    box-shadow: 0 0 16px rgba(0, 207, 255, 0.26) !important;
}

.progress-labels {
    color: #9aa8c7 !important;
    font-size: 0.78rem !important;
}

/* Botões abaixo do gráfico */
.action-buttons {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
}

.action-buttons button,
#refresh-button,
#open-renew-modal {
    min-height: 44px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
}

#refresh-button {
    background: rgba(255, 255, 255, 0.025) !important;
    color: #eaf7ff !important;
    border: 1px solid rgba(0, 207, 255, 0.20) !important;
}

#open-renew-modal {
    background: #00CFFF !important;
    color: #03111d !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(0, 207, 255, 0.15) !important;
}

/* Cards de ferramentas */
.checker-tool-card {
    padding: 28px !important;
    margin-bottom: 28px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, 0.055), transparent 36%),
        linear-gradient(180deg, rgba(16, 19, 33, 0.96), rgba(8, 10, 20, 0.98)) !important;
    border: 1px solid rgba(0, 207, 255, 0.12) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30) !important;
}

.checker-tool-card .checker-eyebrow {
    margin-bottom: 14px !important;
}

.checker-tool-card h3 {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
}

.checker-tool-card > p {
    max-width: 760px !important;
    margin: 0 0 20px !important;
    color: #c8d5f2 !important;
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
}

.checker-tool-card .form-group {
    margin-bottom: 16px !important;
}

.checker-tool-card label {
    margin-bottom: 7px !important;
    color: #c8d5f2 !important;
    font-weight: 800 !important;
}

.checker-tool-card input,
.checker-tool-card select,
.checker-tool-card textarea {
    min-height: 44px !important;
}

.checker-tool-card .generate-button {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    background: #00CFFF !important;
    color: #03111d !important;
    border: 0 !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(0, 207, 255, 0.14) !important;
}

/* Alertas */
#error-message,
#error-message-proxy,
.error-message {
    padding: 9px 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 77, 109, 0.10) !important;
    border: 1px solid rgba(255, 77, 109, 0.38) !important;
    color: #ffb3bf !important;
}

.info-box,
.info-box-config,
.small-info {
    border-radius: 12px !important;
    background: rgba(0, 207, 255, 0.045) !important;
    border: 1px solid rgba(0, 207, 255, 0.13) !important;
    color: #c8d5f2 !important;
}

/* Inputs globais do dashboard */
.dashboard-layout input[type="text"],
.dashboard-layout input[type="number"],
.dashboard-layout input[type="password"],
.dashboard-layout input[type="email"],
.dashboard-layout input[type="tel"],
.dashboard-layout select,
.dashboard-layout textarea {
    background: rgba(2, 6, 11, 0.78) !important;
    border: 1px solid rgba(0, 207, 255, 0.14) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

.dashboard-layout input:focus,
.dashboard-layout select:focus,
.dashboard-layout textarea:focus {
    border-color: rgba(0, 207, 255, 0.44) !important;
    box-shadow: 0 0 0 3px rgba(0, 207, 255, 0.08) !important;
}

/* Responsivo */
@media (max-width: 1180px) {
    .dashboard-layout .main {
        padding: 30px 26px 46px !important;
    }

    .checker-proxy-grid,
    .checker-balance-grid {
        grid-template-columns: 1fr !important;
    }

    .checker-consumption-card #filters {
        justify-content: flex-start !important;
        margin: 0 0 16px !important;
    }
}

@media (max-width: 991px) {
    .dashboard-layout .main {
        padding: 82px 16px 32px !important;
    }

    .checker-hero {
        padding: 24px 18px !important;
        border-radius: 22px !important;
    }

    .checker-hero h1 {
        font-size: 2.05rem !important;
        letter-spacing: -0.04em !important;
    }

    .checker-hero .info-block > p:not(.checker-hero-subtitle) {
        width: 100% !important;
        justify-content: flex-start !important;
        border-radius: 12px !important;
    }

    .checker-hero .host-selector {
        max-width: 100% !important;
    }

    .checker-hero .host-selector select,
    .checker-proxy-card .copy-btn {
        width: 100% !important;
    }

    .checker-proxy-card,
    .checker-metric-card,
    .checker-consumption-card,
    .checker-tool-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .checker-consumption-card .chart-container {
        height: 290px !important;
        padding: 10px !important;
    }

    .action-buttons {
        flex-direction: column !important;
    }

    .action-buttons button {
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .checker-hero h1 {
        font-size: 1.85rem !important;
    }

    .checker-hero-subtitle,
    .checker-tool-card > p {
        font-size: 0.9rem !important;
    }

    .checker-metric-card .value {
        font-size: 1.8rem !important;
    }

    .checker-consumption-card h3,
    .checker-tool-card h3 {
        font-size: 1.25rem !important;
    }
}
/* =========================================================
   MARKETBET CHECKER — PREMIUM SOFT V3
   Cole este bloco NO FINAL do CSS atual.
   Objetivo: reduzir excesso de neon, deixar mais premium
   e manter toda a lógica/IDs/classes funcionando.
========================================================= */

:root {
    --mb-page-bg: #05070d;
    --mb-page-bg-2: #080b14;
    --mb-sidebar-bg: #070a12;
    --mb-card-bg: #0d111d;
    --mb-card-bg-2: #111827;
    --mb-card-soft: rgba(255,255,255,.035);

    --mb-primary: #00cfff;
    --mb-primary-soft: rgba(0,207,255,.10);
    --mb-primary-border: rgba(0,207,255,.18);

    --mb-purple: #7c3aed;
    --mb-purple-soft: rgba(124,58,237,.12);

    --mb-green: #22c55e;
    --mb-green-soft: rgba(34,197,94,.12);

    --mb-red: #ef4444;
    --mb-red-soft: rgba(239,68,68,.12);

    --mb-text: #f8fafc;
    --mb-text-soft: #cbd5e1;
    --mb-text-muted: #94a3b8;

    --mb-border: rgba(148,163,184,.13);
    --mb-border-strong: rgba(0,207,255,.22);

    --mb-radius-lg: 24px;
    --mb-radius-md: 18px;
    --mb-radius-sm: 12px;

    --mb-shadow-card: 0 20px 55px rgba(0,0,0,.34);
    --mb-shadow-soft: 0 12px 34px rgba(0,0,0,.24);
}

/* Fundo geral mais premium e menos “azul aceso” */
html,
body,
.dashboard-layout {
    background:
        radial-gradient(circle at top left, rgba(0,207,255,.055), transparent 30%),
        radial-gradient(circle at top right, rgba(124,58,237,.06), transparent 32%),
        linear-gradient(180deg, var(--mb-page-bg) 0%, #03050a 52%, #000 100%) !important;
    color: var(--mb-text) !important;
}

/* Reduz o quadriculado/linhas do fundo para não cansar */
body::before {
    opacity: .12 !important;
}

/* Área principal com mais respiro */
.dashboard-layout .main,
.main {
    background: transparent !important;
    padding-top: 38px !important;
}

/* Sidebar mais elegante */
.sidebar {
    background:
        linear-gradient(180deg, #070a12 0%, #05070d 100%) !important;
    border-right: 1px solid rgba(148,163,184,.10) !important;
    box-shadow: 16px 0 48px rgba(0,0,0,.36) !important;
}

.sidebar-logo {
    max-width: 112px !important;
    margin-bottom: 34px !important;
    filter: drop-shadow(0 0 14px rgba(255,255,255,.08)) !important;
}

/* Menu lateral menos neon e mais SaaS premium */
.sidebar-links a {
    background: transparent !important;
    color: var(--mb-text-soft) !important;
    border: 1px solid transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 14px !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    transition: .18s ease !important;
}

.sidebar-links a i {
    color: #9fb6ff !important;
    opacity: .95 !important;
}

.sidebar-links a:hover {
    background: rgba(255,255,255,.035) !important;
    border-color: rgba(148,163,184,.12) !important;
    color: #fff !important;
}

.sidebar-links a.active {
    background:
        linear-gradient(90deg, rgba(0,207,255,.12), rgba(124,58,237,.06)) !important;
    border-color: rgba(0,207,255,.16) !important;
    border-left-color: var(--mb-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.sidebar-links a.active i {
    color: var(--mb-primary) !important;
}

/* Botão adicionar saldo com verde mais premium */
#sb-add-gb,
.renew-button,
#open-renew-modal {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(34,197,94,.35) !important;
    box-shadow: 0 12px 28px rgba(34,197,94,.16) !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
}

#sb-add-gb:hover,
.renew-button:hover,
#open-renew-modal:hover {
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
}

/* Títulos mais parecidos com o site principal */
.header h1,
.payment-header h1,
.checker-hero h1,
h1 {
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
}

.header p,
.payment-header p,
.checker-hero-subtitle,
p {
    color: var(--mb-text-soft) !important;
}

/* Cards principais mais elegantes */
.card,
.proxy-generator,
.config-section,
.payment-card,
.modal-container,
.checker-hero,
.checker-tool-card,
.checker-consumption-card,
.checker-proxy-card,
.checker-metric-card {
    background:
        radial-gradient(circle at top right, rgba(0,207,255,.035), transparent 36%),
        linear-gradient(180deg, var(--mb-card-bg-2) 0%, var(--mb-card-bg) 100%) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: var(--mb-radius-lg) !important;
    box-shadow: var(--mb-shadow-card) !important;
}

/* Destaque premium sem exagerar no neon */
.checker-eyebrow,
.badge-popular,
.package-option.most-popular::before {
    background: rgba(0,207,255,.08) !important;
    border: 1px solid rgba(0,207,255,.22) !important;
    color: #67e8f9 !important;
    box-shadow: none !important;
}

/* Métricas mais limpas */
.checker-metric-card {
    min-height: 132px !important;
    padding: 22px !important;
}

.checker-metric-card h3,
.card h3 {
    color: #dbeafe !important;
    font-size: .78rem !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
}

.checker-metric-card .value,
.card .value {
    color: #ffffff !important;
    text-shadow: none !important;
    font-size: clamp(1.75rem, 2.4vw, 2.35rem) !important;
}

.checker-metric-card p {
    color: var(--mb-text-muted) !important;
}

/* Ícones menos chamativos */
.checker-icon,
.config-section h2 i,
.sidebar-links a i {
    background: rgba(255,255,255,.035) !important;
    border-color: rgba(148,163,184,.14) !important;
    color: var(--mb-primary) !important;
}

/* Códigos de proxy com aparência técnica premium */
.proxy-code,
#proxy-list-output,
#api-key-display,
.detail-value {
    background: #060912 !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    color: #dbeafe !important;
    border-radius: 14px !important;
    font-family: Consolas, "Courier New", monospace !important;
    text-shadow: none !important;
}

/* Botões: ciano só para ação principal */
button[type="submit"],
.btn-full-width,
.btn-proceed,
.generate-button,
.btn-check-status {
    background: linear-gradient(135deg, #00cfff 0%, #38bdf8 100%) !important;
    color: #03111d !important;
    border: 1px solid rgba(125,211,252,.35) !important;
    border-radius: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 26px rgba(0,207,255,.14) !important;
}

/* Botões secundários mais discretos */
#refresh-button,
.copy-btn,
.copy-button,
#copy-proxy-list,
#download-proxy-list,
.btn-back,
.btn-cancel {
    background: rgba(255,255,255,.035) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148,163,184,.17) !important;
    border-radius: 13px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

#refresh-button:hover,
.copy-btn:hover,
.copy-button:hover,
#copy-proxy-list:hover,
#download-proxy-list:hover,
.btn-back:hover,
.btn-cancel:hover {
    background: rgba(0,207,255,.075) !important;
    border-color: rgba(0,207,255,.24) !important;
    color: #fff !important;
}

/* Botão de copiar dentro dos cards de proxy pode continuar ciano */
.checker-proxy-card .copy-btn {
    background: #00cfff !important;
    color: #03111d !important;
    border: 0 !important;
}

/* Formulários mais elegantes */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="file"],
select,
textarea,
.form-control,
.select2-container--default .select2-selection--single {
    background: #070b14 !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    color: #f8fafc !important;
    border-radius: 13px !important;
    min-height: 44px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(0,207,255,.42) !important;
    box-shadow: 0 0 0 3px rgba(0,207,255,.075) !important;
}

input::placeholder,
textarea::placeholder {
    color: #64748b !important;
}

/* Caixas informativas sem brilho exagerado */
.info-box,
.info-box-config,
.small-info {
    background: rgba(15,23,42,.72) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    color: #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* Alertas */
#error-message,
#error-message-proxy,
.error-message {
    background: rgba(239,68,68,.10) !important;
    border: 1px solid rgba(239,68,68,.30) !important;
    color: #fecaca !important;
    border-radius: 14px !important;
}

.status-approved {
    background: rgba(34,197,94,.12) !important;
    color: #86efac !important;
    border: 1px solid rgba(34,197,94,.24) !important;
}

.status-pending {
    background: rgba(245,158,11,.12) !important;
    color: #fde68a !important;
    border: 1px solid rgba(245,158,11,.24) !important;
}

.status-rejected {
    background: rgba(239,68,68,.12) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239,68,68,.24) !important;
}

/* Gráficos e tabelas */
.chart-container,
.table-responsive,
.blocked-list-area {
    background: rgba(3,7,18,.58) !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    border-radius: 18px !important;
}

table th {
    background: rgba(255,255,255,.035) !important;
    color: #f8fafc !important;
    border-color: rgba(148,163,184,.12) !important;
}

table td {
    color: #cbd5e1 !important;
    border-color: rgba(148,163,184,.10) !important;
}

/* Progresso de uso: verde + ciano suave */
.progress-bar {
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    height: 11px !important;
    border-radius: 999px !important;
}

.progress-fill {
    background: linear-gradient(90deg, #22c55e 0%, #00cfff 100%) !important;
    box-shadow: none !important;
}

/* Modal de renovação mais premium */
.modal-overlay {
    background: rgba(0,0,0,.78) !important;
    backdrop-filter: blur(10px) !important;
}

.package-option {
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.package-option:hover,
.package-option.selected {
    background: rgba(0,207,255,.06) !important;
    border-color: rgba(0,207,255,.28) !important;
    box-shadow: 0 0 0 1px rgba(0,207,255,.05) !important;
}

.package-price,
.price-discounted {
    color: #67e8f9 !important;
}

/* Reduz “cara de sistema técnico” nos blocos da API */
pre,
code,
.api-doc,
.api-block {
    background: #05070d !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    border-radius: 16px !important;
    color: #dbeafe !important;
}

/* Melhor separação visual das seções */
.config-section,
.checker-tool-card,
.payment-card {
    margin-bottom: 28px !important;
}

/* Mobile */
@media (max-width: 991px) {
    .dashboard-layout .main,
    .main {
        padding: 82px 16px 32px !important;
    }

    .checker-hero,
    .checker-tool-card,
    .checker-consumption-card,
    .checker-proxy-card,
    .checker-metric-card,
    .card,
    .config-section {
        border-radius: 20px !important;
        padding: 20px !important;
    }

    .sidebar-links a {
        min-height: 44px !important;
    }

    .action-buttons,
    .payment-actions,
    .modal-footer {
        gap: 10px !important;
    }

    button,
    .copy-btn,
    .copy-button,
    .generate-button {
        min-height: 46px !important;
    }
}
/* =========================================================
   MARKETBET CHECKER — PÁGINAS RESTANTES PREMIUM V4
   Cole no FINAL de /css/marketbet-premium.css
   Foco: Alterar Localização, Bloqueio de Hosts, API,
   Histórico de Pagamentos e Modal de Renovação.
========================================================= */

/* ---------- Cabeçalhos internos das abas restantes ---------- */

#location-global-view .header,
#api-view .header,
#payment-history-view .header,
body:has(#ranking-hosts-body) .header {
    margin-bottom: 22px !important;
    padding: 30px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, .075), transparent 34%),
        radial-gradient(circle at top left, rgba(0, 207, 255, .055), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .94), rgba(8, 10, 20, .98)) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .28) !important;
}

#location-global-view .header h1,
#api-view .header h1,
#payment-history-view .header h1,
body:has(#ranking-hosts-body) .header h1 {
    margin-bottom: 8px !important;
    color: #ffffff !important;
    font-size: clamp(1.85rem, 3vw, 2.75rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.045em !important;
}

#location-global-view .header p,
#api-view .header p,
#payment-history-view .header p,
body:has(#ranking-hosts-body) .header p {
    max-width: 760px !important;
    color: #cbd5e1 !important;
    font-size: .96rem !important;
    line-height: 1.6 !important;
}

/* ---------- Alterar Localização dentro do iframe ---------- */

.location-global-card {
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .035), transparent 36%),
        linear-gradient(180deg, #111827 0%, #0d111d 100%) !important;
}

#location-global-frame {
    min-height: 1080px !important;
    border-radius: 22px !important;
}

/* ---------- Desenvolvedor/API ---------- */

#api-view {
    max-width: 1180px !important;
    margin: 0 auto !important;
}

#api-view .config-section {
    padding: 28px !important;
    border-radius: 24px !important;
}

#api-view .config-section h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

#api-view .config-section h2 i {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: rgba(0, 207, 255, .08) !important;
    border: 1px solid rgba(0, 207, 255, .16) !important;
    color: #67e8f9 !important;
}

#api-view .config-section > p {
    max-width: 820px !important;
    color: #cbd5e1 !important;
    line-height: 1.6 !important;
}

/* Caixa da API Key */
#api-view #api-key-display {
    min-height: 50px !important;
    padding: 0 14px !important;
    background: #060912 !important;
    border: 1px solid rgba(148, 163, 184, .15) !important;
    color: #dbeafe !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#api-view button[onclick="copyApiKey()"] {
    min-height: 46px !important;
    white-space: nowrap !important;
}

/* Botão gerar nova chave: vermelho premium, sem parecer erro gigante */
#api-view button[onclick="generateNewApiKey()"] {
    background: rgba(239, 68, 68, .10) !important;
    color: #fecaca !important;
    border: 1px solid rgba(239, 68, 68, .26) !important;
    border-radius: 13px !important;
    font-weight: 850 !important;
    min-height: 42px !important;
    box-shadow: none !important;
}

#api-view button[onclick="generateNewApiKey()"]:hover {
    background: rgba(239, 68, 68, .16) !important;
    color: #ffffff !important;
}

/* Blocos de documentação da API, mesmo com style inline no HTML */
#api-view .config-section > div[style*="background: #111"] {
    position: relative !important;
    padding: 22px !important;
    margin-bottom: 18px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .035), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(3, 7, 18, .94)) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .20) !important;
    overflow: hidden !important;
}

#api-view .config-section > div[style*="background: #111"] h4 {
    color: #ffffff !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    margin-bottom: 16px !important;
}

#api-view .config-section > div[style*="background: #111"] h4 span {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: .70rem !important;
    letter-spacing: .04em !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
}

#api-view .config-section > div[style*="background: #111"] div[style*="font-family: monospace"] {
    padding: 16px !important;
    border-radius: 16px !important;
    background: #05070d !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    color: #cbd5e1 !important;
    font-size: .84rem !important;
    line-height: 1.75 !important;
    overflow-x: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* ---------- Histórico de Pagamentos ---------- */

#payment-history-view {
    max-width: 1180px !important;
    margin: 0 auto !important;
}

#payment-history-view .config-section {
    padding: 26px !important;
    border-radius: 24px !important;
}

#payment-history-view .table-responsive {
    overflow: hidden !important;
    border-radius: 20px !important;
    background: rgba(3, 7, 18, .62) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
}

#payment-history-view table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: .9rem !important;
}

#payment-history-view thead th {
    padding: 16px 18px !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #e5e7eb !important;
    font-size: .74rem !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
}

#payment-history-view tbody td {
    padding: 16px 18px !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .08) !important;
}

#payment-history-view tbody tr:hover td {
    background: rgba(0, 207, 255, .025) !important;
}

#payment-history-body td[colspan="5"] {
    padding: 42px 24px !important;
    color: #94a3b8 !important;
    line-height: 1.55 !important;
}

#payment-pagination button {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .17) !important;
    font-weight: 850 !important;
}

#payment-pagination button:not(:disabled):hover {
    background: rgba(0, 207, 255, .075) !important;
    border-color: rgba(0, 207, 255, .24) !important;
    color: #fff !important;
}

#payment-pagination span {
    color: #94a3b8 !important;
}

/* ---------- Bloqueio de Hosts ---------- */

body:has(#ranking-hosts-body) .config-section {
    padding: 26px !important;
    border-radius: 24px !important;
}

body:has(#ranking-hosts-body) .config-section h2,
body:has(#ranking-hosts-body) .config-section h3 {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

body:has(#ranking-hosts-body) .config-section p,
body:has(#ranking-hosts-body) .form-group-config > div,
body:has(#ranking-hosts-body) .form-group-config label {
    color: #cbd5e1 !important;
}

body:has(#ranking-hosts-body) code {
    padding: 3px 7px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, .9) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    color: #e0f2fe !important;
}

/* Campo de adicionar host */
#input-block-host {
    min-height: 48px !important;
    padding: 0 15px !important;
    background: #070b14 !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
}

#btn-add-block {
    min-height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: 1px solid rgba(239, 68, 68, .32) !important;
    box-shadow: 0 12px 26px rgba(239, 68, 68, .12) !important;
}

/* Botões de sugestão */
.btn-quick-block {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    color: #e5e7eb !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

.btn-quick-block:hover {
    background: rgba(0, 207, 255, .075) !important;
    border-color: rgba(0, 207, 255, .24) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Lista de hosts bloqueados */
.blocked-list-area {
    padding: 26px !important;
    min-height: 160px !important;
    border-radius: 20px !important;
    background: rgba(3, 7, 18, .58) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

#blocked-hosts-list {
    justify-content: flex-start !important;
}

.modern-badge,
#blocked-hosts-list > span,
#blocked-hosts-list > div {
    background: rgba(15, 23, 42, .88) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.modern-badge:hover,
#blocked-hosts-list > span:hover,
#blocked-hosts-list > div:hover {
    border-color: rgba(239, 68, 68, .30) !important;
    transform: translateY(-1px) !important;
}

#blocked-hosts-list i {
    background: rgba(239, 68, 68, .12) !important;
    color: #fca5a5 !important;
}

#blocked-hosts-list i:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Ranking de hosts */
.ranking-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.ranking-table th {
    padding: 15px 16px !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #e5e7eb !important;
    font-size: .74rem !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
}

.ranking-table td {
    padding: 15px 16px !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .08) !important;
}

.ranking-table tr:hover td {
    background: rgba(0, 207, 255, .025) !important;
}

#btn-load-ranking {
    min-height: 42px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .17) !important;
    box-shadow: none !important;
}

#btn-load-ranking:hover {
    background: rgba(124, 58, 237, .10) !important;
    border-color: rgba(124, 58, 237, .26) !important;
}

/* Botões criados via JS no ranking */
#ranking-hosts-body button {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239, 68, 68, .28) !important;
    background: rgba(239, 68, 68, .10) !important;
    color: #fecaca !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

#ranking-hosts-body button:disabled {
    border-color: rgba(34, 197, 94, .26) !important;
    background: rgba(34, 197, 94, .10) !important;
    color: #bbf7d0 !important;
}

/* ---------- Modal de Renovação ---------- */

#renew-modal-overlay .modal-container {
    width: min(720px, calc(100% - 28px)) !important;
    max-height: calc(100vh - 36px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .045), transparent 34%),
        linear-gradient(180deg, #111827 0%, #080a14 100%) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55) !important;
}

#renew-modal-overlay .modal-header {
    padding: 24px 26px 18px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
}

#renew-modal-overlay .modal-header h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

#renew-modal-overlay .modal-header h2 i {
    color: #22c55e !important;
}

#renew-modal-overlay .modal-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(148, 163, 184, .15) !important;
    color: #cbd5e1 !important;
}

#renew-modal-overlay .modal-close:hover {
    background: rgba(239, 68, 68, .12) !important;
    border-color: rgba(239, 68, 68, .24) !important;
    color: #ffffff !important;
}

#renew-modal-overlay .modal-body {
    padding: 22px 26px !important;
}

#renew-modal-overlay .modal-body > p {
    margin-bottom: 16px !important;
    color: #cbd5e1 !important;
}

.package-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.package-option {
    position: relative !important;
    min-height: 118px !important;
    padding: 20px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .028) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: none !important;
    transition: .18s ease !important;
}

.package-option:hover {
    transform: translateY(-1px) !important;
    background: rgba(0, 207, 255, .045) !important;
    border-color: rgba(0, 207, 255, .22) !important;
}

.package-option.selected {
    background:
        linear-gradient(180deg, rgba(0, 207, 255, .08), rgba(255, 255, 255, .026)) !important;
    border-color: rgba(0, 207, 255, .34) !important;
}

.package-option.most-popular {
    border-color: rgba(34, 197, 94, .34) !important;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .08), transparent 34%),
        rgba(255, 255, 255, .028) !important;
}

.badge-popular {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(34, 197, 94, .14) !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
    color: #bbf7d0 !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.package-gb {
    color: #ffffff !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
}

.package-price,
.price-discounted {
    color: #67e8f9 !important;
    font-weight: 900 !important;
}

.price-original {
    color: #94a3b8 !important;
}

.discount-tag {
    background: rgba(34, 197, 94, .14) !important;
    color: #bbf7d0 !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
    border-radius: 999px !important;
}

.whatsapp-option {
    margin-top: 18px !important;
}

.whatsapp-option a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 15px !important;
    background: rgba(34, 197, 94, .10) !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
    color: #bbf7d0 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.whatsapp-option a:hover {
    background: rgba(34, 197, 94, .16) !important;
    color: #ffffff !important;
}

#renew-modal-overlay .modal-footer {
    padding: 18px 26px 24px !important;
    border-top: 1px solid rgba(148, 163, 184, .10) !important;
}

#btn-cancel,
#btn-proceed-payment {
    min-height: 48px !important;
    border-radius: 15px !important;
    font-weight: 900 !important;
}

#btn-proceed-payment {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #ffffff !important;
    border: 1px solid rgba(34, 197, 94, .32) !important;
    box-shadow: 0 12px 28px rgba(34, 197, 94, .14) !important;
}

#btn-proceed-payment:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    filter: grayscale(.3) !important;
}

/* ---------- Responsividade das páginas restantes ---------- */

@media (max-width: 991px) {
    #location-global-view .header,
    #api-view .header,
    #payment-history-view .header,
    body:has(#ranking-hosts-body) .header {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    #api-view .config-section,
    #payment-history-view .config-section,
    body:has(#ranking-hosts-body) .config-section {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    #api-view .config-section > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #api-view button[onclick="copyApiKey()"],
    #api-view button[onclick="generateNewApiKey()"] {
        width: 100% !important;
    }

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

    #renew-modal-overlay .modal-header,
    #renew-modal-overlay .modal-body,
    #renew-modal-overlay .modal-footer {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #payment-history-view .table-responsive,
    body:has(#ranking-hosts-body) .table-responsive {
        overflow-x: auto !important;
    }

    #payment-history-view table,
    .ranking-table {
        min-width: 760px !important;
    }

    .input-group-custom {
        flex-direction: column !important;
    }

    #input-block-host,
    #btn-add-block {
        width: 100% !important;
    }

    #blocked-hosts-list {
        justify-content: center !important;
    }
}

@media (max-width: 520px) {
    #location-global-view .header h1,
    #api-view .header h1,
    #payment-history-view .header h1,
    body:has(#ranking-hosts-body) .header h1 {
        font-size: 1.75rem !important;
    }

    #renew-modal-overlay .modal-container {
        width: calc(100% - 18px) !important;
        border-radius: 20px !important;
    }

    .package-option {
        min-height: 108px !important;
        padding: 18px !important;
    }

    .package-gb {
        font-size: 1.3rem !important;
    }
}
/* =========================================================
   CORREÇÃO MODAL RENOVAÇÃO — MARKETBET PREMIUM
   Corrige badge duplicado, espaçamento e mobile
========================================================= */

/* Remove o badge fantasma criado por CSS antigo */
.package-option.most-popular::before {
    display: none !important;
    content: none !important;
}

/* Ajuste geral do modal */
#renew-modal-overlay .modal-container {
    width: min(760px, calc(100% - 28px)) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    border-radius: 26px !important;
}

/* Corpo do modal com melhor respiro */
#renew-modal-overlay .modal-body {
    padding: 24px 32px 22px !important;
}

#renew-modal-overlay .modal-body > p {
    margin: 0 0 18px !important;
    color: #cbd5e1 !important;
    font-size: 1rem !important;
}

/* Grid dos pacotes */
#package-options-container.package-options,
.package-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

/* Card do pacote */
.package-option {
    position: relative !important;
    min-height: 146px !important;
    padding: 28px 18px 22px !important;
    border-radius: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .035), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(13, 17, 29, .98)) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

.package-option:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(0, 207, 255, .28) !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .06), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .98), rgba(13, 17, 29, .98)) !important;
}

/* Pacote selecionado */
.package-option.selected {
    border-color: rgba(0, 207, 255, .42) !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .10), transparent 34%),
        linear-gradient(180deg, rgba(8, 25, 38, .92), rgba(8, 15, 28, .98)) !important;
}

/* Pacote mais vendido com verde discreto */
.package-option.most-popular {
    border-color: rgba(34, 197, 94, .34) !important;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .085), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(13, 17, 29, .98)) !important;
}

/* Badge real do JS */
.package-option .badge-popular,
.badge-popular {
    position: absolute !important;
    top: -13px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 136px !important;
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;

    background: rgba(34, 197, 94, .18) !important;
    border: 1px solid rgba(34, 197, 94, .36) !important;
    color: #bbf7d0 !important;

    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

/* Texto GB */
.package-gb {
    color: #ffffff !important;
    font-size: 1.85rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    margin: 0 !important;
}

/* Preço */
.package-price {
    margin: 0 !important;
    color: #67e8f9 !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.price-discounted {
    color: #67e8f9 !important;
    font-weight: 900 !important;
}

/* WhatsApp personalizado */
.whatsapp-option {
    margin-top: 22px !important;
}

.whatsapp-option a {
    min-height: 58px !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
    background: rgba(34, 197, 94, .10) !important;
    border: 1px solid rgba(34, 197, 94, .30) !important;
    color: #bbf7d0 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.whatsapp-option a:hover {
    background: rgba(34, 197, 94, .16) !important;
    color: #ffffff !important;
}

/* Rodapé do modal */
#renew-modal-overlay .modal-footer {
    padding: 20px 32px 28px !important;
    gap: 12px !important;
}

/* Scrollbar mais discreta no modal */
#renew-modal-overlay .modal-container::-webkit-scrollbar {
    width: 8px;
}

#renew-modal-overlay .modal-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .035);
    border-radius: 999px;
}

#renew-modal-overlay .modal-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .45);
    border-radius: 999px;
}

#renew-modal-overlay .modal-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 207, 255, .45);
}

/* Mobile */
@media (max-width: 720px) {
    #renew-modal-overlay .modal-container {
        width: calc(100% - 18px) !important;
        max-height: calc(100vh - 22px) !important;
        border-radius: 22px !important;
    }

    #renew-modal-overlay .modal-body {
        padding: 22px 18px 20px !important;
    }

    #package-options-container.package-options,
    .package-options {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .package-option {
        min-height: 124px !important;
        padding: 26px 16px 20px !important;
    }

    .package-gb {
        font-size: 1.6rem !important;
    }

    .package-price {
        font-size: 1.2rem !important;
    }

    #renew-modal-overlay .modal-footer {
        padding: 18px !important;
        flex-direction: column !important;
    }

    #btn-cancel,
    #btn-proceed-payment {
        width: 100% !important;
    }
}
/* =========================================================
   MODAL RENOVAÇÃO — VERSÃO COMPACTA PREMIUM
   Cole no FINAL do marketbet-premium.css
========================================================= */

/* Mantém apenas um badge */
.package-option.most-popular::before {
    display: none !important;
    content: none !important;
}

/* Modal mais compacto */
#renew-modal-overlay .modal-container {
    width: min(680px, calc(100% - 28px)) !important;
    max-height: calc(100vh - 36px) !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
}

/* Cabeçalho menor */
#renew-modal-overlay .modal-header {
    padding: 20px 24px 16px !important;
}

#renew-modal-overlay .modal-header h2 {
    font-size: 1.25rem !important;
}

/* Corpo mais compacto */
#renew-modal-overlay .modal-body {
    padding: 20px 24px 18px !important;
}

#renew-modal-overlay .modal-body > p {
    margin-bottom: 14px !important;
    font-size: .95rem !important;
}

/* Grid compacto */
#package-options-container.package-options,
.package-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

/* Cards menores */
.package-option {
    min-height: 104px !important;
    padding: 18px 14px 16px !important;
    border-radius: 18px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .035), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(13, 17, 29, .98)) !important;

    border: 1px solid rgba(148, 163, 184, .15) !important;
    box-shadow: none !important;
}

/* Hover discreto */
.package-option:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(0, 207, 255, .28) !important;
}

/* Selecionado */
.package-option.selected {
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(8, 25, 38, .92), rgba(8, 15, 28, .98)) !important;

    border-color: rgba(0, 207, 255, .38) !important;
}

/* Mais vendido */
.package-option.most-popular {
    border-color: rgba(34, 197, 94, .34) !important;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .07), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(13, 17, 29, .98)) !important;
}

/* Badge menor e sem invadir o texto */
.package-option .badge-popular,
.badge-popular {
    top: -11px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    min-width: 116px !important;
    height: 24px !important;
    padding: 0 10px !important;

    font-size: .65rem !important;
    border-radius: 999px !important;

    background: rgba(34, 197, 94, .16) !important;
    border: 1px solid rgba(34, 197, 94, .32) !important;
    color: #bbf7d0 !important;
}

/* Texto GB menor */
.package-gb {
    font-size: 1.45rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    margin: 0 !important;
}

/* Preço menor */
.package-price {
    font-size: 1.08rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

.price-discounted {
    font-size: 1.08rem !important;
}

/* WhatsApp mais compacto */
.whatsapp-option {
    margin-top: 14px !important;
}

.whatsapp-option a {
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    font-size: .92rem !important;
}

/* Rodapé menor */
#renew-modal-overlay .modal-footer {
    padding: 16px 24px 20px !important;
    gap: 10px !important;
}

#btn-cancel,
#btn-proceed-payment {
    min-height: 44px !important;
    border-radius: 13px !important;
}

/* Desktop médio: deixa caber melhor */
@media (min-width: 721px) {
    #renew-modal-overlay .modal-container {
        max-width: 680px !important;
    }
}

/* Mobile */
@media (max-width: 720px) {
    #renew-modal-overlay .modal-container {
        width: calc(100% - 18px) !important;
        max-height: calc(100vh - 22px) !important;
    }

    #renew-modal-overlay .modal-header {
        padding: 18px 18px 14px !important;
    }

    #renew-modal-overlay .modal-body {
        padding: 18px !important;
    }

    #package-options-container.package-options,
    .package-options {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .package-option {
        min-height: 92px !important;
        padding: 16px 12px 14px !important;
    }

    .package-gb {
        font-size: 1.32rem !important;
    }

    .package-price,
    .price-discounted {
        font-size: 1rem !important;
    }

    #renew-modal-overlay .modal-footer {
        padding: 16px 18px 18px !important;
        flex-direction: column !important;
    }

    #btn-cancel,
    #btn-proceed-payment {
        width: 100% !important;
    }
}
/* =========================================================
   MODAL RENOVAÇÃO — ULTRA COMPACTO
   Objetivo: todos os pacotes + botão de pagamento visíveis
========================================================= */

/* Remove badge duplicado antigo */
.package-option.most-popular::before {
    display: none !important;
    content: none !important;
}

/* Modal menor e centralizado */
#renew-modal-overlay .modal-container {
    width: min(620px, calc(100% - 28px)) !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
}

/* Header compacto */
#renew-modal-overlay .modal-header {
    padding: 15px 20px 12px !important;
}

#renew-modal-overlay .modal-header h2 {
    font-size: 1.08rem !important;
    line-height: 1.2 !important;
}

#renew-modal-overlay .modal-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
}

/* Corpo compacto */
#renew-modal-overlay .modal-body {
    padding: 14px 20px 12px !important;
}

#renew-modal-overlay .modal-body > p {
    margin: 0 0 10px !important;
    font-size: .88rem !important;
}

/* Grid mais justo */
#package-options-container.package-options,
.package-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

/* Card bem menor */
.package-option {
    min-height: 78px !important;
    padding: 12px 10px 10px !important;
    border-radius: 15px !important;
    gap: 5px !important;
}

/* Texto GB menor */
.package-gb {
    font-size: 1.18rem !important;
    line-height: 1 !important;
}

/* Preço menor */
.package-price,
.price-discounted {
    font-size: .94rem !important;
    line-height: 1.1 !important;
}

/* Badge mais discreta */
.package-option .badge-popular,
.badge-popular {
    top: -9px !important;
    min-width: 100px !important;
    height: 20px !important;
    padding: 0 8px !important;
    font-size: .58rem !important;
}

/* WhatsApp compacto */
.whatsapp-option {
    margin-top: 10px !important;
}

.whatsapp-option a {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
}

/* Footer sempre compacto */
#renew-modal-overlay .modal-footer {
    padding: 10px 20px 16px !important;
    gap: 8px !important;
}

/* Botões finais menores */
#btn-cancel,
#btn-proceed-payment {
    min-height: 39px !important;
    border-radius: 12px !important;
    font-size: .86rem !important;
}

/* Reduz scroll visual */
#renew-modal-overlay .modal-container::-webkit-scrollbar {
    width: 6px !important;
}

/* Em telas médias, mantém tudo mais encaixado */
@media (min-width: 721px) {
    #renew-modal-overlay .modal-container {
        max-width: 620px !important;
    }
}

/* Mobile: uma coluna, mas ainda compacto */
@media (max-width: 720px) {
    #renew-modal-overlay .modal-container {
        width: calc(100% - 18px) !important;
        max-height: calc(100vh - 18px) !important;
    }

    #renew-modal-overlay .modal-header {
        padding: 14px 16px 10px !important;
    }

    #renew-modal-overlay .modal-body {
        padding: 12px 16px 10px !important;
    }

    #package-options-container.package-options,
    .package-options {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .package-option {
        min-height: 66px !important;
        padding: 10px 10px 9px !important;
    }

    .package-gb {
        font-size: 1.08rem !important;
    }

    .package-price,
    .price-discounted {
        font-size: .88rem !important;
    }

    .whatsapp-option a {
        min-height: 38px !important;
        font-size: .8rem !important;
    }

    #renew-modal-overlay .modal-footer {
        padding: 10px 16px 14px !important;
        flex-direction: column !important;
    }

    #btn-cancel,
    #btn-proceed-payment {
        width: 100% !important;
        min-height: 38px !important;
    }
}
/* =========================================================
   LAYOUT FINAL ESTÁVEL — MARKETBET CHECKER
   Sidebar fixa + conteúdo alinhado + sem dupla rolagem
========================================================= */

/* Base */
html {
    min-height: 100%;
    background: #03050a !important;
    overflow-x: hidden !important;
}

body.dashboard-layout {
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at top left, rgba(0,207,255,.055), transparent 30%),
        radial-gradient(circle at top right, rgba(124,58,237,.06), transparent 32%),
        linear-gradient(180deg, #05070d 0%, #03050a 52%, #000 100%) !important;
}

/* O layout não precisa mais empurrar a sidebar */
.dashboard-layout .layout {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    background: transparent !important;
}

/* Sidebar realmente fixa */
.dashboard-layout .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;

    height: 100vh !important;
    min-height: 100vh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 100 !important;
}

/* Corrige o div interno da sidebar que tem height inline */
.dashboard-layout .sidebar > div {
    min-height: 100vh !important;
    height: auto !important;
}

/* Scrollbar discreta da sidebar */
.dashboard-layout .sidebar::-webkit-scrollbar {
    width: 5px !important;
}

.dashboard-layout .sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}

.dashboard-layout .sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .25) !important;
    border-radius: 999px !important;
}

.dashboard-layout .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 207, 255, .35) !important;
}

/* Conteúdo principal alinhado com a sidebar fixa */
.dashboard-layout .main {
    width: calc(100% - 280px) !important;
    max-width: none !important;
    min-height: 100vh !important;

    margin-left: 280px !important;
    padding: 34px clamp(22px, 4vw, 52px) 56px !important;

    overflow: visible !important;
    background: transparent !important;
}

/* Container do dashboard */
#dashboard-container {
    max-width: 1180px !important;
    margin: 0 auto !important;
}

/* Evita cortes nas abas */
.dashboard-layout .content-section {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Mobile/tablet */
@media (max-width: 991px) {
    .dashboard-layout .layout {
        display: block !important;
    }

    .dashboard-layout .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        width: 280px !important;
        max-width: 86vw !important;
        min-width: 0 !important;

        height: 100vh !important;
        min-height: 100vh !important;

        transform: translateX(-100%) !important;
        transition: transform .22s ease !important;
        z-index: 1000 !important;
    }

    .dashboard-layout .sidebar.is-open {
        transform: translateX(0) !important;
    }

    .dashboard-layout .main {
        width: 100% !important;
        margin-left: 0 !important;
        min-height: 100vh !important;
        padding: 82px 16px 32px !important;
    }
}
/* =========================================================
   SIDEBAR SEM ROLAGEM — MENU FIXO E COMPACTO
   Remove scrollbar lateral e organiza botão sair/suporte
========================================================= */

/* Sidebar fixa sem barra de rolagem */
.dashboard-layout .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;

    height: 100vh !important;
    min-height: 100vh !important;

    overflow-y: hidden !important;
    overflow-x: hidden !important;

    z-index: 100 !important;
}

/* Remove scrollbar visual da sidebar */
.dashboard-layout .sidebar::-webkit-scrollbar {
    display: none !important;
}

.dashboard-layout .sidebar {
    scrollbar-width: none !important;
}

/* O bloco interno ocupa a tela inteira, mas sem estourar altura */
.dashboard-layout .sidebar > div {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    padding: 20px 16px 18px !important;
    box-sizing: border-box !important;
}

/* Logo mais compacta para liberar espaço */
.dashboard-layout .sidebar-brand {
    margin-bottom: 18px !important;
}

.dashboard-layout .sidebar-logo {
    max-width: 92px !important;
    margin-bottom: 16px !important;
}

/* Menu mais compacto para caber sem rolagem */
.dashboard-layout .sidebar-links li {
    margin-bottom: 5px !important;
}

.dashboard-layout .sidebar-links a {
    min-height: 38px !important;
    padding: 9px 12px !important;
    margin-bottom: 5px !important;

    font-size: .86rem !important;
    border-radius: 12px !important;
}

.dashboard-layout .sidebar-links a i {
    width: 18px !important;
    min-width: 18px !important;
    margin-right: 8px !important;
    font-size: .88rem !important;
}

/* Linha divisória acima do botão de saldo mais discreta */
#sb-add-gb {
    min-height: 44px !important;
    padding: 0 12px !important;
    margin-top: 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: .9rem !important;
    border-radius: 14px !important;
}

/* Afasta o botão Sair do botão Adicionar Saldo GB */
#logout-button {
    margin-top: 26px !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
}

/* Deixa o Sair com aparência de ação separada */
#logout-button {
    background: rgba(239, 68, 68, .06) !important;
    border: 1px solid rgba(239, 68, 68, .12) !important;
    border-left: 3px solid rgba(239, 68, 68, .36) !important;
    color: #fecaca !important;
}

#logout-button i {
    color: #ef4444 !important;
}

#logout-button:hover {
    background: rgba(239, 68, 68, .12) !important;
    border-color: rgba(239, 68, 68, .22) !important;
    color: #ffffff !important;
}

/* Rodapé suporte/site mais compacto e preso embaixo */
.dashboard-layout .sidebar > div > div:last-child {
    gap: 12px !important;
}

.dashboard-layout .sidebar > div > div:last-child > div:last-child {
    padding-top: 14px !important;
    gap: 12px !important;
}

.dashboard-layout .sidebar > div > div:last-child a {
    font-size: .75rem !important;
}

.dashboard-layout .sidebar > div > div:last-child a i {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
}

/* Conteúdo principal respeita a sidebar fixa */
.dashboard-layout .main {
    margin-left: 280px !important;
    width: calc(100% - 280px) !important;
}

/* Em telas menores, volta a permitir rolagem porque o menu vira gaveta */
@media (max-width: 991px) {
    .dashboard-layout .sidebar {
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    .dashboard-layout .sidebar::-webkit-scrollbar {
        display: block !important;
        width: 5px !important;
    }

    .dashboard-layout .main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}
/* =========================================================
   SIDEBAR ORGANIZAÇÃO FINAL — MARKETBET CHECKER
   Logo mais próxima, botão saldo centralizado,
   sair abaixo da divisória e rodapé com mais respiro.
========================================================= */

/* Sidebar sem rolagem no desktop */
@media (min-width: 992px) {
    .dashboard-layout .sidebar {
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }

    .dashboard-layout .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    .dashboard-layout .sidebar {
        scrollbar-width: none !important;
    }
}

/* Container interno da sidebar */
.dashboard-layout .sidebar > div {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    padding: 14px 16px 26px !important;
    box-sizing: border-box !important;
}

/* Logo mais próxima do topo e do menu */
.dashboard-layout .sidebar-brand {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    text-align: center !important;
}

.dashboard-layout .sidebar-logo {
    max-width: 88px !important;
    margin: 0 auto 10px !important;
    display: block !important;
}

/* Menu principal mais compacto */
.dashboard-layout .sidebar-links {
    margin: 0 !important;
    padding: 0 !important;
}

.dashboard-layout .sidebar-links li {
    margin-bottom: 5px !important;
}

.dashboard-layout .sidebar-links a {
    min-height: 37px !important;
    padding: 8px 12px !important;
    margin-bottom: 5px !important;

    font-size: .84rem !important;
    line-height: 1.1 !important;
    border-radius: 12px !important;
}

.dashboard-layout .sidebar-links a i {
    width: 18px !important;
    min-width: 18px !important;
    margin-right: 8px !important;
    font-size: .86rem !important;
}

/* Bloco do botão Adicionar Saldo GB:
   cria uma área própria centralizada entre menus e sair */
.dashboard-layout .sidebar > div > div:first-child > div[style*="margin-top: 25px"] {
    margin-top: 24px !important;
    padding-top: 22px !important;
    padding-bottom: 20px !important;
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;

    display: flex !important;
    justify-content: center !important;
}

/* Botão saldo centralizado e com largura boa */
#sb-add-gb {
    width: 100% !important;
    max-width: 232px !important;
    min-height: 44px !important;

    margin: 0 auto !important;
    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: .9rem !important;
    border-radius: 15px !important;
}

/* Bloco inferior: começa com Sair logo após divisória do saldo */
.dashboard-layout .sidebar > div > div:last-child {
    gap: 0 !important;
}

/* Lista que contém o Sair */
.dashboard-layout .sidebar > div > div:last-child > ul.sidebar-links {
    margin: 0 !important;
    padding: 0 !important;
}

/* Botão sair logo após a divisória do saldo */
#logout-button {
    margin-top: 0 !important;
    margin-bottom: 22px !important;

    min-height: 39px !important;
    padding: 9px 12px !important;

    background: rgba(239, 68, 68, .065) !important;
    border: 1px solid rgba(239, 68, 68, .16) !important;
    border-left: 3px solid rgba(239, 68, 68, .42) !important;
    color: #fecaca !important;
    border-radius: 13px !important;
}

#logout-button i {
    color: #ef4444 !important;
}

#logout-button:hover {
    background: rgba(239, 68, 68, .13) !important;
    border-color: rgba(239, 68, 68, .28) !important;
    color: #ffffff !important;
}

/* Rodapé suporte/site mais baixo e com margem maior */
.dashboard-layout .sidebar > div > div:last-child > div:last-child {
    margin-top: 26px !important;
    padding-top: 18px !important;
    padding-bottom: 2px !important;

    border-top: 1px solid rgba(148, 163, 184, .12) !important;

    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
}

/* Suporte/Site mais elegante */
.dashboard-layout .sidebar > div > div:last-child > div:last-child a {
    color: #94a3b8 !important;
    font-size: .76rem !important;
    transition: .18s ease !important;
}

.dashboard-layout .sidebar > div > div:last-child > div:last-child a i {
    font-size: 1.05rem !important;
    margin-bottom: 5px !important;
    color: #94a3b8 !important;
}

.dashboard-layout .sidebar > div > div:last-child > div:last-child a:hover {
    color: #ffffff !important;
}

.dashboard-layout .sidebar > div > div:last-child > div:last-child a:hover i {
    color: #00cfff !important;
}

/* Ajuste fino para telas menores em altura */
@media (min-width: 992px) and (max-height: 760px) {
    .dashboard-layout .sidebar > div {
        padding-top: 10px !important;
        padding-bottom: 14px !important;
    }

    .dashboard-layout .sidebar-logo {
        max-width: 76px !important;
        margin-bottom: 6px !important;
    }

    .dashboard-layout .sidebar-brand {
        margin-bottom: 8px !important;
    }

    .dashboard-layout .sidebar-links a {
        min-height: 34px !important;
        padding: 7px 11px !important;
        margin-bottom: 3px !important;
        font-size: .80rem !important;
    }

    .dashboard-layout .sidebar > div > div:first-child > div[style*="margin-top: 25px"] {
        margin-top: 16px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    #sb-add-gb {
        min-height: 40px !important;
        font-size: .84rem !important;
    }

    #logout-button {
        min-height: 36px !important;
        margin-bottom: 14px !important;
        font-size: .82rem !important;
    }

    .dashboard-layout .sidebar > div > div:last-child > div:last-child {
        margin-top: 16px !important;
        padding-top: 12px !important;
    }
}
/* =========================================================
   MOBILE SIDEBAR — CORREÇÃO DE VISIBILIDADE
   Corrige sidebar escura/apagada e mostra Suporte/Site
========================================================= */

@media (max-width: 991px) {

    /* Overlay fica atrás da sidebar, nunca por cima dela */
    .dashboard-layout .sidebar-overlay {
        z-index: 900 !important;
        background: rgba(0, 0, 0, .58) !important;
        backdrop-filter: blur(4px) !important;
    }

    /* Sidebar mobile clara, visível e acima do overlay */
    .dashboard-layout .sidebar {
        z-index: 1200 !important;
        opacity: 1 !important;
        filter: none !important;

        background:
            radial-gradient(circle at top left, rgba(0, 207, 255, .075), transparent 34%),
            linear-gradient(180deg, #070a12 0%, #03050a 100%) !important;

        border-right: 1px solid rgba(0, 207, 255, .16) !important;
        box-shadow: 18px 0 50px rgba(0, 0, 0, .55) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Remove qualquer escurecimento herdado nos itens */
    .dashboard-layout .sidebar *,
    .dashboard-layout .sidebar a,
    .dashboard-layout .sidebar span,
    .dashboard-layout .sidebar i {
        opacity: 1 !important;
        filter: none !important;
    }

    /* Compacta o conteúdo no mobile para caber melhor */
    .dashboard-layout .sidebar > div {
        min-height: 100vh !important;
        height: auto !important;
        max-height: none !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;

        padding: 12px 16px 18px !important;
        box-sizing: border-box !important;
    }

    /* Logo menor e mais próxima do topo */
    .dashboard-layout .sidebar-brand {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding-top: 0 !important;
    }

    .dashboard-layout .sidebar-logo {
        max-width: 78px !important;
        margin: 0 auto 8px !important;
    }

    /* Links mais compactos e legíveis */
    .dashboard-layout .sidebar-links a {
        min-height: 34px !important;
        padding: 7px 11px !important;
        margin-bottom: 3px !important;

        color: #e5edf7 !important;
        font-size: .80rem !important;
        font-weight: 850 !important;
    }

    .dashboard-layout .sidebar-links a i {
        color: #00cfff !important;
        font-size: .84rem !important;
    }

    /* Área do botão Adicionar Saldo GB mais compacta */
    .dashboard-layout .sidebar > div > div:first-child > div[style*="margin-top: 25px"] {
        margin-top: 14px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;

        border-top: 1px solid rgba(148, 163, 184, .12) !important;
        border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    }

    #sb-add-gb {
        max-width: 230px !important;
        min-height: 39px !important;
        font-size: .82rem !important;
        border-radius: 13px !important;
    }

    /* Bloco inferior aparece logo abaixo do botão saldo */
    .dashboard-layout .sidebar > div > div:last-child {
        margin-top: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Sair mais visível */
    #logout-button {
        margin-top: 0 !important;
        margin-bottom: 8px !important;

        min-height: 36px !important;
        padding: 8px 11px !important;

        color: #fecaca !important;
        background: rgba(239, 68, 68, .09) !important;
        border: 1px solid rgba(239, 68, 68, .22) !important;
        border-left: 3px solid rgba(239, 68, 68, .48) !important;
    }

    #logout-button i {
        color: #ef4444 !important;
    }

    /* Suporte/Site sempre visíveis no mobile */
    .dashboard-layout .sidebar > div > div:last-child > div:last-child {
        display: flex !important;
        justify-content: space-evenly !important;
        align-items: center !important;

        margin-top: 10px !important;
        padding-top: 12px !important;
        padding-bottom: 4px !important;

        border-top: 1px solid rgba(148, 163, 184, .12) !important;
    }

    .dashboard-layout .sidebar > div > div:last-child > div:last-child a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        color: #cbd5e1 !important;
        font-size: .74rem !important;
        text-decoration: none !important;
    }

    .dashboard-layout .sidebar > div > div:last-child > div:last-child a i {
        color: #94a3b8 !important;
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

}

/* Em simulação de celular muito baixa, permite rolar só o necessário */
@media (max-width: 991px) and (max-height: 640px) {
    .dashboard-layout .sidebar {
        overflow-y: auto !important;
    }

    .dashboard-layout .sidebar-logo {
        max-width: 66px !important;
    }

    .dashboard-layout .sidebar-links a {
        min-height: 31px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: .76rem !important;
    }

    #sb-add-gb {
        min-height: 36px !important;
        font-size: .78rem !important;
    }

    #logout-button {
        min-height: 34px !important;
        font-size: .78rem !important;
    }
}
/* =========================================================
   ALTERAR LOCALIZAÇÃO — CABEÇALHO ULTRA COMPACTO
   Cole no FINAL do marketbet-premium.css
========================================================= */

#location-global-view .container {
    max-width: 1120px !important;
}

/* Card do cabeçalho da aba */
#location-global-view .header {
    padding: 14px 22px !important;
    margin-bottom: 14px !important;
    border-radius: 20px !important;

    display: block !important;

    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, .055), transparent 34%),
        radial-gradient(circle at top left, rgba(0, 207, 255, .045), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .88), rgba(8, 10, 20, .96)) !important;

    border: 1px solid rgba(148, 163, 184, .12) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
}

/* Remove o padding interno que estava duplicando a altura */
#location-global-view .location-compact-header {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Título menor */
#location-global-view .location-compact-header h1,
#location-global-view .header h1 {
    font-size: 27px !important;
    line-height: 1.08 !important;
    margin: 0 0 4px !important;
    letter-spacing: -.035em !important;
}

/* Subtítulo menor */
#location-global-view .location-compact-header p,
#location-global-view .header p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-width: 720px !important;
}

/* Card que segura o iframe mais próximo do topo */
#location-global-view .location-global-card {
    margin-top: 0 !important;
    border-radius: 22px !important;
}

/* Reduz um pouco a altura desktop do iframe */
#location-global-frame {
    min-height: 940px !important;
    height: 940px !important;
}

/* Mobile */
@media (max-width: 768px) {
    #location-global-view .header {
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        border-radius: 18px !important;
    }

    #location-global-view .location-compact-header h1,
    #location-global-view .header h1 {
        font-size: 23px !important;
        line-height: 1.12 !important;
    }

    #location-global-view .location-compact-header p,
    #location-global-view .header p {
        font-size: 12.5px !important;
    }

    #location-global-frame {
        min-height: 1750px !important;
        height: 1750px !important;
    }
}
/* =========================================================
   DASHBOARD — RESUMO DO ACESSO COMPACTO
   Cole no FINAL do marketbet-premium.css
========================================================= */

/* Card principal do resumo */
#dashboard-view .checker-hero {
    padding: 22px 28px !important;
    margin-bottom: 18px !important;
    border-radius: 24px !important;
}

/* Remove altura exagerada do título */
#dashboard-view .checker-hero h1 {
    font-size: clamp(2rem, 3vw, 3.1rem) !important;
    line-height: 1.04 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.045em !important;
}

/* Subtítulo mais discreto */
#dashboard-view .checker-hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

/* Badge "Painel do Cliente" menor */
#dashboard-view .checker-eyebrow {
    margin-bottom: 10px !important;
    padding: 5px 12px !important;
    font-size: 0.68rem !important;
}

/* Chips de usuário e ID menores */
#dashboard-view .checker-hero .info-block > p:not(.checker-hero-subtitle) {
    padding: 6px 10px !important;
    margin-bottom: 8px !important;
    font-size: 0.8rem !important;
}

/* Seletor de servidor mais compacto */
#dashboard-view .checker-hero .host-selector {
    max-width: 720px !important;
    margin: 10px 0 14px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
}

#dashboard-view .checker-hero .host-selector label {
    font-size: 0.9rem !important;
}

#dashboard-view .checker-hero .host-selector select {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.9rem !important;
    padding: 6px 12px !important;
}

#dashboard-view .checker-hero .host-selector span {
    font-size: 0.78rem !important;
}

/* Cards das proxies mais compactos */
#dashboard-view .checker-proxy-grid {
    gap: 14px !important;
}

#dashboard-view .checker-proxy-card {
    min-height: auto !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    gap: 10px !important;
}

/* Cabeçalho de cada proxy mais enxuto */
#dashboard-view .checker-proxy-heading {
    gap: 10px !important;
}

#dashboard-view .checker-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 10px !important;
}

#dashboard-view .checker-proxy-heading strong {
    font-size: 0.95rem !important;
}

#dashboard-view .checker-proxy-heading small {
    font-size: 0.78rem !important;
}

/* Caixa da proxy menor */
#dashboard-view .checker-proxy-card .proxy-code {
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
    border-radius: 12px !important;
}

/* Botão copiar menor */
#dashboard-view .checker-proxy-card .copy-btn {
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    border-radius: 11px !important;
}

/* Aproxima os cards de consumo do topo */
#dashboard-view .checker-balance-grid {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    gap: 14px !important;
}

/* Mobile */
@media (max-width: 768px) {
    #dashboard-view .checker-hero {
        padding: 20px 16px !important;
        border-radius: 20px !important;
        margin-bottom: 14px !important;
    }

    #dashboard-view .checker-hero h1 {
        font-size: 2rem !important;
        line-height: 1.08 !important;
    }

    #dashboard-view .checker-hero-subtitle {
        font-size: 0.88rem !important;
    }

    #dashboard-view .checker-proxy-card {
        padding: 15px !important;
    }
}
/* =========================================================
   DASHBOARD — TOPO SUPER COMPACTO
   Prioridade: servidor, copiar proxy, saldo e gráfico
   Cole no FINAL do marketbet-premium.css
========================================================= */

#dashboard-view .checker-hero {
    padding: 18px 22px !important;
    margin-bottom: 14px !important;
    border-radius: 22px !important;
}

/* Badge Painel do Cliente */
#dashboard-view .checker-eyebrow {
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
    font-size: 0.62rem !important;
    letter-spacing: .08em !important;
}

/* Título principal */
#dashboard-view .checker-hero h1 {
    font-size: clamp(1.9rem, 2.6vw, 2.8rem) !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.05em !important;
}

/* Subtítulo */
#dashboard-view .checker-hero-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
}

/* Usuário / ID */
#dashboard-view .checker-hero .info-block > p:not(.checker-hero-subtitle) {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 9px !important;
    margin: 0 6px 8px 0 !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
}

/* Seletor de servidor */
#dashboard-view .checker-hero .host-selector {
    max-width: 650px !important;
    margin: 8px 0 12px !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
}

#dashboard-view .checker-hero .host-selector label {
    font-size: 0.82rem !important;
    margin-bottom: 0 !important;
}

#dashboard-view .checker-hero .host-selector select {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
}

#dashboard-view .checker-hero .host-selector span {
    margin-top: 6px !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
}

/* Grid das proxies */
#dashboard-view .checker-proxy-grid {
    gap: 12px !important;
}

/* Cards das proxies */
#dashboard-view .checker-proxy-card {
    padding: 13px 15px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    gap: 8px !important;
}

/* Cabeçalho proxy */
#dashboard-view .checker-proxy-heading {
    gap: 9px !important;
    margin-bottom: 6px !important;
}

#dashboard-view .checker-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
}

#dashboard-view .checker-proxy-heading strong {
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
}

#dashboard-view .checker-proxy-heading small {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
}

/* Código da proxy */
#dashboard-view .checker-proxy-card .proxy-code {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    border-radius: 10px !important;
}

/* Botão copiar */
#dashboard-view .checker-proxy-card .copy-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.76rem !important;
    border-radius: 10px !important;
}

/* Cards de saldo sobem mais perto */
#dashboard-view .checker-balance-grid {
    margin-top: 12px !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
}

/* Cards de consumo/saldo mais compactos */
#dashboard-view .checker-balance-card {
    padding: 16px 18px !important;
    border-radius: 18px !important;
    min-height: auto !important;
}

#dashboard-view .checker-balance-card h3,
#dashboard-view .checker-balance-card .card-title {
    font-size: 0.78rem !important;
    margin-bottom: 7px !important;
}

#dashboard-view .checker-balance-card .balance-value,
#dashboard-view .checker-balance-card strong {
    font-size: clamp(1.8rem, 2.5vw, 2.5rem) !important;
    line-height: 1 !important;
}

/* Mobile */
@media (max-width: 768px) {
    #dashboard-view .checker-hero {
        padding: 16px 14px !important;
        border-radius: 18px !important;
        margin-bottom: 12px !important;
    }

    #dashboard-view .checker-hero h1 {
        font-size: 1.8rem !important;
        margin-bottom: 6px !important;
    }

    #dashboard-view .checker-hero-subtitle {
        font-size: 0.82rem !important;
        margin-bottom: 8px !important;
    }

    #dashboard-view .checker-hero .host-selector {
        padding: 9px !important;
        margin: 8px 0 10px !important;
    }

    #dashboard-view .checker-proxy-card {
        padding: 13px !important;
    }

    #dashboard-view .checker-proxy-card .proxy-code {
        font-size: 0.68rem !important;
    }
}
/* =========================================================
   DASHBOARD — TOPO DIRETO / ACESSO RÁPIDO
   Objetivo: servidor + copiar proxies + saldo/gráfico mais visíveis
   Cole no FINAL de /css/marketbet-premium.css
========================================================= */

#dashboard-view .checker-hero {
    padding: 18px 22px !important;
    margin-bottom: 14px !important;
    border-radius: 22px !important;
}

/* Badge menor e menos chamativo */
#dashboard-view .checker-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
    font-size: 0.62rem !important;
    letter-spacing: .08em !important;
}

/* Título direto */
#dashboard-view .checker-hero h1 {
    font-size: clamp(1.75rem, 2.35vw, 2.45rem) !important;
    line-height: 1.02 !important;
    margin: 0 0 5px !important;
    letter-spacing: -0.05em !important;
}

/* Subtítulo objetivo */
#dashboard-view .checker-hero-subtitle {
    max-width: 720px !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
}

/* Usuário e ID viram detalhe discreto */
#dashboard-view .checker-user-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
}

#dashboard-view .checker-user-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(148,163,184,.10) !important;
    color: #94a3b8 !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
}

#dashboard-view .checker-user-meta strong {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
}

/* Esconde os antigos p de usuário/ID caso algum tenha sobrado */
#dashboard-view .checker-hero .info-block > p:not(.checker-hero-subtitle) {
    display: none !important;
}

/* Servidor mais compacto */
#dashboard-view .checker-hero .host-selector {
    max-width: 650px !important;
    margin: 8px 0 12px !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
}

#dashboard-view .checker-hero .host-selector label {
    font-size: 0.82rem !important;
    margin: 0 !important;
}

#dashboard-view .checker-hero .host-selector select {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
}

#dashboard-view .checker-hero .host-selector span {
    display: block !important;
    flex-basis: 100% !important;
    margin-top: 4px !important;
    font-size: 0.70rem !important;
    line-height: 1.25 !important;
}

/* Cards das proxies mais objetivos */
#dashboard-view .checker-proxy-grid {
    gap: 12px !important;
}

#dashboard-view .checker-proxy-card {
    padding: 13px 15px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    gap: 8px !important;
}

#dashboard-view .checker-proxy-heading {
    gap: 9px !important;
    margin-bottom: 4px !important;
}

#dashboard-view .checker-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
}

#dashboard-view .checker-proxy-heading strong {
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
}

#dashboard-view .checker-proxy-heading small {
    font-size: 0.70rem !important;
    line-height: 1.25 !important;
}

/* Código da proxy */
#dashboard-view .checker-proxy-card .proxy-code {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    border-radius: 10px !important;
}

/* Botão copiar */
#dashboard-view .checker-proxy-card .copy-btn {
    width: fit-content !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.76rem !important;
    border-radius: 10px !important;
}

/* Aproxima os cards de saldo */
#dashboard-view .checker-balance-grid {
    margin-top: 12px !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
}

/* Mobile */
@media (max-width: 768px) {
    #dashboard-view .checker-hero {
        padding: 16px 14px !important;
        border-radius: 18px !important;
        margin-bottom: 12px !important;
    }

    #dashboard-view .checker-hero h1 {
        font-size: 1.75rem !important;
    }

    #dashboard-view .checker-hero-subtitle {
        font-size: 0.8rem !important;
    }

    #dashboard-view .checker-user-meta {
        gap: 5px !important;
    }

    #dashboard-view .checker-user-meta span {
        font-size: 0.66rem !important;
    }

    #dashboard-view .checker-hero .host-selector {
        max-width: 100% !important;
    }

    #dashboard-view .checker-hero .host-selector select {
        width: 100% !important;
    }

    #dashboard-view .checker-proxy-card .copy-btn {
        width: 100% !important;
    }
}
/* =========================================================
   GRÁFICO DE CONSUMO — UX MAIS CLARA
========================================================= */

.usage-chart-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.usage-chart-title-block .section-eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 207, 255, .10);
    border: 1px solid rgba(0, 207, 255, .22);
    color: #67e8f9;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.usage-chart-title-block h3 {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    margin: 4px 0 0 !important;
}

.usage-chart-title-block p {
    max-width: 760px;
    color: #94a3b8 !important;
    font-size: .88rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.chart-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.details-consumption-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    background: rgba(0, 207, 255, .10);
    border: 1px solid rgba(0, 207, 255, .24);
    color: #7dd3fc;
    font-size: .84rem;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

.details-consumption-btn:hover {
    background: rgba(0, 207, 255, .18);
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .chart-actions {
        justify-content: stretch;
        width: 100%;
    }

    .details-consumption-btn {
        width: 100%;
    }

    .usage-chart-title-block h3 {
        font-size: 1rem !important;
    }

    .usage-chart-title-block p {
        font-size: .82rem !important;
    }
}
/* =========================================================
   GRÁFICO — AJUSTE DE ESPAÇAMENTO DO TÍTULO
========================================================= */

.usage-chart-title-block h3 {
    margin-bottom: 8px !important;
}

.usage-chart-title-block p {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    display: block !important;
}
/* =========================================================
   DASHBOARD — CARD ATALHO ALTERAR LOCALIZAÇÃO
========================================================= */

.location-shortcut-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    margin: 22px 0;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(8, 10, 20, .98));
    border: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.location-shortcut-card h2 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
    margin: 8px 0 6px;
}

.location-shortcut-card p {
    color: #94a3b8;
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
    max-width: 640px;
}

.quick-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, #00cfff, #6366f1);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(0, 207, 255, .16);
}

.quick-action-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .location-shortcut-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
        border-radius: 18px;
    }

    .quick-action-btn {
        width: 100%;
    }
}
/* =========================================================
   CONFIGURAR PROXY — TELA UNIFICADA PREMIUM
========================================================= */

.unified-config-container {
    max-width: 1120px !important;
}

.unified-config-hero {
    margin-bottom: 16px;
    padding: 22px 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, .08), transparent 34%),
        radial-gradient(circle at top left, rgba(0, 207, 255, .07), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(8, 10, 20, .98));
    border: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

.unified-config-hero h1 {
    margin: 8px 0 6px;
    color: #ffffff;
    font-size: clamp(1.75rem, 2.4vw, 2.55rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.045em;
}

.unified-config-hero p {
    max-width: 760px;
    margin: 0;
    color: #cbd5e1;
    font-size: .92rem;
    line-height: 1.45;
}

.unified-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.unified-step {
    display: flex;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 16px;
    background: rgba(2, 6, 23, .58);
    border: 1px solid rgba(148, 163, 184, .12);
}

.unified-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    background: rgba(0, 207, 255, .12);
    border: 1px solid rgba(0, 207, 255, .25);
    color: #67e8f9;
    font-weight: 900;
    font-size: .76rem;
}

.unified-step strong {
    display: block;
    color: #fff;
    font-size: .84rem;
    line-height: 1.2;
    margin-bottom: 3px;
}

.unified-step small {
    display: block;
    color: #94a3b8;
    font-size: .74rem;
    line-height: 1.35;
}

.unified-config-card,
.unified-output-card,
.unified-summary-card {
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .04), transparent 35%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(8, 10, 20, .98));
    border: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 18px 42px rgba(0,0,0,.20);
}

.unified-config-card {
    padding: 20px;
    margin-bottom: 16px;
}

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

.unified-card-header.compact {
    margin-bottom: 12px;
}

.unified-card-header h2 {
    margin: 7px 0 4px;
    color: #ffffff;
    font-size: 1.18rem;
    line-height: 1.2;
    font-weight: 900;
}

.unified-card-header p {
    margin: 0;
    color: #94a3b8;
    font-size: .84rem;
    line-height: 1.4;
}

.unified-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.unified-field-wide {
    grid-column: 1 / -1;
}

.unified-field label {
    display: block;
    margin-bottom: 7px;
    color: #dbeafe;
    font-size: .8rem;
    font-weight: 900;
}

.unified-field label em {
    color: #94a3b8;
    font-style: normal;
    font-weight: 700;
}

.unified-field small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.3;
}

.unified-field input,
.unified-field select {
    width: 100%;
    height: 42px;
    border-radius: 13px;
    padding: 0 13px;
    background: #050914;
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .16);
    outline: none;
    font-size: .86rem;
    font-weight: 800;
}

.unified-field input::placeholder {
    color: rgba(203, 213, 225, .55);
}

.unified-field input:focus,
.unified-field select:focus {
    border-color: rgba(0, 207, 255, .50);
    box-shadow: 0 0 0 3px rgba(0, 207, 255, .10);
}

.unified-autocomplete {
    position: relative;
}

.unified-arrow {
    position: absolute;
    right: 13px;
    top: 10px;
    color: #64748b;
    pointer-events: none;
}

.unified-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    top: calc(100% + 7px);
    max-height: 220px;
    overflow-y: auto;
    border-radius: 15px;
    background: #050914;
    border: 1px solid rgba(148, 163, 184, .18);
    box-shadow: 0 20px 46px rgba(0,0,0,.42);
}

.unified-dropdown.show {
    display: block;
}

.unified-option,
.unified-empty {
    padding: 10px 13px;
    color: #e5e7eb;
    font-size: .82rem;
    font-weight: 750;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
}

.unified-option:hover {
    background: rgba(0, 207, 255, .10);
    color: #67e8f9;
}

.unified-empty {
    color: #94a3b8;
    cursor: default;
}

.unified-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.unified-type-btn {
    height: 42px;
    border-radius: 13px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: #050914;
    color: #94a3b8;
    font-size: .84rem;
    font-weight: 900;
    cursor: pointer;
}

.unified-type-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(0, 207, 255, .28), rgba(99, 102, 241, .32));
    border-color: rgba(0, 207, 255, .38);
}

.unified-output-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .9fr);
    gap: 16px;
}

.unified-output-card,
.unified-summary-card {
    padding: 18px;
}

#unified-proxy-output {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    padding: 14px;
    border-radius: 15px;
    background: #050914;
    color: #dbeafe;
    border: 1px solid rgba(148, 163, 184, .16);
    font-family: Consolas, Monaco, monospace;
    font-size: .78rem;
    line-height: 1.55;
    outline: none;
}

.unified-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.unified-primary-btn,
.unified-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
}

.unified-primary-btn {
    border: 0;
    background: #00cfff;
    color: #03111d;
}

.unified-secondary-btn {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(148, 163, 184, .15);
    color: #dbeafe;
}

.unified-helper {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 13px;
    background: rgba(0, 207, 255, .07);
    border: 1px solid rgba(0, 207, 255, .15);
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.35;
}

.unified-summary-list {
    display: grid;
    gap: 10px;
}

.unified-summary-list div {
    display: grid;
    gap: 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.unified-summary-list span {
    color: #94a3b8;
    font-size: .74rem;
    font-weight: 800;
}

.unified-summary-list strong {
    color: #e5e7eb;
    font-family: Consolas, Monaco, monospace;
    font-size: .78rem;
    word-break: break-all;
}

/* Ajusta cards antigos caso fiquem na página */
#config-proxy-view .config-section.card {
    display: none;
}

@media (max-width: 900px) {
    .unified-form-grid,
    .unified-output-grid,
    .unified-steps {
        grid-template-columns: 1fr;
    }

    .unified-output-grid {
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .unified-config-hero,
    .unified-config-card,
    .unified-output-card,
    .unified-summary-card {
        border-radius: 18px;
    }

    .unified-config-hero {
        padding: 18px;
    }

    .unified-config-card,
    .unified-output-card,
    .unified-summary-card {
        padding: 16px;
    }

    .unified-actions {
        flex-direction: column;
    }

    .unified-primary-btn,
    .unified-secondary-btn {
        width: 100%;
    }
}
/* =========================================================
   CONFIGURAR PROXY — DROPDOWN PESQUISÁVEL
========================================================= */

.unified-autocomplete input {
    cursor: text !important;
}

.unified-dropdown {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 207, 255, .55) rgba(15, 23, 42, .85);
}

.unified-option {
    display: flex;
    align-items: center;
    min-height: 38px;
}

.unified-option:first-child {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.unified-option:last-child {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.unified-option:hover {
    background: rgba(0, 207, 255, .14) !important;
}
/* =========================================================
   CONFIGURAR PROXY — BOTÕES COPIAR NO CARD DADOS USADOS
========================================================= */

.unified-summary-list .summary-copy-row {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.unified-summary-list .summary-copy-row span {
    width: 100%;
    display: block;
}

.unified-summary-list .summary-copy-row strong {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-all;
}

.summary-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 9px;
    border: 1px solid rgba(0, 207, 255, .20);
    background: rgba(0, 207, 255, .09);
    color: #67e8f9;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    transition: .16s ease;
}

.summary-copy-btn:hover {
    background: rgba(0, 207, 255, .16);
    color: #ffffff;
    transform: translateY(-1px);
}

.summary-copy-btn i {
    font-size: .7rem;
}

@media (max-width: 768px) {
    .unified-summary-list .summary-copy-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .summary-copy-btn {
        width: auto;
    }
}
/* =========================================================
   MEUS DADOS — CARD PREMIUM
========================================================= */

#meus-dados-view .container {
    max-width: 980px !important;
}

.profile-card-premium {
    margin-top: 20px !important;
    padding: 28px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .05), transparent 35%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(8, 10, 20, .98)) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
}

.profile-card-premium h2 {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
}

.profile-card-subtitle {
    color: #94a3b8 !important;
    font-size: .9rem !important;
    line-height: 1.45 !important;
    margin: 0 0 22px !important;
}

#profile-form {
    display: grid;
    gap: 16px;
}

#profile-form .form-group-config label {
    display: block;
    margin-bottom: 7px;
    color: #dbeafe;
    font-size: .82rem;
    font-weight: 900;
}

#profile-form .form-group-config input {
    width: 100%;
    min-height: 44px;
    border-radius: 13px;
    padding: 0 14px;
    background: #050914;
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .16);
    outline: none;
    font-size: .9rem;
    font-weight: 700;
}

#profile-form .form-group-config input:focus {
    border-color: rgba(0, 207, 255, .50);
    box-shadow: 0 0 0 3px rgba(0, 207, 255, .10);
}

#profile-form .form-group-config small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: .76rem;
}

#profile-form .form-divider {
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, .12);
    margin: 8px 0;
}

.profile-actions {
    margin-top: 6px;
}

#btn-save-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 13px;
    border: 0;
    background: linear-gradient(135deg, #00cfff, #6366f1);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 207, 255, .16);
}

#btn-save-profile:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .profile-card-premium {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    #btn-save-profile {
        width: 100%;
    }
}
/* =========================================================
   MEUS DADOS — CABEÇALHO COMPACTO
========================================================= */

#meus-dados-view .checker-hero {
    padding: 24px 32px !important;
    min-height: auto !important;
    margin-bottom: 22px !important;
    border-radius: 22px !important;
}

#meus-dados-view .checker-hero h1 {
    font-size: clamp(2rem, 3vw, 3.2rem) !important;
    line-height: 1.05 !important;
    margin: 8px 0 8px !important;
    letter-spacing: -0.04em !important;
}

#meus-dados-view .checker-hero .checker-hero-subtitle,
#meus-dados-view .checker-hero p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 760px !important;
}

#meus-dados-view .checker-eyebrow {
    font-size: 0.72rem !important;
    padding: 7px 13px !important;
}

@media (max-width: 768px) {
    #meus-dados-view .checker-hero {
        padding: 18px !important;
        margin-bottom: 16px !important;
        border-radius: 18px !important;
    }

    #meus-dados-view .checker-hero h1 {
        font-size: 2rem !important;
    }

    #meus-dados-view .checker-hero .checker-hero-subtitle,
    #meus-dados-view .checker-hero p {
        font-size: 0.88rem !important;
    }
}
/* =========================================================
   MEUS DADOS — CABEÇALHO SUPER COMPACTO
   Colar no FINAL do marketbet-premium.css
========================================================= */

#meus-dados-view .header.checker-hero {
    max-width: 980px !important;
    min-height: 0 !important;
    padding: 18px 24px !important;
    margin: 0 auto 18px !important;
    border-radius: 18px !important;
    display: block !important;
}

#meus-dados-view .header.checker-hero .info-block {
    max-width: 100% !important;
}

#meus-dados-view .header.checker-hero .checker-eyebrow {
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
}

#meus-dados-view .header.checker-hero h1 {
    font-size: 2.05rem !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    letter-spacing: -0.045em !important;
}

#meus-dados-view .header.checker-hero .checker-hero-subtitle,
#meus-dados-view .header.checker-hero p {
    font-size: 0.86rem !important;
    line-height: 1.32 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 720px !important;
}

/* Reduz o espaço entre cabeçalho e card do formulário */
#meus-dados-view .profile-card-premium {
    margin-top: 14px !important;
}

/* Mobile */
@media (max-width: 768px) {
    #meus-dados-view .header.checker-hero {
        padding: 15px 16px !important;
        margin-bottom: 14px !important;
        border-radius: 16px !important;
    }

    #meus-dados-view .header.checker-hero h1 {
        font-size: 1.65rem !important;
    }

    #meus-dados-view .header.checker-hero .checker-hero-subtitle,
    #meus-dados-view .header.checker-hero p {
        font-size: 0.8rem !important;
    }
}/* =========================================================
   MEUS DADOS — CABEÇALHO SUPER COMPACTO
   Colar no FINAL do marketbet-premium.css
========================================================= */

#meus-dados-view .header.checker-hero {
    max-width: 980px !important;
    min-height: 0 !important;
    padding: 18px 24px !important;
    margin: 0 auto 18px !important;
    border-radius: 18px !important;
    display: block !important;
}

#meus-dados-view .header.checker-hero .info-block {
    max-width: 100% !important;
}

#meus-dados-view .header.checker-hero .checker-eyebrow {
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
}

#meus-dados-view .header.checker-hero h1 {
    font-size: 2.05rem !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    letter-spacing: -0.045em !important;
}

#meus-dados-view .header.checker-hero .checker-hero-subtitle,
#meus-dados-view .header.checker-hero p {
    font-size: 0.86rem !important;
    line-height: 1.32 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 720px !important;
}

/* Reduz o espaço entre cabeçalho e card do formulário */
#meus-dados-view .profile-card-premium {
    margin-top: 14px !important;
}

/* Mobile */
@media (max-width: 768px) {
    #meus-dados-view .header.checker-hero {
        padding: 15px 16px !important;
        margin-bottom: 14px !important;
        border-radius: 16px !important;
    }

    #meus-dados-view .header.checker-hero h1 {
        font-size: 1.65rem !important;
    }

    #meus-dados-view .header.checker-hero .checker-hero-subtitle,
    #meus-dados-view .header.checker-hero p {
        font-size: 0.8rem !important;
    }
}
/* =========================================================
   MEUS DADOS — AJUSTE FINAL DO CABEÇALHO
========================================================= */

/* Cabeçalho mais largo e com menos espaço abaixo */
#meus-dados-view .header.checker-hero {
    max-width: 1180px !important;
    width: 100% !important;
    padding: 18px 28px !important;
    margin: 0 auto 7px !important;
    border-radius: 18px !important;
}

/* Container da página alinhado com o card */
#meus-dados-view .container {
    max-width: 1180px !important;
}

/* Reduz distância entre cabeçalho e card Editar Perfil */
#meus-dados-view .profile-card-premium {
    margin-top: 10px !important;
}

/* Reduz um pouco o espaço interno superior do card */
#meus-dados-view .config-section.card.profile-card-premium {
    padding-top: 24px !important;
}
/* =========================================================
   CONFIGURAR PROXY — AVISO DISCRETO DE TAXA
========================================================= */

.unified-location-rate-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    margin: 2px 0 0;
    border-radius: 12px;
    background: rgba(239, 68, 68, .075);
    border: 1px solid rgba(239, 68, 68, .18);
    color: #fecaca;
    font-size: .78rem;
    line-height: 1.35;
}

.unified-location-rate-note i {
    color: #f87171;
    font-size: .82rem;
    flex: 0 0 auto;
}

.unified-location-rate-note span {
    color: #cbd5e1;
}

.unified-location-rate-note strong {
    color: #ffffff;
    font-weight: 900;
}

.unified-location-rate-note b {
    color: #fecaca;
    font-weight: 900;
}

@media (max-width: 768px) {
    .unified-location-rate-note {
        align-items: flex-start;
        padding: 9px 10px;
        font-size: .74rem;
    }
}
/* =========================================================
   SIDEBAR — LOGO MARKETBET CORRIGIDA
========================================================= */

.sidebar-brand {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 22px 0 18px 38px !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
}

.sidebar-brand .sidebar-logo {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Se algum CSS antigo estiver aplicando scale/font-size na imagem */
img.sidebar-logo {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: auto !important;
}

/* Mobile */
@media (max-width: 768px) {
    .sidebar-brand {
        padding: 18px 0 14px 24px !important;
        margin-bottom: 18px !important;
    }

    .sidebar-brand .sidebar-logo,
    img.sidebar-logo {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
    }
}
/* =========================================================
   MAIORES CONSUMIDORES — PADRÃO PREMIUM MARKETBET
   Versão segura sem :has()
========================================================= */

.ranking-consumers-section {
    padding: 26px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 207, 255, .035), transparent 36%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(8, 10, 20, .98)) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
}

.ranking-consumers-section > div:first-child {
    align-items: center !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
}

.ranking-consumers-section h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.22rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

.ranking-consumers-section h2 i {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(0, 207, 255, .08) !important;
    border: 1px solid rgba(0, 207, 255, .16) !important;
    color: #67e8f9 !important;
}

.ranking-consumers-section > p {
    max-width: 820px !important;
    margin: 0 auto 18px !important;
    color: #94a3b8 !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

#btn-load-ranking {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .17) !important;
    box-shadow: none !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
}

#btn-load-ranking:hover {
    background: rgba(0, 207, 255, .075) !important;
    border-color: rgba(0, 207, 255, .24) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.ranking-summary-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 18px 0 18px !important;
}

.ranking-summary-card {
    flex: 1 1 calc(25% - 14px) !important;
    min-width: 180px !important;
    min-height: 94px !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
    text-align: center !important;
    background:
        radial-gradient(circle at top left, rgba(0, 207, 255, .045), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(3, 7, 18, .96)) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: none !important;
}

/* Busca + filtros */
.ranking-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 0 14px !important;
    flex-wrap: wrap !important;
}

.ranking-search-wrap {
    position: relative !important;
    width: min(100%, 420px) !important;
}

.ranking-search-wrap i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    pointer-events: none !important;
}

#ranking-host-search {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px 0 40px !important;
    border-radius: 13px !important;
    background: #050914 !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    color: #f8fafc !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    outline: none !important;
}

#ranking-host-search:focus {
    border-color: rgba(0, 207, 255, .42) !important;
    box-shadow: 0 0 0 3px rgba(0, 207, 255, .075) !important;
}

.ranking-period-filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 999px !important;
    background: rgba(3, 7, 18, .72) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
}

.ranking-period-btn {
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: .74rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

.ranking-period-btn:hover {
    background: rgba(255, 255, 255, .045) !important;
    color: #ffffff !important;
}

.ranking-period-btn.active {
    background: rgba(0, 207, 255, .11) !important;
    color: #67e8f9 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 207, 255, .18) !important;
}

/* Tabela */
.ranking-consumers-section .table-responsive {
    overflow: hidden !important;
    border-radius: 20px !important;
    background: rgba(3, 7, 18, .62) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
}

.ranking-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: .86rem !important;
}

.ranking-table th {
    padding: 15px 16px !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #e5e7eb !important;
    font-size: .70rem !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
    white-space: nowrap !important;
}

.ranking-table td {
    padding: 16px !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .08) !important;
    vertical-align: middle !important;
}

.ranking-table tbody tr:hover td {
    background: rgba(0, 207, 255, .025) !important;
}

.ranking-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Domínio */
.host-main-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.host-main-cell strong {
    color: #ffffff !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.host-main-cell small {
    max-width: 360px !important;
    color: #94a3b8 !important;
    font-size: .74rem !important;
    line-height: 1.35 !important;
}

/* Badges */
.host-type-badge,
.host-risk-badge {
    width: fit-content !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.host-type-badge.generic {
    background: rgba(148, 163, 184, .10) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
}

.host-type-badge.cdn {
    background: rgba(124, 58, 237, .13) !important;
    color: #ddd6fe !important;
    border: 1px solid rgba(124, 58, 237, .24) !important;
}

.host-type-badge.google {
    background: rgba(59, 130, 246, .13) !important;
    color: #bfdbfe !important;
    border: 1px solid rgba(59, 130, 246, .24) !important;
}

.host-type-badge.video {
    background: rgba(239, 68, 68, .12) !important;
    color: #fecaca !important;
    border: 1px solid rgba(239, 68, 68, .24) !important;
}

.host-type-badge.ads {
    background: rgba(245, 158, 11, .12) !important;
    color: #fde68a !important;
    border: 1px solid rgba(245, 158, 11, .24) !important;
}

.host-type-badge.payment {
    background: rgba(34, 197, 94, .12) !important;
    color: #bbf7d0 !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
}

/* Consumo */
.consumption-cell {
    min-width: 160px !important;
}

.consumption-value {
    margin-bottom: 7px !important;
    color: #fbbf24 !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
}

.consumption-bar-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(148, 163, 184, .13) !important;
}

.consumption-bar-fill {
    height: 100% !important;
    width: var(--bar-width, 0%) !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #00cfff, #7c3aed) !important;
    box-shadow: none !important;
}

/* Participação */
.percent-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.percent-number {
    color: #e5e7eb !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
}

.host-risk-badge.high {
    background: rgba(239, 68, 68, .12) !important;
    color: #fecaca !important;
    border: 1px solid rgba(239, 68, 68, .24) !important;
}

.host-risk-badge.medium {
    background: rgba(245, 158, 11, .12) !important;
    color: #fde68a !important;
    border: 1px solid rgba(245, 158, 11, .24) !important;
}

.host-risk-badge.low {
    background: rgba(34, 197, 94, .12) !important;
    color: #bbf7d0 !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
}

/* Botões */
#ranking-hosts-body button {
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239, 68, 68, .28) !important;
    background: rgba(239, 68, 68, .10) !important;
    color: #fecaca !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

#ranking-hosts-body button:hover:not(:disabled) {
    background: rgba(239, 68, 68, .16) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

#ranking-hosts-body button:disabled,
#ranking-hosts-body button.btn-block-success {
    border-color: rgba(34, 197, 94, .26) !important;
    background: rgba(34, 197, 94, .10) !important;
    color: #bbf7d0 !important;
    cursor: not-allowed !important;
}

/* Paginação */
.ranking-pagination {
    max-width: 680px !important;
    margin: 20px auto 0 !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    background: rgba(3, 7, 18, .58) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
}

.ranking-pagination-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.ranking-page-btn {
    min-width: 38px !important;
    height: 36px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #cbd5e1 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

.ranking-page-btn:hover:not(:disabled) {
    background: rgba(0, 207, 255, .075) !important;
    border-color: rgba(0, 207, 255, .24) !important;
    color: #ffffff !important;
}

.ranking-page-btn.active {
    background: rgba(0, 207, 255, .11) !important;
    color: #67e8f9 !important;
    border-color: rgba(0, 207, 255, .22) !important;
}

.ranking-page-btn.prev-next {
    min-width: 104px !important;
}

.ranking-page-btn:disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
}

.ranking-page-status {
    color: #e5e7eb !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
}

.ranking-page-info {
    margin-top: 8px !important;
    color: #94a3b8 !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.ranking-page-dots {
    color: #64748b !important;
    font-weight: 900 !important;
}

/* Responsivo seguro — sem CSS grid */
@media (max-width: 991px) {
    .ranking-summary-card {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: 150px !important;
    }

    .ranking-consumers-section .table-responsive {
        overflow-x: visible !important;
    }
}

@media (max-width: 768px) {
    .ranking-consumers-section {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .ranking-consumers-section > div:first-child {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .ranking-consumers-section h2 {
        font-size: 1.05rem !important;
    }

    .ranking-summary-grid {
        gap: 10px !important;
    }

    .ranking-summary-card {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: 130px !important;
        min-height: 84px !important;
        padding: 14px 12px !important;
    }

    .ranking-summary-card span {
        font-size: .64rem !important;
    }

    .ranking-summary-card strong {
        font-size: .94rem !important;
    }

    .ranking-tools {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .ranking-search-wrap,
    .ranking-period-filter {
        width: 100% !important;
    }

    .ranking-period-filter {
        justify-content: space-between !important;
    }

    .ranking-period-btn {
        flex: 1 !important;
    }

    /* Transforma a tabela em cards no mobile */
    .ranking-consumers-section .table-responsive {
        overflow-x: visible !important;
        background: transparent !important;
        border: 0 !important;
    }

    .ranking-table {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        border-collapse: separate !important;
    }

    .ranking-table thead {
        display: none !important;
    }

    .ranking-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .ranking-table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 14px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background:
            radial-gradient(circle at top right, rgba(0, 207, 255, .035), transparent 34%),
            linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(3, 7, 18, .98)) !important;
        border: 1px solid rgba(148, 163, 184, .13) !important;
    }

    .ranking-table td {
        display: flex !important;
        width: 100% !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .08) !important;
    }

    .ranking-table td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .ranking-table td::before {
        flex: 0 0 92px !important;
        color: #94a3b8 !important;
        font-size: .68rem !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: .05em !important;
    }

    .ranking-table td:nth-child(1)::before {
        content: "Host";
    }

    .ranking-table td:nth-child(2)::before {
        content: "Tipo";
    }

    .ranking-table td:nth-child(3)::before {
        content: "Consumo";
    }

    .ranking-table td:nth-child(4)::before {
        content: "Part.";
    }

    .ranking-table td:nth-child(5)::before {
        content: "Ação";
    }

    .host-main-cell {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .host-main-cell strong {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .host-main-cell small {
        max-width: 100% !important;
    }

    .host-type-badge,
    .host-risk-badge {
        white-space: normal !important;
        text-align: left !important;
    }

    .consumption-cell {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .percent-cell {
        align-items: flex-end !important;
    }

    #ranking-hosts-body button {
        min-width: 110px !important;
        justify-content: center !important;
    }

    /* Paginação mobile sem grid */
    .ranking-pagination {
        max-width: 100% !important;
        padding: 12px !important;
    }

    .ranking-pagination-main {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .ranking-page-status {
        width: 100% !important;
        order: -1 !important;
        text-align: center !important;
    }

    .ranking-page-numbers {
        width: 100% !important;
        justify-content: center !important;
    }

    .ranking-page-btn.prev-next {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 8px) !important;
    }
}

@media (max-width: 480px) {
    .ranking-summary-card {
        flex: 1 1 100% !important;
    }

    .ranking-table td {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .ranking-table td::before {
        flex: 0 0 auto !important;
    }

    .percent-cell {
        align-items: flex-start !important;
    }

    #ranking-hosts-body button {
        width: 100% !important;
    }
}
/* =========================================================
   HOSTS BLOQUEADOS — BUSCA E GERENCIAMENTO PREMIUM
========================================================= */

.blocked-hosts-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 16px 0 16px !important;
    flex-wrap: wrap !important;
}

.blocked-hosts-search-wrap {
    position: relative !important;
    width: min(100%, 460px) !important;
}

.blocked-hosts-search-wrap > i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

#blocked-hosts-search {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 42px 0 40px !important;
    border-radius: 13px !important;
    background: #050914 !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    color: #f8fafc !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    outline: none !important;
}

#blocked-hosts-search:focus {
    border-color: rgba(0, 207, 255, .42) !important;
    box-shadow: 0 0 0 3px rgba(0, 207, 255, .075) !important;
}

#clear-blocked-search {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

#clear-blocked-search:hover {
    background: rgba(239, 68, 68, .12) !important;
    border-color: rgba(239, 68, 68, .24) !important;
    color: #fecaca !important;
}

.blocked-hosts-counter {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 13px !important;
    border-radius: 999px !important;

    background: rgba(0, 207, 255, .075) !important;
    border: 1px solid rgba(0, 207, 255, .16) !important;
    color: #67e8f9 !important;

    font-size: .76rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.blocked-list-area {
    min-height: 150px !important;
}

#blocked-hosts-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

#blocked-hosts-list .blocked-host-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;

    width: auto !important;
    min-width: fit-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;

    padding: 9px 10px 9px 14px !important;
    border-radius: 999px !important;

    background: rgba(15, 23, 42, .88) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;

    font-size: .86rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

#blocked-hosts-list .blocked-host-name {
    display: inline-block !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#blocked-hosts-list .blocked-host-remove {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: rgba(239, 68, 68, .12) !important;
    color: #fca5a5 !important;

    cursor: pointer !important;
    transition: .16s ease !important;
}

#blocked-hosts-list .blocked-host-remove:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.04) !important;
}

.blocked-empty-state {
    width: 100% !important;
    padding: 28px 18px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
}

.blocked-empty-state i {
    display: block !important;
    margin-bottom: 10px !important;
    font-size: 1.7rem !important;
    opacity: .45 !important;
}

@media (max-width: 768px) {
    .blocked-hosts-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .blocked-hosts-search-wrap {
        width: 100% !important;
    }

    .blocked-hosts-counter {
        width: 100% !important;
    }

    #blocked-hosts-list .blocked-host-badge {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: space-between !important;
        border-radius: 14px !important;
    }

    #blocked-hosts-list .blocked-host-name {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
}
/* =========================================================
   CORREÇÃO FINAL — BADGES DE HOSTS BLOQUEADOS
   Corrige texto cortado, sobreposto e quebrando letra por letra
========================================================= */

#blocked-hosts-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

/* Badge individual */
#blocked-hosts-list .blocked-host-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;

    padding: 9px 10px 9px 14px !important;
    border-radius: 999px !important;

    background: rgba(15, 23, 42, .88) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    color: #dbeafe !important;

    font-size: .86rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;

    overflow: hidden !important;
}

/* Nome do host */
#blocked-hosts-list .blocked-host-name {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;

    color: #dbeafe !important;
    font-size: .86rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Botão remover */
#blocked-hosts-list .blocked-host-remove {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-left: 2px !important;
    border-radius: 999px !important;

    background: rgba(239, 68, 68, .13) !important;
    color: #fca5a5 !important;

    cursor: pointer !important;
}

#blocked-hosts-list .blocked-host-remove:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Remove interferência de estilos antigos */
#blocked-hosts-list .blocked-host-badge i,
#blocked-hosts-list .blocked-host-remove i {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

/* Mobile */
@media (max-width: 768px) {
    #blocked-hosts-list {
        flex-direction: column !important;
        gap: 9px !important;
    }

    #blocked-hosts-list .blocked-host-badge {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        justify-content: space-between !important;
        border-radius: 14px !important;
    }

    #blocked-hosts-list .blocked-host-name {
        flex: 1 1 auto !important;
        max-width: calc(100% - 42px) !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.35 !important;
    }

    #blocked-hosts-list .blocked-host-remove {
        margin-left: auto !important;
    }
}
/* =========================================================
   FIX DEFINITIVO — HOSTS BLOQUEADOS ATUALMENTE
   Corrige conflito com CSS antigo do #blocked-hosts-list
========================================================= */

#blocked-hosts-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

/* Remove interferência dos estilos antigos */
#blocked-hosts-list > span.blocked-host-badge,
#blocked-hosts-list > div.blocked-host-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;

    padding: 9px 10px 9px 15px !important;
    border-radius: 999px !important;

    background: rgba(15, 23, 42, .88) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    color: #dbeafe !important;

    font-size: .86rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;

    overflow: visible !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Nome do host sempre completo no desktop */
#blocked-hosts-list .blocked-host-name {
    display: inline-block !important;
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    color: #dbeafe !important;

    font-size: .86rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Botão X separado e sem afetar o texto */
#blocked-hosts-list .blocked-host-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;

    padding: 0 !important;
    margin: 0 0 0 3px !important;

    border-radius: 999px !important;
    background: rgba(239, 68, 68, .15) !important;
    border: 0 !important;
    color: #fca5a5 !important;

    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

#blocked-hosts-list .blocked-host-remove:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.04) !important;
}

/* Ícone dentro do botão X */
#blocked-hosts-list .blocked-host-remove i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    color: inherit !important;

    font-size: .82rem !important;
    line-height: 1 !important;
}

/* Impede que regra antiga pinte qualquer ícone/texto */
#blocked-hosts-list i:not(.fa-search) {
    box-shadow: none !important;
}

/* Mobile: vira lista vertical, mas sem quebrar letra por letra */
@media (max-width: 768px) {
    #blocked-hosts-list {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #blocked-hosts-list > span.blocked-host-badge,
    #blocked-hosts-list > div.blocked-host-badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        flex: 0 0 auto !important;
        justify-content: space-between !important;

        border-radius: 14px !important;
        padding: 11px 10px 11px 14px !important;
    }

    #blocked-hosts-list .blocked-host-name {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 42px) !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.35 !important;
    }

    #blocked-hosts-list .blocked-host-remove {
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        margin-left: 10px !important;
    }
}