:root {
    --wu-bg-dark: #0d1117;
    --wu-card-bg: #161b22;
    --wu-border: #30363d;
    --wu-text-main: #e6edf3;
    --wu-text-muted: #8b949e;
    --wu-accent-cyan: #22d3ee;
    --wu-accent-blue: #0ea5e9;

    --bs-backdrop-bg: color-mix(in oklab, black, transparent 50%) !important;

    --bg-body: color-mix(in oklab, #0a0e14 100%, transparent);
    --bg-body-fundos: #0a0e14;
    --bg-body-secondary: #36373e;
    --bg-dark: #1e2124;
    --bg-dark-soft: #1a1b1e;
    --clean-bg-pages: #181a20;
    --bg-panels: #2b2d31;

    --bg-card-dark: #12161b;
    --bg-card: #40444b;
    --bg-card-secondary: #11151b;
    --bg-card-transparent: #20263000;
    --card-bg: #3b3f45;
    --panel-bg: #202024;
    --header-primary: #40444b;
    --nav-bars: #2B2D31;
    --bg-base-server-list: #3b3f45;

    --border-color: rgba(255, 255, 255, 0.05);
    --border-color-light: #3F4147;
    --panel-border: #6c7176;
    --bg-tertiary: #2D3238;

    --text-primary: #FFFFFF;
    --text-main: #EAECEF;   
    --text-secondary: #c5c6ca;
    --text-muted: #c5c6ca;
    --text-gray-dark: #5e6673; 

    --accent-primary: #FCD535;       
    --accent-hover: #F0B90B;
    --accent-text: #181A20;
    --accent-white: #FFFFFF;
    --accent-color: #FCD535;         

    --accent-blue: #3b82f6;
    --accent-cyan: #00E5FF;
    --accent-purple: #8B5CF6;
    --emerald-color: #10b981;
    --emerald-glow: rgba(16, 185, 129, 0.5);
    --cyan-glow: rgba(0, 210, 255, 0.8);
    --cyan-low: rgba(0, 210, 255, 0.15);

    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --status-up: #0ECB81;
    --status-down: #F6465D;
    --status-blue: #3B82F6;

    --bg-input-same-as-body: #0a0e14;
    --bg-input: transparent;             
    --input-bg: #191d22; 
    --input-bg-dark: rgb(30 31 34);
    --bg-input-line: #434C5A;
    --bg-input-hover: #70767d;
    --bg-input-focus: #70767d;
    --input-border: transparent;
    --bg-gray-checkbox: #4f545c;
    --bg-gray-checkbox-hover: #5c6169;

    --btn-primary-bg: #10B981;
    --btn-primary-hover: #059669;
    --btn-secondary-bg: #3e4248;
    --btn-secondary-hover: #5c636d;
    --btn-secondary-border: rgba(255, 255, 255, 0.08);
    --btn-secondary-text: #94A3B8;

    --zebra-hover: #303339;
    --zebra-dark: #232629e0;
    --zebra-light: #292c31;

    --sd-bg: #13151a;
    --sd-panel-bg: #1a1d21;
    --sd-border: #333b47;
    --sd-text-main: #e6edf3;
    --sd-text-muted: #8b949e;
    --sd-accent: #fcd535;
    --sd-accent-rgb: 252, 213, 53;
    --sd-success: #238636;
    --sd-danger: #da3633;

    --tibialist-cyan: #00E5FF;
    --tibialist-cyan-glow: rgba(0, 229, 255, 0.6);

    --max-width: 100%;
    --max-width-content: 100%;
    --navbar-height: 64px;
    --input-height: 42px;
    --side-padding: 20px;
    --base-padding-left: 38px; 
    --favorites-sidebar-width: 56px; 
    
    --radius-std: 8px;
    --radius-big: 20px;
    --radius-auth-cards: 24px;
    --square-radius: 20px;

    --z-mask: 10;
    --z-menu: 1000;
    --z-header: 1001;
    --z-modal: 1200;
    --z-notification: 1300;
    --z-tooltip: 1400;
    --z-max: 9999;

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    --scroll-color: var(--text-muted);
    --bg-darker: #13151a;
    --color-BtnBg: #323238;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-body) !important;
}

html {
    background-color: var(--bg-body-fundos) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a1d21 inset !important;
    -webkit-text-fill-color: #f3f4f6 !important; /* gray-100 */
    transition: background-color 5000s ease-in-out 0s;
}

.bg-green-texture-modern {
    background-image:  linear-gradient(to right, color-mix(in oklab, var(--color-emerald-500), transparent 95%) 1px, transparent 1px),           linear-gradient(to bottom, color-mix(in oklab, var(--color-emerald-500), transparent 95%) 1px, transparent 1px);
    background-size: 40px 40px;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 25%); 
    border-radius: 4px; /* Arredondada */
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 40%); 
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.tibialist-btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--accent-white) !important;

    font-weight: 600;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.tibialist-btn-secondary:hover {
    background-color: var(--btn-secondary-hover) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.featured-label-badge {
    position: absolute;
    top: -12px;
    right: 0;
    background: var(--accent-cyan);
    color: var(--text-2xl);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* font-family: 'Inter', sans-serif; */
}
.server-name-cell .d-flex {
    overflow: visible !important;
}

.user-avatar-circle {
    width: 30px;
    height: 30px;
    background: #3f4143;
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: unset !important;
}

.user-avatar-circle.guest {
    width: 30px;
    height: 30px;
    background: #3f4143;
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: unset !important;
}

.user-profile-chip:hover {
    border-color: #373535 !important;
    background: rgb(154 153 153 / 9%) !important;
}
.user-profile-chip.guest:hover {
    border-color: #8d8d8d !important;
    background: rgb(154 153 153 / 9%) !important;
}
.welcome-label {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.username-label {
    font-size: 0.8rem;
    font-weight: 700;
    max-width: 85px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: var(--bg-gray-checkbox-hover);
}

.user-profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: #58595b;
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 5%) !important;
    border: 1px solid var(--border-color);
    padding: 4px 6px 4px 4px;
    height: 42px;
}
.user-profile-chip.clickable-chip {
    cursor: default;
    user-select: none;
}
.user-profile-chip.clickable-chip:hover {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 9%) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.user-profile-chip.clickable-chip:active {
    background: rgba(0, 229, 255, 0.05);
}

.user-info-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    justify-content: center;
    padding-right: 5px;

    min-width: 0; 
}

@media (max-width: 992px) {
    .user-info-text {
        display: none !important;
    }
    .user-profile-chip {
        padding: 4px;
        gap: 0;
        width: auto;
    }
    .user-profile-chip .ms-3 {
        display: none !important;
    }
}
.welcome-label {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.server-name-link {
    text-decoration: none;
    margin-right: 8px;    
}
.server-flag-svg {
    display: block;
    border: 1px solid rgb(0 0 0 / 17%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.server-flag-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-left: 0px;
    flex-shrink: 0;
    gap: 3px;
    width: 26px;    
    position: relative; 
}

.clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px !important;
    border-radius: 0px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    margin: 15px;
    background: #2B3139 !important;
    color: #EAECEF !important;
}
.clear-button:hover {
    background: #373d46 !important;
    color: #EAECEF !important;
    border-color: #e5e5e5;
}

.server-flag-container:hover .star-svg {
    fill: #ffffff !important;
    filter: drop-shadow(0 0 4px #fff);
    transform: scale(1.1);
}

.server-row.highlighted:hover .server-flag-container::before {
    content: '';
    position: absolute;    
    top: 0; 
    left: 50%;
    transform: translateX(-50%);    
    width: 24px;
    height: 16px;    
    background-color: rgba(0, 229, 255, 0.25);
    border-radius: 6px;
    box-shadow: 0 0 10px var(--tibialist-cyan-glow);    
    pointer-events: none;
    z-index: 10;
    transition: all 0.3s ease;
}

.server-row.highlighted:hover .server-flag-svg {
    border-color: var(--tibialist-cyan-glow);
    transition: border-color 0.3s ease;
}
.tippy-box[data-theme~='server-tooltip-theme'] {
    background-color: rgba(30, 35, 41, 0.85) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaecef;
    font-size: 11px; /* Letras menores */
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 200 !important;
}

body.filters-focus-mode .tippy-box[data-theme~='server-tooltip-theme'] {
    z-index: 300 !important;
    position: fixed !important;
}

body.filters-focus-mode #tippy-root {
    z-index: 300 !important;
    position: fixed !important;
}

body.filters-focus-mode [data-tippy-root] {
    z-index: 300 !important;
    position: fixed !important;
}

body.filters-focus-mode .tippy-box {
    z-index: 300 !important;
    position: fixed !important;
} 
.tippy-box[data-theme~='server-tooltip-theme'] .tippy-content {
    padding: 8px 10px;
}
.tippy-box[data-theme~='server-tooltip-theme'] {
    background-color: rgba(30, 35, 41, 0.85) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaecef;
    font-size: 11px; /* Letras menores */
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.tippy-box[data-theme~='server-tooltip-theme'] .tippy-content {
    padding: 8px 10px;
}

.tippy-box[data-theme~='server-tooltip-theme'] {
    --arrow-color: #15171b; 
    --arrow-size: 8px;

    background-color: #15171b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e6e8ea !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    padding: 10;
    overflow: visible;
}

.tippy-box[data-theme~='server-tooltip-theme'] .tippy-arrow {
    color: var(--arrow-color);
    z-index: 1; 
}
.tippy-box[data-theme~='server-tooltip-theme'] .tippy-arrow::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent; 
}

.tippy-box[data-theme~='server-tooltip-theme'][data-placement^='right'] > .tippy-arrow::before {
    border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;
    border-right-color: var(--arrow-color);
    left: -7px;
}
.tippy-box[data-theme~='server-tooltip-theme'][data-placement^='left'] > .tippy-arrow::before {
    border-width: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);
    border-left-color: var(--arrow-color);
    right: -7px;
}
.tippy-box[data-theme~='server-tooltip-theme'][data-placement^='top'] > .tippy-arrow::before {
    border-width: var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);
    border-top-color: var(--arrow-color);
    bottom: -7px;
}
.tippy-box[data-theme~='server-tooltip-theme'][data-placement^='bottom'] > .tippy-arrow::before {
    border-width: 0 var(--arrow-size) var(--arrow-size) var(--arrow-size);
    border-bottom-color: var(--arrow-color);
    top: -7px;
}


.server-tooltip-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.st-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.st-header img { width: 16px; height: 12px; border-radius: 2px; }
.st-name { font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }

.st-body {
    display: flex;
    gap: 15px;
}

.main-content { 
    background: var(--bg-body);
    flex: 1;
    width: 100%;
    position: relative; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--navbar-height, 64px);
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.clean-layout-body .main-content {
    background: var(--bg-body);
    padding-top: 0 !important;
}
 
#galaxy-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: #000;
    z-index: 2147483646 !important; 
    display: none; 
    opacity: 0; 
    transition: opacity 0.5s ease;    
    overflow: hidden !important; 
}

#galaxy-modal.active {
    display: block !important;
    opacity: 1;
}
.custom-modal-scroll {
    max-height: none !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
}
.modal-dialog {    
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex: unset !important; 
}

.modal-body {
    max-height: none !important;
    height: auto !important;      
    overflow: visible !important; 
    overflow-y: auto !important; 
    flex: 1 1 auto !important;   
    min-height: 0 !important;    
}

.modal-content, .custom-modal-scroll {
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-std);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    max-height: none !important;
    height: auto !important;      
    overflow: visible !important;
    flex: unset !important;       
}
.modal-dialog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100% - 3.5rem) !important;
    height: 100% !important;
    margin: 0 auto !important;
    pointer-events: none;
}
.menu-grid-section {
    margin-bottom: 20px;
}
.menu-section-title {
    color: #848e9c;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-left: 4px;
}
.modal {
    overflow: hidden !important; 
    padding-right: 0 !important;
}
.modal-backdrop {
    z-index: 1040 !important;
}
.modal-backdrop.show {
    --bs-backdrop-bg: #000000 !important;
    opacity: 0.9 !important;
}

#modalNewTicket .modal-dialog {
    max-width: 700px !important;
    width: 90%;
}

#modalNewTicket .modal-content {
    min-height: 555px !important;
    height: 70vh !important;
}
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    padding: 10px;
}

.modal-header,
.modal-footer {
    padding-bottom: 24px !important;
    padding-top: 24px !important;
    flex-shrink: 0;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: var(--accent-color, #FCD535);
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #eab308;
}

.ticket-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.status-open { color: #0ecb81; background: rgba(14, 203, 129, 0.15); border: 1px solid rgba(14, 203, 129, 0.2); }
.status-answered { color: #f0b90b; background: rgba(240, 185, 11, 0.15); border: 1px solid rgba(240, 185, 11, 0.2); }
.status-closed { color: #707a8a; background: rgba(112, 122, 138, 0.15); border: 1px solid rgba(112, 122, 138, 0.2); }

.chat-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    margin-bottom: 12px;
}
.bubble-me {
    background: #2b3139;
    color: #fff;
    border: 1px solid var(--border-color);
    margin-left: auto;
    border-bottom-right-radius: 0;
}
.bubble-staff {
    background: rgba(240, 185, 11, 0.1);
    color: #f0b90b;
    border: 1px solid rgba(240, 185, 11, 0.2);
    margin-right: auto;
    border-bottom-left-radius: 0;
}
.card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.form-label-binance {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

.form-control-binance, 
.form-select-binance { 
    background: var(--bg-card-secondary);
    background-color: var(--bg-card-secondary) !important;
    color: var(--text-muted) !important;
    width: 100%;
    height: var(--input-height) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.85rem;
    line-height: 1.3;
    border: solid 1px var(--input-border) !important;
    border-radius: var(--radius-std) !important;
}

input[type="file"].form-control-binance {
    padding-top: 9px;
}

select.form-select-binance {
    background-position: right 0.75rem center;
}

.form-control-binance:focus, 
.form-select-binance:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: none;
}

/* INPUT GROUPS */
.input-group-binance {
    display: flex;
    width: 100%;
    height: var(--input-height);
}

.input-group-binance .form-control-binance {
    border-radius: 4px 0 0 4px;
    flex: 1;
    height: 100% !important;
}

.btn-icon {
    background: var(--bg-input);
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 0 4px 4px 0;
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    margin-left: 1px;
}
.btn-icon:hover { 
    color: var(--text-main);
    background: #343a40;
}
.btn-icon:hover i { 
    color: var(--tibialist-cyan-glow) !important;
}
.announce-list {
    border-color: rgba(255, 255, 255, 0.05) !important; border: solid 1px #5c5c5c91; padding: 10px;border-radius: var(--radius-big);background: var(--bg-card);
    padding: 18px;
}

@media (max-width: 992px) {
    .modern-menu-panel {
        min-width: 600px;
    }
    
    .modern-menu-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modern-menu-column:nth-child(2) {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .modern-menu-panel {
        min-width: calc(100vw - 32px);
        left: 16px;
        right: 16px;
    }
    
    .modern-menu-content {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    
    .modern-menu-column {
        padding: 16px 0;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
    }
    
    .modern-menu-column:last-child {
        border-bottom: none;
    }
    
    .modern-menu-items-two-columns {
        grid-template-columns: 1fr;
    }
}

toggle.show {
    outline: none !important;
    box-shadow: none !important;
    color: var(--accent-color) !important;
}

.progress-steps-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.progress-step {
    position: relative;
    z-index: 2;
    text-align: center;
    cursor: default;
    width: 60px;
}
.progress-step[role="button"] {
    cursor: pointer;
}

.step-number {
    width: 35px;
    height: 35px;
    background-color: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.step-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.progress-step.active .step-number {
    background-color: #2d2d2d4a;
    border-color: #ffffff;
    color: white;
}
.progress-step.active .step-label {
    color: var(--accent-white);
    font-weight: 700;
}

.progress-step.completed .step-number {
    background-color: var(--bg-card-secondary);
    border-color: #10b981; /* Verde sucesso */
    color: #10b981;
}

.progress-line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--border-color);
    margin: 0 -18px 20px -18px;
    z-index: 1;
    position: relative;
    top: -2px;
}
.progress-line.completed {
    background-color: #10b981;
}
 
.text-decoration-underline {
    color: rgb(255, 99, 71);
    font-size: 0.75rem;
    cursor: pointer;
    display: block;
    margin-top: 5px;
}
.text-decoration-underline:hover {
    text-shadow: 1px 0px 9px #ff0000;
}

.ping-label { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }

.ping-node-box-embedded:not(.checking):not(.success):not(.error) .ping-value {
    color: #f0f0f0;
}

.ping-node-box-embedded.checking .ping-value {
    color: #f0b90b;
}

.ping-node-box-embedded.success .ping-value {
    color: #0ecb81;
}

.ping-node-box-embedded.error .ping-value {
    color: #f6465d;
}

.flow-path-idle { stroke: var(--border-color); }
.flow-path-active { 
    stroke: #eab308; 
    stroke-dasharray: 10; 
    animation: flowLine 1s linear infinite; 
}
.flow-path-success { stroke: #10b981; stroke-dasharray: 0; }
.flow-path-error { stroke: #ef4444; stroke-dasharray: 0; }

@keyframes flowLine {
    to { stroke-dashoffset: -20; }
}

.register-input::placeholder,
.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

.register-input:focus::placeholder,
.form-control:focus::placeholder {
    color: #cbd5e1 !important;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-white);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.step-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 20px 0;
    width: 100%;
}

.register-step {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    width: 100%;
}

@keyframes slideOutLeft {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-30px); opacity: 0; }
}
.slide-out-left {
    animation-name: slideOutLeft;
}

@keyframes slideInRight {
    0% { transform: translateX(30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.slide-in-right {
    animation-name: slideInRight;
}

@keyframes slideOutRight {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(30px); opacity: 0; }
}
.slide-out-right {
    animation-name: slideOutRight;
}

@keyframes slideInLeft {
    0% { transform: translateX(-30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.slide-in-left {
    animation-name: slideInLeft;
}

.server-test-round-btn.success-verified {
    border-color: #10b981 !important; /* Emerald 500 */
    color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
    transform: scale(1.05);
}

@keyframes shakeBtn {
    0% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); }
    20% { transform: translate(-50%, -50%) translateX(-5px) rotate(-5deg); }
    40% { transform: translate(-50%, -50%) translateX(5px) rotate(5deg); }
    60% { transform: translate(-50%, -50%) translateX(-5px) rotate(-5deg); }
    80% { transform: translate(-50%, -50%) translateX(5px) rotate(5deg); }
    100% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); }
}

.shake-btn {
    animation: shakeBtn 0.5s ease-in-out;
    border-color: var(--accent-hover) !important; /* Amarelo alerta */
    color: var(--accent-hover) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.hand-with-sign-container {
    position: absolute;
    top: 140px;
    right: -280px;
    bottom: auto; 
    z-index: 100;
    
    transition: right 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    
    pointer-events: none;
    width: 180px; 
    height: auto;
    display: flex;
    justify-content: center;
    opacity: 0;
}

@media (max-width: 1400px) {
    .hand-with-sign-container { right: -280px; }
}
@media (max-width: 992px) {
    .hand-with-sign-container { display: none !important; }
}

.hand-with-sign-container.show {
    right: -130px; 
    opacity: 1;
}

.hand-with-sign {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.3));
    transform: rotate(-5deg); 
}

.sign-board {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    background: rgba(0, 20, 40, 0.9);
    border: 1px solid #00f3ff;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.15), inset 0 0 20px rgba(0, 243, 255, 0.05);
    border-radius: 6px;
    padding: 8px;
    pointer-events: auto;
    backdrop-filter: blur(2px);
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 243, 255, 0.05) 25%, rgba(0, 243, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 243, 255, 0.05) 75%, rgba(0, 243, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 30px 30px;
}

.sign-board-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: #00f3ff;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    padding-bottom: 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sign-board-content { display: flex; flex-direction: column; gap: 4px; }
.sign-board-checkbox { display: flex; align-items: center; gap: 6px; }
.sign-board-checkbox label { font-size: 0.75rem; color: #ccf9ff; cursor: pointer; }
.sign-board-checkbox input { background-color: transparent !important; border-color: #00f3ff !important; width: 0.9em; height: 0.9em; }
.sign-board-checkbox input:checked { background-color: #00f3ff !important; }
.hand-svg { width: 100%; height: auto; overflow: visible; opacity: 0.9; min-height: 200px; }
.holo-hand-path { fill: rgba(0, 243, 255, 0.05); stroke: #00f3ff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.holo-knuckle { fill: #00f3ff; opacity: 0.5; filter: blur(1px); }


.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
}
.modal-title {
    font-weight: 600;
    font-size: 1.25rem;
    color: #EAECEF; /* Branco suave */
    width: 100%;
    text-align: center;
}
.modal-status-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.modal-status-icon.success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #0ECB81; /* Verde Binance */
}
.modal-status-icon.warning {
    background-color: rgb(0 210 255 / 13%);
    color: var(--cyan-glow);
}
.modal-status-icon svg, .modal-status-icon i {
    font-size: 32px;
    stroke-width: 3px;
}

.modal-details-box {
    background-color: var(--bg-body);
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.lang-icon:hover {
    color: var(--accent-white) !important;
}
.modal-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.9rem;
}
.modal-detail-row:last-child { margin-bottom: 0; }

.modal-detail-label {
    color: #848E9C;
    text-align: left;
}
.modal-detail-value {
    color: #EAECEF; /* Branco */
    font-weight: 500;
    text-align: right;
}

.modal-hero-text {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #EAECEF;
    margin-bottom: 1px;
}
.modal-sub-text {
    border-bottom: solid 1px var(--bg-input-line);
    font-size: 0.8rem !important;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-footer .btn {
    flex: 1;
    padding: 12px;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modal-footer .btn-primary {
    background-color: var(--accent-primary) !important;
    color: #000 !important;
    border-color: var(--accent-primary) !important;
}
.modal-footer .btn-primary:hover {
    background-color: color-mix(in oklab, var(--accent-primary) 90%, white) !important;
    border-color: color-mix(in oklab, var(--accent-primary) 90%, white) !important;
}

.modal-footer .btn-secondary {
    background-color: var(--bg-card-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
.modal-footer .btn-secondary:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: color-mix(in oklab, var(--border-color) 100%, white 30%) !important;
    color: var(--text-primary) !important;
}


div:where(.swal2-icon).swal2-question {
    border-color: #00E5FF !important;
    color: #00E5FF !important;
    background: rgba(0, 229, 255, 0.15) !important;
}
div:where(.swal2-container) .swal2-title { 
    color: #02bd83 !important; 
    font-family: 'Rajdhani', sans-serif !important;
    letter-spacing: 1px !important;
}
div:where(.swal2-container) .swal2-html-container { 
    color: #b7bdc6 !important; 
}
div:where(.swal2-container) .swal2-actions {
    gap: 12px !important;
}
div:where(.swal2-container) button:where(.swal2-styled) {
    font-family: 'Rajdhani', sans-serif !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, filter 0.2s ease !important;
    cursor: pointer !important;
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
    border: .25em solid #02bd8396 !important;
}
.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
    background-color: #02bd8314 !important;
    color: #02bd8396 !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #092e37 !important;
    color: #FFFFFF !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
    background-color: color-mix(in oklab, #092e37, white 15%) !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    background-color: #1A1D23 !important;
    color: #9ca3af !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:hover {
    background-color: color-mix(in oklab, #1A1D23, white 10%) !important;
    color: #ffffff !important;
}
body.swal2-shown {
    padding-right: 0 !important;
    overflow-y: auto !important;
}
body.swal2-toast-shown .swal2-container {

}
div.swal2-container {
    z-index: 2147483650 !important;
    overflow-y: auto !important;
    margin-right: 15px;
}
.swal2-timer-progress-bar {
    background: #10b981 !important; /* Emerald 500 */
}

body.galaxy-active,
html.galaxy-active {
    overflow: hidden !important;
}

#full-galaxy-canvas { 
    display: block; width: 100%; height: 100%; 
    background: #000;
}
.pagination-wrapper {
    background: #14181d;
    padding: 4px;
}
.pagination-controls-left {
    padding-left: 20px;
}
.pagination-controls-right {
    padding-right: 20px;
}
.galaxy-hud-top {
    position: absolute; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    display: flex; 
    align-items: center; 
    gap: 10px;
    background: #0f1118; 
    border: 1px solid #3b82f6; 
    padding: 6px 15px; 
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    z-index: 2147483650;
    pointer-events: auto;
    height: 46px;
}
.hud-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 200px;
}
#hud-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    width: 180px;
    padding: 0 10px 0 35px !important; /* Padding vertical zero para centralizar no flex */
    height: 100%;
    transition: width 0.3s;
    line-height: normal;
}

#hud-search-input::placeholder { 
    color: rgba(59, 130, 246, 0.7); 
    letter-spacing: 0.5px; 
}
#hud-search-input:focus { width: 220px; } /* Expande ao digitar */
/* Lupa da Busca */
#hud-search-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: #3b82f6;
    cursor: pointer;
    padding: 0 10px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    z-index: 2;
    height: 100%;
}

/* Botões do HUD */
.hud-btn {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; width: 32px; height: 32px; border-radius: 50%; /* Redondos */
    cursor: pointer; display: flex; align-items: center; justify-content: center; /* transition: all 0.2s; */
}
.hud-btn:hover { background: #3b82f6; border-color: #3b82f6; transform: scale(1.1); }

.hud-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.15); margin: 0 5px; }
.hud-zoom-indicator { color: #8899aa; font-family: monospace; font-size: 12px; min-width: 40px; text-align: center; }

/* Botão Voltar (Posição Original Restaurada) */
.galaxy-back-btn {
    position: absolute !important; 
    /* --- AJUSTE A POSIÇÃO AQUI --- */
    top: 25px !important; 
    left: 25px !important;
    /* ----------------------------- */
    
    width: 42px !important; /* Largura fixa */
    height: 42px !important; /* Altura fixa */
    border-radius: 0 !important; /* Cantos quadrados */
    padding: 0 !important; /* Sem padding interno */
    
    background: rgba(15, 17, 24, 0.8) !important; /* Fundo escuro semi-transparente */
    border: 1px solid #3b82f6 !important; /* Borda Azul */
    color: #3b82f6 !important; /* Ícone Azul */
    
    display: none !important; /* Controlado pelo JS (flex quando ativo) */
    align-items: center !important;
    justify-content: center !important;
    
    cursor: default !important; /* Cursor padrão, não pointer */
    z-index: 2147483650 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Previne seleção de texto */
    user-select: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Classe para quando o botão deve estar visível */
.galaxy-back-btn.visible,
.galaxy-back-btn[style*="display: flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.galaxy-back-btn i {
    font-size: 18px; /* Tamanho do ícone */
    transform: translateX(-1px); /* Ajuste fino ótico */
}

/* Hover Effect */
.galaxy-back-btn:hover {
    background: #3b82f6;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.5);
    border-color: #60a5fa;
}

/* Active/Click Effect */
.galaxy-back-btn:active {
    transform: scale(0.95);
}


/* Botões */
.galaxy-close-btn {
    position: absolute; top: 25px; right: 25px;
    background: transparent; border: none; 
    color: rgba(255, 255, 255, 0.5);
    width: 40px; height: 40px; border-radius: 50%; 
    cursor: pointer; display: flex; align-items: center; justify-content: center; 
    /* transition: all 0.2s; */ z-index: 2147483650; font-size: 24px;
}
.galaxy-close-btn:hover { color: #fff; transform: scale(1.1); }


.server-actions-container {
    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
    z-index: 2147483650; display: none; gap: 15px;
}
.action-btn {
    padding: 12px 30px; border-radius: var(--radius-std); font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: transform 0.2s;
}
.action-btn.primary { background: #3b82f6; color: #000; border: none; box-shadow: 0 0 25px rgba(59, 130, 246, 0.4); }
.action-btn.secondary { background: rgba(0,0,0,0.8); color: #fff; border: 1px solid rgba(255,255,255,0.2); }



#mini-galaxy-container canvas { width: 100%; height: 100%; display: block; }
#mini-galaxy-container canvas { transition: transform 1.5s ease-out; transform-origin: center center; }
#mini-galaxy-container:hover canvas { transform: scale(1.15); }


#galaxy-search {
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 15px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    width: 200px;
    outline: none;
    font-weight: 600;
}

#galaxy-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

#galaxy-search-btn {
    background: rgba(59, 130, 246, 0.1);
    border: none;
    border-left: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    width: 40px;
    height: 38px;
    cursor: pointer;
    /* transition: all 0.2s; */
    display: flex; align-items: center; justify-content: center;
}

#galaxy-search-btn:hover {
    background: #3b82f6;
    color: #fff;
}

/* ===== TOOLTIP DA GALÁXIA - Tippy.js Theme ===== */
.tippy-box[data-theme~='galaxy-tooltip-theme'] {
    background: var(--bg-darker) !important;
    border: 1px solid var(--color-BtnBg) !important;
    color: var(--accent-white) !important;
    border-radius: var(--radius-std);
    padding: 8px 12px;
    font-size: 0.75rem;
}

.tippy-box[data-theme~='galaxy-tooltip-theme'] .tippy-content {
    padding: 0;
}
.tippy-box[data-theme~='galaxy-tooltip-theme'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-BtnBg) !important;
}
.tippy-box[data-theme~='galaxy-tooltip-theme'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-BtnBg) !important;
}
.tippy-box[data-theme~='galaxy-tooltip-theme'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-BtnBg) !important;
}
.tippy-box[data-theme~='galaxy-tooltip-theme'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-BtnBg) !important;
}


.st-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-item {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}

.st-item strong { color: #848e9c; font-weight: 500; min-width: 35px; }
.st-item span { color: #d1d4dc; }

.st-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 10px;
}

.st-footer .badge {
    padding: 2px 4px;
    font-size: 9px;
    opacity: 0.8;
}

.st-uptime { color: #848e9c; }

.server-flag-container:hover .server-rating-stars {
    opacity: 1;
}



#mascot-fx-layer {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    display: block !important;
    background: transparent !important;
}

.teleport-particle {
    position: absolute !important;
    background-color: #00E5FF !important;
    box-shadow: 0 0 15px #00E5FF, 0 0 30px #FFFFFF !important;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483647 !important;
    will-change: transform, opacity;
    animation: floatUpFade 1.0s ease-out forwards !important;
}

@keyframes floatUpFade {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-150px) scale(0); opacity: 0; }
}

.mascot-beaming {
    filter: brightness(3) drop-shadow(0 0 25px #00E5FF) !important;
    transition: filter 0.2s ease !important;
    z-index: 2147483647 !important;
}

.loading-mascot.hologram {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    position: relative;
    /* O brilho principal do holograma */
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6));
    overflow: visible;
}

/* Animação de Flutuação Global */
.mascot-float-group {
    animation: holo-float 3s ease-in-out infinite;
}

@keyframes holo-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Efeito de Glitch/Tremulação (Opcional - dá realismo digital) */
.loading-mascot.hologram svg {
    animation: holo-flicker 5s infinite;
}

@keyframes holo-flicker {
    0%, 96%, 100% { opacity: 1; transform: translateX(0); }
    97% { opacity: 0.8; transform: translateX(1px); }
    98% { opacity: 1; transform: translateX(-1px); }
    99% { opacity: 0.5; } /* Pequena falha no sinal */
}

.eye-dollar {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    fill: #16a34a !important; 
    stroke: #000000 !important;
    stroke-width: 0.5px !important;
    paint-order: stroke fill; 
}

#footer-spy-mascot:hover .eye-pupil {
    opacity: 0 !important; 
}

#footer-spy-mascot:hover .eye-dollar {
    opacity: 1 !important; 
    transform: scale(1.2) !important; 
}

/* Variantes do Balão de Fala */
.mascot-speaking #spy-bubble-text {
    border: 1px solid var(--border-color, #333);
    transition: all 0.3s ease;
}

#footer-spy-mascot {
    z-index: 100000 !important; 
    position: fixed !important;
}

/* Regra para permitir que o JS controle a visibilidade além do hover */
#footer-spy-mascot.mascot-speaking .spy-bubble {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
}

/* Variantes de cores que já definimos */
#footer-spy-mascot.speak-success #spy-bubble-text {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

#footer-spy-mascot.speak-error #spy-bubble-text {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* Ajuste do Texto */
.loading-text {
    color: #00E5FF;
    font-family: 'Rajdhani', monospace; /* Fonte sugerida */
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.8);
    margin-bottom: 15px;
}

/* Barra de Progresso */
.loading-progress {
    width: 200px;
    height: 3px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.loading-progress::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, #00E5FF, transparent);
    animation: loading-scan 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 0 0 15px #00E5FF;
}

@keyframes loading-scan {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

button, .btn {
    border-radius: var(--radius-std);
}

/* ===== SECTIONS ===== */
.site-section {
    width: 100%;
    position: relative;
}

.padding-left-30 {
    padding-left: 30px !important;
}
.padding-right-30 {
    padding-right: 30px !important;
}

.cssLogo {
    display: inline-block;
    width: 50px;
    height: 50px;
    shape-rendering: geometricPrecision;
}
.cssLogo svg {
    width: 100%;
    height: 100%;
}
.anim-line {
    fill: none;
    stroke: #00E5FF; /* Sua cor Cyan atual */
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Aqui criamos o efeito de linha infinita */
    stroke-dasharray: 200; 
    stroke-dashoffset: 0;
    transition: stroke 0.4s ease, stroke-dashoffset 0.8s ease, opacity 0.4s ease;
}
circle.anim-line {
    fill: #00E5FF;
    transition: fill 0.4s ease, stroke 0.4s ease;
}
.orbit {
    opacity: 0.6;
}

/* =========================================
   1. MAIN NAVBAR (Camada Base: 50)
   ========================================= */
#main-navbar {
    background-color: color-mix(in oklab, color-mix(in oklab, var(--bg-body-fundos), white 3%), transparent 15%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    box-shadow: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 50;    
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    will-change: transform;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}
#main-navbar.navbar-hidden {
    transform: translateY(-100%);
}

/* painel dos servers */
.nav-item.active .accordion-toggle i.fa-chevron-down {
    transform: rotate(180deg) !important;
    color: #10b981 !important; /* Cor Emerald para destacar que está aberto */
}
/* painel dos servers */
.nav-item.active .submenu-container {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
}

/* =========================================
   2. FAVORITES SIDEBAR (Camada Topo: 60)
   ========================================= */
.favorites-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 70px !important;
    height: 100vh !important;
    z-index: 60 !important; /* CRÍTICO: Acima do Navbar */
    
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    display: flex;
    flex-direction: column;
    isolation: isolate;
    
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    backdrop-filter: blur(6px);
}

/* Fundo Gradiente da Sidebar */
.favorites-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    height: calc(100% + 30px);
    background: linear-gradient(
        to bottom, 
        color-mix(in oklab, var(--bg-body-fundos), white 3%) 0%, 
        color-mix(in oklab, var(--bg-body-fundos), transparent) 100%
    ) !important;    
    border-bottom: 0;
    
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black 100%);
    pointer-events: none;
}

/* =========================================
   3. SIDEBAR LOGO (Animações)
   ========================================= */
.favorites-sidebar-logo {
    margin-top: 16px;
    margin-bottom: 15px;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-std);
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    padding: 20px 8px;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Esconde logo lateral se a sidebar não existir na página */
body:not(.has-favorites-sidebar) .favorites-sidebar-logo {
    display: none;
}

/* Hover Effects */
.favorites-sidebar-logo:hover {
    border-color: var(--bs-cyan);
    transform: scale(1.02);
}
.favorites-sidebar-logo:hover .anim-line {
    stroke: #FFFFFF;
    stroke-dashoffset: 400;
    opacity: 1;
}
.favorites-sidebar-logo:hover circle.anim-line {
    fill: #FFFFFF;
    stroke: #FFFFFF;
}
.favorites-sidebar-logo:hover .cssLogo {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    transition: filter 0.4s ease;
}

/* Imagens e Ícones internos */
.favorites-sidebar-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.favorites-sidebar-logo i {
    font-size: 1.5rem;
    color: rgba(0, 210, 255, 0.9);
    filter: drop-shadow(0 0 4px rgba(255, 170, 0, 0.5));
}

/* =========================================
   4. LOGICA DE INTERAÇÃO (Sidebar vs Navbar)
   ========================================= */

/* ============================================
   NAVBAR FAVORITES TOGGLE
   ============================================ */

#navbar-favorites-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #13171d;
    border: 1px solid transparent;
    border-radius: 0;
    color: #9CA3AF;
    cursor: default;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#navbar-favorites-toggle:hover {
    background: color-mix(in oklab, #13171d 85%, white);
    color: #D1D5DB;
}

#navbar-favorites-toggle.active, body.has-favorites-sidebar #navbar-favorites-toggle {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 9%) !important;
    border-color: #00E5FF;
    color: #00E5FF;
}

#navbar-favorites-toggle svg {
    transition: stroke 0.15s ease, fill 0.15s ease;
}

#navbar-favorites-toggle.active svg,
body.has-favorites-sidebar #navbar-favorites-toggle svg {
    stroke: #00E5FF;
    fill: none;
}
.btn-navbar-square.active, #navbar-favorites-toggle.active {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 5%) !important;
    /* background: rgb(43 49 57) !important; */
    /* border-color: #484a4b !important; */
    color: var(--tibialist-cyan) !important;
    box-shadow: none !important;
}
.favorites-badge {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 8px;
    font-weight: 700;
    border-radius: 0;
    background: #00E5FF;
    color: #000;
    border: 1px solid #1A1D24;
    align-items: center;
    justify-content: center;
}

.favorites-badge.visible {
    display: inline-flex !important;
}

/* Fallback: Badge visível quando tem conteúdo > 0 */
#navbar-favorites-toggle .favorites-badge:not(:empty) {
    display: inline-flex !important;
}

/* --- Movimento da Logo do Navbar --- */
.navbar-brand {    
    transition: margin-left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: margin-left;
    position: relative;
    z-index: 20;
}

/* Desktop: Quando a sidebar está ABERTA, empurra a logo */
@media (min-width: 992px) {
    body.has-favorites-sidebar:not(.favorites-sidebar-collapsed) .navbar-brand {
        margin-left: 80px; 
    }
    
    /* Quando fechada, margem volta ao normal */
    body.favorites-sidebar-collapsed .navbar-brand {
        margin-left: 0;
    }
}

/* --- Ajustes do Corpo da Página (Layout Shift) --- */
body.has-favorites-sidebar,
body.favorites-sidebar-collapsed {
    will-change: padding-left;
}

/* Disable transitions during turbo navigation to prevent layout shift */
body.turbo-loading.has-favorites-sidebar,
body.turbo-loading.favorites-sidebar-collapsed {
    transition: none !important;
}

@media (min-width: 992px) {
    body.has-favorites-sidebar:not(.favorites-sidebar-collapsed) {
        padding-left: 70px !important; 
    }
    body.favorites-sidebar-collapsed {
        padding-left: 0 !important;
    }
}

/* --- Breadcrumbs --- */
.breadcrumb-nav-wrapper {
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

@media (min-width: 992px) {
    body.has-favorites-sidebar:not(.favorites-sidebar-collapsed) .breadcrumb-nav-wrapper {
        width: calc(100% - 67px); /* Ajuste fino para não quebrar layout */
    }
}

/* =========================================
   5. MOBILE / RESPONSIVO
   ========================================= */
@media (max-width: 992px) {
    /* No mobile, removemos deslocamentos forçados */
    body.has-favorites-sidebar:not(.favorites-sidebar-collapsed) #main-navbar {
        padding-left: 0 !important;
    }
    
    /* Ajuste de container */
    #main-navbar .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Logo sempre visível */
    body.has-favorites-sidebar:not(.favorites-sidebar-collapsed) .navbar-brand .logo-icon {
        display: flex !important;
    }
    body.has-favorites-sidebar:not(.favorites-sidebar-collapsed) .navbar-brand {
        gap: 12px !important;
        margin-left: 0 !important; /* Reseta margem no mobile */
    }

    /* Sidebar no mobile geralmente é overlay ou oculta, reseta padding do body */
    body.has-favorites-sidebar {
        padding-left: 0 !important;
    }
}

.navbar-brand:hover {
    color: rgb(255 255 255);
}

/* Seção de Useful Links dentro do sidebar */
.useful-links-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
    padding: 0 8px;
    flex-shrink: 0; /* Não encolher */
}

/* Linha separadora horizontal (não fecha nas pontas) - Galaxy colors */
.favorites-divider {
    width: 50%; /* Não ocupa toda a largura */
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 170, 0, 0.3) 20%,
        rgba(0, 210, 255, 0.4) 50%,
        rgba(255, 170, 0, 0.3) 80%,
        transparent 100%
    );
    margin: 8px auto;
    flex-shrink: 0; /* Não encolher */
    box-shadow: 0 0 4px rgba(0, 210, 255, 0.2);
}

.favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
    transition: opacity 0.3s ease;
    opacity: 1;
    padding: 0 12px;
    flex: 1; /* Ocupar espaço restante */
    min-height: 0; /* Permitir que encolha se necessário */
}
 
.favorite-icon {
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    z-index: 1;
    background: #2b3139 !important;
    border: 1px solid transparent;
    border-radius: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.favorite-icon::before {
    content: '\f004'; /* Ícone de Coração */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 400; /* Peso 400 ativa a versão Outline (apenas linhas) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px; /* Tamanho ajustado para as linhas ficarem elegantes */
    color: rgba(0, 210, 255, 0.15); /* Cor suave e nítida */
    z-index: 0;
    pointer-events: none;
    -webkit-text-stroke: 1px rgba(0, 210, 255, 0.2); /* Força a nitidez da linha fina */
}

.favorite-initials {
    position: relative;
    z-index: 2;
    color: #00d2ff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: none; /* Removido para evitar o aspecto borrado */
}

/* Text effect - Galaxy colors */
.favorite-icon > * {
    position: relative;
    z-index: 2;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 6px rgba(0, 210, 255, 0.4),
        0 0 10px rgba(255, 170, 0, 0.2);
    /* transition: all 0.3s ease; */
    color: rgba(0, 210, 255, 0.95);
}

/* Efeito de brilho interno sutil - Galaxy colors */
.favorite-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: linear-gradient(135deg, rgb(0 255 184 / 15%) 0%, transparent 50%, rgba(0, 210, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.favorite-item:hover .favorite-icon {
    border-color: rgba(0, 210, 255, 0.5);
    background: #313338 !important; /* Fundo continua escuro */
}

.favorite-item:hover .favorite-initials {
    color: #ffffff; /* Letras ficam brancas no fundo azul */
    text-shadow: none;
}

.favorite-item:hover .favorite-tooltip {
    opacity: 1;
}
.favorite-icon::before {
    content: '\f004'; /* Ícone de Coração */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 400; /* Peso 400 ativa a versão Outline (apenas linhas) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px; /* Tamanho ajustado para as linhas ficarem elegantes */
    color: rgba(0, 210, 255, 0.15); /* Cor suave e nítida */
    z-index: 0;
    transition: color 0.15s ease;
    pointer-events: none;
    -webkit-text-stroke: 1px rgba(0, 210, 255, 0.2); /* Força a nitidez da linha fina */
}

.favorite-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 8px; 
    background: #00d2ff;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity 0.15s ease, height 0.15s ease;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
}

/* No hover e ativo, a linha fica levemente mais visível */
.favorite-item:hover .favorite-icon::before,
.favorite-item.active .favorite-icon::before {
    color: rgba(0, 210, 255, 0.25);
}

.favorite-item:hover::before {
    opacity: 0.8;
    height: 20px; /* Cresce no hover estilo Discord */
}

.favorite-tooltip {
    position: absolute;
    left: 60px;
    background: #111214;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 10;
}

.favorite-icon-btn:hover {
    transform: scale(1.1);
}

/* ============================================
   Context Menu Customizado
   ============================================ */
.favorite-context-menu {
    position: fixed;
    background: rgba(32, 34, 37, 0.98);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-std);
    padding: 6px;
    min-width: 160px;
    z-index: 10000;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: contextMenuFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-std);
    /* transition: all 0.15s ease; */
    user-select: none;
    margin: 2px 0;
}

.context-menu-item i {
    width: 18px;
    font-size: 0.875rem;
    text-align: center;
    opacity: 0.8;
}

.context-menu-item:hover i {
    opacity: 1;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.context-menu-view {
    color: rgba(255, 255, 255, 0.9);
}

.context-menu-view:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.context-menu-delete {
    color: rgba(239, 68, 68, 0.9);
}

.context-menu-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}


.serversText {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-std);
    color: var(--accent-white);
    border-color: var(--accent-color);
}
.serversText:hover {
}
.section-middle {
    min-height: 900px;
}
.section-bottom {
    min-height: 300px;
    background-color: var(--bg-tertiary);
}
.section-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

#location-toggle-btn.active #header-loc-icon,
#location-toggle-btn:active #header-loc-icon,
#location-toggle-btn:focus #header-loc-icon {
    color: var(--accent-primary) !important;
}

/* --- ESCONDER O BADGE DO GOOGLE/RECAPTCHA --- */
.grecaptcha-badge {
    visibility: hidden; 
    opacity: 0;
    pointer-events: none;
}

.yellow-border-hover:hover {
    border: 1px solid var(--border-color);
    border-color: var(--accent-color) !important;
}
.badge-purple {
}
.no-pointer,
.no-pointer:hover {
    cursor: default !important;
}

.emerald-600-hover:hover {
    color: var(--color-emerald-600) !important;
}

.server-tooltip-content {
    min-width: 350px; /* Largura boa para IPs longos */
    display: flex;
    flex-direction: column;
}

/* Header (Flag + Nome) */
.server-tooltip-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tooltip-flag img, 
.tooltip-flag svg {
    width: 24px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tooltip-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.server-tooltip-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 20px;
    padding: 14px 16px;
}


.tooltip-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; 
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    line-height: 1.5;
}

.tooltip-label {
    color: #5e6673; /* Cinza escuro para o rótulo */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    margin-right: 8px;
    white-space: nowrap;
}

/* 5. CORES DOS VALORES */
.tooltip-value {
    color: #a0a0a0; /* CINZA CLARO para dados comuns (Port, Ver, PvP, etc) */
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Destaque para IP e Online (Amarelo) */
.highlight-value {
    color: #FCD535 !important; 
    font-weight: 700;
}

/* Destaque opcional para Exp (Ciano) */
.accent-value {
    color: #00E5FF !important; 
    font-weight: 700;
}

.server-tooltip-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.3); /* Fundo mais escuro */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0 0 8px 8px;
}

.tooltip-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tooltip-label-mini {
    font-size: 0.6rem;
    color: #5e6673;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}

.tooltip-value-mini {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e6e8ea; /* Branco suave para rodapé */
}
.bc-label {
    position: relative;
    top: 1px; /* Ajuste fino vertical */
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    color: var(--text-secondary);
}
.bc-label:hover {
    color: var(--text-primary);
}
.bc-label.white {
    color: var(--text-primary);
}

/* Container principal - Usar largura total */
.container-fluid[style*="min-height"] {
    max-width: var(--max-width) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 auto !important;
}

/* Override de qualquer max-width do container padrão no serverlist */
.container-fluid[style*="min-height"] .container {
    max-width: var(--max-width) !important;
}

/* Row sem margens laterais que limitam largura */
.container-fluid .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Sidebar com largura fixa responsiva - mais à esquerda */
aside.col-xl-2,
aside.col-lg-2 {
    max-width: 300px !important;
    min-width: 260px !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    padding-left: 8px !important;
}

/* Main content usando toda largura restante - mais à direita */
main.col-xl-10,
main.col-lg-10 {
    max-width: none !important;
    flex: 1 1 auto !important;
    padding-left: 16px !important;
    padding-right: 8px !important;
    margin-right: 0 !important;
}


/* Container do Status */
#info-ping-status {
    font-weight: 700;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

/* Cores do Texto sincronizadas com o Dot */
#latency-badge-wrapper {
    background: rgb(12 12 12 / 5%); 
    border-radius: 20px; 
    height: 28px; 
    transition: all 0.3s ease;
    border-radius: 20px !important;
}
#info-ping-status.online { color: var(--status-up, #0ECB81); }
#latency-badge-wrapper.online {
    background: rgba(14, 203, 129, 0.05);
    border: 1px solid rgba(14, 203, 129, 0.2);
}

/* Estado Atenção (Laranja) */
#info-ping-status.warning { color: #f59e0b; }
#latency-badge-wrapper.warning {
    background: rgb(245 158 11 / 16%);
    border: 1px solid rgb(245 158 11 / 52%);
}

/* Estado Offline/Waiting (Cinza) */
#info-ping-status.offline { color: #6f6a6b; }
#latency-badge-wrapper.offline {
    background: rgba(111, 106, 107, 0.05);
    border: 1px solid rgba(111, 106, 107, 0.2);
}
/* Dot Base */
.ping-dot-radar {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.swal2-confirm, .swal2-cancel {
  width: 150px !important;  
}
#favorites-count-badge {
    background: #00ff803b !important;
    color: #00ff64 !important;
    border-color: #00ff64 !important;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}

body .container.my-5,
body .container.my-3,
body .container.my-2 {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 992px) {
    body .container.my-5,
    body .container.my-3,
    body .container.my-2 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


.panel-section .card {
    margin-bottom: 1rem !important;
}

.panel-section .card-body {
    padding: 1rem !important;
}

.panel-section .card-title {
    margin-bottom: 0.5rem !important;
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
}

.panel-section h3.card-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem !important;
}

.panel-section h4.card-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.5rem !important;
}

/* Textos com cores claras para melhor visibilidade */
.panel-section .text-muted,
.panel-section p.text-muted,
.panel-section small.text-muted {
    color: #b7bdc6 !important;
    font-size: 0.8rem !important;
}

.border-radius-big {
    border-radius: var(--radius-big) !important;
}
.btn-navbar-square.active-light {
    color: var(--accent-primary);
    background: rgba(252, 213, 53, 0.1);
    border-color: var(--accent-primary);
}


/* cores start */
.neon-cyan { color: #00E5FF; }
.neon-green { color: #0ECB81; }
.neon-purple { color: #8B5CF6; }
.neon-gold { color: #FCD535; }
.neon-red { color: #F6465D; }
.neon-blue { color: #3B82F6; }
/* cores end */




/* ========================
   ADMIN LICENSES SECTION
   ======================== */

/* License Cards - Consistent Styling */
#admin-licenses-content .card {
    border-radius: 0 !important;
    margin-bottom: 24px;
}

#admin-licenses-content .card-header {
    padding: 16px 20px !important;
    border-radius: 0 !important;
}

#admin-licenses-content .card-header h5 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

#admin-licenses-content .card-header i {
    font-size: 1.25rem !important;
    margin-right: 12px !important;
}

/* Badge Alignment - Remove absolute positioning */
#admin-licenses-content .badge {
    border-radius: 0 !important;
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
}

/* Table Consistency */
#admin-licenses-content .table {
    margin-bottom: 0 !important;
}

#admin-licenses-content .table thead {
    background: rgba(255, 255, 255, 0.02) !important;
}

#admin-licenses-content .table th {
    padding: 12px 16px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#admin-licenses-content .table td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#admin-licenses-content .table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Code Blocks in Tables */
#admin-licenses-content code {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 2px 6px !important;
    border-radius: 0 !important;
    font-size: 0.85rem !important;
    color: var(--text-primary) !important;
}

/* Empty State */
#admin-licenses-content .text-center.py-4 {
    padding: 32px 20px !important;
    color: var(--text-muted) !important;
}

/* Toggle Button */
#admin-licenses-content .btn {
    border-radius: 0 !important;
}
#status_text_44 {
    padding: 8px 12px;
    background: rgba(14, 203, 184, 0.1);
    border-left: 2px solid #0ECBB8;
    border-radius: 0;
    font-size: 0.80rem;

}
.featured-text-menu {
    color: #0ECBB8;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.70rem;
}
.featured-text-menu.red-text {
    color: #F6465D;
}
/* END ADMIN LICENSES SECTION */


/* Animations */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
@keyframes scaleIn {
    to {
        transform: scale(1);
    }
}
.server-flag-container:hover .server-rating-stars {
    opacity: 1;
}
.server-flag-container:hover {
    z-index: 9999;
}
@keyframes votePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); filter: drop-shadow(0 0 10px var(--accent-primary)); }
    100% { transform: scale(1); }
}

.vote-animating .star-svg {
    animation: votePulse 0.4s ease-in-out;
}
.server-flag-container::after {
    content: 'LIKE';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: var(--accent-cyan);
    color: var(--accent-text);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0px 0px;
    border-radius: 4px;
    opacity: 0;
    width: 45px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;    
    z-index: 10000; 
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer !important;
}
.server-flag-container:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    bottom: 5px;
}
.server-flag-container.voted::after {
    content: 'UNLIKE';
    background: #ff4d4d; 
    width: 45px;
    text-align: center;
    color: #fff;
}

.is-shuffling {
    background-color: color-mix(in srgb, var(--color-purple-500) 10%, transparent);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
    z-index: 10;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.description-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.description-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.description-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

#descriptionModal .modal-dialog {
    height: calc(100% - 3.5rem) !important; 
    max-height: 90vh !important;
    display: flex !important;               
    align-items: center !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
}

#descriptionModal .modal-content {
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#description-modal-body {
    overflow-y: auto !important;            /* Barra de rolagem vertical */
    flex: 1 1 auto !important;              /* Ocupa todo o espaço disponível entre header e footer */
    height: auto !important;                
    max-height: none !important;            /* Deixa o Flexbox controlar a altura, removendo o limite rígido de 60vh se necessário */
    min-height: 0 !important;               /* Fix crítico para scroll funcionar dentro de Flexbox no Firefox/Chrome */
    padding-right: 10px !important;         /* Evita que o texto encoste na barra de rolagem */
}
.btn-outline-secondary.active, 
.btn-outline-secondary:active {
    color: #fff !important;
    background-color: var(--text-secondary) !important;
    border-color: var(--text-secondary) !important;
}
 
.bg-warning {
    color: var(--accent-text) !important;
}
.badge-success,
.bg-success {
    background-color: #0ecb812b !important;
    border: solid 1px var(--status-up) !important;
}
.badge-green {
    color: var(--status-up);
    background-color: #0ecb811c !important;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
}
.position-right {
    position: absolute;
    right: 20px;
}
.bg-info {
    background-color: #00aaff24 !important;
    color: #00aaff !important;
    border: solid 1px #00aaff !important;
}

.text-emerald { color: var(--emerald-color) !important; }
.bg-dark-soft { background-color: var(--bg-dark-soft) !important; }

/* Input de busca com brilho suave ao focar */
.search-input-glow:focus {
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25), 0 0 15px rgba(16, 185, 129, 0.1);
    border-color: var(--emerald-color);
}

/* Painel de Filtro Deslizante */
.filters-sliding-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}

/* Classe que será adicionada via JS para abrir o painel */
.filters-sliding-container.show-filters {
    max-height: 500px; /* Um valor alto o suficiente para caber o conteúdo */
    opacity: 1;
}

/* Sidebar Header */

.server-description-text {
    color: var(--sd-text-muted);
    line-height: 1.6;
    font-size: 0.85rem;
}
.server-toolbar {
    margin-bottom: 0.8rem !important;
}
.input-group {
    border-color: var(--accent-color);
    height: 43px;
}
.no-margin-left {
    margin-left: 0px !important;
}
.no-margin-right {
    margin-right: 0px !important;
}
.no-padding-left {
    padding-left: 0px !important;
}
.no-padding-right {
    padding-right: 0px !important;
}

.btn-subscriptions {
    padding: 6px 12px;
    border-color: #4a5568 !important;
    color: #cbd5e0 !important;
    background: rgba(74, 85, 104, 0.3);
    border: solid 1px;
    font-size: 0.75rem !important;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.2s ease !important;
    letter-spacing: 0.3px;
    opacity: 0.3;
}

.btn-subscriptions.active {
    /* border-color: #3182ce !important; */
    background: #f0b90bc7;
    color: black !important;
    opacity: 1 !important;
    /* font-weight: 600; */
    /* box-shadow: 0 2px 4px rgb(254 204 0 / 20%);*/
}
.btn-subscriptions:hover {
    opacity: 1;
}
.btn-subscriptions.active:hover {
    background: #f0b90b !important;
    color: #050505 !important;
    box-shadow: 0px 1px 6px 0px rgb(254 204 0 / 50%);
}

/* Configurações Premium - Bordas Arredondadas */
.premium-settings-container {
    border-radius: 8px;
}

.premium-settings-header {
    border-radius: 8px;
}

.premium-status-badge {
    border-radius: 0px;
}

/* Configurações Premium - Novo Layout */
.premium-server-container {
    width: 100%;
    margin: 0 8px 24px 8px;
}

.premium-server-card {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-std) !important;
    padding: 12px 16px !important; /* Reduzido de 20px */
    margin-bottom: 12px !important;
}
.premium-server-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.premium-server-header {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.premium-server-header h6 {
    font-size: 0.95rem !important;
    margin-bottom: 2px !important;
}

.premium-server-settings {
    display: grid;
    grid-template-columns: 1fr 1fr !important; /* Força duas colunas em desktop */
    gap: 15px !important;
}

.text-body {
    color: var(--text-secondary) !important;
}
 
.premium-online-badge {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    position: relative;
    overflow: hidden;
}

.premium-online-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: radar-sweep 2s linear infinite;
}

@keyframes radar-sweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
.live-radar-btn:hover {
    background: rgb(35 134 54 / 49%) !important;
}
.live-radar-btn.btn-secondary:hover {
    background: rgba(108, 117, 125, 0.15);
}
/* --- Base Otimizada --- */
[class*="-button"] {
    border: 1px solid transparent;
    font-weight: 700;
    /*text-transform: uppercase;*/
    letter-spacing: 0.6px; */
    border-radius: 8px;
    padding: 10px 0px;
    font-size: 13px; /* Tamanho padrão de dashboard */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
}
/* cards de estatísticas */
.stat-item-mini {
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-std);
}
.hightech.top-radius {
    border-radius: var(--radius-big) var(--radius-big) 1px 1px;
}
.backgroundBTN-green {
    background: #0ecb8126 !important;
    border: 1px solid #0ecb8152 !important;
    color: var(--accent-white) !important;
}
.backgroundBTN-green:hover {
    background: #0ecb8154 !important;
    border: 1px solid #00ff9b52 !important;
    color: #00ff9b !important;
    box-shadow: 0 0 10px rgb(0 255 155 / 23%) !important;
}

.server-details-address {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary) !important;
    display: inline-block;
}

.server-details-ip-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sd-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 8px;
}


/* =========================================
   BANDEIRA ANIMADA NO LOGO
   ========================================= */
.server-flag-animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 1;
    transform: scale(1);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.server-flag-animated.fade-out {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
}

.flag-image-animated {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: flagWave 2s ease-in-out infinite;
}

@keyframes flagWave {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-2deg) scale(1.02); }
    75% { transform: rotate(2deg) scale(1.02); }
}

.server-logo-media-wrapper {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.server-logo-media-wrapper.show {
    opacity: 1;
    transform: scale(1);
}

.card-img-top {
    padding: 20px;
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
}

.shop-product-card {
    background-color: var(--bg-card-dark) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shop-product-card.premium:hover {
    border-color: var(--accent-color) !important;
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.2) !important;
}
.shop-product-card.editor:hover {
    border-color: #9f35fc !important;
    box-shadow: 0 4px 12px rgb(154 61 248 / 20%) !important;
}
.shop-product-card.launcher:hover {
    border-color: #25b76b !important;
    box-shadow: 0 4px 12px rgb(61 248 134 / 20%) !important;
}
.shop-product-card.client:hover {
    border-color: #25b7b4 !important;
    box-shadow: 0 4px 12px rgb(61 231 248 / 20%) !important;
}
.shop-product-card.bytes:hover {
    border-color: #f43f5e !important;
    box-shadow: 0 4px 12px rgb(220 53 84 / 56%) !important;
}
.shop-btn {
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.shop-btn:not(:disabled):hover {
 
}
#productDetailsModal .btn-close {
    filter: invert(1);
}

.mascot-sleeping .mascot-eyes-open { display: none !important; }
.mascot-sleeping .mascot-eyes-closed { display: block !important; }
.mascot-eyes-closed { display: none; }

.mascot-sleeping .mascot-zzz {
    display: block !important;
    animation: zzz-drift 2s ease-out infinite;
    animation-delay: 0.5s;
}
.mascot-zzz text {
    fill: #D3D3D3 !important;
    opacity: 1 !important;
    font-weight: bold;
    text-shadow: 0 0 8px #D3D3D3, 0 0 12px rgba(211, 211, 211, 0.5);
    filter: drop-shadow(0 0 3px #D3D3D3);
}
.editor-icon-container {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    padding: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#editorGradient stop:first-child { stop-color: #a78bfa; }
#editorGradient stop:last-child { stop-color: #7c3aed; }

#footer-spy-mascot.conjuring .mascot-svg {
    /* Brilho intenso pulsante */
    animation: conjure-pulse 0.8s ease-in-out infinite alternate, conjure-shake 0.2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px #00d2ff);
}

@keyframes conjure-pulse {
    from { transform: scale(1); filter: drop-shadow(0 0 5px #00d2ff); }
    to { transform: scale(1.05); filter: drop-shadow(0 0 20px #00d2ff); }
}

@keyframes conjure-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-1px, 1px) rotate(-1deg); }
    50% { transform: translate(0, -1px) rotate(0deg); }
    75% { transform: translate(1px, 1px) rotate(1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.shop-firework {
    position: fixed;
    pointer-events: none;
    z-index: 100001;
    box-shadow: 0 0 10px currentColor;
}

.mascot-glasses {
    display: none;
}
.mascot-glasses circle, 
.mascot-glasses line {
    stroke: #00d2ff !important;
    fill: rgba(0, 210, 255, 0.2) !important;
}
.glasses-reflection {
    opacity: 0.5;
    stroke: #fff !important;
}

.mascot-404 {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.success-scene-wrapper {
    position: relative;
    margin-top: 80px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.success-peeking-mascot {
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 100px;
    z-index: 0;
    display: flex;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
}

.success-peeking-mascot .mascot-body-clone {
    width: 100%;
    height: 100%;
}

.logo-text {
    font-size: 16px;
    font-weight: 900;
    color: #FFFFFF !important;
    text-shadow: 
        0 0 10px #00E5FF,
        0 0 20px #00E5FF,
        0 0 30px #00E5FF;
    font-family: 'Arial Black', Arial, sans-serif;
    letter-spacing: 2px;
    line-height: 1;
    display: block !important;
}

#main-navbar {
    background-color: color-mix(in oklab, color-mix(in oklab, var(--bg-body-fundos), white 3%), transparent 15%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    box-shadow: none; 
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    box-sizing: border-box;
    padding-right: 0;
    will-change: padding-left, transform;
    transition: 
        padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
        transform 0.3s ease-in-out,
        background-color 0.3s ease;
}

#main-navbar.navbar-hidden {
    transform: translateY(-100%);
}

.server-details-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    height: fit-content; 
    z-index: 10;
}

#main-navbar .container,
#main-navbar .container-fluid {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-left: 25px !important;
    padding-right: 25px !important;    
    height: var(--navbar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    transition: none !important;
} 

.price-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 1px var(--border-color);
    border-radius: var(--radius-std);
    padding: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 0.7rem !important;
}
.download-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-icon-wrapper {
    width: 50px; height: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(var(--card-rgb), 0.1);
    color: var(--card-color);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.download-card .card-title {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    font-size: 1rem;
}

.download-card .card-title::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: 0; left: 50%;
    background-color: var(--card-color);
    transition: width 0.3s ease, left 0.3s ease;
}

.download-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.download-card:hover {
    border-color: var(--card-color) !important;
    box-shadow: 0 0 25px rgba(var(--card-rgb), 0.15) !important;
    transform: translateY(0);
}

.download-card:hover .card-title::after {
    width: 100%; left: 0;
}

.download-card:hover .card-icon-wrapper {
    background: rgba(var(--card-rgb), 0.25);
    box-shadow: 0 0 15px rgba(var(--card-rgb), 0.3);
    transform: scale(1.1);
}

.list-group-item-action:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}
.list-group-item-action:hover i { color: #3b82f6 !important; }
 
#clientsModalLabel i.fa-desktop,
.client-item i.fa-download {
    color: var(--text-muted) !important;
    transition: color 0.3s ease;
}

.client-item:hover i.fa-download {
    color: var(--accent-color) !important;
}

.card-body h6 i.fa-info-circle {
    color: var(--text-muted) !important;
    transition: color 0.3s ease;
}

.card-body ul li i.fa-check-circle {

}

.download-info {
    margin-top: auto;
}

.client-item {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.client-item:hover {
    background-color: var(--table-row-hover) !important;
    border-color: var(--accent-color) !important;
    transform: none !important;
}

.client-item:hover i.fa-external-link-alt {
    color: var(--accent-color) !important;
}

#clients-list {
    pointer-events: auto !important;
    z-index: 100002 !important;
    position: relative;
}

.client-item {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100002 !important;
    cursor: pointer !important;
    display: block !important;
}

.client-item:hover {
    background-color: var(--table-row-hover) !important;
    border-color: var(--accent-color) !important;
    transform: none !important;
}

.client-item * {
    pointer-events: none !important;
} 

.btn-glow-cyan {
    background: rgba(0, 242, 234, 0.1) !important; 
    border: 1px solid rgba(0, 242, 234, 0.2) !important;
    color: #00f2ea !important;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    padding: 8px 8px !important;
    justify-content: center !important;
    gap: 6px !important;
}
.btn-glow-cyan:hover {
    background: rgba(0, 242, 234, 0.25) !important;
    border-color: #00f2ea !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.4) !important;
}

/* Estilo Vermelho (Favorito Ativo) */
.btn-glow-red {
    background: rgba(248, 113, 113, 0.15) !important;
    /* Borda mais visível quando ativo */
    border: 1px solid rgba(248, 113, 113, 0.5) !important; 
    color: #f87171 !important;
    transition: all 0.3s ease;
    display: flex !important;
    padding: 8px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.btn-glow-red:hover {
    background: rgba(248, 113, 113, 0.3) !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(248, 113, 113, 0.4) !important;
}

#player-search-input {
    padding: 8px 12px 8px 28px !important;
}


#main-navbar .container-fluid {
    padding-left: 15px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
    width: 100% !important;
    
    transition: none !important; 
}
.brand-visual-stack {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.live-status-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 229, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 229, 255, 0.1);
    width: fit-content;
}
.status-text-tech {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: #00E5FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pulse-dot-cyan {
    width: 6px;
    height: 6px;
    background-color: #00E5FF;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 8px #00E5FF;
}
.pulse-dot-cyan::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: ripple-cyan 2s infinite;
}
@keyframes ripple-cyan {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
}
.brand-main-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: -1px;
    color: #FFFFFF;
    text-transform: uppercase;
}
.text-cyan-gradient {
    background: linear-gradient(180deg, #00E5FF 0%, #00A3FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
}

.navbar-nav.ms-auto { margin-left: auto;position: absolute; right: 20px; }

.nav-item { position: relative; border-radius: var(--radius-std); }

.modern-menu-toggle {
    background-color: var(--accent-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-std) !important;
    color: var(--accent-text) !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    text-transform: uppercase;
}

.modern-menu-toggle:hover {
    background-color: var(--accent-hover) !important;
    color: var(--accent-primary) !important;
}
.modern-menu-toggle.active {
    border: 1px solid var(--accent-primary);
    color: var(--accent-text) !important;
}

.modern-menu-toggle i.fa-layer-group:hover {
    color: var(--bs-warning) !important;
}
.modern-menu-toggle i.fa-crown:hover {
    color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity));
}
.live-data-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.live-data-dot {
    width: 6px;
    height: 6px;
    background-color: var(--status-up);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(14, 203, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(14, 203, 129, 0); }
} 

.rules-mascot-container .mascot-body {
    position: relative !important;
    right: 0px; 
    width: 80px !important;
    height: 80px !important;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    z-index: 2;
}
.mascot-communication-group.register {
    margin-bottom: 40px;
}
.mascot-communication-group {
    margin-bottom: -36px; 
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;    
    align-items: flex-end; 
    margin-right: 40px; 
    z-index: 3;
}

.mascot-portal-effect {
    position: fixed;
    width: 100px;
    height: 40px;
    pointer-events: none;
    z-index: 2147483647 !important;
    transform: translateY(-50%);
}

.portal-ring {
    position: absolute;
    inset: 0;
    border: 4px solid #00E5FF;
    border-radius: 50%;
    transform: rotateX(70deg);
    box-shadow: 0 0 20px #00E5FF, inset 0 0 20px #00E5FF;
    animation: portalOpenClose 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes portalOpenClose {
    0% { transform: rotateX(70deg) scale(0); opacity: 0; }
    30% { transform: rotateX(70deg) scale(1.2); opacity: 1; }
    70% { transform: rotateX(70deg) scale(1.1); opacity: 1; }
    100% { transform: rotateX(70deg) scale(0); opacity: 0; }
}

#footer-spy-mascot.mascot-away {
    transform: translateY(200px) !important; 
    opacity: 0 !important;
    transition: transform 0.5s cubic-bezier(0.47, 0, 0.74, 0.71), opacity 0.3s;
}

.mascot-communication-group.visible {
    opacity: 1;
    transform: translateY(0);
}

.mascot-bubble {
    background: var(--bg-body); 
    color: #fff;
    border: 1px solid #00d2ff;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(0, 210, 255, 0.2);
    max-width: 220px;
    text-align: center;
    position: relative;
    margin-right: 40px; 
    right: 67px;
    top: 20px;
    animation: popIn 0.5s ease-out 1s forwards; 
}

.mascot-connector-line path {
    stroke: #00d2ff;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 3 3;
}
.mascot-connector-line circle { fill: #00d2ff; }

.mascot-body svg {
    filter: drop-shadow(0 0 15px rgba(0, 210, 255, 0.15));
    transition: transform 0.3s ease;
}

.btn-action-gold { background-color: #FCD535; color: var(--clean-bg-pages); font-weight: 600; border: none; padding: 14px 24px; border-radius: 6px; width: 100%; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-action-gold:hover { background-color: #F0B90B; }

.forbidden-list { list-style: none; padding: 0; margin: 0; }
.forbidden-list li { margin-bottom: 8px; display: flex; align-items: flex-start; gap: 10px; }
.forbidden-list li span.x-mark { color: #ef4444; font-weight: bold; font-size: 1.1em; line-height: 1.4; }

.search-mascot-svg rect,
.mascot-body rect,
#footer-spy-mascot rect,
.mascot-body-clone rect {
    fill: rgba(0, 210, 255, 0.05) !important; /* Quase transparente */
    stroke: #00d2ff !important; /* Borda Neon */
    stroke-width: 1.5px !important;
    filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.3)); /* Brilho suave */
}

/* OLHOS E DETALHES: Luz Pura */
.search-mascot-svg ellipse,
.search-mascot-svg circle,
.mascot-eyes-open ellipse,
.mascot-eyes-open circle,
.eye-pupil,
#footer-spy-mascot ellipse,
#footer-spy-mascot circle, 
#register-mascot-body ellipse,
#register-mascot-body circle, 
#register-server-mascot ellipse,
#register-server-mascot circle {
    fill: #e0f7ff !important;
    filter: drop-shadow(0 0 6px #00d2ff);
    stroke: none !important;
}

/* Sincronização visual com register-server (Estado de Erro Vermelho) */
#register-account-mascot-container.mascot-error .mascot-bubble {
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}
#register-account-mascot-container.mascot-error .mascot-bubble::after {
    border-top-color: rgba(239, 68, 68, 0.5) !important;
}
#register-account-mascot-container.mascot-error .mascot-connector-line path {
    stroke: #ef4444 !important;
    filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.8)) !important;
}
#register-account-mascot-container.mascot-error .mascot-connector-line circle {
    fill: #ef4444 !important;
}
#register-account-mascot-container.mascot-error .mascot-body {
    transform: rotate(-5deg);
}

/* Estado de Sucesso (Verde) */
#register-account-mascot-container.mascot-success .mascot-bubble {
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}
#register-account-mascot-container.mascot-success .mascot-bubble::after {
    border-top-color: rgba(16, 185, 129, 0.5) !important;
}
#register-account-mascot-container.mascot-success .mascot-connector-line path {
    stroke: #10b981 !important;
    filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.8)) !important;
}
#register-account-mascot-container.mascot-success .mascot-connector-line circle {
    fill: #10b981 !important;
}

/* Pupilas (Escuras para contraste no holograma) */
.mascot-eyes-open circle[fill="black"],
.search-mascot-svg circle[fill="black"] {
    fill: #002233 !important;
    opacity: 0.8;
}

.search-mascot-svg path,
.mascot-eyebrows,
#footer-spy-mascot path,
#register-server-mascot path,
#register-mascot-body path
 {
    stroke: #00d2ff !important;
    stroke-width: 2px !important;
    fill: none !important;
    filter: drop-shadow(0 0 3px #00d2ff);
}

.search-mascot-container {
    position: absolute; /* Mudado de 'fixed' para 'absolute' - relativo à div da tabela */
    pointer-events: none;
    overflow: visible !important;
    transition: opacity 0.3s ease;
    opacity: 0;
    
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    
    z-index: 9 !important;
    
    display: block !important;
    box-sizing: border-box !important;
    line-height: 0 !important;
    vertical-align: baseline !important;
}

/* Balão da Busca */
.search-mascot-bubble {
    position: absolute;
    bottom: 50px; /* Posicionado logo acima do mascote (ajustado para ficar mais próximo) */
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
    /* transition: all 0.3s ease 0.2s; */
    width: max-content;
    min-width: 200px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;

    max-width: 250px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

.search-mascot-container.show .search-mascot-bubble {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.search-mascot-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-top-color: rgba(0, 210, 255, 0.5) !important;
}


/* O SVG ou imagem dentro dele deve ter o tamanho real */
.search-mascot-svg {
    width: 50px; /* Tamanho do mascote */
    height: 45px;
    position: absolute; /* Remove do fluxo do flexbox de tamanho zero */
    transform: translateX(-50%); /* Centraliza exato no ponto 0 do container */
    bottom: 0; /* Alinha na base do ponto de inserção */
    pointer-events: auto; /* Permite interação */
}

.search-mascot-container.show .mascot-eyes-sad {
    animation: mascotSadBlink 4s infinite;
}

/* HOVER: ELE SOBE PARA MOSTRAR O CORPO */
#footer-spy-mascot:hover:not(.mascot-away):not(.mascot-speaking) {
    transform: translateY(25px);
}

/* QUANDO FALA: SOBE TAMBÉM */
#footer-spy-mascot.mascot-speaking {
    transform: translateY(25px) !important;
}

/* Balão do Rodapé */
.spy-bubble {
    position: absolute;
    bottom: 100px;
    right: 50px;
    width: 200px;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    pointer-events: none;
    z-index: 100001;
}

#footer-spy-mascot:hover:not(.mascot-away) .spy-bubble {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.search-mascot-bubble,
.spy-bubble,
.mascot-bubble,
.login-error-bubble {
    background: rgba(10, 15, 25, 0.9) !important; /* Fundo escuro */
    color: #00d2ff !important; /* Texto Neon */
    border: 1px solid rgba(0, 210, 255, 0.5) !important; /* Borda fina */
    box-shadow: 0 0 15px rgb(255 255 255 / 15%) !important;
    font-family: 'Segoe UI', monospace !important;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 4px !important; /* Visual mais quadrado/tech */
    backdrop-filter: blur(4px);
    z-index: 10001 !important;
}

.search-mascot-bubble::after,
.spy-bubble::after,
.mascot-bubble::after,
.login-error-bubble::after {
    border-color: transparent !important;
}

.search-mascot-container.show {
    opacity: 1 !important;
    pointer-events: auto;
    cursor: pointer;
}
#footer-spy-mascot {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 80px;
    height: 80px;
    transform: translateY(50px); 
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.spy-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 20px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-top-color: rgba(0, 210, 255, 0.5) !important;
}
.spy-eyes {
    animation: blink 4s infinite;
}
.eye-pupil {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.rules-mascot-container,
.login-error-mascot-container {
    position: absolute;
    bottom: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    /* transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); */
}

.rules-mascot-container { left: 0; transform: translateX(50px); }
.login-error-mascot-container { right: 0; transform: translateX(-50px); }

.rules-mascot-container.show,
.login-error-mascot-container.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.mascot-body {
    width: 80px;
    height: 80px;
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.2)); 
}
.rules-mascot-container .mascot-body { transform: rotate(-10deg); }
.login-error-mascot-container .mascot-body { right: -50px; transform: rotate(10deg); }

.rules-mascot-container .mascot-body:hover { transform: rotate(-5deg) translateX(-5px); }
.login-error-mascot-container .mascot-body:hover { transform: rotate(5deg) translateX(5px); }
.mascot-communication-group {
    position: absolute;
    bottom: 0px;
    opacity: 0;
}
#rules-mascot-container.mascot-error .mascot-bubble {
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}
#rules-mascot-container.mascot-error .mascot-connector-line path {
    stroke: #ef4444 !important;
}
#rules-mascot-container.mascot-error .mascot-connector-line circle {
    fill: #ef4444 !important;
}
#rules-mascot-container.mascot-success .mascot-bubble {
    border-color: #10b981 !important;
    color: #10b981 !important;
}
#rules-mascot-container.mascot-success .mascot-connector-line path {
    stroke: #10b981 !important;
}
#rules-mascot-container.mascot-success .mascot-connector-line circle {
    fill: #10b981 !important;
}
#rules-mascot-container.mascot-error .mascot-body ellipse[fill*="#e0f7ff"], 
#rules-mascot-container.mascot-error .mascot-body circle[fill*="#e0f7ff"] {
    fill: #fee2e2 !important; /* Branco avermelhado */
    filter: drop-shadow(0 0 5px #ef4444) !important;
}
#rules-mascot-container.mascot-error .mascot-connector-line {
    top: 85px !important;
    right: -5px !important;
    transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#rules-mascot-container.mascot-error .mascot-connector-line path {
    stroke: #ef4444 !important;
    filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.8)) !important;
}
#rules-mascot-container.mascot-error .mascot-connector-line circle {
    fill: #ef4444 !important;
}
#rules-mascot-container.mascot-error .mascot-body {
    transform: rotate(-5deg) !important;
}

#rules-mascot-container.mascot-success .mascot-communication-group {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#rules-mascot-container.mascot-success .mascot-bubble {
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
    font-family: monospace !important;
    top: -4px;
} 
#rules-mascot-container.mascot-success .mascot-connector-line path {
    stroke: #10b981 !important;
}
#rules-mascot-container.mascot-success .mascot-connector-line circle {
    fill: #10b981 !important;
}


#rules-mascot-container.mascot-error .mascot-bubble,
#rules-mascot-container.mascot-success .mascot-bubble,
#rules-mascot-container:hover .mascot-bubble {
    pointer-events: auto !important;
    user-select: text !important;
    cursor: default;
}
#footer-spy-mascot.mascot-error {
    transform: translateY(25px) !important;
}

#footer-spy-mascot.mascot-error .spy-bubble {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    border: 1px solid #ef4444 !important;
    color: tomato !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
    font-family: monospace !important;
}

/* Pinta a setinha do balão de vermelho também */
#footer-spy-mascot.mascot-error .spy-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 20px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-top-color: rgb(255 80 0 / 50%) !important;
}

/* Quando tem sucesso: Sobe imediatamente (sobrescreve comportamento padrão) */
#footer-spy-mascot.mascot-success {
    transform: translateY(25px) !important;
}

/* Força o balão a aparecer com cor verde */
#footer-spy-mascot.mascot-success .spy-bubble {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
    font-family: monospace !important;
}

/* Pinta a setinha do balão de verde também */
#footer-spy-mascot.mascot-success .spy-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 20px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-top-color: rgba(16, 185, 129, 0.5) !important;
}

/* Permitir interação com o balão quando houver erro/sucesso ou hover */
#footer-spy-mascot.mascot-error .spy-bubble,
#footer-spy-mascot.mascot-success .spy-bubble,
#footer-spy-mascot:hover .spy-bubble {
    pointer-events: auto !important;
    user-select: text !important; /* Permite selecionar o texto */
    cursor: default;
}

.spy-bubble a {
    color: #FCD535; /* Amarelo Binance para destaque no fundo escuro */
    text-decoration: underline;
    pointer-events: auto;
    cursor: pointer;
    font-weight: 700;
}

.spy-bubble a:hover {
    color: #fff;
}

.rules-mascot-container .mascot-communication-group { right: 8px; transform: scale(0.8) translateX(20px); }
.login-error-mascot-container .mascot-communication-group { left: 35px; transform: scale(0.8) translateX(-20px); }

.rules-mascot-container.show .mascot-communication-group,
.login-error-mascot-container.show .mascot-communication-group {
    opacity: 1;
    transform: scale(1) translateX(0);
}

.mascot-bubble, .login-error-bubble {
    width: max-content;
}

.mascot-bubble::after {
    /* estamos usando linha sinuosa
    content: '';
    position: absolute;
    right: -10px;
    margin-top: -10px;
    border-width: 0px 0px 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0, 210, 255, 0.5) !important;
    */
}

.login-error-bubble {
    top: -80px;
    left: 80px;
    animation: popIn 0.5s ease-out 1s forwards;
}

/* Linhas conectoras (se houver SVG) */
.mascot-connector-line {
    display: block !important;
    margin-top: -45px;
    margin-right: 30px;
    z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    overflow: visible;
    position: absolute;
    top: 60px;
}
.rules-mascot-container .mascot-connector-line { right: 0; }
.login-error-mascot-container .mascot-connector-line { left: 0; }


.mascot-sleeping .mascot-eyes-open,
.mascot-sleeping .mascot-eyes-peeking {
    display: none !important;
}

.mascot-sleeping .mascot-eyes-closed,
.mascot-sleeping .mascot-zzz {
    display: block !important;
}

/* Ocultar por padrão */
.mascot-eyes-closed, .mascot-zzz {
    display: none;
}

/* Estilo do Zzz Neon */
.mascot-zzz text {
    fill: #ffffff !important; /* Mudei para BRANCO para destacar no fundo escuro */
    stroke: #00d2ff;          /* Borda Azul Neon para manter o tema */
    stroke-width: 1px;
    
    font-family: 'Verdana', sans-serif !important; /* Fonte mais grossa */
    font-weight: 900 !important;
    
    opacity: 0;
    filter: drop-shadow(0 0 8px #00d2ff); /* Glow mais forte */
    
    animation: zzz-float 3s ease-out infinite;
}

/* Escadinha de tamanhos */
.mascot-zzz text:nth-child(1) { 
    font-size: 28px !important; /* Era 14px */
    animation-delay: 0s; 
}
.mascot-zzz text:nth-child(2) { 
    font-size: 20px !important; /* Era 10px */
    animation-delay: 0.8s; 
}
.mascot-zzz text:nth-child(3) { 
    font-size: 14px !important; /* Era 8px */
    animation-delay: 1.6s; 
}

/* Ajuste na animação para subir mais */
@keyframes zzz-float {
    0% { 
        transform: translate(0, 0) scale(0.5) rotate(-10deg); 
        opacity: 0; 
    }
    20% { 
        opacity: 1; 
    }
    100% { 
        /* Sobe muito mais (-40px) e vai mais para direita (25px) */
        transform: translate(25px, -40px) scale(1.2) rotate(15deg); 
        opacity: 0; 
    }
}

#footer-spy-mascot.conjuring .mascot-svg {
    animation: conjure-pulse 0.8s ease-in-out infinite alternate, conjure-shake 0.2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px #00d2ff);
}

@keyframes conjure-pulse {
    from { transform: scale(1); filter: drop-shadow(0 0 5px #00d2ff); }
    to { transform: scale(1.05); filter: drop-shadow(0 0 20px #00d2ff); }
}

@keyframes conjure-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-1px, 1px) rotate(-1deg); }
    50% { transform: translate(0, -1px) rotate(0deg); }
    75% { transform: translate(1px, 1px) rotate(1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.shop-firework {
    position: fixed;
    pointer-events: none;
    z-index: 100001;
    box-shadow: 0 0 10px currentColor;
}

.mascot-glasses {
    display: none;
}
.mascot-glasses circle, 
.mascot-glasses line {
    stroke: #00d2ff !important;
    fill: rgba(0, 210, 255, 0.2) !important;
}
.glasses-reflection {
    opacity: 0.5;
    stroke: #fff !important;
}

.mascot-404 {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}


.text-success { color: #10b981 !important; }
.text-success.background { background: #10b9811f;  }
.text-success:hover { background: #10b9813b; }


.auth-page-wrapper * { box-sizing: border-box; }

.auth-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 85vh;
    background-color: var(--bg-body);
    font-family: 'Inter', sans-serif;
    padding: 16px;
    padding-bottom: 0;
    position: relative;
}

.auth-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--text-secondary);
    font-size: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
    z-index: 20;
}
.auth-close-btn:hover { color: var(--accent-white); }

.auth-card-compact {    
    margin: auto;

    background-color: var(--bg-body); 

    border: 1px solid var(--border-color);
    border-radius: var(--radius-big);

    height: auto; /* Altura fixa para consistência */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    min-width: 500px;
    width: 100% !important;
    max-width: 450px !important;  /* Trava a largura máxima */
    min-height: unset !important; /* Remove altura mínima */

    padding: 32px 24px;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);

    display: flex;     /* Transforma o card em Flexbox */
    flex-direction: column; /* Organiza itens em coluna */
    justify-content: space-between; /* Distribui espaço uniformemente */

    overflow-x: hidden; /* Bloqueia a rolagem lateral */
}

/* Cabeçalho Compacto */
.auth-header {
    text-align: center; /* Centralizado */
    margin-bottom: 24px;
}

.auth-logo {
    width: 48px; /* Logo pequena e discreta */
    height: 48px;
    object-fit: contain;
    margin-bottom: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.auth-title {
    font-size: 1.25rem; /* Título menor (20px) */
    font-weight: 600;
    color: var(--accent-white);
    margin: 0 0 4px 0;
}

.auth-subtitle {
    font-size: 0.875rem; /* Subtítulo pequeno (14px) */
    color: var(--text-secondary);
    margin: 0;
}

/* Inputs Compactos */
.auth-form-group {
    margin-bottom: 16px; /* Menos espaço entre campos */
}

.auth-label {
    display: block;
    color: var(--accent-white);
    font-size: 0.65rem !important;
    font-weight: 500;
    margin-top: 8px !important;
}

.auth-input {
    width: 100%;
    height: 46px; /* Altura reduzida */
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    color: var(--accent-white) !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease;
    outline: none;
    background: var(--input-bg); border: 1px solid transparent;
}

.auth-input:focus {
    border-color: var(--accent-hover, #FCD535) !important;
    background-color: transparent !important;
}

.auth-input::placeholder { color: #5e6673; }

/* Checkbox e Links */
.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.auth-check-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.auth-link {
    font-size: 0.85rem;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}
.auth-link:hover { text-decoration: underline; }

.auth-btn-submit {
    width: 100%;
    height: 46px;
    background-color: var(--accent-color);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius-std);
    font-size: 1rem;
    font-weight: 600;
    cursor: default;
    transition: filter 0.2s;
}

.auth-btn-submit:hover { filter: brightness(0.9); }

/* Divisor */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 10px 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; border-bottom: 1px solid var(--border-color);
}
.auth-divider span { padding: 0 10px; }

.auth-btn-google {
    width: 100%;
    height: 46px;
    background-color: var(--input-bg);
    color: var(--accent-white);
    border: none;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: background 0.2s;
}
.auth-btn-google:hover { background-color: #383e47; }

/* Footer do Form */
.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .auth-card-compact {
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;

        min-height: auto !important; /* No celular, deixa altura automática */
        height: auto !important;
        justify-content: flex-start;
    }
    .auth-page-wrapper {
        align-items: stretch; /* Ocupa largura total no mobile */
        padding-top: 60px;
    }
}

/* Container do Input */
.input-wrapper {
    align-items: center;
    position: relative;
    display: block; 
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-std) !important;
    height: 40px !important;
    padding: 6px 10px !important;
    transition: border-color 0.2s ease;
}

.input-wrapper:hover, 
.input-wrapper:focus-within {    
    border-color: var(--accent-hover) !important;
    outline: none;
}
.input-wrapper input {
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;           
    outline: none !important;          
    padding-right: 30px !important;    
    padding-left: 10px !important;
    color: var(--accent-white) !important;
} 

.rate-control-group {
    background: transparent;
    display: flex;
    align-items: center;
    /* border: 1px solid var(--panel-border); */
    padding: 1px;
    justify-content: center;
}
.rate-control-group:hover { 
}

.no-radius {
    border-radius: 0px !important;
}
#server-test-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    background: #5f6060;
    border-radius: 40px;
}
.leaflet-container {
    background: #0d1117 !important;
}
.leaflet-container:focus {
    outline: none !important;
}
.custom-radar-marker {
    z-index: 1000 !important;
}
#checkbox-wrapper-click {
    background-color: transparent !important;
    border: unset !important;
    padding: 5px 0px 5px 0px !important;
}
#server-test-btn:hover {
    border-color: #eab308; /* Amarelo */
    color: #eab308;
}
.server-details-header {
    position: relative;
    z-index: 2;
} 
.port-btn {
    display: flex;
    align-items: center;
}
#server-test-btn.pulsing {
    animation: pulseBtn 1.5s infinite;
    background: #eab308 !important;
    color: white;
    border-color: #eab308;
}
#server-test-btn.testing {
    background: #ff9302 !important;
    color: white;
    border-color: #eab308;
}
#server-test-btn.connected {
    background: #10b981 !important;
    color: white;
    border-color: #10b981;
}
#server-test-btn.timeout {
    background: #ef4444 !important;
    color: white;
    border-color: #ef4444;
}
@keyframes pulseBtn {
    0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(234, 179, 8, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}
/* nao deletar end */

.ping-node-box-embedded.active {
    opacity: 1;
}

.ping-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--border-color);
}
.ping-node-box-embedded.checking .ping-status-dot { 
    background-color: #eab308; 
    box-shadow: 0 0 8px #eab308; 
    animation: pulseDot 1s infinite;
}
.ping-node-box-embedded.success .ping-status-dot { background-color: #10b981; box-shadow: 0 0 8px #10b981; }
.ping-node-box-embedded.error .ping-status-dot { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; }

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.auth-page-wrapper .hand-with-sign-container {
    display: none !important;
}
    
.mascot-anchor {
    position: relative; 
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.auth-page-wrapper .rules-mascot-container {
    display: flex;

    position: absolute !important; 
    
    /* Posicionamento Vertical: Bem no meio do Card */
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* Posicionamento Horizontal: Colado na borda ESQUERDA da âncora */
    left: 0 !important;
    margin-left: -90px !important; /* Empurra para fora (largura do mascote + folga) */
    
    /* Reset de estilos antigos que podem atrapalhar */
    right: auto !important;
    bottom: auto !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Alinha balão e corpo à direita (perto do card) */
    
    z-index: 5 !important; /* Atrás do card (10), mas visível */
    pointer-events: none !important; /* Não bloqueia cliques se estiver invisível */
    
    /* Transição suave para a animação de entrada */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    opacity: 0; 
}

/* Estado visível do Mascote */
.auth-page-wrapper .rules-mascot-container.show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ajuste para telas pequenas (Mobile) */
@media (max-width: 991px) {
    .mascot-anchor {
        max-width: 100%; /* No mobile ocupa tudo */
    }
    /* No mobile, voltamos ao comportamento padrão se necessário, 
       ou apenas escondemos/ajustamos conforme seu gosto */
    .auth-page-wrapper .rules-mascot-container {
        left: 50% !important;
        margin-left: -40px !important; /* Centraliza no mobile */
        top: 20px !important;
        transform: none !important;
        align-items: center !important;
    }
}
.server-details-container {
    padding-bottom: 40px;
    width: 100%;
}
.server-details-main {
    padding-right: 0px;
    min-width: 0;
    border-radius: 8px;
}

.h-100-visual {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Textura de Fundo */
.panel-texture {
    background-color: var(--sd-panel-bg);
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Ícones SVG */
.icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: -0.125em;
}

/* Rainbow Effect */
.sublinhado-rainbow:hover .info-label { 
    color: #fff !important; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 
}

/* Criando a base para o sublinhado na label */
.sublinhado-rainbow .info-label {
    position: relative;
    display: inline-block;
}

.sublinhado-rainbow .info-label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    /* Gradiente moderno com 7 cores */
    background: linear-gradient(90deg, 
        #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff
    );
    transition: width 0.3s ease-in-out;
    border-radius: 2px;
}

.sublinhado-rainbow:hover .info-label::after {
    width: 100%;
}

.sublinhado-gold .info-label,
.sublinhado-cyan .info-label {
    position: relative;
    display: inline-block;
}

.sublinhado-gold .info-label::after,
.sublinhado-cyan .info-label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    transition: width 0.3s ease-in-out;
}

.sublinhado-gold:hover .info-label::after { width: 100%; background-color: #FCD535; }
.sublinhado-cyan:hover .info-label::after { width: 100%; background-color: #00E5FF; }
/* ============================================================================
   SERVER REAL-TIME STATISTICS
   ============================================================================ */

.server-realtime-stats {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    backdrop-filter: blur(10px);
    font-size: 0.7rem;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.stat-value-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    position: relative;
}

.stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

.stat-value.status-indicator {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-value.status-indicator.online {
    color: #0ECB81;
    border-color: rgba(14, 203, 129, 0.2);
    background: rgba(14, 203, 129, 0.08);
}

.stat-value.status-indicator.offline {
    color: #F6465D;
    border-color: rgba(246, 70, 93, 0.2);
    background: rgba(246, 70, 93, 0.08);
}

.status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0ECB81;
    box-shadow: 0 0 6px rgba(14, 203, 129, 0.4);
    animation: pulse 2s infinite;
}

.status-dot.offline {
    background: #F6465D;
    box-shadow: 0 0 6px rgba(246, 70, 93, 0.4);
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

.trend-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.trend-indicator.trend-up {
    background: rgba(14, 203, 129, 0.15);
    color: #0ECB81;
}

.trend-indicator.trend-down {
    background: rgba(246, 70, 93, 0.15);
    color: #F6465D;
}

.trend-indicator svg {
    width: 10px;
    height: 10px;
}

.trend-value {
    font-size: 0.6rem;
    font-weight: 500;
    margin-left: 1px;
}


.timeline_bar_container {
    height: 35px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px;
    padding: 3px;
    gap: 2px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.timeline_segment {
    height: 100%;
    border-radius: 1px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    min-width: 1px;
}
 

.timeline_bg_on { 
    background-color: var(--status-up) !important; 
}

.timeline_bg_off { 
    background-color: var(--status-down) !important;
}

/* Efeito ao passar o mouse para destacar o bloco */
.timeline_segment:hover {
    opacity: 1 !important;
    filter: brightness(1.2);
    z-index: 10;
}

.mini-stat-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}


.stat-icon-glow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #848e9c !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    transition: all 0.2s ease-in-out;
}

.mini-stat-badge:hover .stat-icon-glow.servers {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important; /* Borda acende */
    background: rgba(255, 255, 255, 0.02) !important;
}

.mini-stat-badge:hover .stat-icon-glow.servers svg {
    filter: drop-shadow(0 0 4px var(--accent-primary));
}

.mini-stat-badge:hover .stat-icon-glow.players {
    color: #0ECB81 !important;
    border-color: #0ECB81 !important; /* Borda acende */
    background: rgba(255, 255, 255, 0.02) !important; 
}

.mini-stat-badge:hover .stat-icon-glow.players svg {
    filter: drop-shadow(0 0 4px #0ECB81);
}


/* Tipografia Dashboard */
.stat-data {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.stat-data .stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem !important;
    font-weight: 700;
    color: var(--text-secondary) !important;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.stat-data .stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem !important;
    font-weight: 700;
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Divisor Vertical Interno */
.stat-v-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 10px;
}

/* Detalhe de Tendência Micro */
.trend-up-micro {
    font-size: 0.5rem;
    color: #0ECB81;
    opacity: 0.8;
}
 
/* não deletar  */
.sub-nav-link {
    text-decoration: none;
}
.server-badges-top::before {
    content: '';
    position: absolute;
    margin: -30px -30px 20px -20px;
    top: 15px;
    height: 45px;
    left: 0px;
    right: -10px;
    bottom: 0px;
    background: linear-gradient(135deg, rgb(0 255 69 / 2%) 0%, rgb(0 255 170 / 4%) 50%, rgb(0 255 104 / 2%) 100%);
    z-index: -1;
}
.server-logo-wrapper {
    position: relative;
    overflow: hidden;
    height: 110px;
}
.server-logo-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0) 0%, rgba(16, 185, 129, 0.5) 50%, rgba(16, 185, 129, 0) 100%);
    box-shadow: 0 -1px 5px rgba(16, 185, 129, 0.2);
    z-index: 5;
}
.server-name-info {
    text-transform: uppercase;
    margin-bottom: 0px;
}

.badge-pill {
    background: rgba(255, 255, 255, 0.05);
    /* border: 1px solid rgba(255, 255, 255, 0.08); */
    border-radius: 20px;
    padding: 1px 5px;
    display: flex;
    min-width: 90px;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.60rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    justify-content: center;
}

.badge-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.badge-pill svg {
    opacity: 0.6;
    color: #aeb9cc;
}

/* Status Online/Offline */
.badge-status.online {
    background: rgb(16 203 129 / 24%);
    border-color: rgba(16, 203, 129, 0.2);
    color: #0ecb7e;
}

.status-dot-mini {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

/* Trend (Subida/Queda) no mesmo Pill */
.trend-inline {
    display: flex;
    align-items: center;
}

.trend-up { color: #0ecb81; }
.trend-down { color: #ff6b6b; }


#statusBadge {
    font-size: 0.85rem;
}


/* Sidebar com largura fixa */
.instructions-sidebar { 
    width: 185px !important; 
    min-width: 180px !important; 
    flex-shrink: 0; 
}

#universalInstructionsModal .nav-link { color: #848E9C; border-radius: 4px; margin-bottom: 2px; padding: 8px 12px; transition: all 0.2s; font-size: 0.8rem; font-weight: 500; border-left: 2px solid transparent; }
#universalInstructionsModal .nav-link:hover { color: #EAECEF; background: rgba(255,255,255,0.02); }
#universalInstructionsModal .nav-link.active { background: rgba(252, 213, 53, 0.05) !important; color: #FCD535 !important; border-left-color: #FCD535; font-weight: 600; }

.dc-section-title { font-size: 0.95rem; font-weight: 700; color: #EAECEF; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
.dc-text { font-size: 0.8rem; color: #848E9C; line-height: 1.5; margin-bottom: 1rem; }

.compact-code-block pre { margin: 0; border-radius: 0; border: 1px solid var(--border-color); background: var(--bg-body) !important; white-space: pre-wrap !important; word-break: break-word !important; overflow-x: hidden !important; }
.compact-code-block code { font-size: 0.75rem !important; line-height: 1.4 !important; font-family: 'JetBrains Mono', 'Consolas', monospace !important; padding: 1rem !important; white-space: pre-wrap !important; }

#connectionTroubleshootModal .nav-link { color: #848E9C; border-radius: 4px; margin-bottom: 2px; padding: 8px 12px; transition: all 0.2s; font-size: 0.8rem; font-weight: 500; border-left: 2px solid transparent; }
#connectionTroubleshootModal .nav-link:hover { color: #EAECEF; background: rgba(255,255,255,0.02); }
#connectionTroubleshootModal .nav-link.active { background: rgba(252, 213, 53, 0.05) !important; color: #FCD535 !important; border-left-color: #FCD535; font-weight: 600; }
.troubleshoot-section-title { font-size: 0.95rem; font-weight: 700; color: #EAECEF; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
.troubleshoot-text { font-size: 0.8rem; color: #848E9C; line-height: 1.5; margin-bottom: 1rem; }
.compact-code-block pre { margin: 0; border-radius: 0; border: 1px solid var(--border-color); background: var(--bg-body) !important; white-space: pre-wrap !important; word-break: break-word !important; overflow-x: hidden !important; }
.compact-code-block code { font-size: 0.75rem !important; line-height: 1.4 !important; font-family: 'JetBrains Mono', 'Consolas', monospace !important; padding: 1rem !important; white-space: pre-wrap !important; }



.server-banner-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
    
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-sizing: border-box; 
    
    transition: border-color 0.2s ease; 
}

.server-banner-wrapper:hover {
    border-color: var(--cyan-glow);
}

.paid-banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: transform 0.8s ease;
}
.paid-banner-link:hover {
    transform: scale(1.05);
}
.paid-banner-link:hover .banner-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4)); /* Clareia no hover */
}

.server-banner-wrapper video, 
.server-banner-wrapper img {
    width: 100%;
    height: 100% !important; 
    object-fit: cover;       
    object-position: center;
    display: block;
    border: none;
}

.banner-bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay Azul Transparente para Banners */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));
    z-index: 2;
    transition: background 0.3s ease;
}

/* Container do nome */
.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.banner-server-name {
    margin: 0;
    padding: 0 10px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: text-shadow, opacity;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@keyframes energy-glow {
    0% {
        text-shadow: 
            0 0 4px rgba(0,0,0,0.9),
            0 0 10px rgba(0, 229, 255, 0.4);
        opacity: 0.9;
    }
    50% {
        text-shadow: 
            0 0 6px rgba(0,0,0,1),
            0 0 20px rgba(252, 213, 53, 0.7),
            0 0 10px rgba(252, 213, 53, 0.9);
        opacity: 1;
    }
    100% {
        text-shadow: 
            0 0 4px rgba(0,0,0,0.9),
            0 0 10px rgba(0, 229, 255, 0.4);
        opacity: 0.9;
    }
}

.energy-text {
    animation: energy-glow 3s infinite ease-in-out;
}

.banner-info-link {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 11px;
    
    z-index: 50; 
    
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s, color 0.2s;
}
.server-banner-wrapper:hover .banner-info-link,
.modern-countdown-card:hover .banner-info-link {
    opacity: 1;
}

.modern-countdown-card .banner-info-link {
    top: 10px;
    right: 10px;
    /* Pode ser um pouco maior no destaque */
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.banner-info-link:hover {
    background-color: var(--accent-cyan);
    color: #000;
    border-color: var(--text-primary);
}

/* =========================================
   TIMELINE CLEAN STYLE (BINANCE THEME)
   ========================================= */

.timeline-card {
    border: 1px solid var(--sd-border, #2d333b);
    border-radius: var(--radius-big);
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: none; /* Removemos sombras internas coloridas */
}

/* Removemos a linha de luz neon do topo */
.timeline-card::before {
    display: none;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 15px;
}

/* Título Limpo */
.timeline-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sd-text-main, #e6edf3);
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: none;
}

.clean-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--sd-text-muted, #8b949e);
}

.timeline-title .clean-icon {
    color: var(--accent-color, #FCD535); /* Ícone amarelo no título */
}

.timeline-uptime-val {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    color: var(--sd-success, #238636); /* Verde sólido */
    font-size: 1rem;
    text-shadow: none;
}

/* Botões de Tempo Clean */
.timeline-controls .btn-time {
    background: transparent;
    border: 1px solid var(--sd-border, #2d333b);
    color: var(--sd-text-muted, #8b949e);
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 600;
    cursor: pointer;
}

.timeline-controls .btn-time:hover {
    background: rgba(255,255,255,0.05);
    color: var(--sd-text-main, #fff);
    border-color: var(--sd-text-muted);
}

.timeline-controls .btn-time.active {
    background: rgba(252, 213, 53, 0.1); /* Fundo amarelo transparente */
    color: var(--accent-color, #FCD535);
    border-color: var(--accent-color, #FCD535);
    box-shadow: none;
}

/* Barra e Régua */
.timeline-track-wrapper {
    position: relative;
    margin-bottom: 24px;
    padding: 0;
}

.timeline-ruler {
    display: flex;
    justify-content: space-between;
    color: var(--sd-text-muted, #8b949e);
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
}

.timeline-bar {
    width: 100%;
    height: 12px; /* Um pouco mais alto */
    background: rgba(0,0,0,0.3);
    border-radius: 2px; /* Bordas menos arredondadas (mais técnico) */
    display: flex;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
}

.t-segment {
    height: 100%;
    transition: transform 0.1s ease, opacity 0.1s;
    position: relative;
    margin-right: 1px; /* Separação física de 1px entre segmentos */
}

.t-segment:hover {
    transform: scaleY(1.4); /* Cresce verticalmente no hover */
    z-index: 10;
}

/* Cores Sólidas (Sem degradê neon) */
.bg-on { 
    background-color: var(--sd-success, #10b981); 
}

.bg-off { 
    background-color: var(--sd-danger, #da3633);
}

/* Painel de Detalhes Clean */
.timeline-details {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--sd-border, #2d333b);
    border-radius: 6px;
    padding: 15px;
    display: flex;
    align-items: center;
    box-shadow: none;
}

.detail-col {
    flex: 1;
    padding: 0 15px;
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.detail-col:last-child { border-right: none; }

.detail-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--sd-text-muted, #8b949e);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 0.85rem;
    color: var(--sd-text-main, #fff);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    text-shadow: none;
}

/* Ponto de status simples */
.status-dot-clean { 
    width: 8px; height: 8px; 
    border-radius: 50%; display: inline-block; 
}
.dot-green { background: var(--sd-success, #10b981); }
.dot-red { background: var(--sd-danger, #da3633); }
 
.section-top, .main-content, .sidebar-cockpit, .server-table-container, .server-details-main {   
    z-index: 1; 
    position: relative;
}

/* =========================================
   2. ORBS "OVERLAY" (POR CIMA DE TUDO)
   ========================================= */
.modern-orb-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;    
    z-index: 15; 
    pointer-events: none; 
}

.modern-orb {
    position: absolute;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    filter: blur(60px); 
    mix-blend-mode: screen;     
    opacity: 0.6;    
    animation: orb-pulse 6s infinite alternate ease-in-out;
}

.orb-logo-spot {
    top: -150px;
    left: -150px;
    background: radial-gradient(circle, rgb(0 255 241 / 12%) 0%, rgba(139, 92, 246, 0) 70%);
}

.orb-menu-spot {
    top: -180px;
    right: -100px;
    background: radial-gradient(circle, rgb(252 213 53 / 16%) 0%, rgba(252, 213, 53, 0) 70%);
    animation-delay: -2s;
}

/* 3. Mascot Spot (Cyan/Neon) - Canto Inferior Direito */
.orb-mascot-spot {
    bottom: -150px;
    right: -150px;
    background: radial-gradient(circle, rgb(0 229 255 / 13%) 0%, rgba(0, 229, 255, 0) 70%);
    animation-delay: -4s;
}

@keyframes orb-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0.7; }
}



.custom-list-table tbody tr.player-row { 
    border-bottom: 1px solid color-mix(in oklab, white 5%, transparent); 
    transition: background-color 0.2s ease; 
}
.custom-list-table tbody tr.player-row:last-child { border-bottom: none; }
.custom-list-table tbody tr.player-row:hover { background-color: color-mix(in oklab, white 2%, transparent); }

/* DOT STATUS */
.status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.online {
    background-color: #10b981;
    box-shadow: 0 0 8px color-mix(in oklab, #10b981 40%, transparent);
}
.status-dot.offline {
    background-color: color-mix(in oklab, white 15%, transparent);
}

/* SEARCH INPUT */
#player-search-input::placeholder {
    color: color-mix(in oklab, #00f2ea 50%, transparent);
}
#player-search-input:hover {
    border-color: color-mix(in oklab, #00f2ea 25%, transparent) !important;
    background: color-mix(in oklab, #00f2ea 8%, transparent) !important;
}
#player-search-input:focus {
    border-color: #00f2ea !important;
    background: color-mix(in oklab, #00f2ea 10%, transparent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, #00f2ea 10%, transparent) !important;
}

/* SELECT CUSTOM DARK */
.custom-select-dark {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300f2ea%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e'); 
    background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 12px;
}
.custom-select-dark option {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300f2ea%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e'); 
    background: var(--bg-body-fundos) !important;
    color: #00f2ea !important;
    padding: 8px !important;
}
.custom-select-dark:hover {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300f2ea%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e'); 
    background-color: color-mix(in oklab, #00f2ea 8%, transparent) !important; /* Mude para background-color */
    border-color: color-mix(in oklab, #00f2ea 25%, transparent) !important;
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}
.custom-select-dark:focus {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300f2ea%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e'); 
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, #00f2ea 10%, transparent) !important;
    border-color: #00f2ea !important;
}

.page-link { 
    box-shadow: none !important; 
    background-color: transparent; 
    cursor: pointer; 
    padding: 5px 10px; 
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-color: color-mix(in oklab, white 10%, transparent);
}
.page-link:hover { 
    color: var(--text-primary); 
    background-color: color-mix(in oklab, white 5%, transparent); 
}
.page-item.active .page-link { 
    background-color: color-mix(in oklab, #00f2ea 15%, transparent) !important; 
    color: #00f2ea !important; 
    font-weight: bold; 
    border-color: color-mix(in oklab, #00f2ea 30%, transparent); 
}

.no-pointer {
    cursor: default !important;
}

.sidebar-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
}

.sidebar-cockpit {
    display: flex;
    flex-direction: column;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    max-width: 100%;    
    padding: 15px;
    position: sticky;
    top: 20px;
    box-shadow: none;    
    background: transparent !important; 
    border: none !important;    
    z-index: 5; 
    isolation: isolate;
}

.sidebar-cockpit::before {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 4%);    
    border: 1px solid rgb(255 255 255 / 6%);
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 0;
    pointer-events: none; 
}

.sidebar-logo-section {
    padding-bottom: 0;
}

.sidebar-stats-section {
    padding: 0;
}

.sidebar-filters-section {
    padding: 0;
}

.sidebar-banners-section {
    padding: 0;
    margin-bottom: 0;
}

.sidebar-button-section {
    padding: 0;
    margin-bottom: 0;
}

.sidebar-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
    margin: 15px 0;
    border: none;
}
.sidebar-banners-section + .sidebar-separator { 
}
.sidebar-separator-no-border {
    height: 1px;
    margin: 8px 0;
}

.disabled>.page-link, .page-link.disabled {
    color: #54545459;
    background-color: #27262600 !important;
}

/* Header */
.text-muted-light {
    color: #A8A8B3 !important; /* Cool Gray */
}

.separator-line {
    border-color: var(--panel-border);
    margin: 15px 0;
    opacity: 0.5;
}

/* Remover separadores antigos se houver */
.sidebar-cockpit .separator-line {
    display: none; /* Esconder separadores antigos, usar .sidebar-separator */
}

/* Stats Grid 2x1 (compacto) */
.stats-grid-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.offline-tag {
    cursor: help;
    color: var(--status-down) !important;
    opacity: 0.5;
}
.stat-card-square {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #12121442 !important;
    /* border: unset; */
    border-radius: var(--radius-std) !important;
    padding: 10px 5px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    position: relative;
    padding-top: 15px;

    background-color: var(--bg-card) !important;
    background-image: none !important;
    /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;*/
}
.stat-card-square:hover .stat-icon-binance {
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px currentColor);
}


.pvp-type-text,
.version-text,
.bot-text,
.uptime-value,
.exp-text {
    font-size: 0.95rem;
    color: var(--text-gray-dark);
    font-weight: 300 !important;
    border-color: var(--panel-border);
    font-family: 'Roboto Mono', 'Courier New', monospace !important; /* Fonte monoespaçada */
    font-variant-numeric: tabular-nums; /* Força números a terem a mesma largura */
    letter-spacing: -0.5px; /* Ajuste fino para não ficar muito largo */
    text-align: center;     
    display: inline-block;
} 
.ping-value {
    font-weight: 300 !important;
    font-size: 0.95rem;
}
/* Ping Cells */
.ping-cell {
    cursor: help;
}
/* Ping Column - Estilo da Imagem (Colorido: Verde/Amarelo/Vermelho) */
.server-ping {
    width: 80px;
    text-align: right;
    background: transparent !important;
}
.ping-cell.ping-excellent .ping-value {
    color: var(--status-up) !important; /* Verde vivo */
}
.ping-cell.ping-good .ping-value {
    color: #73ca00 !important;
}
.ping-cell.ping-medium .ping-value {
    color: var(--accent-primary) !important; /* Amarelo vivo */
}

.ping-cell.ping-bad .ping-value {
    color: #F6465D !important; /* Vermelho vivo */
}
.ping-value.ping-excellent {
    color: var(--status-up) !important; /* Verde vivo */
}
.ping-value.ping-good  {
    color: #73ca00 !important;
}
.ping-value.ping-medium {
    color: var(--accent-primary) !important; /* Amarelo vivo */
}
.ping-value.ping-bad  {
    color: #F6465D !important; /* Vermelho vivo */
}

.btn-cockpit-action {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--panel-border);
    border-radius: var(--square-radius);
    color: var(--accent-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

.btn-cockpit-action:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.filters-drawer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 5px;
    box-shadow: none !important;
}

.filters-drawer-content hr {
    opacity: 0.7 !important; /* Aumentado para maior visibilidade */
    border-top: 1px solid var(--panel-border) !important;
    margin: 10px 0 !important;
}

.filters-drawer-content.open {
    max-height: 100%;
    opacity: 1;
    padding: 10px 0; /* Padding sem bordas */
}




.server-table-container {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 1.5%) !important;
    
    /* Borda fina para definição de limites */
    border: 1px solid rgb(255 255 255 / 8%) !important;
    
    /* Leve arredondamento e sombra para "flutuar" */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    position: relative;
    z-index: 2;
    overflow: visible !important;
}

.server-row.highlighted {
    background-image: linear-gradient(90deg, 
        rgba(0, 229, 255, 0.08) 0%, 
        rgba(0, 229, 255, 0.05) 30%, 
        rgba(0, 229, 255, 0.02) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
    border-bottom: none !important;
}

.server-row.highlighted::after {
    content: '';
    position: absolute;
    left: 0px; top: 0; bottom: 0; width: 3px;
    background-color: var(--tibialist-cyan);
    z-index: 10;
}

.server-row.highlighted:hover {
    background-image: linear-gradient(90deg, rgb(0 229 255 / 20%) 0%, rgb(0 229 255 / 15%) 30%, rgb(0 229 255 / 5%) 60%, rgb(0 0 0 / 3%) 100%) !important;
}

.server-name a {
    color: #e6e8ea !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.server-row.highlighted .server-name a {
    color: var(--tibialist-cyan) !important;
    text-transform: uppercase;
}

/* Rank Box */
.server-rank {
    width: 20px;
    height: 20px;
    /* margin: 0 auto; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    color: var(--text-gray-dark);
    /* font-size: 0.7rem !important; */
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 5%) !important;
    border: 1px solid rgb(255 255 255 / 10%) !important;
    /* border-radius: 4px; */
}
/* Ícones de Sort (Header) */
.sort-icon {
    font-size: 0.75em;
    color: var(--text-muted) !important;
    opacity: 0.4;
    transition: all 0.2s ease;
    display: inline-block;
    vertical-align: middle;
}
.sort-icon {
    margin-left: 4px;
    position: relative;
    top: 1px;
}
.sortable:hover .sort-icon {
    opacity: 1;
    color: var(--tibialist-cyan) !important;
}
.sortable.active .sort-icon {
    opacity: 1;
    color: var(--tibialist-cyan) !important;
    transform: none;
    filter: none;
}
.sortable.active.asc .sort-icon::before { content: '\f0de'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.sortable.active.desc .sort-icon::before { content: '\f0dd'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }

/* Ribbons e SVGs Especiais */
.premium-ribbon {
    position: absolute !important;
    width: 80px !important;
    top: -3px !important;
    left: -35px !important;
    transform: rotate(-45deg) !important;
    background: var(--tibialist-cyan) !important;
    color: var(--accent-text) !important;
    font-size: 0.55rem !important;
    font-weight: 800 !important;
    z-index: 20 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Features Icons */
.feat-icon-wrapper.allowed { color: var(--status-up) !important; }
.feat-icon-wrapper.denied {
    color: var(--text-secondary) !important;
    opacity: 0.5;
}
.feat-icon-wrapper:hover svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;    
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}
/* 5. Ícones (Feat/Ping) centralizados */
.feat-icon-wrapper svg {
    width: 16px; /* Ícones levemente menores para não estourar a linha */
    height: 16px;
    vertical-align: middle;
    margin-top: -2px;
}

/* Connection Lines (Tree) */

@keyframes treeFlow { from { stroke-dashoffset: 250; } to { stroke-dashoffset: 0; } }

/* Ping Colors */
.ping-excellent { color: var(--status-up) !important; }
.ping-medium { color: var(--accent-primary) !important; }
.ping-bad { color: #F6465D !important; }

.server-link-btn {
    width: 0px; opacity: 0; overflow: hidden;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
    will-change: width, opacity;
}

.server-rating-stars {
    display: flex;
    justify-content: space-between;
    width: 24px;
    height: 4px;
    opacity: 0.8;
}
.server-rating-big-stars {
    display: flex !important;
    justify-content: flex-start;
}

.star-svg {
    width: 6px;
    height: 6px;
    stroke-width: 2;
    fill: var(--text-gray-dark) !important;
    stroke: none !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.star-svg.filled {
    stroke: var(--accent-primary);
    fill: var(--accent-primary);
}
.star-svg.half {
    stroke: var(--accent-primary);
    fill: url(#half-grad);
}

.star-svg-big {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    fill: var(--text-gray-dark) !important;
    stroke: none !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.star-svg-big.filled {
    stroke: var(--accent-primary); /* Amarelo do tema */
    fill: var(--accent-primary);
}
.star-svg-big.half {
    stroke: var(--accent-primary);
    fill: url(#half-grad);
}

.reordering-in-progress {
    overflow: hidden !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

.stat-icon-servers .stat-icon-modern,
.stat-icon-players .stat-icon-modern,
.stat-icon-uptime .stat-icon-modern,
.stat-icon-countries .stat-icon-modern {
    color: var(--accent-color) !important;
}

.stat-content-integrated {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    position: relative;
    z-index: 1;
    flex: 1;
    justify-content: center;
}

.stat-value-integrated {
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    color: var(--accent-white) !important;
    line-height: 1.2;
    transition: color 0.2s;
    letter-spacing: -0.02em;
}

.stat-item-integrated:hover .stat-value-integrated {
    color: var(--accent-color) !important;
}
.stat-value-wrapper-integrated {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.stat-change-indicator-integrated {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    transition: all 0.3s ease;
    animation: fadeInScale 0.3s ease;

    font-weight: 600;
    padding: 1px 4px;
    border-radius: var(--radii-xs); /* 4px */
    margin-left: 4px;
}

/* Estilização do ícone de tendência (injetado via JS ou existente) */
.stat-trend-icon, 
.stat-change-indicator-integrated {
    position: absolute;
    /* top: 10px; */
    right: 32px;
    margin: 0 !important;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Ícones Binance Style - Coloridos */
.stat-icon-binance {
    font-size: 1rem !important;
    margin-bottom: 2px;
    transition: all 0.2s ease;
    display: block;
    width: 20px;
    height: 20px;
}
.stat-icon-binance svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Estilo para o modal de filtros */
#filters-top-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    z-index: 1050;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--border-color);
}

#filters-top-drawer.open {
    transform: translateY(0);
}

#filters-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#filters-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.filters-drawer-content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.filters-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-white);
    margin: 0;
}

.filters-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

.filters-close-btn:hover {
    color: var(--accent-white);
}

.filters-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.btn-filter {
    padding: 8px 16px;
    border-radius: var(--radius-std) !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 8%); 
    color: color-mix(in oklab, white, transparent 20%);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.btn-filter:hover {
    background-color: color-mix(in oklab, var(--bg-body-fundos), white 12%);
    color: white;
}

.btn-filter.active {
    /* Estado Ativo: Borda Ciano e Fundo levemente azulado */
    background-color: color-mix(in oklab, var(--bg-body-fundos), cyan 10%);
    border-color: color-mix(in oklab, cyan, transparent 50%);
    color: cyan;
    box-shadow: 0 0 10px color-mix(in oklab, cyan, transparent 90%); /* Glow muito sutil */
}

.btn-filter-apply {
    background-color: var(--accent-color);
    color: var(--bg-body) !important;
    border: 1px solid var(--accent-color);
}

.btn-filter-apply:hover {
    background-color: #f0b90b;
    border-color: #f0b90b;
}

.btn-filter-reset {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-filter-reset:hover {
    background: var(--bg-tertiary);
    color: var(--accent-white);
    border-color: var(--border-color);
}

/* Estilos para o botão de filtro moderno */
.modern-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(252, 213, 53, 0.1);
    border: 1px solid rgba(252, 213, 53, 0.2);
    border-radius: var(--radius-std) !important;
    color: #FCD535;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    height: 40px;
}

.modern-filter-btn:hover {
    background: rgba(252, 213, 53, 0.15);
    border-color: #FCD535;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.1);
}

.modern-filter-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
} 

.filter-text {
    font-weight: 600;
    letter-spacing: 0.5px;
}
.filter-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}
.filter-select {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--bg-card-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-std);
    color: var(--accent-white);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

#filter-counter,
#group-counter,
#premium-counter,
#favorites-counter {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.3);
    color: rgba(0, 229, 255, 0.9);
}
.filter-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
    outline: none;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.filter-checkbox:hover {
    color: var(--accent-white);
}

.filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.filter-checkbox i {
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .server-toolbar .modern-menu-toggle {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }
    
    .filters-drawer-content {
        padding: 15px;
    }
    
    .filters-body {
        padding: 10px 0;
    }
    
    .filters-footer {
        flex-direction: column;
        gap: 10px;
        padding: 15px 0 0;
        margin-top: 15px;
    }
    
    .btn-filter {
        width: 100%;
        padding: 10px;
    }
    
    .filter-checkbox {
        font-size: 0.8rem;
    }
    
    .filter-select, 
    .filter-checkbox input[type="checkbox"] {
        font-size: 0.8rem;
    }
}
@media (max-width: 1400px) {
    .search-wrapper-left {
        width: 320px !important;
        max-width: 320px !important;
    }
}

@media (max-width: 1200px) {
    .search-wrapper-left {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0;
        margin-bottom: 12px;
    }
    
    .server-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .toolbar-right {
        margin-left: 0;
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }
}
.search-icon-panel {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-color);
    font-size: 0.85rem;
    pointer-events: none;
}
.rate-range-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rate-separator {
    color: var(--text-muted);
    font-weight: 700;
}

.favorites-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.favorites-sidebar-content::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: var(--radius-std);
}

.favorites-sidebar-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
}

.favorites-sidebar::-webkit-scrollbar {
    display: none;
}
#user-activity-list::-webkit-scrollbar {
    width: 6px;
}
/* Scrollbar do dropdown */
.hud-search-results::-webkit-scrollbar { width: 6px; }
.hud-search-results::-webkit-scrollbar-track { background: #0f1118; }
.hud-search-results::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 3px; }


.stats-fat-panel {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    /* height: 65px; */
    /* max-height: 65px; */
    font-family: 'Inter', sans-serif;
    /* padding-right: 5px; */
    position: relative;
}

.sf-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    gap: 4px;
}
.sf-hero-val {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #10b981;
    line-height: 1;
    letter-spacing: -1.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sf-hero-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Trend Icon (posicionado no canto superior direito) */
.sidebar-stats-section {
    position: relative;
}

#trend-servers-icons {
    display: inline-flex !important;
    font-size: 0.70rem;
    align-items: center;
}
#trend-players-icons {
    display: inline-flex !important;
    font-size: 0.70rem;
    align-items: center;
    position: absolute;
    right: -20px;
    top: 17px;
}
#stat-players-online-top > span[style*="inline-flex"] {
    position: absolute;
    top: 0px;
    display: flex !important;
    align-items: center;
    gap: 4px;
}

#stat-players-online-top .stat-trend-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.5px;
    position: relative;
    right: -125px;
    top: -2px;
}

#stat-players-online-top .stat-trend-value {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
}


.sf-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.sf-row {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    background: #1d1e24;
    padding: 6px 8px;
    gap: 12px;
}
.players-capacity {
    font-size: 0.80rem;
    color: var(--text-muted);
}
.sf-row-val {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sf-row-val .dim { font-size: 0.9em; color: #6b7280; }
.sf-row-val .highlight { color: #10b981; }

.sf-row-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.countdown-card {
    display: block;
    background: linear-gradient(145deg, #1e2329, #13171c);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    transition: transform 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
}
.countdown-card:hover {
    transform: translateY(-2px);
    border-color: #ff3e3e;
}
.countdown-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #ff3e3e, transparent);
    animation: scanline 2s linear infinite;
}
@keyframes scanline { 0% {transform: translateX(-100%);} 100% {transform: translateX(100%);} }

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: #000;
    padding: 8px 4px;
    margin: 10px 0;
    border: 1px solid #333;
}
.timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 25px;
}
.timer-box .days, .timer-box .hours, .timer-box .minutes, .timer-box .seconds {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}
.timer-box .label {
    font-size: 0.5rem;
    color: #666;
    margin-top: 2px;
}
.countdown-timer .sep {
    color: #ff3e3e;
    font-weight: bold;
    margin-top: -10px;
    animation: blink 1s infinite;
}
@keyframes blink { 50% {opacity: 0;} }
.paid-banner-link:hover img {
    transform: scale(1.02);
    border-color: #fbbf24 !important;
}


.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}




/* Trend Icons - Iconify */
.trend-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
.trend-icon.trend-up {
    color: var(--status-up) !important; /* Verde Binance para aumento */
}
.trend-icon.trend-up svg {
    stroke: var(--status-up) !important;
    color: var(--status-up) !important;
}
.trend-icon.trend-down {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1; /* Opacidade total para visibilidade */
}
.trend-icon.trend-down svg {
    stroke: var(--status-down) !important;
    color: var(--status-down) !important;
}
.trend-value {
    margin-right: 7px;
    font-size: 0.75rem !important;
    letter-spacing: 0px  !important;
}

/* Stat Trends no Painel Esquerdo */
.stat-trend-icon.stat-trend-up + .trend-value {
    color: var(--status-up) !important; /* Verde Binance para aumento */
}
.stat-trend-icon.stat-trend-down + .trend-value {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1; /* Opacidade total */
}
.trend-value.trend-up {
    color: var(--status-up) !important; /* Verde Binance para aumento */
}
.trend-value.trend-down {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1; /* Opacidade total */
}

.stat-trend-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 2px;
}

.stat-trend-icon.stat-trend-up {
    color: var(--status-up) !important;
}

.stat-trend-icon.stat-trend-up svg {
    stroke: var(--status-up) !important;
    color: var(--status-up) !important;
}

.stat-trend-icon.stat-trend-down {
    color: var(--status-down) !important;
    opacity: 1;
}

.stat-trend-icon.stat-trend-down svg {
    stroke: var(--status-down) !important;
    color: var(--status-down) !important;
}

.stat-trend-value {
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 2px;
}

.stat-trend-value.trend-up {
    color: var(--status-up) !important;
    position: relative;
    /* top: 24px; */
    right: 22px;
    margin: 0 !important;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

.stat-trend-value.trend-down {
    color: var(--status-down) !important;
    opacity: 1;
    position: relative;
     /* top: 24px; */
    right: 22px;
    margin: 0 !important;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ping-green { color: #0ECB81 !important; text-shadow: 0 0 6px rgba(14, 203, 129, 0.5); }
.ping-yellow { color: #FCD535 !important; text-shadow: 0 0 6px rgba(252, 213, 53, 0.5); }
.ping-red { color: #F6465D !important; text-shadow: 0 0 6px rgba(246, 70, 93, 0.5); }

@keyframes blinkLive { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.blinking-dot { animation: blinkLive 2s infinite; }

#clear-filters-sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.08); /* Vermelho bem suave */
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 4px; /* Pequeno radius para modernizar */
    color: rgba(239, 68, 68, 0.7);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 0;
}

#clear-filters-sidebar-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* Botão CLOSE (X) - Padronizado */
.btn-close-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6); /* Cor do ícone */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 0;
}
.btn-close-custom:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Separador Neon */
.filters-header-separator {
    width: 1px;
    height: 20px; /* Ajustei levemente para ficar harmonico com os botões de 32px */
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 229, 255, 0.4) 20%,
        rgba(0, 229, 255, 0.4) 80%,
        transparent 100%);
    margin: 0 2px; /* Pequeno respiro horizontal */
}
.custom-table tbody tr {
    background-color: #0d1117 !important;
    transition: all 0.2s ease;
}
/*statistics.php start*/
.chart-card {
    background-color: var(--bg-body-fundos);
    border: unset !important;
    box-shadow: unset !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}
.chart-header { padding: 12px 14px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.chart-title { font-size: 0.95rem; font-weight: 600; color: var(--accent-white); margin: 0; display: flex; align-items: center; }
.chart-body { padding: 14px; height: 280px; position: relative; min-height: 280px; }
.chart-no-data { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(20, 20, 20, 0.4); backdrop-filter: blur(2px); border-radius: 4px; color: var(--text-secondary); text-align: center; z-index: 10; }
.chart-no-data i { font-size: 2.5rem; margin-bottom: 15px; opacity: 0.5; color: var(--accent-color); }
.chart-no-data h5 { font-size: 1rem; font-weight: 600; margin-bottom: 5px; color: var(--accent-white); }
.chart-no-data p { font-size: 0.8rem; max-width: 80%; margin: 0 auto; opacity: 0.7; }
.chart-period-selector { display: flex; gap: 4px; }
.period-btn { padding: 4px 12px; font-size: 0.75rem; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); border-radius: 0; cursor: default; transition: all 0.2s ease; }
.period-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }
.period-btn.active { background: var(--accent-color); border-color: var(--accent-color); color: var(--accent-text); }
.chart-info { padding: 0 14px 14px; }

.code-wrap pre { 
    background: #161a1e !important; 
    padding: 1.25rem !important; 
    padding-bottom: 2rem !important;
    border-radius: 8px; 
    border: 1px solid rgba(255,255,255,0.05); 
    margin: 0; 
    overflow: auto !important;
}

.code-wrap code {
    display: block !important;
    overflow-x: auto !important;
    white-space: pre !important;
}

.code-wrap { position: relative; margin-bottom: 1.2rem; }
.code-wrap pre { font-size: 0.85rem !important; padding: 1rem !important; }
.btn-copy-code {
    position: relative;
    /* top: 17px; */
    right: 18px;
    z-index: 100;
    font-size: 0.65rem !important;
    opacity: 0.7;
    color: var(--accent-cyan);
    padding: 2px 8px !important;
    gap: 0px !important;
}

.footer-warning-box {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #ffd54f;
    display: flex;
    align-items: center;
    max-width: 70%;
}
.btn-copy-code:hover { opacity: 1; }


.table-responsive.server-table-container,
.table-responsive {
    background: transparent; /* Remove fundos cinzas do container */
    border: none;
    border-radius: 0px !important;
    margin-top: 0;
    position: relative !important;
    z-index: 2;
    overflow-x: visible; /* Permite animação radar aparecer nas bordas */
    overflow-y: visible !important; /* Importante: permite SVG ultrapassar verticalmente */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent; 
    color: inherit;
}

.no-shadow {
    box-shadow: unset !important;
}

@media (max-width: 1200px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

.row.g-3.mb-4 {
    display: flex;
    flex-wrap: wrap;
}
.panel_loading_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

.panel_loading_spinner {
    width: 2.5rem;
    height: 2.5rem;
    color: #0ECBB8;
    border-width: 3px;
}

.panel_loading_text {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.panel_empty_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.01);
}

.panel_empty_icon_wrapper {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 50%;
    background: var(--input-bg);
    border: 1px solid var(--panel-border);
}

.panel_empty_title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.panel_btn_primary {
    background-color: #0ECBB8;
    border: none;
    color: #000;
    font-size: 0.9rem;
    border-radius: 4px;
    font-weight: 700;
    padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}

.panel_btn_primary:hover {
    background-color: #0ab5a3;
    color: #000;
    transform: translateY(-1px);
}

/* --- Table Structure --- */
.panel_table {
    width: 100%;
    border-collapse: collapse;
}

.panel_thead {
    background: var(--panel-card-header);
    border-bottom: 1px solid var(--panel-border);
}

.panel_th {
    color: var(--text-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.8px;
    padding: 14px 10px;
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    vertical-align: middle;
}

.panel_th svg {
    display: inline-block;
    vertical-align: middle;
}

.panel_tbody {
    background: var(--panel-card-bg);
}

.panel_tr {
    border-bottom: 1px solid var(--panel-border);
    transition: background-color 0.2s ease;
}

.panel_tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.panel_td {
    padding: 12px 10px;
    vertical-align: middle;
}

/* --- Status Dot --- */
.panel_status_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.panel_status_dot.online {
    background: #0ECBB8;
    box-shadow: 0 0 0 2px rgba(14, 203, 184, 0.3);
}

.panel_status_dot.offline {
    background: #F6465D;
    box-shadow: 0 0 0 2px rgba(246, 70, 93, 0.3);
}

/* --- Server Info --- */
.panel_server_name {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.panel_badge_featured {
    font-size: 0.6rem;
    border-radius: 4px;
    background: rgba(14, 203, 184, 0.1);
    color: #0ECBB8;
    border: 1px solid rgba(14, 203, 184, 0.2);
    padding: 2px 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.panel_server_ip {
    color: var(--text-secondary);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
}

.panel_separator {
    color: var(--panel-border);
    margin: 0 4px;
}

/* --- Player Count Badge --- */
.panel_player_badge {
    background: var(--input-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 4px 10px;
    display: inline-block;
}

.panel_player_current {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.panel_player_max {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-left: 2px;
}

/* --- Status Text --- */
.panel_status_text {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: middle;
}

.panel_status_text.online {
    color: #0ECBB8;
}

.panel_status_text.offline {
    color: #F6465D;
}

/* --- Featured Icon --- */
.panel_featured_icon {
    color: #FCD535;
    fill: #FCD535;
    display: inline-block;
    vertical-align: middle;
}

/* --- Icon Buttons (Offline/Online Notifications) --- */
.panel_icon_btn {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 0;
    padding: 0;
    cursor: default;
    vertical-align: middle;
}

.panel_icon_btn:hover:not(:disabled) {
    border-color: #0ECBB8;
    color: #0ECBB8;
}

.panel_icon_btn.active {
    background: rgba(14, 203, 184, 0.15);
    border-color: #0ECBB8;
    color: #0ECBB8;
}

.panel_icon_btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Action Buttons (New Style) --- */
.panel_action_btn_icon {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 0;
    padding: 0;
    text-decoration: none;
    cursor: default;
    vertical-align: middle;
}

.panel_action_btn_icon.edit:hover { 
    color: #0ECBB8; 
    border-color: #0ECBB8; 
}

.panel_action_btn_icon.view:hover { 
    color: #FCD535; 
    border-color: #FCD535; 
}

.panel_action_btn_icon.delete:hover { 
    color: #F6465D; 
    border-color: #F6465D; 
}

/* --- Switch Toggle Custom --- */
.panel_switch {
    cursor: pointer;
    width: 36px;
    height: 20px;
    border-color: transparent !important;
    background-color: #2B3139; /* Cor base desligado */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    transition: background-color 0.2s ease-in-out;
}

.panel_switch:checked {
    background-color: #0ECBB8;
    border-color: transparent;
}

/* --- Action Buttons Group --- */
.panel_action_btn {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* Arredondamento dos botões agrupados */
.panel_action_btn:first-child { border-radius: 4px 0 0 4px; }
.panel_action_btn:not(:first-child):not(:last-child) { border-left: none; border-right: none; }
.panel_action_btn:last-child { border-radius: 0 4px 4px 0; }

/* Cores específicas no Hover */
.panel_action_btn.edit:hover { color: #0ECBB8; border-color: #0ECBB8; z-index: 2; }
.panel_action_btn.view:hover { color: #FCD535; border-color: #FCD535; z-index: 2; }
.panel_action_btn.delete:hover { color: #F6465D; border-color: #F6465D; z-index: 2; }

.panel_card {
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borda sutil */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    overflow: hidden;
}

.panel_header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(90deg, rgba(14, 203, 184, 0.03) 0%, transparent 100%); /* Glow Ciano ultra leve na esquerda */
    position: relative;
}

.panel_header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #0ECBB8; /* Barra lateral ciano */
    box-shadow: 2px 0 10px rgba(14, 203, 184, 0.3);
}

/* Ícone do Cabeçalho */
.panel_header_icon_box {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 203, 184, 0.1);
    border: 1px solid rgba(14, 203, 184, 0.2);
    border-radius: 8px;
    color: #0ECBB8;
    margin-right: 16px;
}

/* Textos do Cabeçalho */
.panel_header_title {
    margin: 0;
    font-family: 'Rajdhani', sans-serif; /* Fonte técnica */
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.panel_header_subtitle {
    margin: 2px 0 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Botão de Adicionar (Estilo Tech) */
.panel_btn_add {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.panel_btn_add:hover {
    border-color: #0ECBB8;
    background: rgba(14, 203, 184, 0.05);
    color: #0ECBB8;
    box-shadow: 0 0 15px rgba(14, 203, 184, 0.15);
    transform: translateY(-1px);
}

/* Corpo do Painel */
.panel_body {
    padding: 0; /* Zero padding para a tabela encostar nas bordas */
}
/* panel servers end */


/* PROGRESS BAR start */
.turbo-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #00E5FF, #00b8d4);
    z-index: 999999;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.3);
    pointer-events: none;
}

/* Animação de pulso quando está carregando */
@keyframes turbo-progress-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.7), 0 0 30px rgba(0, 229, 255, 0.5);
    }
}

.turbo-progress-bar[style*="opacity: 1"] {
    animation: turbo-progress-pulse 1.5s ease-in-out infinite;
}

/* Previne flash branco durante transições */
html, body {
    background-color: color-mix(in oklab, color-mix(in oklab, var(--bg-body-fundos), white 3%), transparent 15%);
    color: var(--text-primary, #EAECEF);
}

/* Smooth fade para o conteúdo principal */
#app-shell {
    transition: opacity 150ms ease;
    will-change: opacity;
    background: #0f1216;
}

/* Durante navegação Turbo */
body.turbo-navigating #app-shell {
    opacity: 0.98;
}



[data-turbo-permanent] {
    contain: layout style;
}

#main-navbar[data-turbo-permanent],
#favorites-sidebar[data-turbo-permanent] {
    transition: none !important;
}

[data-turbo-permanent] {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Otimiza rendering durante transições */
.turbo-transitioning {
    pointer-events: none;
}

.turbo-transitioning * {
    pointer-events: none;
}

@media (max-width: 768px) {
    .turbo-progress-bar {
        height: 2px;
    }
}
 
@media (prefers-reduced-motion: reduce) {
    .turbo-progress-bar {
        transition: none;
        animation: none;
    }
    
    #app-shell {
        transition: none;
    }
}
/* PROGRESS BAR end */

.glass-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 29, 35, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 8px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.glass-loader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Spinner personalizado (cyan) */
.glass-loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 229, 255, 0.1);
    border-top-color: #00E5FF;
    border-radius: 50%;
    animation: glass-loader-spin 0.8s linear infinite;
}

@keyframes glass-loader-spin {
    to { transform: rotate(360deg); }
}

/* Texto abaixo do spinner */
.glass-loader-text {
    margin-top: 16px;
    color: #00E5FF;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* Animação de pulso no texto */
.glass-loader-text {
    animation: glass-loader-pulse 2s ease-in-out infinite;
}

@keyframes glass-loader-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Variante para tabelas específicas */
.server-table-container {
    position: relative;
    min-height: 400px;
}

/* Previne layout shift */
.server-table-container .glass-loader-overlay {
    min-height: 400px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .glass-loader-spinner {
        width: 40px;
        height: 40px;
    }
    
    .glass-loader-text {
        font-size: 0.85rem;
    }
}

/* Respeita preferências de movimento */
@media (prefers-reduced-motion: reduce) {
    .glass-loader-spinner {
        animation: none;
        border-top-color: #00E5FF;
        border-right-color: #00E5FF;
    }
    
    .glass-loader-text {
        animation: none;
        opacity: 1;
    }
}

/* Modo escuro extra (se necessário) */
body.dark-mode .glass-loader-overlay {
    background: rgba(10, 12, 16, 0.85);
}
/* GLASS LOADER - end */


/* CHECK REDUNDANCIAS */


/* 2. Regra para quando as luzes estiverem desligadas */
body.no-ambient-light .logo-text {
    /* Remove o brilho neon forte */
    text-shadow: none !important;
    
    /* Opcional: Deixar levemente cinza para não ofuscar tanto no escuro, 
       ou manter #FFFFFF se preferir o contraste alto */
    color: #e0e0e0 !important; 
}

/* 3. (Opcional) Se a caixa em volta do logo também tiver brilho */
.logo-neon-box {
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}


body.no-ambient-light .logo-neon-box {
    box-shadow: none !important;
    border-color: #4a8389 !important; /* Cor de borda fosca */
}


/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

a {
    color: var(--accent-primary);
}
a:hover {
    color: var(--accent-hover);
}

html {
    width: 100%;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* Funciona em Chrome, Edge, Safari e Opera */
::-webkit-scrollbar {
    width: 8px;  /* Largura da barra vertical */
    height: 8px; /* Altura da barra horizontal */
}

::-webkit-scrollbar-track {
    background: #0b0e11; /* Cor do fundo do trilho (Bem escuro) */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--tibialist-cyan);
    border-radius: 4px;
    border: 2px solid #0b0e11;
}

::-webkit-scrollbar-thumb:hover {
    background: #F0B90B; /* Amarelo um pouco mais escuro no hover */
}


* {
    box-sizing: border-box;
    scrollbar-color: #3f4143 #141921;
}

/* --- Gray (Estilo History / Secundário) --- */
.gray-button {
    background: #2B3139 !important;
    color: #EAECEF !important;
    font-weight: 600;
    padding: 8px !important;
    border-radius: 0px;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.gray-button:hover {
    background: rgba(14, 203, 184, 0.05) !important;
    color: #0ECBB8 !important;
    border-color: #0ECBB8;
}
:root {
    --shop-accent: oklch(82.8% 0.189 84.43); /* Dourado/Amarelo */
    --tab-inactive: oklch(0.65 0 0); /* Cinza suave */
    --tab-bg-hover: color-mix(in oklab, white 5%, transparent);
}

#btn-claim-delete {    
    border-color: rgba(237, 66, 69, 0.5);
    color: #ED4245 !important;
    height: 42px;
    background: #ed424521 !important;
    font-weight: 600;
    padding: 8px 18px !important;
    border-radius: 0px !important;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
#btn-claim-delete:hover {

    color: #ffb7b8 !important;
    background: #ed42456b !important;
}

.shop-navigation-container {
    display: flex;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in oklab, white 10%, transparent);
    overflow-x: auto; /* Scroll horizontal em telas pequenas */
}
 

/* Ajuste do Spinner para combinar com o tema */
.spinner-border.text-warning {
    --bs-spinner-color: var(--shop-accent);
}

/* --- Yellow (Estilo BUY / Primário) --- */
.yellow-button {
    background-color: var(--accent-primary) !important;
    color: #181A20 !important;
    font-weight: 600;
    padding: 8px !important;
    border-radius: 0px;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.yellow-button:hover {
    filter: brightness(1.1);
}
/* Botão Verde (Cyan/Teal) */
.green-button {
    background: #0ECBB8 !important;
    color: #000 !important;
    font-weight: 600;
    padding: 8px !important;
    border-radius: 0px;
    border: 1px solid #0ECBB8;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
}
.green-button:hover {
    background: #0DB5A6 !important;
    color: #000 !important;
    border-color: #0DB5A6;
    filter: brightness(1.1);
}

/* Transformando o botão vermelho em VERDE SUCESSO */
.red-muted-button {
    background: #0ECBB8 !important; /* Cyan/Teal */
    border: 1px solid #10b981 !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2); /* Sombra verde */
    transition: all 0.3s ease;
}

.red-muted-button:hover {
    background-color: #059669 !important; /* Verde mais escuro no hover */
    border-color: #059669 !important;
    color: #FFFFFF !important;
    
    /* ALTERAÇÃO: Scale aumenta o tamanho proporcionalmente */
    transform: scale(1.05); 
    
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.4);
}

.red-muted-button:active {
    /* Efeito de "clique": diminui um pouco para dar sensação tátil */
    transform: scale(0.98); 
    
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4);
}
/* --- Cyan --- */
.cyan-button {
    background-color: #0891b2 !important;
    color: #FFFFFF !important;
}
.cyan-button:hover {
    background-color: #0e7490 !important;
}

/* --- Red --- */
.red-button {
    background-color: #dc2626 !important;
    color: #FFFFFF !important;
}
.red-button:hover {
    background-color: #b91c1c !important;
}

/* --- Purple --- */
.purple-button {
    background-color: #7c3aed !important;
    color: #FFFFFF !important;
}
.purple-button:hover {
    background-color: #6d28d9 !important;
}

/* --- Green --- */
.green-button {
    background-color: #16a34a !important;
    color: #FFFFFF !important;
}
.green-button:hover {
    background-color: #15803d !important;
}

.green-transparent-button {
    background-color: oklch(79.2% .209 151.711) !important;
    color: oklch(79.2% .209 151.711) !important;
}
.green-transparent-button:hover {
    background-color: #15803d !important;
}


/* --- Blue --- */
.blue-button {
    background-color: #2563eb !important;
    color: #FFFFFF !important;
}
.blue-button:hover {
    background-color: #1d4ed8 !important;
}


.editor-icon-box {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, rgba(139, 92, 246, 0) 70%);
    border-radius: 50%; /* Torna o brilho circular em vez de quadrado */
    padding: 20px;
}
.fixedWidth130Button {
    width: 130px !important;
}
.fixedWidth140Button {
    width: 140px !important;
}
.fixedWidth170Button {
    width: 170px !important;
}
.toolbar-left {
    display: flex;
    width: 100%;
    gap: 6px;
    flex-wrap: wrap;
}

.toolbar-left .btn-square-outline,
.toolbar-left .btn-control {
    flex: 0 1 auto;
    min-width: auto;
    height: 38px;
    padding: 0 14px !important;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    
    /* Configuração de Borda e Fundo */
    border-width: 1px;
    border-style: solid;
}

@media (max-width: 992px) {
    .toolbar-left {
        flex-wrap: wrap;
    }
    .toolbar-left .btn-square-outline {
        min-width: 45%; /* Em tablets, divide em 2 colunas */
    }
}

/* Botão DEFAULT com cor Amber (quando há filtros ativos) */
.btn-default-amber {
    background: var(--text-gray-dark) !important;
    border-color: rgba(240, 185, 11, 0.5) !important; /* Amber mais suave */
    color: rgba(240, 185, 11, 0.8) !important; /* Amber mais suave */
    transition: all 0.3s ease, opacity 0.3s ease !important; /* Adicionar transição de opacity */
}

.btn-default-amber:hover {
    background: var(--accent-hover) !important;
    border-color: rgba(240, 185, 11, 0.7) !important;
    color: var(--accent-text) !important;
}

.btn-default-amber.active {
    background: #F0B90B !important; /* Amber */
    border-color: #F0B90B !important;
    color: var(--accent-text) !important;
}

#clear-filters-drawer-btn:hover {
    border-color: var(--status-down);
    color: var(--status-down) !important;
    background-color: #ff0a0a1c;  
}

/* ========================
   BOTÕES (FIM)
   ======================== */


/* ============================================================================
   TOOLBAR BUTTONS
   ============================================================================ */
.green-outline-btn {
    color: oklch(79.2% .209 151.711) !important;
    background-color: color-mix(in oklab, oklch(79.2% .209 151.711) 5%, transparent) !important;
    border-color: color-mix(in oklab, oklch(79.2% .209 151.711) 50%, transparent) !important;
}
.green-outline-btn:hover {
    background-color: color-mix(in oklab, oklch(76.5% .177 163.223) 15%, transparent) !important;
    color: oklch(79.2% .209 151.711) !important;
}

.btn-square-outline,  
.transparent-button,
.btn-control {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
    color: rgba(132, 142, 156, 0.7) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    cursor: default;
    text-decoration: none;
    outline: none !important;
    white-space: nowrap;
    position: relative;
    user-select: none;
}

/* 2. MOUSE HOVER: Sutil e elegante */
.btn-square-outline:hover, 
.transparent-button:hover,
.btn-control:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(234, 236, 239, 0.85) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.btn-control:hover svg,
.btn-control:hover i {
    opacity: 0.9;
}

/* 2.5. ACTIVE/PRESSED STATE (Feedback tátil ao clicar) */
.btn-control:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* 5. ESTADO DESABILITADO (MUTED) */
.btn-square-outline.muted,
.transparent-button.muted,
.btn-control.muted,
.disabled-state {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* 6. AJUSTE DE ÍCONES SVG E FONTAWESOME */
.btn-square-outline svg,
.transparent-button svg,
.btn-control svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.btn-control i {
    font-size: 13px;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.btn-square-outline:hover svg,
.btn-control:hover svg {
    transform: scale(1.05);
    opacity: 1;
}

.btn-control:hover i {
    opacity: 1;
}

/* Ícones nos botões ativos ficam mais visíveis */
.btn-control.active svg,
.btn-control.active i {
    opacity: 1;
}


/* ============================================================================
   DOWNLOAD BUTTONS STANDARDIZATION
   ============================================================================ */

/* Classe base para todos os botões de download cards */
.btn-download-card {
    width: 100%;
    height: 42px; /* Altura fixa e confortável */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    border-radius: var(--radius-std);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    margin-top: auto; /* Empurra para o rodapé do card */
}

/* Variante: Select Version (Outline Blue/Cyan) - Usado em Clients e Bytes */
.btn-download-card.view-versions {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.btn-download-card.view-versions:hover {
    background: rgba(0, 229, 255, 0.1);
    border-color: var(--tibialist-cyan);
    color: var(--tibialist-cyan);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}

/* Variante: Download Now (Solid Green) - Usado quando tem licença */
.btn-download-card.download-now {
    background: var(--status-up); /* Verde */
    color: #000;
    border-color: var(--status-up);
}

.btn-download-card.download-now:hover {
    background: #0db874;
    border-color: #0db874;
    box-shadow: 0 0 15px rgba(14, 203, 129, 0.4);
}

/* Variante: Get License/Buy (Solid Yellow/Info) */
.btn-download-card.get-license {
    background: rgba(252, 213, 53, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-download-card.get-license:hover {
    background: var(--accent-primary);
    color: #000;
    box-shadow: 0 0 15px rgba(252, 213, 53, 0.3);
}

/* Variante: Panel (Solid Blue) */
.btn-download-card.access-panel {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-download-card.access-panel:hover {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

/* Variante: Disabled / Coming Soon */
.btn-download-card.disabled-btn {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

/* NAO SE LIVRAR DESSE TRECHO - É PARA EFEITO DE CARTA NO SHUFFLE START */
#servers-tbody {
    position: relative;
}
.server-row-reordering {
    background-color: color-mix(in oklab, var(--bg-body) 95%, #34d399 5%) !important;
    border-color: rgba(52, 211, 153, 0.2) !important;
    pointer-events: none; /* Evita hover acidental durante o movimento */
}
#servers-tbody tr {
    will-change: transform;
    backface-visibility: hidden;
}
/* NAO SE LIVRAR DESSE TRECHO - É PARA EFEITO DE CARTA NO SHUFFLE END */

/* NAO SE LIVRAR DESSE TRECHO - START */
/* ==================================================================
   FOCUS MODE MASTER CSS (FINAL v6 - FIXED LAYOUT STRATEGY)
   ================================================================== */

/* 1. Limpeza: Esconde tudo que não é o foco */
body.filters-focus-mode nav,
body.filters-focus-mode .serverlist-hero-section,
body.filters-focus-mode #site-footer,
body.filters-focus-mode #recent-servers-section,
body.filters-focus-mode #footer-spy-mascot,
body.filters-focus-mode #local-favorites-sidebar {
    display: none !important;
}

/* 2. Cortina Preta de Fundo */
body.filters-focus-mode::after {
    content: '';
    position: fixed;
    inset: 0; /* Top, Right, Bottom, Left = 0 */
    background-color: rgba(5, 5, 5, 0.95); /* Preto quase total */
    z-index: 45; 
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

body.filters-focus-mode #server-list-container {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 350px !important;
    width: calc(100% - 400px) !important;
    height: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    z-index: 150 !important; /* Acima da cortina e do canvas de filtros */
    display: flex !important;
    flex-direction: column !important;
    
    /* VISUAL: Borda Emerald Neon + Glow */
    border: 0 !important; /* Reseta bordas antigas */
    border-left: 2px solid #10b981 !important; /* Apenas a borda de contato */
    box-shadow: -10px 0 50px rgba(16, 185, 129, 0.15) !important;
    
    border-radius: 0 !important;
    background-color: #14181d !important;
    pointer-events: auto !important;
}

/* 4. Ajustes Internos da Lista */
body.filters-focus-mode #server-list-container > div:first-child { /* Toolbar */
    border-radius: 0 !important;
    border-top: none !important;
    background-color: #161b22 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.filters-focus-mode .table-responsive {
    flex: 1 !important; /* Ocupa altura restante */
    height: auto !important;
    overflow-y: auto !important; /* Scroll interno na lista */
    border-radius: 0 !important;
    background-color: #14181d !important;
    border: none !important;
}

/* 5. Menu de Filtros (Topo da Hierarquia) */
#filtersMenuCanvas {
    z-index: 100 !important;
    position: fixed !important;
    inset: 0;
    pointer-events: none;
}

#filtersMenuPanel {
    pointer-events: auto !important;
    position: absolute !important;
    z-index: 101 !important;
    box-shadow: 5px 0 30px rgba(0,0,0,0.5) !important;
}

/* Quando o menu está aberto no desktop (focus mode), permitir position fixed do JS */
body.filters-focus-mode #filtersMenuPanel {
    position: fixed !important;
    z-index: 10000 !important;
}

/* Esconde backdrop do filtro pois já temos a cortina global */
#filtersMenuBackdrop {
    display: none !important; 
}

#advanced-search-form .custom-dropdown-menu {
    display: none;
}
#advanced-search-form .custom-dropdown-menu.show {
    display: block !important;
}

#advanced-search-form .custom-dropdown-trigger > span {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

@media (max-width: 1024px) {
    body.filters-focus-mode #server-list-container {
        left: 0 !important; /* Em mobile, a lista cobre tudo se o menu fechar */
        z-index: 40 !important; /* Fica abaixo do menu mobile */
    }
}

#recent-servers-section {
    position: relative;
    padding: 110px 0 50px 0;
    background: #0f1216;
    width: 100%;
    overflow: hidden;
}

/* Divisória Neon Moderna (Linha de Luz) */
.rec_glow_divider {
    height: 1px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px auto;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 229, 255, 0.6) 30%, /* Cyan */
        #ffffff 50%,                /* Núcleo Branco */
        rgba(252, 213, 53, 0.6) 70%, /* Amarelo */
        transparent 100%
    );
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
    opacity: 0.8;
}

.rec_section_header {
    text-align: center;
    margin-bottom: 40px;
}

/* Título Limpo (Sem ícone de raio aqui, controlado via JS) */
.rec_page_title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900;
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

/* --- 2. SLIDER FULL WIDTH --- */
#recently-updated-servers {
    width: 100%;
    position: relative;
    max-width: 100% !important; /* Força largura total da tela */
    margin: 0;
    padding: 0;
}

.rec_slider_wrapper {
    position: relative;
    width: 100%;
    /* Máscara suave nas bordas extremas da tela */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}

.rec_slider_track {
    display: flex;
    gap: 20px;
    padding: 20px 0px; 
    
    overflow-x: auto;
    scroll-behavior: smooth;
    justify-content: flex-start;
    scrollbar-width: none;
    user-select: none;
}

/* Remove a suavidade APENAS durante o arrasto manual para ser instantâneo */
.rec_slider_track.is-dragging {
    scroll-behavior: auto !important;
    cursor: grabbing;
}

.rec_slider_track::-webkit-scrollbar { display: none; }

.rec_slide_item {
    min-width: 280px;
    max-width: 280px;
    flex: 0 0 auto;
    transform: translateZ(0);
}

.rec_card_ref {    
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px !important;
    
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 170px;
    position: relative;    
    box-shadow: none !important;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.rec_card_ref:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* DESTAQUE (FEATURED): Apenas Borda Amarela, Fundo IGUAL */
.rec_card_ref.rec_highlighted {
    border: 1px solid var(--tibialist-cyan) !important;
}
.rec_featured_badge {
    background-color: var(--tibialist-cyan);
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    display: inline-block;
    width: fit-content;
    
    margin-bottom: 5px; 
}

.rec_ref_header {
    background: linear-gradient(90deg, rgba(0, 242, 234, 0.08) 0%, rgba(0, 242, 234, 0.04) 50%, transparent 100%);
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px 10px 0px 0px;
}
.rec_subtitle {
    color: var(--text-secondary);
}
.rec_flag_wrapper {
    width: 32px; height: 24px; flex-shrink: 0; border-radius: 2px; overflow: hidden; opacity: 0.9;
}
.rec_flag_full_height { width: 100%; height: 100%; object-fit: cover; }

.rec_ref_titles { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 2px; }

.rec_ref_name_link {
    font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; color: #e2e8f0;
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.2s; cursor: pointer;
}
.rec_ref_name_link:hover { color: #fff; }

/* REGRA NOVA: Se o card for destaque, o nome fica AMARELO */
.rec_card_ref.rec_highlighted .rec_ref_name_link {
    color: var(--tibialist-cyan) !important;
}

.rec_ref_ip {
    font-family: 'Consolas', monospace; font-size: 0.7rem; color: #94a3b8; letter-spacing: 0.5px;
    user-select: text !important; cursor: text;
}

.rec_server-link-btn {
    color: var(--text-secondary);
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px; transition: all 0.2s; cursor: pointer; flex-shrink: 0;
}
.rec_server-link-btn:hover { 
    color: #00E5FF; border-color: #00E5FF; background: rgba(0, 229, 255, 0.1); 
}
.rec_server-link-btn svg { width: 14px; height: 14px; }

/* --- 5. BODY DO CARD (LIMPO) --- */
.rec_ref_body {
    padding: 12px 15px 10px 15px;
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
}

/* Linha de Stats (Online / Players / Version) */
.rec_ref_stats_row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    /* Empurra para o fundo, mantendo o alinhamento visual perfeito */
    margin-top: auto; 
    padding-bottom: 12px;
}

.rec_stat_item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #cbd5e1; font-weight: 600; }
.rec_stat_item i { 
    font-size: 0.9rem; 
    color: #64748b !important; /* Ícones cinzas */
    opacity: 0.8;
}

.rec_status_dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; box-shadow: none !important; }
.dot-online { background-color: #10b981; }
.dot-offline { background-color: #ef4444; }
.text-online { color: #10b981; font-weight: 600; font-size: 0.75rem; }
.text-offline { color: #ef4444; font-weight: 600; font-size: 0.75rem; }

.rec_ref_footer_row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500; 
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.rec_meta_item { display: flex; align-items: center; gap: 6px; }
.rec_meta_item i { opacity: 0.5; font-size: 0.8rem; }

/* --- 6. DRAG HANDLE (DISCRETO) --- */
.rec_drag_handle {
    height: 18px;
    background: #ffffff08;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: background 0.2s;
    margin-top: 5px;
}
.rec_drag_handle:hover { background: rgba(255, 255, 255, 0.02); }
.rec_drag_handle:active { cursor: grabbing; }

.rec_handle_icon {
    width: 24px; height: 3px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.1);
}
.rec_drag_handle:hover .rec_handle_icon { background-color: rgba(255, 255, 255, 0.2); }

.rec_nav_btn {
    position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
    background: var(--nav-bars); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff;
    border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; box-shadow: none !important;
    
    opacity: 0; visibility: hidden;
}
.rec_slider_wrapper:hover .rec_nav_btn { opacity: 1; visibility: visible; }

.rec_nav_btn:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); }
.rec_prev { left: 10px; }
.rec_next { right: 10px; }

/* Dots */
.rec_slider_dots { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.rec_dot_nav {
    width: 6px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; cursor: pointer; transition: all 0.3s;
    box-shadow: none !important;
}
.rec_dot_nav:hover { background: rgba(255, 255, 255, 0.3); }
.rec_dot_nav.active {
    background: var(--tibialist-cyan);
    transform: scale(1.1);
}

/* RECENTLY SERVERS END */
/* CHECK REDUNDANCIAS */



/* =========================================
   INFO HUB & SEO SECTION (Text Filler)
   ========================================= */

.serverlist-info-hub {
    margin-top: 50px;
    padding: 30px 15px 50px 15px; /* Padding extra embaixo pro mobile */
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.2) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Header com Linhas */
.info-hub-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.hub-line {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    max-width: 100px;
}

.hub-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.hub-title .text-highlight {
    color: var(--accent-primary); /* Amarelo/Gold */
}

/* Grid de Textos */
.info-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Card de Texto Individual */
.hub-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
}

.hub-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.hub-icon {
    font-size: 1.2rem;
    color: var(--accent-cyan, #00E5FF); /* Cyan */
    margin-bottom: 12px;
    opacity: 0.8;
}

.hub-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hub-card p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary); /* Cinza claro */
    margin: 0;
    text-align: justify;
}

.hub-card p strong {
    color: #e2e8f0;
    font-weight: 600;
}

.hub-card p em {
    color: var(--text-muted);
    font-style: normal;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* Tags no Rodapé da Seção */
.info-hub-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    opacity: 0.5;
}

.hub-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    transition: all 0.2s;
    cursor: default;
}

.hub-tag:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: rgba(252, 213, 53, 0.05);
}

/* Ajustes Mobile */
@media (max-width: 768px) {
    .serverlist-info-hub {
        margin-top: 30px;
        border-top: none; /* Remove borda superior no mobile para fluir melhor */
        background: transparent; /* Remove background pesado no mobile */
    }
    
    .hub-title {
        font-size: 1rem;
    }
    
    .info-hub-grid {
        grid-template-columns: 1fr; /* Uma coluna no celular */
        gap: 15px;
    }
    
    .hub-card {
        padding: 15px;
    }
}

.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}
 
.section-top .section-content > div > div > div {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.section-top * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.section-top [class*="w-screen"],
.section-top [style*="width: 100vw"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Tree Lines SVG Styling */
#server-group-connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Fica atrás das linhas da tabela */
}

#server-group-connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permite clicar nos botões abaixo da linha */
    z-index: 40 !important; /* Abaixo do header (z-index 200), acima das rows */
    overflow: visible !important;
}

.tree-path-base {
    fill: none;
    stroke: #2b2d31; /* Cor do trilho */
    stroke-width: 4px;
    stroke-linecap: round;
    opacity: 0.5;
}
 
/* Bolinha na ponta do filho */
.tree-node-dot {
    fill: #00d2ff;
    r: 3px;
    filter: drop-shadow(0 0 4px rgba(0, 210, 255, 0.8));
}
.tree-node-joint {
    fill: #2b2d31;
    stroke: #00d2ff;
    stroke-width: 1px;
}
.tree-path-flow {
    fill: none;
    stroke: #00ffab;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 10, 15; 
    animation: treeFlow 2s linear infinite; 
    filter: drop-shadow(0 0 3px rgba(0, 210, 255, 0.6));
    opacity: 0.8;
    will-change: stroke-dashoffset; 
}
@keyframes treeFlow {
    from { stroke-dashoffset: 250; } 
    to { stroke-dashoffset: 0; }
}
.server-connections-svg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
}

.server-group-sub {
    z-index: 1;
}

/* Menu de Contexto */
.custom-context-menu {
    display: none;
    position: fixed;
    z-index: 99999;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    padding: 4px;
    min-width: 140px;
}
.custom-context-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    color: #d4d4d8;
    font-size: 12px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.custom-context-menu button:hover { background: #27272a; color: white; }
.custom-context-menu button.danger:hover { background: rgba(220, 38, 38, 0.2); color: #f87171; }
 
/* Players é a 8ª coluna */
th.sortable:nth-child(8), 
th.sortable:nth-child(n+9) {
    gap: 6px;
    width: 100%;
    text-align: right;
}

th.sortable:nth-child(n+8)::after {
    margin-left: 4px;
}

th.sortable:nth-child(2),
th.sortable:nth-child(3) {
    justify-content: center;
}

th.sortable::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3C/svg%3E");
    transition: opacity 0.2s, transform 0.2s;
}

th.sortable:hover::after {
    opacity: 0.7;
}

th.sortable.asc::after {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E");
}

th.sortable.desc::after {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M19 12l-7 7-7-7'/%3E%3C/svg%3E");
}
/* Animação do fluxo da árvore (opcional) */
@keyframes treeFlow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }



/* ============================================
   BOTÕES DE CONTROLE DA SERVERLIST
   Design minimalista e moderno
   ============================================ */

/* Reset e base para todos os botões */
.toolbar-left button {
    background: var(--bg-card-secondary) !important;
    border-color: var(--border-color) !important;
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    min-width: 90px;
    height: 28px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 0;
    border: 1px solid transparent;
    color: #9CA3AF;
    cursor: default;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

/* Hover state */
.toolbar-left button:hover {
    background: color-mix(in oklab, #404143 100%, white) !important;
    color: #D1D5DB;
}

/* Ícones e SVG */
.toolbar-left button svg,
.toolbar-left button i {
    width: 10px;
    height: 10px;
    font-size: 9px;
    transition: color 0.15s ease, stroke 0.15s ease;
}

 
.toolbar-left button .filter-badge.hidden:empty,
#group-servers .filter-badge.hidden:empty,
#group-servers_safe .filter-badge.hidden:empty,
#highlighted-servers-only .filter-badge.hidden:empty,
#favorites-only .filter-badge.hidden:empty,
#favorites-only_safe .filter-badge.hidden:empty,
#shuffle-servers-btn .filter-badge.hidden:empty,
#highlighted-servers-only_safe .filter-badge.hidden:empty,
#shuffle-servers-btn_safe .filter-badge.hidden:empty {
    display: none !important;
}

.toolbar-left button .filter-badge:not(:empty),
#group-servers .filter-badge:not(:empty),
#group-servers_safe .filter-badge:not(:empty),
#highlighted-servers-only .filter-badge:not(:empty),
#favorites-only .filter-badge:not(:empty),
#favorites-only_safe .filter-badge:not(:empty),
#shuffle-servers-btn .filter-badge:not(:empty),
#highlighted-servers-only_safe .filter-badge:not(:empty),
#shuffle-servers-btn_safe .filter-badge:not(:empty) {
    display: inline-flex !important;
}

#group-servers,
#group-servers_safe,
#highlighted-servers-only,
#favorites-only,
#favorites-only_safe,
#shuffle-servers-btn,
#highlighted-servers-only_safe,
#shuffle-servers-btn_safe {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #1a2027;
}

/* Container Ativo */
#group-servers.active,
#group-servers_safe.active,
#highlighted-servers-only.active,
#favorites-only.active,
#favorites-only_safe.active,
#shuffle-servers-btn.active,
#highlighted-servers-only_safe.active,
#shuffle-servers-btn_safe.active {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important; /* Cor padrão do container */
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    transition: all 0.3s ease;
}

#group-servers.active span,
#group-servers_safe.active span,
#highlighted-servers-only.active span,
#favorites-only.active span,
#favorites-only_safe.active span,
#shuffle-servers-btn.active span,
#highlighted-servers-only_safe.active span,
#shuffle-servers-btn_safe.active span {
    color: var(--color-emerald-500) !important;
}

#group-servers:hover,
#highlighted-servers-only:hover,
#favorites-only:hover,
#shuffle-servers-btn:hover {
    background-color: #232b36;
    cursor: pointer;
}

#default-sort-btn {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    display: none;
}
#reset-btn.active:hover svg {
   fill: inherit;
}

 
.clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: #363940;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    color: #E5E7EB;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: default;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin-top: 16px;
}

.clear-button:hover {
    background: color-mix(in oklab, #363940 90%, white);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.2);
}

.clear-button::before {
    content: '✕';
    font-size: 12px;
    font-weight: 700;
}

/* ============================================
   BOTÕES DE PAGINAÇÃO
   ============================================ */

#toolbar-pagination button,
#pagination-container button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    min-width: 28px;
    height: 28px;
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    
    background: var(--bg-card-secondary);
    border: 1px solid transparent;
    border-radius: 0;
    cursor: default;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

#toolbar-pagination button:hover:not(:disabled),
#pagination-container button:hover:not(:disabled) {
    background: color-mix(in oklab, #2B3139 85%, white);
    color: #D1D5DB;
}

#toolbar-pagination button.active,
#pagination-container button.active {
    background: #2B3139 !important;
    border-color: #00E5FF !important;
    color: #00E5FF !important;
}

#toolbar-pagination button:disabled,
#pagination-container button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Ícones SVG nas setas */
#toolbar-pagination button svg,
#pagination-container button svg {
    width: 10px;
    height: 10px;
    transition: stroke 0.15s ease;
}

/* ============================================
   SELETOR PER PAGE
   ============================================ */

.filter-badge {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.3);
    color: rgba(0, 229, 255, 0.9);
    padding: 0px 4px 0px 4px;
}

.per-page-selector select {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 24px 5px 10px;
    min-width: 60px;
    height: 28px;
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    
    background: var(--bg-card-secondary);
    border: 1px solid transparent;
    border-radius: 0;
    cursor: default;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    
    /* Seta dropdown customizada */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.per-page-selector select:hover {
    background-color: color-mix(in oklab, #2B3139 85%, white);
    color: #D1D5DB;
}

.per-page-selector select:focus {
    outline: none;
    border-color: #00E5FF;
    color: #00E5FF;
}

.per-page-selector select option {
    background: #1E2329;
    color: #9CA3AF;
    padding: 8px;
}


/* Utilitários de Transição */
.fade-out { opacity: 0; transition: opacity 0.4s; }
.show { opacity: 1; transition: opacity 0.4s; }


/* =========================================
   BUTTONS & BADGES
   ========================================= */
.disabled-favorite {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(100%);
    cursor: not-allowed;
}

/* Grid de Badges Fixos (Topo) */
.server-badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 6px;
    width: 100%;
}

.server-badge-fixed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.2s;
}


/* =========================================
   LOGO WRAPPER & VISUAL EFFECTS
   ========================================= */

/* Efeitos de Bolhas (Stat Update) */
.stat-effect-bubble { position: absolute; bottom: -10px; border-radius: 50%; opacity: 0; pointer-events: none; animation: bubbleFloatUp linear forwards; z-index: 10; }
.stat-effect-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: 800; pointer-events: none; z-index: 11; text-shadow: 0 2px 10px rgba(0,0,0,0.5); animation: textFloatFade 2s ease-out forwards; white-space: nowrap; }
.effect-positive { background-color: var(--emerald-primary); box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }
.text-positive { color: var(--emerald-primary); }
.effect-negative { background-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); }
.text-negative { color: #ef4444; }

@keyframes bubbleFloatUp { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-150px) scale(1.2); opacity: 0; } }
@keyframes textFloatFade { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 20% { transform: translate(-50%, -80%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1); opacity: 0; } }

/* Animação da Flag (País) */
@keyframes flagEntrance {
    0% { transform: translateY(-20px) scale(0.8); opacity: 0; }
    50% { transform: translateY(0) scale(1.1); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.flag-animated-large {
    width: 32px !important;
    height: auto !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: flagEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* =========================================
   LOGO WRAPPER & REVEAL EFFECT
   ========================================= */

/* --- Bandeira "Cortina" (Cobre tudo e some) --- */
@keyframes revealFade {
    0% { opacity: 1; transform: scale(1); visibility: visible; }
    30% { opacity: 1; transform: scale(1.02); } /* Leve zoom antes de sumir */
    100% { opacity: 0; transform: scale(1.1); visibility: hidden; }
}

.flag-overlay-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 50; /* Fica acima de tudo */
    /* Delay de 0.5s para o usuário ver a bandeira, depois 1.5s sumindo */
    animation: revealFade 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%); /* Suaviza a borda inferior */
}


/* =========================================
   MODERN GHOST BUTTONS (CLEAN & FLAT)
   ========================================= */

.btn-ghost-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 0;
    border-radius: 4px;
    font-size: 0.7rem; /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important; /* Remove sublinhado forçado */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Estilo Base: Transparente com Borda Sutil */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    color: #9ca3af; /* Cinza claro */
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Website (Emerald) */
.btn-ghost-modern.website:hover {
    border-color: var(--emerald-primary);
    color: var(--emerald-primary);
    background: rgba(16, 185, 129, 0.05); /* Fundo muito sutil */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
    transform: translateY(-1px);
}

/* Hover Effect: Favorite (Red/Emerald) */
.btn-ghost-modern.favorite:hover {
    border-color: #ef4444; /* Vermelho no hover se for para desfavoritar */
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
    transform: translateY(-1px);
}

/* Estado Ativo (Já favoritado) */
.btn-ghost-modern.favorite.active {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.btn-ghost-modern.favorite.active:hover {
    background: rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.1);
}

/* Estado Desativado (Offline) */
.btn-ghost-modern.disabled {
    opacity: 0.4;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0.05);
}


/* =========================================
   FALLBACK: MULTI-WHEEL SYSTEM (Gray & Emerald)
   ========================================= */

.server-logo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    overflow: hidden;
}

.tech-turbine-fallback {
    width: 85%;  /* MENOR: Cabe perfeitamente no container */
    height: 85%;
    pointer-events: none;
}

/* Base para todas as rodas */
.wheel-ring {
    fill: none;
    stroke-linecap: round;
    transform-origin: center;
}

/* Roda 1: Externa (Estrutura Cinza) */
.wheel-outer {
    stroke: #4b5563; /* Cinza médio */
    stroke-opacity: 0.2;
    stroke-width: 0.5;
    stroke-dasharray: 2 4; /* Pontilhado fino */
    animation: spinSlow 60s linear infinite;
}

/* Roda 2: Intermediária (Mecânica Cinza Escuro) */
.wheel-mid {
    stroke: #6b7280; /* Cinza um pouco mais claro */
    stroke-opacity: 0.15;
    stroke-width: 3; /* Mais grosso */
    stroke-dasharray: 4 6; /* Dentes de engrenagem */
    animation: spinSlow 20s linear infinite reverse; /* Gira ao contrário */
}

/* Roda 3: Energia (Verde Emerald) */
.wheel-energy {
    stroke: var(--emerald-primary);
    stroke-width: 1;
    stroke-dasharray: 20 100; /* Segmentos de energia */
    stroke-opacity: 0.6;
    filter: drop-shadow(0 0 2px var(--emerald-primary));
    animation: spinEnergy 4s linear infinite;
}

/* Roda 4: Interna (Detalhe Cinza) */
.wheel-inner {
    stroke: #374151; /* Cinza escuro */
    stroke-opacity: 0.3;
    stroke-width: 1;
    stroke-dasharray: 10 5;
    animation: spinSlow 10s linear infinite;
}

/* Núcleo (Emerald Pulsante) */
.wheel-core {
    fill: var(--emerald-primary);
    fill-opacity: 0.1;
    stroke: var(--emerald-primary);
    stroke-width: 0.5;
    stroke-opacity: 0.4;
    animation: pulseCore 2s ease-in-out infinite alternate;
}

/* Keyframes */
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinEnergy { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseCore { from { transform: scale(0.8); fill-opacity: 0.1; } to { transform: scale(1.1); fill-opacity: 0.3; } }

.ping-dot-radar.online {
    color: var(--status-up);
    background-color: var(--status-up, #0ECB81) !important;
    box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.7);
    animation: pulse-green-radar 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
.ping-dot-radar.warning {
    color: orange;
    background-color: #f59e0b !important;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulse-yellow-radar 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
.ping-dot-radar.offline {
    background-color: var(--status-down, #F6465D) !important;
    box-shadow: 0 0 0 0 rgba(246, 70, 93, 0.7);
    animation: pulse-red-radar 2s infinite cubic-bezier(0.66, 0, 0, 1);
}


/* --- PING NODE VISUALIZER --- */

/* Configuração Base da Linha (Sempre Fluindo) */
#connection-path {
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
    /* Ciclo perfeito para animação infinita */
    stroke-dasharray: 10 14; 
    stroke-dashoffset: 0;
    transition: stroke 0.5s ease, filter 0.5s ease;
    animation: dashFlow 1s linear infinite; /* Animação constante */
}

@keyframes dashFlow {
    from { stroke-dashoffset: 240; }
    to { stroke-dashoffset: 0; }
}

/* --- ESTADOS DE COR DA LINHA --- */

/* 1. Estado Neutro (Cinza) - Idle */
.flow-state-idle {
    stroke: #334155; /* Slate 700 */
    filter: none;
    opacity: 0.5;
}

/* 2. Estado Verificando (Amarelo) - Checking */
.flow-state-checking {
    stroke: #FFC107; /* Amarelo vibrante */
    filter: none; /* Sem shadow - estilo minimalista */
    opacity: 1;
}

/* 3. Estado Sucesso (Verde) - Success - Verde esmeralda */
.flow-state-success {
    stroke: var(--accent-color); /* Verde esmeralda */
    filter: none; /* Sem shadow - estilo minimalista */
    opacity: 1;
}

/* 4. Estado Erro (Vermelho) - Error */
.flow-state-error {
    stroke: #EF4444; /* Vermelho */
    filter: none; /* Sem shadow - estilo minimalista */
    opacity: 1;
}

.ping-value {
    text-align: center;
}

/* Cor padrão (Fallback/Muted) */
.ping-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    transition: color 0.3s ease;
    text-transform: uppercase;
}

/* Cores dinâmicas baseadas no estado aplicado pelo JS */
#info-ping-status.online .ping-text,
.ping-text.online {
    color: var(--status-up, #0ECB81) !important;
    text-shadow: 0 0 8px rgba(14, 203, 129, 0.3);
}

#info-ping-status.warning .ping-text,
.ping-text.warning {
    color: #f59e0b !important; /* Laranja/Amarelo */
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

#info-ping-status.offline .ping-text,
.ping-text.offline {
    color: var(--status-down, #F6465D) !important;
    opacity: 0.8;
}

.ping-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-bottom: 6px;
    /* transition: all 0.3s ease; */
}

/* --- PING BOX FLUTUANTE --- */
.ping-node-box {
    position: absolute;
    /* Posição inicial de fallback */
    right: -140px; 
    top: 200px; 
    
    width: 130px;
    text-align: center;
    padding: 10px;
    
    /* Estilo DESLIGADO (Default) */
    background: var(--bg-card) !important; /* Usar variável do tema */
    border: 1px solid var(--border-color) !important; /* Usar variável do tema */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: not-allowed;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    z-index: 1000;
    opacity: 0.6;
}
.ping-node-box:hover {
    border-color: var(--accent-color) !important; /* Verde esmeralda no hover */
}

/* Cores do Box baseadas no estado - estilo minimalista */
.ping-node-box.state-idle { border-color: var(--border-color); }
.ping-node-box.state-idle .ping-status-dot { background-color: var(--text-muted); }

.ping-node-box.state-checking { border-color: #FFC107; transform: none !important; /* Sem transform */ }
.ping-node-box.state-checking .ping-status-dot { background-color: #FFC107; box-shadow: none !important; }

.ping-node-box.state-success { border-color: var(--accent-color); }
.ping-node-box.state-success .ping-status-dot { background-color: var(--accent-color); box-shadow: none !important; }

.ping-node-box.state-error { border-color: #EF4444; }
.ping-node-box.state-error .ping-status-dot { background-color: #EF4444; box-shadow: none !important; }

/* Animação de shake/tremor para o ping-box - sem transform */
@keyframes pingShake {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
}

.ping-node-box.shake {
    animation: pingShake 0.4s ease-in-out;
    box-shadow: none !important; /* Sem shadow - estilo minimalista */
}

/* Efeito de shake no ping-node-box ao passar o mouse no botão desativado */
#register-submit-btn:disabled:hover ~ .ping-node-box {
    animation: pingShake 0.4s ease-in-out;
}


.rules-modern-container {
    background: var(--bg-card-secondary) !important;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 380px; /* Altura fixa para forçar scroll interno */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

.rules-modern-header {
    background: rgba(30, 30, 35, 0.5);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-white);
    letter-spacing: 0.5px;
}

.rules-header-icon {
    color: #e0c2ff;
    background: rgba(224, 194, 255, 0.1);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.rules-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}
.rules-section-title {
    color: var(--accent-white);
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Lista Customizada (Proibições) */
.rules-forbidden-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rules-forbidden-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.rules-forbidden-item:hover {
    border-color: rgba(239, 68, 68, 0.2); /* Vermelho sutil */
}

.forbidden-icon {
    color: #ef4444; /* Vermelho */
    margin-top: 4px;
    flex-shrink: 0;
}

/* Caixa de Penalidade (Alerta de Sistema) */
.penalty-alert-box {
    margin-top: 20px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    padding: 15px;
    position: relative;
}

.penalty-title {
    color: #fca5a5; /* Vermelho claro */
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Animação de Fade no Label do Checkbox */
.register-checkbox-label {
    transition: color 0.3s ease, opacity 0.3s ease;
}