@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Outfit:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ========================================================================== */
/*                     SUPREMACY - ULTIMATE THEME (v2.0)                      */
/* ========================================================================== */

:root {
    color-scheme: dark;
    /* --- Cores Base --- */
    --cor-background: #09090B;
    /* Preto Profundo */
    --cor-background-alt: #121214;
    /* Cinza Muito Escuro */
    --cor-surface: #18181B;
    /* Superfície Padrão */
    --cor-surface-hover: #27272A;
    /* Superfície Hover */
    --cor-surface-active: #3F3F46;
    /* Superfície Ativa */

    /* --- Cores de Destaque (Neon/Brand) --- */
    --cor-primaria: #5865F2;
    /* Discord Blurple */
    --cor-primaria-light: #7983F5;
    --cor-primaria-dark: #4752C4;

    --cor-secundaria: #F43F5E;
    /* Rose/Red Neon */
    --cor-secundaria-glow: rgba(244, 63, 94, 0.5);

    --cor-terciaria: #10B981;
    /* Cyber Green (Sucesso) */
    --cor-aviso: #F59E0B;
    /* Amber (Aviso) */

    /* --- Tipografia --- */
    --cor-texto-principal: #FAFAFA;
    --cor-texto-secundario: #A1A1AA;
    --cor-texto-terciario: #71717A;

    --font-principal: 'Inter', 'Roobert', system-ui, -apple-system, sans-serif;

    /* --- Bordas e Sombras --- */
    --cor-borda: #27272A;
    --cor-borda-highlight: #3F3F46;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-neon: 0 0 15px rgba(88, 101, 242, 0.3);

    /* --- Layout --- */
    --header-height: 72px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
}

/* ========================================================================== */
/*                               RESET & GLOBAL                               */
/* ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(161, 161, 170, 0.38) transparent;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: hidden;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

body {
    font-family: var(--font-principal);
    background-color: var(--cor-background);
    color: var(--cor-texto-principal);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* --- Scrollbar global discreta (WebKit) --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(161, 161, 170, 0.38);
    border: 1px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(161, 161, 170, 0.58);
}

@media (prefers-reduced-motion: reduce) {
    html,
    * {
        scroll-behavior: auto !important;
    }
}

/* --- Tipografia Global --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cor-texto-principal);
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Look mais moderno e "apertado" */
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
}

img,
video {
    display: block;
    max-width: 100%;
}

/* ========================================================================== */
/*                            COMPONENTES DE UI                               */
/* ========================================================================== */

/* --- Botões Premium --- */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--cor-primaria);
    color: white;
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.cta-button:hover:not(:disabled) {
    background-color: var(--cor-primaria-light);
    transform: translateY(-2px);
    box-shadow: none;
}

.cta-button:active:not(:disabled) {
    transform: translateY(0);
}

.cta-button:disabled {
    background-color: var(--cor-surface-active);
    color: var(--cor-texto-terciario);
    cursor: not-allowed;
    box-shadow: none;
}

.cta-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--cor-texto-principal);
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
    letter-spacing: 0.02em;
}

.cta-button-secondary i {
    margin-right: 0.6rem;
    transition: transform 0.3s ease;
}

.cta-button-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--cor-texto-principal);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.cta-button-secondary:hover i {
    transform: scale(1.1);
}

/* --- General Premium Cards (Dashboard, Market, Wallet) --- */
.dashboard-card,
.product-card,
.package-card,
.stat-card {
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.8), rgba(20, 20, 25, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    box-shadow: none;
    backdrop-filter: blur(5px);
}

.dashboard-card:hover,
.product-card:hover,
.package-card:hover,
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Specific Accents */
.dashboard-card:hover {
    border-top: 3px solid var(--cor-primaria);
}

.product-card:hover {
    border-top: 3px solid var(--cor-terciaria);
}

.package-card:hover {
    border-top: 3px solid var(--cor-aviso);
}

/* --- Product Card Specifics --- */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
}

.product-image {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.02);
}

.product-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--cor-texto-principal);
    font-weight: 600;
}

.product-price {
    margin-top: auto;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cor-terciaria);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-price::before {
    content: '\f51e';
    /* fa-coins */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.9rem;
    opacity: 0.8;
}

.product-card .cta-button-secondary {
    width: 100%;
    justify-content: center;
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--cor-terciaria);
}

.product-card:hover .cta-button-secondary {
    background: var(--cor-terciaria);
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

/* Market Grid Layout Removed - Managed by market.css */

/* --- Inputs and Forms Refined --- */
input,
select,
textarea {
    width: 100%;
    padding: 0.9rem 1.2rem;
    background-color: var(--cor-background-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-sm);
    color: var(--cor-texto-principal);
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
    background-color: var(--cor-background);
}

input::placeholder {
    color: var(--cor-texto-terciario);
}

/* ========================================================================== */
/*                                  HEADER                                    */
/* ========================================================================== */

header {
    height: var(--header-height);
    background: rgba(9, 9, 11, 0.8);
    /* Transparência */
    backdrop-filter: blur(16px);
    /* Desfoque forte (Glassmorphism) */
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

nav {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    margin: 0;
    line-height: 1;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cor-texto-principal);
    letter-spacing: -0.04em;
    font-family: var(--font-principal);
    transition: opacity 0.2s ease;
}

.logo i {
    font-size: 1.8rem;
    color: var(--cor-primaria);
    filter: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo a:hover {
    opacity: 0.9;
}

.logo a:hover i {
    transform: rotate(-12deg) scale(1.1);
    filter: none;
}

.logo a span {
    background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.nav-links {
    display: flex;
    gap: 0.25rem;
    /* Reduzido o gap para acomodar o novo item central */
    margin: 0 1rem;
    justify-content: center;
    overflow: visible;
    z-index: 10;
    list-style: none;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.35rem;
    border-radius: 100px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    align-items: center;
    /* Garante que todos os itens fiquem na mesma linha horizontal */
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links a {
    color: var(--cor-texto-secundario);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 42px;
    gap: 0;
    overflow: visible;
    position: relative;
}

.nav-links a.requires-auth {
    position: relative;
}

.nav-links a .auth-lock-badge {
    position: absolute;
    right: 8px;
    bottom: 6px;
    display: grid;
    width: 12px;
    height: 12px;
    place-items: center;
    border: 1px solid #34343c;
    border-radius: 50%;
    background: #111217;
    color: #c7c7d1;
    font-size: 5px;
    line-height: 1;
    pointer-events: none;
    left: auto;
    padding: 0;
    transform: none;
    opacity: 1;
    box-shadow: none;
    transition: none;
    z-index: 2;
}

.nav-links a .auth-lock-badge i {
    width: auto;
    min-width: 0;
    font-size: 5px;
    line-height: 1;
    color: inherit;
}

.nav-links a:hover .auth-lock-badge {
    transform: none;
    opacity: 1;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.nav-links a i {
    font-size: 1.1rem;
    min-width: 20px;
    text-align: center;
}

.nav-links a span {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 15, 20, 0.95);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(88, 101, 242, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

/* Tooltip aparece ao passar o mouse */
.nav-links a:hover {
    color: var(--cor-texto-principal);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.nav-links a:hover i {
    color: var(--cor-primaria-light);
    filter: none;
}

.nav-links a:hover span {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Expandido quando ativo */
.nav-links a.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-dark) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: 0.6rem 1.6rem;
    gap: 10px;
}

.nav-links a.active span {
    position: static;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 0.8rem;
    opacity: 1;
    margin-left: 5px;
    pointer-events: auto;
}

/* Remove o antigo sublinhado */
.nav-links a.active::after {
    display: none;
}

/* User Profile Pill */
.user-profile-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0.5rem 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--cor-borda);
    border-radius: 50px;
    transition: all 0.2s ease;
}

.user-profile-link:hover {
    background: var(--cor-surface-hover);
    border-color: var(--cor-texto-secundario);
}

.user-profile-link.active {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.22) 0%, rgba(88, 101, 242, 0.1) 100%);
    border-color: rgba(88, 101, 242, 0.65);
    box-shadow: 0 0 16px rgba(88, 101, 242, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.user-profile-link.active .avatar {
    border-color: var(--cor-primaria, #5865F2);
    box-shadow: 0 0 8px rgba(88, 101, 242, 0.5);
}

.user-profile-link .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cor-background);
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    margin-right: 0.5rem;
}

#header-user-username {
    font-size: 0.85rem;
    font-weight: 600;
}

.user-balance {
    font-size: 0.75rem;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ========================================================================== */
/*                                LANDING PAGE                                */
/* ========================================================================== */

/* ========================================================================== */
/*                       HERO SECTION (REFINED IMMERSION)                     */
/* ========================================================================== */

#hero {
    position: relative;
    height: 100vh;
    /* Full height */
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--cor-background);
    padding-top: var(--header-height);
}

/* --- Background & Atmosphere --- */
.hero-bg-animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #121214, #09090B, #121214, #18181B);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    z-index: 0;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, rgba(88, 101, 242, 0.1) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
    animation: pulseGlow 8s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Layout --- */
.hero-container {
    max-width: 1400px;
    width: 100%;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 10;
}

/* --- Text Content --- */
.hero-text-content {
    color: white;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-primaria-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(8px);
}

.badge-status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--cor-terciaria);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--cor-terciaria);
}

.hero-title {
    font-size: 4.8rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
}

.text-gradient {
    background: linear-gradient(90deg, var(--cor-primaria-light) 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.3));
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    max-width: 550px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.coin-text {
    color: var(--cor-aviso);
    font-weight: 700;
}

/* --- Hero Actions --- */
.hero-actions {
    display: flex;
    gap: 1.5rem;
}

/* --- Visual Panel (Abstract) --- */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 500px;
}

.visual-panel {
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 0 50px rgba(88, 101, 242, 0.1),
        inset 0 0 30px rgba(88, 101, 242, 0.05);
    backdrop-filter: blur(15px);
    animation: floatPanel 7s ease-in-out infinite alternate;
    transform-style: preserve-3d;
}

@keyframes floatPanel {
    0% {
        transform: translateY(0) rotateY(10deg);
    }

    50% {
        transform: translateY(-20px) rotateY(-10deg);
    }

    100% {
        transform: translateY(0) rotateY(10deg);
    }
}

.visual-panel .main-icon {
    font-size: 6rem;
    color: var(--cor-primaria);
    filter: drop-shadow(0 0 20px var(--cor-primaria));
}

.panel-line {
    position: absolute;
    background: var(--cor-primaria);
    opacity: 0.3;
    animation: linePulse 5s ease-in-out infinite alternate;
}

.line-1 {
    top: 20%;
    left: 10%;
    width: 50%;
    height: 2px;
}

.line-2 {
    bottom: 30%;
    right: 15%;
    width: 40%;
    height: 2px;
    animation-delay: 1s;
}

.line-3 {
    top: 60%;
    left: 30%;
    width: 30%;
    height: 2px;
    animation-delay: 2s;
}

@keyframes linePulse {
    0% {
        transform: scaleX(0.8);
        opacity: 0.3;
    }

    50% {
        transform: scaleX(1);
        opacity: 0.6;
    }

    100% {
        transform: scaleX(0.8);
        opacity: 0.3;
    }
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text-content {
        margin: 0 auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .hero-visual {
        height: 350px;
        margin-top: 2rem;
    }

    .visual-panel {
        width: 300px;
        height: 300px;
        border-radius: 20px;
    }

    .visual-panel .main-icon {
        font-size: 4rem;
    }
}

/* ========================================================================== */
/*                           STATS BAR (HUD DESIGN)                           */
/* ========================================================================== */

#stats-bar {
    background: rgba(9, 9, 11, 0.95);
    border-bottom: 1px solid var(--cor-borda);
    padding: 2.5rem 0;
    position: relative;
    z-index: 5;
    box-shadow: none;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding: 0 2rem;
}

.stat-item {
    text-align: center;
    position: relative;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff 20%, var(--cor-texto-secundario) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.stat-label {
    color: var(--cor-primaria);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* ========================================================================== */
/*                           PILARES (CORE FEATURES)                          */
/* ========================================================================== */

#pilares {
    padding: 6rem 0; /* Remove padding lateral do container pai para permitir expansão até as bordas */
    background: #09090b;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

#pilares::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.pilares-container {
    width: 100%;
    max-width: 100%; /* Ocupa toda a largura da tela */
    margin: 0;
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    position: relative;
    z-index: 2;
    padding: 2.5rem 5%; /* Alinha o primeiro card com a margem do grid e adiciona espaçamento luxuoso */
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    box-sizing: border-box;
}

.pilares-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.pilares-container.active {
    cursor: grabbing;
}

/* Espaçador invisível no final da trilha para manter o padding simétrico de 5% no lado direito */
.pilares-container::after {
    content: '';
    flex: 0 0 5%;
    pointer-events: none;
}

.pilar-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: none;
    flex: 0 0 380px; /* Mantém o mesmo tamanho atual */
}

.pilar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    transition: background 0.4s ease;
}

/* Hover Lift */
.pilar-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.pilar-card:hover::before {
    background: linear-gradient(135deg, var(--accent-color), transparent 60%);
}

/* Dynamic Glow Spot */
.pilar-glow {
    display: none;
}

.pilar-card:hover .pilar-glow {
    opacity: 0.35;
    transform: scale(1.2);
}

/* Themes per Card */
.pilar-aliancas {
    --accent-color: #6366f1; /* Indigo */
}

.pilar-market {
    --accent-color: #f43f5e; /* Rose */
}

.pilar-wallet {
    --accent-color: #10b981; /* Emerald */
}

.pilar-staking {
    --accent-color: #f59e0b; /* Amber */
}

.pilar-arena {
    --accent-color: #f97316; /* Orange */
}

.pilar-corporacoes {
    --accent-color: #8b5cf6; /* Violet */
}

.pilar-vip {
    --accent-color: #eab308; /* Yellow */
}

.pilar-bot {
    --accent-color: #3b82f6; /* Blue */
}

.pilar-eventos {
    --accent-color: #06b6d4; /* Cyan */
}

.pilar-seguranca {
    --accent-color: #ef4444; /* Red */
}

.pilar-admin {
    --accent-color: #ec4899; /* Pink */
}

.pilar-rankings {
    --accent-color: #14b8a6; /* Teal */
}

/* Icons */
.pilar-icon {
    font-size: 2rem;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.02);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pilar-card:hover .pilar-icon {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 0 25px var(--accent-color);
    border-color: transparent;
    transform: scale(1.05);
}

.pilar-card:hover .pilar-icon i {
    transition: transform 0.4s;
}

/* Content Typography */
.pilar-content {
    position: relative;
    z-index: 1;
}

.pilar-content h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: white;
}

.pilar-content p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-container {
        flex-direction: column;
        gap: 2rem;
    }

    .stat-divider {
        width: 60px;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    }

    .pilares-container {
        grid-template-columns: 1fr;
    }

    .pilar-card {
        align-items: center;
        text-align: center;
    }
}

/* ========================================================================== */
/*                      ABOUT INTRO (O QUE É O SUPREMACY HUB?)               */
/* ========================================================================== */

#about-intro {
    position: relative;
    padding: 7rem 5%;
    background: #09090b;
    overflow: hidden;
}

.about-intro-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Header Bloco */
.about-intro-header-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4.5rem;
}

.about-intro-header-block .hero-label {
    display: inline-block;
    margin-bottom: 1.25rem;
}

.about-intro-title {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.about-intro-desc-v2 {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1.75;
    margin: 0;
}

.about-intro-desc-v2 strong {
    color: #e2e8f0;
    font-weight: 600;
}

/* Showcase Lado a Lado: Discord vs Web */
.about-platform-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.platform-column {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.platform-column:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(99, 102, 241, 0.15);
}

.platform-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.discord-side .platform-header-badge {
    background: rgba(88, 101, 242, 0.08);
    border: 1px solid rgba(88, 101, 242, 0.2);
    color: #a5b4fc;
}

.web-side .platform-header-badge {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #a7f3d0;
}

.platform-column h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem;
}

.platform-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 2.5rem;
}

/* Lista de Benefícios Internos */
.platform-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.platform-benefit-item {
    display: flex;
    gap: 1.25rem;
    align-items: start;
}

.benefit-number {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #475569;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.discord-side .platform-benefit-item:hover .benefit-number {
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.2);
}

.web-side .platform-benefit-item:hover .benefit-number {
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.2);
}

.benefit-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 0.35rem;
}

.benefit-content p {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

/* Banner de Diferencial (Destaque) */
.about-diferencial-banner {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.diferencial-content {
    flex: 1;
}

.diferencial-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fbbf24;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.diferencial-content h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem;
}

.diferencial-content p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.65;
    margin: 0;
}

.diferencial-content p strong {
    color: #e2e8f0;
}

.btn-about-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.8rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-about-more:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateY(-2px);
}

.about-feature-card:hover::before {
    opacity: 0.15;
}

/* --- Icon Wrap --- */
.about-feature-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--feature-color, #5865F2);
    background: color-mix(in srgb, var(--feature-color, #5865F2) 12%, transparent);
    margin-bottom: 1.2rem;
    transition: all 0.3s ease;
}

.about-feature-card:hover .about-feature-icon-wrap {
    transform: scale(1.1);
    box-shadow: 0 0 20px color-mix(in srgb, var(--feature-color, #5865F2) 25%, transparent);
}

.about-feature-card h4 {
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.about-feature-card p {
    font-size: 0.85rem;
    color: var(--cor-texto-terciario);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

/* --- Feature Tag --- */
.about-feature-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--feature-color, #5865F2);
    background: color-mix(in srgb, var(--feature-color, #5865F2) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--feature-color, #5865F2) 20%, transparent);
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
}

/* --- Responsivo --- */
@media (max-width: 992px) {
    #about-intro {
        padding: 5rem 1.5rem;
    }

    .about-platform-showcase {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-intro-title {
        font-size: 2.2rem;
    }

    .about-diferencial-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
    }

    .btn-about-more {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    #about-intro {
        padding: 4rem 1rem;
    }

    .about-intro-title {
        font-size: 1.8rem;
    }

    .platform-column {
        padding: 2rem 1.25rem;
    }

    .platform-column h3 {
        font-size: 1.5rem;
    }

    .about-diferencial-banner {
        padding: 1.5rem 1rem;
    }

    .platform-benefit-item {
        gap: 0.85rem;
    }

    .benefit-number {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* ========================================================================== */
/*                           PLAY SECTION (LANDING STYLE)                     */
/* ========================================================================== */

#play {
    position: relative;
    padding: 8rem 0;
    background-color: var(--cor-background);
    overflow: hidden;
    display: block;
}

#play::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 20%, rgba(88, 101, 242, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.play-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 6rem;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.play-header .section-title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    text-align: center;
}

@media (max-width: 768px) {
    .play-header {
        margin-bottom: 3rem;
    }
    .play-header .section-title {
        font-size: 2rem;
        flex-direction: column;
        gap: 0.5rem;
    }
}

.sponsors-partners-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

/* ==========================================
   PATROCINADOR MASTER: MNN AI CARD
   ========================================== */
.mnn-sponsor-card {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.7) 0%, rgba(10, 10, 12, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 32px;
    padding: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.mnn-sponsor-card:hover {
    transform: translateY(-4px);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: none;
}

/* Ambient glow orbs inside the MNN card */
.mnn-glow-orb {
    display: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.25;
    transition: opacity 0.5s ease;
}

.mnn-glow-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ef4444 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.mnn-glow-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #7f1d1d 0%, transparent 70%);
    bottom: -80px;
    right: -80px;
}

.mnn-sponsor-card:hover .mnn-glow-orb {
    opacity: 0.4;
}

.mnn-card-content {
    flex: 1.2;
    position: relative;
    z-index: 2;
}

.mnn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #f87171;
    margin-bottom: 1.8rem;
    text-transform: uppercase;
}

.mnn-badge .pulse-dot {
    width: 6px;
    height: 6px;
    background: #f87171;
    border-radius: 50%;
    box-shadow: none;
    animation: dotPulse 2s infinite;
}

.mnn-title {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.text-gradient-mnn {
    background: linear-gradient(135deg, #ef4444 0%, #7f1d1d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mnn-desc {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.8;
    margin-bottom: 2.2rem;
}

.mnn-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.mnn-spec-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.mnn-spec-item i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ef4444;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mnn-spec-item .spec-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.2rem;
}

.mnn-spec-item .spec-info span {
    font-size: 0.8rem;
    color: var(--cor-texto-terciario);
}

.mnn-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mnn-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: none;
    filter: brightness(1.15);
}

/* Sponsor Visual: AI Neural Core Hologram */
.mnn-card-visual {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.mnn-cyber-vault {
    width: 260px;
    height: 260px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed;
    transition: all 0.5s ease;
}

.ring-outer {
    width: 260px;
    height: 260px;
    border-color: rgba(255, 255, 255, 0.08);
    animation: spinClockwise 25s linear infinite;
}

.ring-mid {
    width: 200px;
    height: 200px;
    border-color: rgba(255, 255, 255, 0.12);
    border-style: double;
    animation: spinCounterClockwise 18s linear infinite;
}

.ring-inner {
    width: 140px;
    height: 140px;
    border-color: rgba(255, 255, 255, 0.15);
    border-style: dotted;
    animation: spinClockwise 12s linear infinite;
}

.vault-core {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #121214;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #fff;
    z-index: 5;
    box-shadow: none;
    animation: pulseCore 3s ease-in-out infinite;
}

.pulse-waves {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: none !important;
}

/* AI circuits glowing styling */
.circuit-line {
    position: absolute;
    filter: blur(1px);
    pointer-events: none;
    display: none !important;
}

.mnn-sponsor-card .circuit-line {
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.6), transparent);
}

.discloud-sponsor-card .circuit-line {
    background: linear-gradient(90deg, transparent, rgba(54, 240, 142, 0.6), transparent);
}

.cl-1 {
    width: 120px;
    height: 2px;
    top: 50%;
    left: -60px;
    transform: rotate(30deg);
}

.cl-2 {
    width: 100px;
    height: 2px;
    top: 25%;
    right: -40px;
    transform: rotate(-45deg);
}

.cl-3 {
    width: 80px;
    height: 2px;
    bottom: 20%;
    left: -30px;
    transform: rotate(75deg);
}

.vault-tech-label {
    margin-top: 2rem;
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.mnn-sponsor-card .vault-tech-label {
    color: rgba(239, 68, 68, 0.6);
    text-shadow: none;
}

.discloud-sponsor-card .vault-tech-label {
    color: rgba(54, 240, 142, 0.6);
    text-shadow: none;
}/* DISCLOUD SPONSOR CARD STYLE */
.discloud-sponsor-card {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.7) 0%, rgba(10, 10, 12, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(54, 240, 142, 0.15);
    border-radius: 32px;
    padding: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.discloud-sponsor-card:hover {
    transform: translateY(-4px);
    border-color: rgba(54, 240, 142, 0.35);
    box-shadow: none;
}

.discloud-glow-orb {
    display: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.25;
    transition: opacity 0.5s ease;
}

.discloud-glow-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #36f08e 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.discloud-glow-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #13a854 0%, transparent 70%);
    bottom: -80px;
    right: -80px;
}

.discloud-sponsor-card:hover .discloud-glow-orb {
    opacity: 0.4;
}

.discloud-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: rgba(54, 240, 142, 0.1);
    border: 1px solid rgba(54, 240, 142, 0.25);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #36f08e;
    margin-bottom: 1.8rem;
    text-transform: uppercase;
}

.discloud-badge .pulse-dot {
    width: 6px;
    height: 6px;
    background: #36f08e;
    border-radius: 50%;
    box-shadow: none;
    animation: dotPulse 2s infinite;
}

.text-gradient-discloud {
    background: linear-gradient(135deg, #36f08e 0%, #13a854 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.discloud-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #36f08e 0%, #13a854 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.discloud-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: none;
    filter: brightness(1.15);
}

.discloud-cyber-vault .vault-ring.ring-outer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.discloud-cyber-vault .vault-ring.ring-mid {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.discloud-cyber-vault .vault-ring.ring-inner {
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.discloud-cyber-vault .vault-core {
    background: #121214 !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

/* ==========================================
   PATROCINADOR MASTER: DIVULGA TUDO CARD
   ========================================== */
.divulgatudo-sponsor-card {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.7) 0%, rgba(10, 10, 12, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 32px;
    padding: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.divulgatudo-sponsor-card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: none;
}

.divulgatudo-glow-orb {
    display: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.25;
    transition: opacity 0.5s ease;
}

.divulgatudo-glow-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.divulgatudo-glow-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #1d4ed8 0%, transparent 70%);
    bottom: -80px;
    right: -80px;
}

.divulgatudo-sponsor-card:hover .divulgatudo-glow-orb {
    opacity: 0.4;
}

.divulgatudo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #60a5fa;
    margin-bottom: 1.8rem;
    text-transform: uppercase;
}

.divulgatudo-badge .pulse-dot {
    width: 6px;
    height: 6px;
    background: #60a5fa;
    border-radius: 50%;
    box-shadow: none;
    animation: dotPulse 2s infinite;
}

.text-gradient-divulgatudo {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.divulgatudo-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.divulgatudo-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: none;
    filter: brightness(1.15);
}

.divulgatudo-cyber-vault .vault-ring.ring-outer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.divulgatudo-cyber-vault .vault-ring.ring-mid {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.divulgatudo-cyber-vault .vault-ring.ring-inner {
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.divulgatudo-cyber-vault .vault-core {
    background: #121214 !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

/* ==========================================
   PATROCINADOR MASTER: DIVULGAÇÕES GERAIS CARD
   ========================================== */
.divulgacoesgerais-sponsor-card {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.7) 0%, rgba(10, 10, 12, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 51, 68, 0.15);
    border-radius: 32px;
    padding: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.divulgacoesgerais-sponsor-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 51, 68, 0.35);
    box-shadow: none;
}

.divulgacoesgerais-glow-orb {
    display: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.25;
    transition: opacity 0.5s ease;
}

.divulgacoesgerais-glow-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ff3344 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.divulgacoesgerais-glow-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #cc1122 0%, transparent 70%);
    bottom: -80px;
    right: -80px;
}

.divulgacoesgerais-sponsor-card:hover .divulgacoesgerais-glow-orb {
    opacity: 0.4;
}

.divulgacoesgerais-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 51, 68, 0.1);
    border: 1px solid rgba(255, 51, 68, 0.25);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ff4d5e;
    margin-bottom: 1.8rem;
    text-transform: uppercase;
}

.divulgacoesgerais-badge .pulse-dot {
    width: 6px;
    height: 6px;
    background: #ff3344;
    border-radius: 50%;
    box-shadow: none;
    animation: dotPulse 2s infinite;
}

.text-gradient-divulgacoesgerais {
    background: linear-gradient(135deg, #ff4d5e 0%, #ff1122 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.divulgacoesgerais-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #ff3344 0%, #cc1122 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.divulgacoesgerais-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: none;
    filter: brightness(1.15);
}

.divulgacoesgerais-cyber-vault .vault-ring.ring-outer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.divulgacoesgerais-cyber-vault .vault-ring.ring-mid {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.divulgacoesgerais-cyber-vault .vault-ring.ring-inner {
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.divulgacoesgerais-cyber-vault .vault-core {
    background: #121214 !important;
    border: 2px solid rgba(255, 51, 68, 0.4) !important;
    box-shadow: none !important;
}
.divulgacoesgerais-cyber-vault .vault-core i {
    color: #ffffff !important;
}

/* ==========================================
   AREA DE PARCEIROS
   ========================================== */
.partners-subheader {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.partners-subheader h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.partners-subheader h3 i {
    color: var(--cor-primaria);
}

.partners-subheader p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
}

/* CARROSSEL DE PARCEIROS (FREE INFINITE DRAG & AUTOMATIC LOOP) */
.parceiros-carousel-wrapper {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 1rem 0;
}

.parceiros-container {
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    padding: 1.5rem max(2rem, calc(50vw - 650px)); /* Começa alinhado com o grid de 1300px, mas estende até a borda */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.parceiros-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.parceiros-container.active {
    cursor: grabbing;
}

/* Card Individual de Parceiro */
.parceiro-card {
    flex: 0 0 285px; /* Largura um pouco maior no PC */
    width: 285px;
    background: rgba(25, 25, 30, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow:
        none,
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.parceiro-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(30, 30, 35, 0.7);
    box-shadow:
        none,
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Destaques de Glow específicos dos Parceiros no Hover */
.parceiro-card.card-escoteiros:hover { border-color: rgba(16, 185, 129, 0.3); box-shadow: none; }
.parceiro-card.card-igl:hover { border-color: rgba(59, 130, 246, 0.3); box-shadow: none; }
.parceiro-card.card-lurial:hover { border-color: rgba(251, 191, 36, 0.3); box-shadow: none; }

/* Banner do Card */
.parceiro-banner-wrap {
    width: 100%;
    height: 95px; /* Altura proporcional à nova largura */
    position: relative;
    overflow: hidden;
}

.parceiro-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) contrast(1.1);
    transition: transform 0.6s ease;
}

.parceiro-banner-initials-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.parceiro-banner-initials-fallback span {
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 2px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.2);
    font-family: 'Outfit', 'Inter', sans-serif;
    transform: skewX(-5deg);
    z-index: 2;
}

.parceiro-banner-initials-fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.4;
    z-index: 1;
}

.parceiro-card:hover .parceiro-banner-img {
    transform: scale(1.08);
}

.parceiro-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(25, 25, 30, 1) 100%);
}

/* Logo Flutuante */
.parceiro-logo-wrap {
    position: absolute;
    top: 68px; /* Ajustado para nova altura de banner */
    left: 16px;
    width: 56px; /* Ligeiramente maior no PC */
    height: 56px;
    border-radius: 12px;
    background: #18181b;
    border: 3px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.parceiro-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parceiro-card:hover .parceiro-logo-wrap {
    transform: scale(1.05) rotate(3deg);
}

/* Logos específicos sem imagem (THE IGL e Lurial) */
.parceiro-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    background: linear-gradient(135deg, #18181b 0%, #0c0c0e 100%);
}

.green-glow { color: #10B981; }
.blue-glow { color: #3B82F6; }
.gold-glow { color: #FBBF24; }

.parceiro-card.card-escoteiros:hover .parceiro-logo-wrap { border-color: rgba(16, 185, 129, 0.4); }
.parceiro-card.card-igl:hover .parceiro-logo-wrap { border-color: rgba(59, 130, 246, 0.4); }
.parceiro-card.card-lurial:hover .parceiro-logo-wrap { border-color: rgba(251, 191, 36, 0.4); }

/* Corpo de Conteúdo do Card */
.parceiro-body {
    padding: 2.5rem 16px 16px 16px; /* Mais padding no topo por causa da logo flutuante */
    display: flex;
    flex-direction: column;
    height: calc(100% - 95px); /* Ajustado para nova altura de banner */
}

.parceiro-tag {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.parceiro-name {
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #ffffff 0%, #d4d4d8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parceiro-text {
    font-size: 0.78rem;
    color: var(--cor-texto-secundario);
    line-height: 1.4;
    margin-bottom: 0.8rem;
    flex-grow: 1;
    height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.parceiro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.parceiro-meta span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cor-texto-terciario);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.parceiro-actions {
    display: flex;
    gap: 0.6rem;
}

.parceiro-btn-discord {
    flex: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    background: #5865F2;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
}

.parceiro-btn-discord:hover {
    transform: translateY(-2px);
    background: #4752C4;
    box-shadow: none;
}

.parceiro-btn-info {
    flex: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--cor-texto-principal);
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.parceiro-btn-info:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================
   RESPONSIVIDADE DA SEÇÃO DE PARCEIROS
   ========================================== */
@media (max-width: 992px) {
    .mnn-sponsor-card, .discloud-sponsor-card, .divulgatudo-sponsor-card, .divulgacoesgerais-sponsor-card {
        flex-direction: column;
        padding: 2.5rem;
        gap: 3rem;
        text-align: center;
    }

    .mnn-badge, .discloud-badge, .divulgatudo-badge, .divulgacoesgerais-badge {
        margin: 0 auto 1.5rem auto;
    }

    .mnn-title {
        font-size: 2.4rem;
    }

    .mnn-specs-grid {
        justify-items: center;
        gap: 1.5rem;
    }

    .mnn-spec-item {
        flex-direction: column;
        text-align: center;
        gap: 0.6rem;
    }

    .mnn-card-visual {
        width: 100%;
    }

    .parceiros-carousel-wrapper {
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    .parceiros-container {
        gap: 1.2rem;
        padding: 1.5rem 2rem !important; /* Mantém os cards alinhados com o site inicialmente, mas rolando até as bordas */
    }

    .parceiro-card {
        flex: 0 0 235px !important; /* Ligeiramente maior no mobile */
        width: 235px !important;
    }
    .parceiro-banner-wrap {
        height: 80px !important;
    }
    .parceiro-banner-initials-fallback span {
        font-size: 1.8rem !important;
    }
    .parceiro-logo-wrap {
        top: 56px !important;
        left: 14px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 10px !important;
    }
    .parceiro-body {
        padding: 2rem 14px 14px 14px !important;
        height: calc(100% - 80px) !important;
    }
    .parceiro-name {
        font-size: 0.95rem !important;
    }
    .parceiro-text {
        font-size: 0.72rem !important;
        height: 34px !important;
        margin-bottom: 0.6rem !important;
    }
    .parceiro-meta {
        gap: 0.6rem !important;
        margin-bottom: 0.8rem !important;
    }
    .parceiro-meta span {
        font-size: 0.68rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    .parceiro-btn-discord, .parceiro-btn-info {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.72rem !important;
    }
}

/* ==========================================================================
   MEGA SERVIDORES (+8K MEMBROS) - CARDS FIXOS RESPONSIVOS E MODERNOS
   ========================================================================== */
.mega-servers-grid-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 1.5rem auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.mega-servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

.mega-server-card {
    background: rgba(20, 20, 26, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.mega-server-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 94, 58, 0.4);
    box-shadow: 0 12px 30px rgba(255, 94, 58, 0.12), 0 0 20px rgba(255, 94, 58, 0.05);
}

.mega-server-banner {
    width: 100%;
    height: 90px;
    position: relative;
    overflow: hidden;
    background: #121218;
}

.mega-server-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65) contrast(1.1);
    transition: transform 0.5s ease;
}

.mega-server-card:hover .mega-server-banner img {
    transform: scale(1.05);
}

.mega-server-banner-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mega-server-banner-fallback span {
    font-size: 1.8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    font-family: 'Outfit', 'Inter', sans-serif;
}

.mega-server-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(20, 20, 26, 0.9) 100%);
}

.mega-server-logo-wrap {
    position: absolute;
    top: 60px;
    left: 16px;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #18181f;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.mega-server-card:hover .mega-server-logo-wrap {
    transform: scale(1.05);
    border-color: rgba(255, 94, 58, 0.6);
}

.mega-server-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-server-content {
    padding: 28px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 8px;
}

.mega-server-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mega-badge-8k {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(255, 94, 58, 0.15);
    color: #ff7a59;
    border: 1px solid rgba(255, 94, 58, 0.35);
}

.mega-badge-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-server-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 2px 0 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Outfit', 'Inter', sans-serif;
}

.mega-server-desc {
    font-size: 0.82rem;
    color: #9ca3af;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.mega-server-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
}

.mega-server-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mega-members-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: #60a5fa;
}

.mega-verified-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #10b981;
}

.mega-server-btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #5865F2 0%, #4f46e5 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}

.mega-server-btn-join:hover {
    background: linear-gradient(135deg, #6b77f5 0%, #5865F2 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.4);
    color: #ffffff;
}

/* RESPONSIVIDADE MOBILE IMPECÁVEL */
@media (max-width: 600px) {
    .mega-servers-grid-wrapper {
        padding: 0 4px;
        margin-bottom: 1rem;
    }
    .mega-servers-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .mega-server-card {
        border-radius: 16px;
    }
    .mega-server-banner {
        height: 72px;
    }
    .mega-server-banner-fallback span {
        font-size: 1.4rem;
    }
    .mega-server-logo-wrap {
        top: 46px;
        left: 14px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .mega-server-content {
        padding: 24px 14px 12px 14px;
        gap: 6px;
    }
    .mega-server-name {
        font-size: 1.05rem;
    }
    .mega-server-desc {
        font-size: 0.78rem;
        margin-bottom: 2px;
        min-height: auto;
    }
    .mega-server-footer {
        padding-top: 8px;
    }
    .mega-server-meta {
        font-size: 0.78rem;
        gap: 6px;
    }
    .mega-server-btn-join {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
}

/* Keyframes de Animações Quânticas e de IA */
@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); box-shadow: none; }
}

@keyframes pulseCore {
    0%, 100% { transform: scale(1); box-shadow: none; }
    50% { transform: scale(1.05); box-shadow: none; }
}

@keyframes energyWave {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes spinClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinCounterClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* --- Featured Area (Destaque) --- */
#destaques {
    padding: 6rem 5%;
    background-color: var(--cor-background);
}

.featured-media-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16/9;
    margin: 0 auto 4rem;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Super Glow */
    box-shadow: none, 0 0 0 1px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-media-container video,
.featured-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.featured-badge i {
    color: var(--cor-secundaria);
}

.featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, var(--cor-background) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
}

/* --- Product Showcase Grid --- */
.destaques-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.product-showcase-card {
    text-align: left;
}

.product-showcase-card .product-image {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    margin-bottom: 1.2rem;
    background-color: var(--cor-surface-hover);
    border: 1px solid var(--cor-borda);
}

.product-showcase-price {
    font-size: 1.4rem;
    color: var(--cor-primaria-light);
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(88, 101, 242, 0.3);
}

/* ========================================================================== */
/*                                DASHBOARD                                   */
/* ========================================================================== */

.rgb-text {
    background: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rgb-animation 8s linear infinite;
    background-size: 400% 100%;
}

@keyframes rgb-animation {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.logout-btn-minimal {
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.2);
    color: #F43F5E;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.logout-btn-minimal:hover {
    background: #F43F5E;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(244, 63, 94, 0.3);
}

/* Rest of the file */
.dashboard-container {
    padding: 1.5rem 5% 3rem;
    /* Reduzido padding superior de 3rem para 1.5rem */
    margin-top: var(--header-height);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-header-card {
    background: linear-gradient(180deg, var(--cor-surface) 0%, rgba(24, 24, 27, 0.4) 100%);
    padding: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    border: 1px solid var(--cor-borda);
    position: relative;
    overflow: visible;
}

/* Decoration no dashboard header */
.dashboard-header-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

.user-profile-summary {
    display: flex;
    align-items: center;
    gap: 2rem;
    z-index: 1;
}

.avatar-xxl {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 4px solid var(--cor-surface-active);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Modern Wallet Summary Card */
.wallet-summary-dashboard {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    z-index: 5;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.wallet-summary-dashboard:hover {
    border-color: rgba(var(--cor-primaria-rgb), 0.3);
    transform: translateY(-2px);
}

/* Header interno */
.ws-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ws-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto-secundario);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ws-status {
    width: 8px;
    height: 8px;
    background-color: var(--cor-terciaria);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cor-terciaria);
    animation: pulse-green 2s infinite;
}

/* Conteúdo de Saldos */
.ws-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ws-balance-main {
    display: flex;
    flex-direction: column;
}

.ws-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-texto-terciario);
    margin-bottom: 0.2rem;
}

.ws-amount-box {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.ws-currency {
    font-size: 1rem;
    color: var(--cor-primaria);
    font-weight: 700;
}

.ws-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.ws-balance-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.ws-label-sec {
    color: var(--cor-texto-terciario);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ws-value-sec {
    color: var(--cor-texto-secundario);
    font-weight: 600;
}

.ws-balance-gold {
    border: 1px solid rgba(246, 201, 69, 0.2);
    background: linear-gradient(90deg, rgba(246, 201, 69, 0.09), rgba(246, 201, 69, 0.02));
}

.ws-balance-gold .ws-label-sec,
.ws-balance-gold .ws-value-sec {
    color: #f6c945;
}

.ws-balance-jarvis {
    border: 1px solid rgba(0, 210, 255, 0.18);
    background: rgba(0, 210, 255, 0.06);
}

.ws-balance-jarvis .ws-label-sec,
.ws-balance-jarvis .ws-value-sec {
    color: #62dff5;
}

/* Botão de Ação */
.ws-btn {
    margin-top: 0.5rem;
    background: linear-gradient(90deg, rgba(var(--cor-primaria-rgb), 0.1), transparent);
    border: 1px solid rgba(var(--cor-primaria-rgb), 0.2);
    color: var(--cor-primaria);
    padding: 0.6rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ws-btn:hover {
    background: var(--cor-primaria);
    color: #000;
    box-shadow: 0 0 15px rgba(var(--cor-primaria-rgb), 0.4);
}

@keyframes pulse-green {
    0% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.5;
        transform: scale(0.9);
    }
}

.dashboard-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 2rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: 1.5rem;
}

.card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--cor-texto-principal);
}

.card-header h3 i {
    color: var(--cor-primaria);
    margin-right: 0.5rem;
}

/* Activity List Styling */
.activity-list li {
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.activity-list li:last-child {
    border-bottom: none;
}

.income {
    color: var(--cor-terciaria);
}

.outcome {
    color: var(--cor-secundaria);
}



/* ========================================================================== */
/*                       FIDELIDADE (PROCESS FLOW)                            */
/* ========================================================================== */

#fidelidade {
    padding: 8rem 0;
    background: radial-gradient(circle at 50% 50%, rgba(10, 10, 15, 0.9) 0%, var(--cor-background-alt) 100%);
    position: relative;
    overflow: hidden;
}

/* Header Titles */
#fidelidade .section-header-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    padding: 0 1rem;
}

#fidelidade .section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

#fidelidade .section-subtitle {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
}

.quantum-fidelidade-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 4rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    justify-items: center;
    align-items: stretch; /* para terem a mesma altura */
    padding-bottom: 2rem;
}

/* Central Quantum Core styling */
.quantum-core-center {
    position: relative;
    grid-column: 1 / -1; /* Fica no topo sozinho centralizado */
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-bottom: 3rem; /* Espaço extra antes dos cards */
}

.core-outer-ring {
    position: absolute;
    inset: -20px;
    border: 2px dashed rgba(88, 101, 242, 0.4);
    border-radius: 50%;
    animation: spinClockwise 25s linear infinite;
}

.core-mid-ring {
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    animation: spinCounterClockwise 15s linear infinite;
}

.core-inner-glow {
    position: absolute;
    inset: 10px;
    background: transparent;
    border-radius: 50%;
    filter: none;
    animation: none;
}

.core-orb {
    position: relative;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 35% 35%, #FFD700 0%, #B8860B 40%, #000 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 20px rgba(251, 191, 36, 0.8),
        0 10px 20px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
    animation: floatCore 4s ease-in-out infinite alternate;
}

.core-sc-symbol {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    letter-spacing: -0.05em;
    z-index: 5;
}

.core-energy-waves {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.4);
    opacity: 0;
    animation: coreWaves 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.core-status-tag {
    position: absolute;
    bottom: -45px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #10B981;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
}

/* Quantum Nodes */
.quantum-node {
    position: relative;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    padding: 2.5rem 1.5rem;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 5;
}

/* Reset de posições absolutas */
.node-engaje, .node-receba, .node-resgate {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
}

.quantum-node:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--node-accent);
    box-shadow:
        none;
}

.node-icon-outer {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-cyber-circles span {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.node-cyber-circles span:nth-child(1) {
    inset: -8px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    animation: spinClockwise 12s linear infinite;
}

.node-cyber-circles span:nth-child(2) {
    inset: -4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.quantum-node:hover .node-cyber-circles span:nth-child(1) {
    border-color: var(--node-accent);
    opacity: 0.5;
}

.node-icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(10, 10, 12, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s ease;
}

.quantum-node:hover .node-icon-wrapper {
    background: var(--node-accent);
    color: black;
    border-color: var(--node-accent);
    transform: scale(1.05);
}

.node-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantum-node:hover .node-number {
    border-color: var(--node-accent);
    color: var(--node-accent);
}

.node-content h3 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: white;
    margin-bottom: 0.8rem;
}

.node-content p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.node-content p strong {
    color: white;
}

.node-meta-value {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--node-accent);
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    display: inline-block;
}

/* Conduit styling (laser energy) */
.laser-conduit-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.laser-conduit {
    position: absolute;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

/* Linear conduit vectors using absolute positioning */
.conduit-1-to-core {
    /* Conecta Engaje a Receba na horizontal (atrás dos cards) */
    left: 16%;
    top: 306px; /* Alinhado matematicamente ao centro do ícone no grid */
    width: 34%;
    height: 2px;
    transform: none;
    background: linear-gradient(90deg, #10B981 0%, #FBBF24 100%);
}

.conduit-core-to-2 {
    /* Conecta Receba a Resgate na horizontal */
    left: 50%;
    top: 306px;
    width: 34%;
    height: 2px;
    transform: none;
    background: linear-gradient(90deg, #FBBF24 0%, #EF4444 100%);
}

.conduit-2-to-3 {
    display: none; /* Desativado no novo layout em grade */
}

.conduit-3-to-1 {
    display: none; /* Desativado no novo layout em grade */
}

/* Energy pulses moving through the conduits */
.laser-conduit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100px;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
    animation: laserPulse 4s infinite linear;
}

.conduit-core-to-2::after { animation-delay: 1s; }
.conduit-2-to-3::after { animation-delay: 2s; }
.conduit-3-to-1::after { animation-delay: 3s; }

/* Sci-fi Keyframes */
@keyframes spinClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spinCounterClockwise {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes pulseGlow {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 1; }
}

@keyframes floatCore {
    0% { transform: translateY(-5px); }
    100% { transform: translateY(5px); }
}

@keyframes coreWaves {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes laserPulse {
    0% { left: -100px; }
    100% { left: 100%; }
}

/* Responsive Constellation Flow */
@media (max-width: 992px) {
    .quantum-fidelidade-wrapper {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding: 0 2rem;
    }

    .quantum-core-center {
        position: relative;
        margin: 2rem auto;
        top: auto;
        left: auto;
        transform: none;
    }

    .quantum-node {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    .laser-conduit-container {
        display: none; /* Conduits can't render correctly in a vertical column list */
    }
}

/* ========================================================================== */
/*                       DESTAQUES (CINEMA MODE)                              */
/* ========================================================================== */

#destaques {
    padding: 6rem 5%;
    background-color: #050505;
    /* Darker for cinema feel */
}

.featured-media-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 16/9;
}

.cinema-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cinema-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: 105%;
    background: rgba(88, 101, 242, 0.15);
    filter: blur(60px);
    z-index: 1;
    border-radius: 50%;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--cor-texto-terciario);
}

.loading-state i {
    font-size: 2rem;
}

/* ========================================================================== */
/*                       UTILIDADE (TECH TOOLS)                               */
/* ========================================================================== */

#utilidade {
    padding: 6rem 5%;
    background: var(--cor-background);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.tool-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle Grid inside card */
.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
}

.tool-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.tool-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    z-index: 1;
}

.blue-glow {
    color: var(--cor-primaria);
    box-shadow: none;
}

.pink-glow {
    color: var(--cor-secundaria);
    box-shadow: none;
}

.tool-info {
    flex: 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.tool-info h4 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.tool-info p {
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    flex: 1;
}

.text-link-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.8;
}

.text-link-action:hover {
    opacity: 1;
    color: var(--cor-primaria-light);
}

/* ========================================================================== */
/*                       FINAL CTA (HERO LITE - ENHANCED)                     */
/* ========================================================================== */

#final-cta {
    padding: 8rem 5%;
    display: flex;
    justify-content: center;
    background-color: var(--cor-background);
    position: relative;
}

.cta-wrapper {
    width: 100%;
    max-width: 1100px;
    background: linear-gradient(145deg, #18181B 0%, #09090B 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

.cta-content {
    position: relative;
    z-index: 2;
}

/* Título e Subtítulo Aprimorados */
.cta-content h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

.cta-content p {
    color: var(--cor-texto-secundario);
    margin-bottom: 3.5rem;
    font-size: 1.2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-bg-effect {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.08) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
    filter: blur(50px);
}

/* Lista de Benefícios (Badges Modernos) */
.cta-benefits-list {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.cta-benefits-list span {
    color: var(--cor-texto-principal);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.8rem 1.5rem;
    border-radius: 100px;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cta-benefits-list span:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(88, 101, 242, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.cta-benefits-list span i {
    color: var(--cor-terciaria);
    font-size: 1.1rem;
    filter: none;
}

/* ========================================================================== */
/*                         SISTEMA DE PRELOADER GLOBAL                        */
/* ========================================================================== */

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cor-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loader-logo {
    font-size: 3rem;
    color: var(--cor-primaria);
    filter: none;
    animation: loader-pulse 1.5s infinite ease-in-out;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(88, 101, 242, 0.1);
    border-top: 3px solid var(--cor-primaria);
    border-radius: 50%;
    animation: loader-spin 1s linear infinite;
}

.loader-text {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--cor-texto-terciario);
    font-weight: 800;
}

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

@keyframes loader-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

.garantia {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--cor-terciaria);
    opacity: 0.9;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 20px;
}

/* Responsive Tweaks for CTA */
@media (max-width: 768px) {
    .cta-wrapper {
        padding: 3rem 1.5rem;
    }

    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-benefits-list {
        gap: 0.8rem;
    }

    .cta-benefits-list span {
        width: 100%;
        justify-content: center;
    }

    .fidelidade-container {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .process-line {
        width: 2px;
        height: 80%;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

    .process-step {
        width: 100%;
    }

    .step-icon-wrapper {
        box-shadow: none;
        z-index: 2;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }
}




/* ========================================================================== */
/*                       LURIAL CRAFT PAGE (MINECRAFT)                        */
/* ========================================================================== */

.lurialcraft-page-body {
    background-color: #1a1a2e;
}

.lurialcraft-main-wrapper {
    margin-top: var(--header-height);
    color: var(--cor-texto-principal);
}

.lurialcraft-section {
    padding: 6rem 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.lurialcraft-section.alt-bg {
    background-color: rgba(255, 255, 255, 0.02);
    width: 100%;
    max-width: 100%;
}

.lurialcraft-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--cor-texto-principal);
}

/* --- Hero Section --- */
.lurialcraft-hero {
    position: relative;
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #050505;
    /* Substitua a cor acima por uma screenshot real do servidor via CSS ou JS */
}

.lurialcraft-hero .hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(26, 26, 46, 1) 100%);
    z-index: 1;
}

.lurialcraft-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 2rem;
}

.lurialcraft-hero-content .hero-label {
    display: inline-block;
    background: rgba(140, 82, 255, 0.2);
    color: #c4a1ff;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(140, 82, 255, 0.4);
    backdrop-filter: blur(5px);
}

.lurialcraft-hero-content h1 {
    font-size: 5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: none;
    background: linear-gradient(135deg, #fff 0%, #a8a8b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lurialcraft-hero-content p {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 2.5rem;
    text-shadow: none;
}

.lurialcraft-hero-content .hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* --- Features Grid --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none;
}

.feature-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(140, 82, 255, 0.3);
    box-shadow: none;
}

.feature-card i {
    font-size: 3rem;
    color: #8c52ff;
    margin-bottom: 1.5rem;
    filter: none;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

.feature-card p {
    color: var(--cor-texto-secundario);
    line-height: 1.6;
}

/* --- Connect Steps --- */
.connect-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

.step-card {
    position: relative;
}

.step-card .step-icon {
    width: 70px;
    height: 70px;
    background: var(--cor-surface);
    border-radius: 50%;
    border: 2px solid #8c52ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #8c52ff;
    margin: 0 auto 1.5rem;
    box-shadow: none;
}

.step-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.step-card p {
    font-size: 0.95rem;
    color: var(--cor-texto-secundario);
}

.server-ip {
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-family: monospace;
    color: #00ffaa;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.copy-ip-btn {
    display: block;
    margin: 0 auto;
    min-width: 200px;
}

/* --- Rules --- */
.rules-list {
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 3rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.rules-list ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    text-align: left;
    display: inline-block;
}

.rules-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rules-list li i {
    color: var(--cor-secundaria);
}

/* --- Responsive Lurial Craft --- */
@media (max-width: 768px) {
    .lurialcraft-hero-content h1 {
        font-size: 3rem;
    }

    .rules-list {
        padding: 2rem;
    }

    .rules-list li {
        font-size: 1rem;
    }
}

/* --- New Sections: Status Bar --- */
.server-status-bar {
    background: rgba(140, 82, 255, 0.1);
    border-bottom: 1px solid rgba(140, 82, 255, 0.2);
    padding: 1rem 0;
    margin-top: -1px;
    /* Cola no hero */
    backdrop-filter: blur(5px);
}

.status-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.1rem;
    color: #e0e0e0;
}

.status-item i {
    color: #00ffaa;
}

.status-value {
    font-weight: 700;
    color: white;
}

.online-dot {
    width: 10px;
    height: 10px;
    background-color: #00ffaa;
    border-radius: 50%;
    box-shadow: none;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- New Sections: Lore --- */
.lore-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.lore-text h3 {
    font-size: 2rem;
    color: #c4a1ff;
    margin-bottom: 1.5rem;
}

.lore-text p {
    margin-bottom: 1.2rem;
    color: var(--cor-texto-secundario);
    font-size: 1.05rem;
}

.lore-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(140, 82, 255, 0.2);
}

/* --- New Sections: Gallery --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
}

.gallery-item {
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    font-size: 2rem;
    color: white;
}

/* --- New Sections: VIP Ranks --- */
.vip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.vip-card {
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: none;
}

.vip-card:hover {
    transform: translateY(-10px);
}

.vip-card.rank-iron {
    border-top: 4px solid #a19d94;
}

.vip-card.rank-gold {
    border-top: 4px solid #ffd700;
    box-shadow: none;
}

.vip-card.rank-diamond {
    border-top: 4px solid #b9f2ff;
    box-shadow: none;
}

.rank-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.rank-iron .rank-icon {
    color: #a19d94;
}

.rank-gold .rank-icon {
    color: #ffd700;
}

.rank-diamond .rank-icon {
    color: #b9f2ff;
}

.vip-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.vip-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    margin-bottom: 2rem;
}

.vip-features {
    list-style: none;
    margin-bottom: 2rem;
    text-align: left;
    padding-left: 1rem;
}

.vip-features li {
    margin-bottom: 0.8rem;
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
}

.vip-features li i {
    color: #00ffaa;
    margin-right: 0.5rem;
}

/* --- FAQ --- */
.faq-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-item h4 {
    color: #c4a1ff;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.faq-item p {
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
    margin-top: 1rem;
    border-top: 1px solid var(--cor-borda);
    padding-top: 1rem;
}




/* ========================================================================== */
/*                       FINAL CTA (DISCORD UPDATE)                           */
/* ========================================================================== */

.cta-benefits-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.cta-benefits-list span {
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-benefits-list span i {
    color: var(--cor-terciaria);
}

.cta-discord-final {
    background-color: #5865F2 !important;
    /* Discord Blurple */
    border: none !important;
    padding: 1rem 3rem !important;
    font-size: 1.1rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cta-discord-final:hover {
    background-color: #4752C4 !important;
    box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
    transform: translateY(-3px);
}



/* ========================================================================== */
/*                       SISTEMA DE ATIVAO (TECH VAULT)                     */
/* ========================================================================== */

#activation-system {
    padding: 8rem 5%;
    background-color: #0b0b0e;
    position: relative;
    overflow: hidden;
}

/* Fundo Grid Sutil */
#activation-system::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}

.activation-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6rem;
    position: relative;
    z-index: 1;
}

/* --- Content Side --- */
.activation-content {
    max-width: 500px;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(6, 182, 212, 0.1);
    /* Cyan tint */
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06b6d4;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.activation-content h2 {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.text-gradient-blue {
    background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.platform-icons {
    display: flex;
    gap: 1.5rem;
    margin: 2rem 0;
    font-size: 2rem;
    color: var(--cor-texto-secundario);
}

.platform-icons i:hover {
    color: white;
    transform: translateY(-3px);
    transition: all 0.2s;
}

.tech-specs-list {
    list-style: none;
    margin-top: 2rem;
}

.tech-specs-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: var(--cor-texto-principal);
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.tech-specs-list li i {
    color: #06b6d4;
}

/* --- Visual Side (The Vault) --- */
.activation-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.digital-key-card {
    width: 380px;
    background: rgba(20, 20, 25, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: none;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    transform: perspective(1000px) rotateY(-10deg);
    transition: transform 0.5s ease;
}

.digital-key-card:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
    border-color: rgba(6, 182, 212, 0.4);
}

.card-header-tech {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.platform-tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: #06b6d4;
    letter-spacing: 0.1em;
}

.status-indicator {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: none;
    animation: pulse 2s infinite;
}

.game-cover-placeholder {
    height: 180px;
    background: linear-gradient(135deg, #1e1e24 0%, #121214 100%);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.game-cover-placeholder i {
    font-size: 3rem;
    opacity: 0.3;
}

.code-display-area {
    background: #000;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.code-label {
    display: block;
    font-size: 0.7rem;
    color: var(--cor-texto-terciario);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.code-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    color: white;
    letter-spacing: 0.1em;
}

.copy-icon {
    cursor: pointer;
    color: var(--cor-texto-secundario);
    transition: color 0.2s;
}

.copy-icon:hover {
    color: white;
}

/* Scan Line Animation */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #06b6d4, transparent);
    opacity: 0.5;
    animation: scanVertical 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes scanVertical {
    0% {
        top: -10%;
    }

    100% {
        top: 110%;
    }
}

/* Background Circles */
.tech-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    z-index: -1;
}

.circle-1 {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(6, 182, 212, 0.1);
}

.circle-2 {
    width: 350px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: dashed;
    animation: rotateCircle 20s linear infinite;
}

@keyframes rotateCircle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- Estilos Adicionais do Jarvis AI (Supremacy Intelligence) --- */
.text-gradient-purple {
    background: linear-gradient(90deg, #a855f7 0%, #c084fc 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.jarvis-ai-card {
    border-color: rgba(168, 85, 247, 0.2) !important;
}

.jarvis-ai-card:hover {
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 25px 60px rgba(168, 85, 247, 0.25) !important;
}

.jarvis-avatar-box {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, rgba(20, 20, 25, 0.8) 100%) !important;
}

.jarvis-core {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jarvis-icon {
    font-size: 2.8rem;
    color: #e9d5ff;
    z-index: 10;
    text-shadow: none;
    animation: jarvisCorePulse 3s ease-in-out infinite;
}

.jarvis-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.ring-1 {
    width: 110px;
    height: 110px;
    border-top-color: rgba(168, 85, 247, 0.4);
    border-bottom-color: rgba(168, 85, 247, 0.4);
    animation: jarvisSpinClockwise 4s linear infinite;
}

.ring-2 {
    width: 130px;
    height: 130px;
    border-left-color: rgba(192, 132, 252, 0.3);
    border-right-color: rgba(192, 132, 252, 0.3);
    animation: jarvisSpinCounter 6s linear infinite;
}

.ring-3 {
    width: 90px;
    height: 90px;
    border-top-color: rgba(99, 102, 241, 0.5);
    animation: jarvisSpinClockwise 2s linear infinite;
}

.start-pulse-icon {
    animation: jarvisCorePulse 2s ease-in-out infinite;
    font-size: 1.2rem;
    transition: transform 0.2s, color 0.2s;
}

.start-pulse-icon:hover {
    transform: scale(1.15);
    color: #c084fc !important;
}

@keyframes jarvisCorePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
        text-shadow: none;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
        text-shadow: none;
    }
}

@keyframes jarvisSpinClockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes jarvisSpinCounter {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .activation-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4rem;
    }

    .activation-content {
        margin: 0 auto;
    }

    .platform-icons,
    .tech-specs-list li {
        justify-content: center;
        padding-left: 0;
        border-left: none;
    }

    .digital-key-card {
        margin: 0 auto;
        width: 100%;
        max-width: 350px;
    }
}



/* ========================================================================== */
/*                       WALLET: COMMAND CENTER STYLE                         */
/* ========================================================================== */

.wallet-page-body {
    background-color: #0b0b0e;
    /* Fundo sutil animado */
    background-image:
        radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 40%);
}

.wallet-wrapper {
    display: flex;
    min-height: 100vh;
    padding-top: 0;
    /* Remove header offset if needed, or keep consistent */
}

/* --- Sidebar --- */
.wallet-sidebar {
    width: 320px;
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    padding: 2rem;
    position: fixed;
    height: 100vh;
    z-index: 100;
}

.sidebar-header {
    margin-bottom: 3rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.back-link:hover {
    color: white;
}

.user-profile-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar-glow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--cor-primaria);
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.3);
}

.user-meta {
    display: flex;
    flex-direction: column;
}

.username-glitch {
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}

.user-rank-badge {
    font-size: 0.75rem;
    color: var(--cor-terciaria);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.wallet-balance-display {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.wallet-balance-display .label {
    display: block;
    font-size: 0.8rem;
    color: var(--cor-texto-terciario);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.sidebar-balance {
    font-size: 2.2rem;
    margin: 0;
    background: linear-gradient(90deg, #fff, #fbbf24);
    /* White to Gold */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mini-stats {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

.stat-pill {
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-pill i {
    color: var(--cor-primaria);
}

/* Navigation */
.wallet-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    padding-top: 1rem;
}

.nav-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cor-texto-secundario);
    padding: 1rem 1.2rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.nav-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.05);
}

.nav-tab.active {
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.15) 0%, rgba(88, 101, 242, 0.05) 100%);
    color: white;
    border-color: rgba(88, 101, 242, 0.3);
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.15);
}

.nav-tab .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.nav-tab:hover .nav-icon {
    transform: scale(1.1);
    color: var(--cor-primaria);
}

.nav-tab.active .nav-icon {
    color: var(--cor-primaria);
}

.special-tab {
    margin-top: auto;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* --- Main Content --- */
.wallet-main-content {
    margin-left: 320px;
    flex: 1;
    padding: 3rem 5%;
}

.content-header {
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1.5rem;
}

.content-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.content-header h2 i {
    color: var(--cor-primaria);
}

/* Tech Inputs */
.tech-input,
.tech-select {
    width: 100%;
    padding: 1rem;
    background: #0f0f13;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-family: inherit;
    transition: all 0.2s;
}

.tech-input:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
    outline: none;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}

/* --- Staking Grid --- */
.staking-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
}

.staking-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
}

.yield-preview {
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.neon-green {
    color: var(--cor-terciaria);
    font-size: 1.2rem;
}

/* Deposits List */
.deposits-list-scroll {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 1rem;
}

.deposit-item {
    background: #18181b;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid var(--cor-terciaria);
}

/* --- Ranking List --- */
.s-forbes-list li {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 0.8rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.s-forbes-list li:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.05);
}

/* Responsive Wallet */
@media (max-width: 900px) {
    .wallet-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .wallet-main-content {
        margin-left: 0;
        padding: 2rem;
    }

    .staking-grid {
        grid-template-columns: 1fr;
    }
}



/* ========================================================================== */
/*                       WALLET LAYOUT FIXES & SIDEBAR TOGGLE                 */
/* ========================================================================== */

.wallet-wrapper {
    padding-top: var(--header-height);
    position: relative;
    transition: all 0.3s ease;
}

/* Sidebar Positioning */
.wallet-sidebar {
    top: var(--header-height);
    /* Below header */
    height: calc(100vh - var(--header-height));
    width: 320px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
}

/* Toggle Button */
.sidebar-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--cor-texto-secundario);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* --- Collapsed State --- */
.wallet-sidebar.collapsed {
    width: 80px;
    padding: 2rem 1rem;
}

/* Hide elements when collapsed */
.wallet-sidebar.collapsed .user-meta,
.wallet-sidebar.collapsed .wallet-balance-display .label,
.wallet-sidebar.collapsed .wallet-balance-display h1,
.wallet-sidebar.collapsed .wallet-balance-display .mini-stats,
.wallet-sidebar.collapsed .nav-tab span,
/* Assuming text is in span or direct text node needs handling */
.wallet-sidebar.collapsed .back-link span,
.wallet-sidebar.collapsed .back-link i:last-child {
    /* Hide text part of back link */
    display: none;
    opacity: 0;
}

/* Adjust layout for icons only */
.wallet-sidebar.collapsed .nav-tab {
    justify-content: center;
    padding: 1rem 0;
}

.wallet-sidebar.collapsed .nav-tab i {
    font-size: 1.5rem;
    margin: 0;
}

.wallet-sidebar.collapsed .user-profile-compact {
    justify-content: center;
}

.wallet-sidebar.collapsed .avatar-glow {
    width: 40px;
    height: 40px;
    margin: 0;
}

.wallet-sidebar.collapsed .wallet-balance-display {
    display: none;
}

/* ========================================================================== */
/*                       TOAST NOTIFICATIONS FIX                              */
/* ========================================================================== */

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2147483647;
    /* Max z-index to stay on top of everything */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* Allows clicking through the container area */
}

.toast {
    background: rgba(24, 24, 27, 0.95);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    pointer-events: auto;
    /* Re-enable clicks on toasts */
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-success {
    border-left: 4px solid var(--cor-terciaria);
}

.toast-error {
    border-left: 4px solid var(--cor-secundaria);
}

.toast-info {
    border-left: 4px solid var(--cor-primaria);
}

.toast i {
    font-size: 1.1rem;
}

.toast-success i {
    color: var(--cor-terciaria);
}

.toast-error i {
    color: var(--cor-secundaria);
}

.toast-info i {
    color: var(--cor-primaria);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

/* Show a mini icon for balance when collapsed */
.wallet-sidebar.collapsed .wallet-balance-display::after {
    content: '\f51e';
    /* Coins icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--cor-terciaria);
    font-size: 1.5rem;
}

/* Main Content Adjustment */
.wallet-main-content {
    margin-left: 320px;
    /* Default */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: calc(100vh - var(--header-height));
}

.wallet-sidebar.collapsed~.wallet-main-content {
    margin-left: 80px;
}

/* Mobile Responsive Override */
@media (max-width: 900px) {
    .wallet-sidebar {
        transform: translateX(-100%);
        /* Hidden by default on mobile */
        width: 280px;
        /* Full width drawer style */
        position: fixed;
        z-index: 1000;
    }

    .wallet-sidebar.mobile-open {
        transform: translateX(0);
    }

    .wallet-main-content {
        margin-left: 0 !important;
        /* Always 0 on mobile */
    }

    /* Floating Toggle for Mobile (if needed outside) or use header menu */
    /* For now, assuming user will click a menu button or we add a floating trigger */
}



/* ========================================================================== */
/*                       GLOBAL POLISH & ALIGNMENT FIXES                      */
/* ========================================================================== */

/* --- Z-Index & Position Hierarchy --- */
header {
    z-index: 1000;
    /* Header sempre no topo */
    position: fixed;
    width: 100%;
    background: rgba(9, 9, 11, 0.95);
    /* Garante leitura */
}

.wallet-sidebar {
    z-index: 900;
    /* Abaixo do header */
    padding-top: 1rem;
    /* Espaío interno extra */
}

/* --- Scrollbar Refinement (Sidebar) --- */
.wallet-sidebar::-webkit-scrollbar {
    width: 4px;
}

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

.wallet-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.wallet-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- S-Forbes (Ranking) Perfect Alignment --- */
.s-forbes-list {
    list-style: none;
    padding: 0;
}

.s-forbes-list li {
    display: grid;
    grid-template-columns: 40px 40px 1fr auto;
    /* Rank | Avatar | Nome | Saldo */
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 0.8rem;
    transition: all 0.2s ease;
}

.s-forbes-list li:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.s-forbes-list .rank {
    font-weight: 900;
    color: var(--cor-texto-terciario);
    font-size: 1.2rem;
    text-align: center;
}

.s-forbes-list .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.s-forbes-list .username {
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s-forbes-list .balance {
    font-family: 'Courier New', monospace;
    color: var(--cor-terciaria);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Top 3 Highlighting */
.s-forbes-list li:nth-child(1) .rank {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.s-forbes-list li:nth-child(2) .rank {
    color: #C0C0C0;
}

.s-forbes-list li:nth-child(3) .rank {
    color: #CD7F32;
}

/* --- Input & Form Polish --- */
.tech-input {
    background: #09090b;
    border: 1px solid #27272a;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.tech-input:hover {
    border-color: #3f3f46;
}

.tech-input:focus {
    background: #000;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 1px var(--cor-primaria);
}

/* --- Card Headers --- */
.content-header h2 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

.content-header p {
    font-size: 1rem;
    opacity: 0.7;
    max-width: 600px;
}

/* --- Sidebar Toggle Adjustment --- */
.sidebar-toggle {
    top: 1.5rem;
    right: 1.5rem;
}

/* --- Wallet Sidebar Content Alignment --- */
.wallet-sidebar .user-profile-compact {
    transition: opacity 0.2s;
}

/* When collapsed, center the toggle button better */
.wallet-sidebar.collapsed .sidebar-toggle {
    right: 50%;
    transform: translateX(50%);
    top: 1rem;
}

.wallet-sidebar.collapsed .sidebar-header {
    margin-top: 3rem;
    /* Make space for toggle */
}




/* ========================================================================== */
/*                       SIDEBAR REFINEMENT (POLISHED)                        */
/* ========================================================================== */

/* --- Nav Tab Layout --- */
.nav-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    position: relative;
    overflow: hidden;
    /* For animations */
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.2s;
}

/* Active State Polish */
.nav-tab.active {
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.2) 0%, transparent 100%);
    border-left: 3px solid var(--cor-primaria);
    box-shadow: none;
    /* Cleaner look */
}

.nav-tab.active i {
    color: var(--cor-primaria-light);
    text-shadow: 0 0 10px rgba(88, 101, 242, 0.5);
}

/* --- Collapsed State Beauty --- */
.wallet-sidebar.collapsed {
    width: 70px;
    /* Slimmer */
    padding: 1rem 0;
}

.wallet-sidebar.collapsed .sidebar-header {
    padding: 0;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

/* Hide Text Smoothly */
.wallet-sidebar.collapsed span {
    display: none;
}

/* Center Icons */
.wallet-sidebar.collapsed .nav-tab {
    justify-content: center;
    padding: 1rem 0;
    border-left: 3px solid transparent;
    /* Prepare for active border */
}

.wallet-sidebar.collapsed .nav-tab.active {
    border-left: 3px solid var(--cor-primaria);
    background: rgba(255, 255, 255, 0.03);
}

.wallet-sidebar.collapsed .nav-icon {
    font-size: 1.4rem;
    /* Larger icons when collapsed */
}

/* Balance in Collapsed Mode */
.wallet-sidebar.collapsed .wallet-balance-display {
    background: transparent;
    border: none;
    padding: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.wallet-sidebar.collapsed .wallet-balance-display h1,
.wallet-sidebar.collapsed .wallet-balance-display .label,
.wallet-sidebar.collapsed .wallet-balance-display .mini-stats {
    display: none;
}

/* Show simple icon instead */
.wallet-sidebar.collapsed .wallet-balance-display::after {
    content: '\f51e';
    /* Coins Icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #FFD700;
    font-size: 1.8rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    animation: floatIcon 3s ease-in-out infinite;
}

/* Toggle Button Placement */
.sidebar-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    /* Move toggle to center when collapsed or keep it right? Let's hide it in header area or move it */
}

.wallet-sidebar.collapsed .sidebar-toggle {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 1rem auto;
}

/* Back Link in Collapsed */
.wallet-sidebar.collapsed .back-link {
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.wallet-sidebar.collapsed .back-link i {
    margin: 0;
}

/* ========================================================================== */
/*                       INVENTORY MODAL STYLING (ENHANCED)                   */
/* ========================================================================== */

.modal-inventory-detail {
    max-width: 500px !important;
    /* Force width */
    text-align: center;
    background: linear-gradient(145deg, #18181B, #0e0e10) !important;
    border: 1px solid var(--cor-borda-highlight) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

.modal-item-image {
    width: 180px;
    height: 180px;
    object-fit: contain;
    margin: 0 auto 1.5rem;
    display: block;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.modal-inventory-detail h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--cor-texto-principal);
}

.modal-item-meta {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.2rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-item-meta p {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: var(--cor-texto-secundario);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.modal-item-meta p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal-item-meta p strong {
    color: white;
    font-weight: 600;
}

/* Unique Code Section Styling */
.unique-code-section {
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.unique-code-section .section-label {
    font-size: 0.8rem;
    color: var(--cor-primaria-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.unique-code-section .code-display-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.8rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    color: white;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.item-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.item-status-badge.used-false {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.item-status-badge.used-true {
    background: rgba(244, 63, 94, 0.15);
    color: #F43F5E;
    border: 1px solid rgba(244, 63, 94, 0.3);
}




/* ========================================================================== */
/*                       SIDEBAR ALIGNMENT FINAL FIX                          */
/* ========================================================================== */

.wallet-sidebar {
    padding: 1.5rem 1.2rem;
    /* Espaíamento lateral mais equilibrado */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Espaío padrão entre elementos */
}

/* Ocultar header vazio para não ocupar espaío */
.sidebar-header:empty {
    display: none;
}

/* Botão Toggle */
.sidebar-toggle {
    position: relative;
    /* Mudado de absolute para relative */
    top: auto;
    right: auto;
    align-self: flex-end;
    /* Alinha à direita */
    margin-bottom: 0.5rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Saldo */
.wallet-balance-display {
    margin: 0;
    /* Remove margem antiga */
    padding: 1.2rem;
    width: 100%;
}

.sidebar-balance {
    font-size: 1.8rem;
    /* Ajuste leve para caber melhor */
}

/* Navegação */
.wallet-nav {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1;
    /* Ocupa o espaío restante */
    margin-top: 1rem;
}

.nav-tab {
    padding: 0.9rem 1rem;
    border-radius: 10px;
    width: 100%;
}

/* Rodapé da Sidebar */
.sidebar-footer {
    margin-top: auto;
    width: 100%;
}

/* --- Ajustes para modo Colapsado --- */
.wallet-sidebar.collapsed {
    padding: 1.5rem 0.5rem;
    /* Menos padding lateral */
    align-items: center;
}

.wallet-sidebar.collapsed .sidebar-toggle {
    align-self: center;
    /* Centraliza o botão */
    margin-bottom: 2rem;
}

.wallet-sidebar.collapsed .wallet-nav {
    width: 100%;
    align-items: center;
}

.wallet-sidebar.collapsed .nav-tab {
    width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
}

.wallet-sidebar.collapsed .wallet-balance-display {
    padding: 0.5rem;
    margin-bottom: 1rem;
}




/* ========================================================================== */
/*                       SIDEBAR TOGGLE SPACING FIX                           */
/* ========================================================================== */

.wallet-sidebar {
    padding-top: 1rem;
    /* Ajuste para não ter muito espaío acima */
    gap: 1rem;
    /* Espaíamento reduzido entre os itens */
}

.sidebar-toggle {
    margin-bottom: 0;
    /* Remover margem inferior, usar o gap do flex container */
    align-self: flex-end;
    /* Alinha à direita */
    background: rgba(255, 255, 255, 0.08);
    /* Fundo mais visível */
}

.wallet-sidebar.collapsed .sidebar-toggle {
    margin-bottom: 0.5rem;
    /* Um pouco de margem na versão colapsada para separar do balanão */
    align-self: center;
}



/* ========================================================================== */
/*                       SIDEBAR SPACING FINE-TUNING                          */
/* ========================================================================== */

/* Ajusta o gap geral do flex container da sidebar */
.wallet-sidebar {
    gap: 0.8rem;
    /* Reduzir um pouco o espaçamento geral */
}

/* Ajusta a margem do botão de toggle em ambos os estados */
.sidebar-toggle {
    margin-bottom: 0.5rem;
    /* Adiciona uma margem inferior consistente */
}

/* Ajusta a margem superior do balance display para controlar o espaío abaixo do toggle */
.wallet-balance-display {
    margin-top: 0.5rem;
    /* Reduzir ou ajustar o espaçamento inicial */
}

/* Ajusta a margem do botão de toggle no estado colapsado */
.wallet-sidebar.collapsed .sidebar-toggle {
    margin-bottom: 1rem;
    /* Aumenta um pouco no modo colapsado para separar do saldo */
}

/* Garante que o sidebar-header realmente não contribua para o espaçamento */
.sidebar-header {
    margin: 0;
    padding: 0;
}



/* ========================================================================== */
/*                       SIDEBAR FINAL POLISH (TITLE & COMPACT NAV)           */
/* ========================================================================== */

/* --- Top Bar Layout --- */
.sidebar-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
    /* Espaío para o saldo abaixo */
}

.sidebar-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cor-texto-principal);
    letter-spacing: 0.1em;
    padding-left: 0.5rem;
}

/* Reset Toggle Button for Flex Context */
.sidebar-toggle {
    margin: 0;
    /* Margem controlada pelo flex container agora */
    align-self: auto;
}

/* Hide Title when Collapsed */
.wallet-sidebar.collapsed .sidebar-title {
    display: none;
}

/* Center Toggle when Collapsed */
.wallet-sidebar.collapsed .sidebar-top-bar {
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* --- Compact Navigation Spacing --- */
.wallet-nav {
    gap: 0.4rem;
    /* Reduzido de 0.8rem para 0.4rem */
    margin-top: 0.5rem;
    /* Reduzido o espaío do topo da lista */
}

.nav-tab {
    padding: 0.7rem 1rem;
    /* Padding vertical um pouco menor */
}

/* Ajuste no Balance Display para não ficar colado */
.wallet-balance-display {
    margin-top: 0;
    padding: 1rem;
    /* Padding interno um pouco menor */
}



/* ========================================================================== */
/*                       SIDEBAR NAV SPACING FINE-TUNING                      */
/* ========================================================================== */

/* Ajusta o espaçamento entre os botões de navegação */
.wallet-nav {
    gap: 0.2rem;
    /* Reduzir ainda mais o espaçamento entre os botões */
}

/* Ajusta o padding vertical dos botões de navegação para torná-los mais compactos */
.nav-tab {
    padding: 0.6rem 1rem;
    /* Padding vertical um pouco menor */
}

/* Ajusta o tamanho dos botões na sidebar colapsada para um visual mais compacto */
.wallet-sidebar.collapsed .nav-tab {
    height: 45px;
    width: 45px;
}



/* ========================================================================== */
/*                       SIDEBAR BUTTONS RE-DESIGN                            */
/* ========================================================================== */

.nav-tab {
    display: grid;
    grid-template-columns: 30px 1fr;
    /* Icon width fixed, text takes rest */
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    color: var(--cor-texto-secundario);
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    /* Prepare for border hover */
}

/* Icon Container */
.nav-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--cor-texto-terciario);
    transition: all 0.2s ease;
}

/* Hover State */
.nav-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    color: white;
    border-color: rgba(255, 255, 255, 0.05);
}

.nav-tab:hover .nav-icon {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Active State */
.nav-tab.active {
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.15) 0%, rgba(88, 101, 242, 0.05) 100%);
    border: 1px solid rgba(88, 101, 242, 0.2);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-tab.active .nav-icon {
    background: var(--cor-primaria);
    color: white;
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.4);
}

/* Text Adjustment */
.nav-tab span {
    white-space: nowrap;
    /* Prevent wrap */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsed State Override */
.wallet-sidebar.collapsed .nav-tab {
    grid-template-columns: 1fr;
    /* Center icon */
    padding: 0;
    width: 45px;
    height: 45px;
    justify-items: center;
}

.wallet-sidebar.collapsed .nav-icon {
    width: 100%;
    /* Fill the square */
    height: 100%;
    background: transparent;
    /* Remove background in collapsed unless active */
    font-size: 1.2rem;
}

.wallet-sidebar.collapsed .nav-tab:hover .nav-icon {
    background: rgba(255, 255, 255, 0.1);
}

.wallet-sidebar.collapsed .nav-tab.active .nav-icon {
    background: var(--cor-primaria);
}



/* ========================================================================== */
/*                       MODALS (HOLOGRAPHIC TECH STYLE)                      */
/* ========================================================================== */

/* Overlay - Fundo escuro focado */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Mais escuro para foco */
    backdrop-filter: blur(12px);
    /* Blur forte no fundo */
    z-index: 2000;
    /* Acima de TUDO (Header é 1000) */
    display: none;
    /* JS controla o display flex */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
}

/* Caixa do Modal */
.modal-content {
    background: #121214;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    width: 90%;
    max-width: 480px;
    position: relative;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    /* Borda interna sutil */
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    overflow: hidden;
}

/* Animação de Entrada */
.modal.active .modal-content {
    transform: scale(1) translateY(0);
}

/* Efeito de Topo Neon (Opcional, dá um toque premium) */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria));
}

/* Tipografia */
.modal-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: white;
}

.modal-content p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Botão Fechar (X) */
.close-button {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--cor-texto-terciario);
    cursor: pointer;
    transition: all 0.2s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.close-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: rotate(90deg);
}

/* Ações (Botões) */
.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.modal-actions button {
    flex: 1;
    /* Botões ocupam largura igual */
    padding: 1rem;
    border-radius: 10px;
}

/* --- Estilos Específicos para Tipos de Modal (se usar classes extras no JS) --- */

/* Modal de Inventário (Exemplo Visual) */
.modal-item-image {
    width: 100%;
    height: 200px;
    background-color: #000;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modal de Sucesso (Pode ser aplicado dinamicamente) */
.modal-success-icon {
    font-size: 4rem;
    color: var(--cor-terciaria);
    margin-bottom: 1.5rem;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}



/* ========================================================================== */
/*                       UNSTAKE / WITHDRAW BUTTONS                           */
/* ========================================================================== */

.unstake-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--cor-terciaria);
    background-color: rgba(16, 185, 129, 0.1);
    /* Green tint */
    color: var(--cor-terciaria);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    /* Prevent text wrap */
}

.unstake-btn:hover:not(:disabled) {
    background-color: var(--cor-terciaria);
    color: #000;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

.unstake-btn:disabled {
    border-color: var(--cor-texto-terciario);
    background-color: rgba(113, 113, 122, 0.1);
    /* Grey tint */
    color: var(--cor-texto-terciario);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}



/* ========================================================================== */
/*                       P2P TRANSFER TERMINAL RE-DESIGN                      */
/* ========================================================================== */

#transferencias {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p2p-container {
    width: 100%;
    max-width: 550px;
    /* Focus width */
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.8) 0%, rgba(20, 20, 25, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

/* Decorative Header Line */
.p2p-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--cor-primaria), transparent);
}

.tech-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Specific Style for P2P Inputs */
.p2p-container .input-group {
    position: relative;
}

.p2p-container .input-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cor-primaria-light);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

.p2p-container .tech-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(88, 101, 242, 0.2);
    padding: 1.2rem 1rem;
    /* Larger touch area */
    font-size: 1.1rem;
    color: white;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.p2p-container .tech-input:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.15);
    background: rgba(0, 0, 0, 0.5);
}

/* Amount Input Specifics */
#p2p-amount {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cor-terciaria);
    /* Green for money */
}

/* Send Button Polish */
.p2p-container .cta-button-secondary {
    background: var(--cor-primaria);
    border: none;
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.2rem;
    border-radius: 10px;
    margin-top: 1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}

.p2p-container .cta-button-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(88, 101, 242, 0.5);
    background: var(--cor-primaria-light);
}

/* Security Info Box */
.p2p-info {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    /* Amber warning tint */
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: #e0e0e0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.p2p-info i {
    color: var(--cor-aviso);
    font-size: 1.2rem;
    margin-top: 0.1rem;
}



/* ========================================================================== */
/*                       TAB VISIBILITY FIX (CRITICAL)                        */
/* ========================================================================== */

/* Ensure P2P container is hidden by default via tab logic */
#transferencias {
    display: none;
    /* Hide by default */
}

/* Only show and apply flex layout when active */
#transferencias.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeScale 0.3s ease;
    /* Smooth entry */
}



/* ========================================================================== */
/*                       MARKET: PREMIUM STORE DESIGN                         */
/* ========================================================================== */

.market-main-wrapper {
    padding-top: var(--header-height);
    background-color: #0b0b0e;
    min-height: 100vh;
}

/* --- Market Hero Banner --- */
.market-hero-banner {
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 5%;
    margin-bottom: 2rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    z-index: 1;
}

.market-hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    color: white;
}

.hero-label {
    background: var(--cor-primaria);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: inline-block;
}

.market-hero-content h1 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 900;
}

.market-hero-content p {
    font-size: 1.1rem;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
}

.hero-price-tag {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.old-price {
    text-decoration: line-through;
    color: var(--cor-texto-terciario);
    font-size: 1.1rem;
}

.new-price {
    color: var(--cor-terciaria);
    /* Green */
    font-size: 1.5rem;
    font-weight: 800;
}

/* --- Toolbar (Filters) --- */
.market-toolbar-container {
    padding: 0 5%;
    margin-bottom: 2rem;
}

.market-toolbar {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cor-texto-terciario);
}

.search-box input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    background: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
}

.search-box input:focus {
    border-color: var(--cor-primaria);
    outline: none;
}

.category-pills {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
}

.filter-pill {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--cor-texto-secundario);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-pill:hover,
.filter-pill.active {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
    box-shadow: 0 4px 10px rgba(88, 101, 242, 0.3);
}

/* --- Products Grid --- */
.market-content-area {
    padding: 0 5% 4rem;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
}

.product-card {
    background: #18181b;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

.product-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Gradient Overlay on Image Hover */
.product-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.product-card:hover .product-image::after {
    opacity: 1;
}

.product-card h4 {
    padding: 1rem 1rem 0;
    font-size: 1.1rem;
    margin: 0;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    padding: 0 1rem;
    margin-top: 0.5rem;
    color: var(--cor-terciaria);
    font-weight: 700;
}

.buy-product-btn {
    margin: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.2s;
}

.product-card:hover .buy-product-btn {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .market-hero-banner {
        height: auto;
        padding: 4rem 5%;
        text-align: center;
    }

    .market-hero-content {
        margin: 0 auto;
    }

    .hero-bg-overlay {
        background: rgba(0, 0, 0, 0.7);
    }

    .market-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .category-pills {
        justify-content: center;
    }
}



/* ========================================================================== */
/*                       INVENTORY ITEM BADGE                                 */
/* ========================================================================== */

.inventory-item-card {
    position: relative;
    /* Ensure absolute children position relative to card */
}

.item-qty-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--cor-terciaria);
    color: #000;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}



/* ========================================================================== */
/*                       INVENTORY MODAL ENHANCEMENTS                         */
/* ========================================================================== */

.modal-inventory-detail {
    max-width: 550px;
    /* Maior para mais detalhes */
    text-align: left;
}

.modal-item-image {
    max-height: 250px;
    /* Altura máxima para a imagem */
    width: auto;
    /* Deixa a largura auto para manter proporção */
    margin: 0 auto 1.5rem auto;
    /* Centraliza a imagem */
    display: block;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #000;
}

.modal-item-meta p {
    margin-bottom: 0.5rem;
    color: var(--cor-texto-principal);
    font-size: 0.95rem;
}

.modal-item-meta p strong {
    color: var(--cor-primaria-light);
}

/* Seção de Código Único */
.unique-code-section {
    background: #000;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: left;
}

.unique-code-section .section-label {
    font-size: 0.8rem;
    color: var(--cor-texto-terciario);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.code-display-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', monospace;
    /* Escapa as aspas internas */
    font-size: 1rem;
    color: var(--cor-terciaria);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.code-display-box .copy-code-btn {
    background: var(--cor-surface-hover);
    border: none;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    color: var(--cor-texto-secundario);
    cursor: pointer;
    transition: all 0.2s;
}

.code-display-box .copy-code-btn:hover {
    background: var(--cor-primaria);
    color: white;
}

/* Badge de Status de Uso */
.item-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}

.item-status-badge.used-false {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--cor-terciaria);
}

.item-status-badge.used-false i {
    color: var(--cor-terciaria);
}

.item-status-badge.used-true {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--cor-aviso);
}

.item-status-badge.used-true i {
    color: var(--cor-aviso);
}

/* Ações do Modal */
.modal-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.modal-actions button {
    flex: 1;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
}

.modal-actions .action-use {
    background-color: var(--cor-primaria);
    color: white;
}

.modal-actions .action-sell {
    background-color: var(--cor-secundaria);
    color: white;
}

.modal-actions button:disabled {
    background-color: var(--cor-surface-active);
    color: var(--cor-texto-terciario);
    cursor: not-allowed;
    box-shadow: none;
    border: none;
}



/* ========================================================================== */
/*                       INVENTORY GRID & ITEM CARD DESIGN                    */
/* ========================================================================== */

#inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    /* Cards menores */
    gap: 1.5rem;
    padding: 1rem 0;
}

.inventory-item-card {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.inventory-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px var(--cor-primaria-light);
    /* Brilho sutil no hover */
    border-color: var(--cor-primaria);
}

.inventory-item-card img {
    max-width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

.inventory-item-card .item-name {
    font-size: 0.9rem;
    color: var(--cor-texto-principal);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    /* Garante que o texto se encaixe */
}

/* Badge de Quantidade no Card */
.inventory-item-card .item-qty-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--cor-terciaria);
    color: #000;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* --- Empty State --- */
.empty-inventory {
    grid-column: 1 / -1;
    /* Ocupa toda a largura */
    text-align: center;
    padding: 3rem;
    color: var(--cor-texto-secundario);
    background: #121214;
    border: 1px dashed var(--cor-borda);
    border-radius: 12px;
    margin-top: 2rem;
}

.empty-inventory i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--cor-texto-terciario);
}

.empty-inventory a {
    color: var(--cor-primaria);
    font-weight: 600;
}

.empty-inventory a:hover {
    text-decoration: underline;
}



/* ========================================================================== */
/*                       INVENTORY ITEM VISIBILITY & MODAL Z-INDEX FIX        */
/* ========================================================================== */

/* Garante que o container do inventário seja visível e tenha um z-index padrão */
#inventory-grid {
    position: relative;
    z-index: 1;
    /* Garante que os cards não fiquem abaixo de outros elementos acidentalmente */
}

/* Garante que os cards sejam clicáveis */
.inventory-item-card {
    cursor: pointer;
    /* Garante que o cursor mude, indicando clicabilidade */
    user-select: none;
    /* Impede a seleção de texto ao clicar/arrastar */
    position: relative;
    /* Para z-index se necessário */
    z-index: 1;
}

/* Garante que o modal esteja sempre acima de tudo */
.modal {
    z-index: 2000 !important;
    /* Força o z-index para garantir visibilidade */
    position: fixed;
    /* Garante que ele flutue sobre o conteúdo */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Ocupa a tela toda */
}

.modal.active {
    display: flex !important;
    /* Força o display para flex */
    opacity: 1 !important;
}

.modal-content {
    position: relative;
    /* Para que o z-index funcione se precisar de subelementos */
    z-index: 2001;
    /* Levemente maior que o modal */
}

/* Overlay para garantir que o resto da página fique inativo */
.modal::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Fundo escuro */
    backdrop-filter: blur(8px);
    /* Efeito de blur */
    z-index: 1999;
    /* Abaixo do modal-content, mas acima do restante da página */
}


/* ========================================================================== */
/*                       ADMIN DASHBOARD (NEW LAYOUT)                         */
/* ========================================================================== */

.admin-body {
    background-color: #09090b;
    font-family: 'Inter', sans-serif;
    color: #e4e4e7;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.admin-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100vh;
}

/* --- Sidebar --- */
.admin-sidebar {
    background-color: #121214;
    border-right: 1px solid #27272a;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.admin-brand {
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.admin-brand i {
    color: #5865F2;
}

.admin-brand small {
    background: #27272a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #a1a1aa;
    font-weight: 600;
}

.menu-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #71717a;
    margin-bottom: 0.8rem;
    margin-top: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    color: #a1a1aa;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    margin-bottom: 0.3rem;
    transition: all 0.2s;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: white;
}

.menu-item.active {
    background: rgba(88, 101, 242, 0.1);
    color: #5865F2;
    border-left: 3px solid #5865F2;
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid #27272a;
    padding-top: 1rem;
}

.back-link {
    color: #71717a;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: white;
}

/* --- Main Area --- */
.admin-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: #09090b;
}

/* --- Topbar --- */
.admin-topbar {
    height: 70px;
    border-bottom: 1px solid #27272a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background: rgba(18, 18, 20, 0.8);
    backdrop-filter: blur(10px);
}

.topbar-left h2 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
}

.breadcrumb {
    font-size: 0.85rem;
    color: #71717a;
}

#breadcrumb-current {
    color: #e4e4e7;
    font-weight: 500;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#admin-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #27272a;
}

.admin-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: right;
}

.admin-info span {
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
}

.admin-info small {
    color: #71717a;
    font-size: 0.75rem;
}

/* --- Content Area --- */
.admin-content-area {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.admin-view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.admin-view.active {
    display: block;
}

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

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

/* --- Dashboard Widgets --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: #18181b;
    border: 1px solid #27272a;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #27272a;
}

.icon-box.blue {
    background: rgba(88, 101, 242, 0.15);
    color: #5865F2;
}

.icon-box.green {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.icon-box.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.icon-box.orange {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-info h4 {
    margin: 0;
    color: #71717a;
    font-size: 0.85rem;
    font-weight: 500;
}

.stat-info p {
    margin: 0.3rem 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}

/* --- Content Blocks --- */
.content-block {
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.block-header {
    border-bottom: 1px solid #27272a;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* --- Forms & Inputs --- */
.admin-form .form-group {
    margin-bottom: 1.2rem;
}

.admin-form label {
    display: block;
    font-size: 0.85rem;
    color: #a1a1aa;
    margin-bottom: 0.5rem;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 0.7rem;
    background: #27272a;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    color: white;
    font-family: inherit;
}

.admin-form input:focus {
    border-color: #5865F2;
    outline: none;
}

.inline-admin-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.inline-admin-form input,
.inline-admin-form select {
    flex: 1;
    padding: 0.7rem;
    background: #27272a;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    color: white;
}

/* --- Layout Utils --- */
.view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.content-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.market-admin-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.admin-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: end;
}

.media-preview {
    width: 100%;
    height: 150px;
    background: #000;
    margin: 1rem 0;
    border-radius: 6px;
    border: 1px dashed #3f3f46;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .view-grid,
    .content-grid-3,
    .market-admin-layout,
    .admin-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        display: none;
    }
}

topbar {
    height: 70px;
    border-bottom: 1px solid #27272a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background: rgba(18, 18, 20, 0.8);
    backdrop-filter: blur(10px);
}

.topbar-left h2 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
}

.breadcrumb {
    font-size: 0.85rem;
    color: #71717a;
}

#breadcrumb-current {
    color: #e4e4e7;
    font-weight: 500;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#admin-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #27272a;
}

.admin-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: right;
}

.admin-info span {
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
}

.admin-info small {
    color: #71717a;
    font-size: 0.75rem;
}

/* --- Content Area --- */
.admin-content-area {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.admin-view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.admin-view.active {
    display: block;
}

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

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

/* --- Dashboard Widgets --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: #18181b;
    border: 1px solid #27272a;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #27272a;
}

.icon-box.blue {
    background: rgba(88, 101, 242, 0.15);
    color: #5865F2;
}

.icon-box.green {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.icon-box.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.icon-box.orange {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-info h4 {
    margin: 0;
    color: #71717a;
    font-size: 0.85rem;
    font-weight: 500;
}

.stat-info p {
    margin: 0.3rem 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}

/* --- Content Blocks --- */
.content-block {
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.block-header {
    border-bottom: 1px solid #27272a;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* --- Forms & Inputs --- */
.admin-form .form-group {
    margin-bottom: 1.2rem;
}

.admin-form label {
    display: block;
    font-size: 0.85rem;
    color: #a1a1aa;
    margin-bottom: 0.5rem;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 0.7rem;
    background: #27272a;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    color: white;
    font-family: inherit;
}

.admin-form input:focus {
    border-color: #5865F2;
    outline: none;
}

.inline-admin-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.inline-admin-form input,
.inline-admin-form select {
    flex: 1;
    padding: 0.7rem;
    background: #27272a;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    color: white;
}

/* --- Layout Utils --- */
.view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.content-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.market-admin-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.admin-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: end;
}

.media-preview {
    width: 100%;
    height: 150px;
    background: #000;
    margin: 1rem 0;
    border-radius: 6px;
    border: 1px dashed #3f3f46;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .view-grid,
    .content-grid-3,
    .market-admin-layout,
    .admin-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        display: none;
    }
}

.nav-tab {
    position: relative;
    overflow: hidden;
    /* For animations */
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.2s;
}

/* Active State Polish */
.nav-tab.active {
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.2) 0%, transparent 100%);
    border-left: 3px solid var(--cor-primaria);
    box-shadow: none;
    /* Cleaner look */
}

.nav-tab.active i {
    color: var(--cor-primaria-light);
    text-shadow: 0 0 10px rgba(88, 101, 242, 0.5);
}

/* --- Collapsed State Beauty --- */
.wallet-sidebar.collapsed {
    width: 70px;
    /* Slimmer */
    padding: 1rem 0;
}

.wallet-sidebar.collapsed .sidebar-header {
    padding: 0;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

/* Hide Text Smoothly */
.wallet-sidebar.collapsed span {
    display: none;
}

/* Center Icons */
.wallet-sidebar.collapsed .nav-tab {
    justify-content: center;
    padding: 1rem 0;
    border-left: 3px solid transparent;
    /* Prepare for active border */
}

.wallet-sidebar.collapsed .nav-tab.active {
    border-left: 3px solid var(--cor-primaria);
    background: rgba(255, 255, 255, 0.03);
}

.wallet-sidebar.collapsed .nav-icon {
    font-size: 1.4rem;
    /* Larger icons when collapsed */
}

/* Balance in Collapsed Mode */
.wallet-sidebar.collapsed .wallet-balance-display {
    background: transparent;
    border: none;
    padding: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.wallet-sidebar.collapsed .wallet-balance-display h1,
.wallet-sidebar.collapsed .wallet-balance-display .label,
.wallet-sidebar.collapsed .wallet-balance-display .mini-stats {
    display: none;
}

/* Show simple icon instead */
.wallet-sidebar.collapsed .wallet-balance-display::after {
    content: '\f51e';
    /* Coins Icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #FFD700;
    font-size: 1.8rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    animation: floatIcon 3s ease-in-out infinite;
}

/* Toggle Button Placement */
.sidebar-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    /* Move toggle to center when collapsed or keep it right? Let's hide it in header area or move it */
}

.wallet-sidebar.collapsed .sidebar-toggle {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 1rem auto;
}

/* Back Link in Collapsed */
.wallet-sidebar.collapsed .back-link {
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.wallet-sidebar.collapsed .back-link i {
    margin: 0;
}

/* ========================================================================== */
/*                       INVENTORY MODAL STYLING (ENHANCED)                   */
/* ========================================================================== */

.modal-inventory-detail {
    max-width: 500px !important;
    /* Force width */
    text-align: center;
    background: linear-gradient(145deg, #18181B, #0e0e10) !important;
    border: 1px solid var(--cor-borda-highlight) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

.modal-item-image {
    width: 180px;
    height: 180px;
    object-fit: contain;
    margin: 0 auto 1.5rem;
    display: block;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.modal-inventory-detail h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--cor-texto-principal);
}

.modal-item-meta {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.2rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-item-meta p {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: var(--cor-texto-secundario);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.modal-item-meta p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal-item-meta p strong {
    color: white;
    font-weight: 600;
}

/* Unique Code Section Styling */
.unique-code-section {
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.unique-code-section .section-label {
    font-size: 0.8rem;
    color: var(--cor-primaria-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.unique-code-section .code-display-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.8rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    color: white;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.item-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.item-status-badge.used-false {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.item-status-badge.used-true {
    background: rgba(244, 63, 94, 0.15);
    color: #F43F5E;
    border: 1px solid rgba(244, 63, 94, 0.3);
}


/* ========================================================================== */
/*                                FOOTER (RESTAURADO)                         */
/* ========================================================================== */

footer {
    padding: 5rem 5% 2rem;
    background: var(--cor-background-alt);
    border-top: 1px solid var(--cor-borda);
    margin-top: auto;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto 4rem;
}

.footer-column h4 {
    color: white;
    margin-bottom: 1.2rem;
}

.footer-column a {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
}

.footer-column a:hover {
    color: var(--cor-primaria);
    transform: translateX(3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--cor-texto-terciario);
    font-size: 0.85rem;
}

/* --- Modal Priority Fix --- */
#custom-confirm-modal {
    z-index: 30000 !important;
}

#inventory-item-modal,
#product-details-modal {
    z-index: 20000;
}

/* Mobile Menu Toggle (Hidden on Desktop) */
.mobile-menu-toggle {
    display: none;
}

/* No desktop (≥1280px), garante que o nav-links funciona normalmente */
@media (min-width: 1281px) {
    .nav-links {
        /* Reset de quaisquer transformações mobile */
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        flex-direction: row !important;
        visibility: visible !important;
        border-right: none !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
        overflow: visible !important;
        margin: 0 1rem !important;
        justify-content: center !important;
    }
    .nav-links::before { display: none !important; }
    .logo {
        position: static !important;
        transform: none !important;
    }
}



/* --- Header Action Buttons (Desktop & Global) --- */
.nav-actions {
    display: flex;
    align-items: center;
}

/* Botões de ícone no header (Logout, Admin) */
.icon-btn-header,
.logout-btn {
    width: 42px;
    /* Largura fixa igual à altura */
    height: 42px;
    /* Altura para combinar com o perfil */
    padding: 0 !important;
    /* Remove padding lateral */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Circular para ficar moderno */
    font-size: 1rem;
    margin-left: 0.5rem;
    color: var(--cor-texto-secundario);
    transition: all 0.2s ease;
}

.icon-btn-header:hover,
.logout-btn:hover {
    background-color: var(--cor-surface-hover);
    color: white;
    transform: translateY(-2px);
    border-color: var(--cor-primaria);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.icon-btn-header i,
.logout-btn i {
    margin: 0;
    /* Garante centralização do ícone */
}

/* Ajuste fino para o perfil */
.user-profile-link {
    height: 42px;
    padding-right: 1.2rem;
    /* Mais espaío para o texto */
}


/* --- Dashboard Header (Custom Banner) --- */
.dashboard-header-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    /* Gradiente padrão se não tiver imagem, ou overlay se tiver */
    background-color: var(--cor-surface);
    transition: background-image 0.5s ease;
}

/* Overlay Escuro para Legibilidade */
.dashboard-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 0;
}

/* Garante que o conteúdo fique sobre o overlay */
.dashboard-header-card>* {
    position: relative;
    z-index: 1;
}

/* Botão de Editar Banner */
.edit-banner-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    opacity: 0;
    /* Esconde por padrão, mostra no hover */
}

.edit-banner-btn[hidden] {
    display: none !important;
}

.dashboard-header-card:hover .edit-banner-btn {
    opacity: 1;
}

.edit-banner-btn:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    transform: scale(1.1);
}

/* Ajuste nos cards internos para Glassmorphism sobre o banner */
.wallet-summary-dashboard {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}


/* Toast Notifications (Global) */
#toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toast {
    min-width: 320px;
    background: var(--cor-surface);
    color: white;
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--cor-primaria);
    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    font-weight: 500;
}

.toast-success {
    border-left-color: var(--cor-terciaria);
}

.toast-error {
    border-left-color: var(--cor-secundaria);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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


/* RGB Animation for Username */
@keyframes rainbow-text {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.rgb-text {
    background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-text 6s ease infinite;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}


/* --- NOVO LAYOUT DASHBOARD (Grande + Pequeno) --- */

@media (min-width: 1024px) {
    .dashboard-split-grid.has-ai-panel .activity-panel {
        grid-column: span 2;
    }
}
.dashboard-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 1024px) {
    .dashboard-split-grid {
        grid-template-columns: 2.5fr 1fr;
        /* Proporção Grande vs Pequeno */
    }
}

/* Painel Genérico */
.panel-card {
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- PAINEL STEAM (Grande) --- */
.steam-panel {
    background: linear-gradient(135deg, #171a21 0%, #1b2838 100%);
    /* Cores Steam */
    border: 1px solid rgba(102, 192, 244, 0.35);
    border-radius: 16px;
    color: #c7d5e0;
    min-height: 300px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.steam-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(102, 192, 244, 0.1), transparent 60%);
    pointer-events: none;
}

.steam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2a475e;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.steam-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.steam-logo i {
    font-size: 1.8rem;
    color: #66c0f4;
}

/* Estado "Não Conectado" */
.steam-connect-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
    padding: 2rem;
}

.steam-connect-btn {
    background: linear-gradient(90deg, #06BFFF 0%, #2D73FF 100%);
    /* Botão Login Steam */
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: filter 0.2s;
    font-family: sans-serif;
}

.steam-connect-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 15px rgba(6, 191, 255, 0.3);
}

/* --- PAINEL NOTIFICAÇÕES (Pequeno) --- */
.activity-panel {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(10px);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cor-borda);
}

.panel-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--cor-texto-principal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

.notif-item {
    display: flex;
    align-items: start;
    gap: 0.8rem;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 2px solid var(--cor-terciaria);
    font-size: 0.85rem;
    transition: background 0.2s;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notif-icon {
    margin-top: 2px;
    color: var(--cor-terciaria);
}

.notif-content p {
    margin: 0;
    color: var(--cor-texto-secundario);
}

.notif-time {
    font-size: 0.7rem;
    color: var(--cor-texto-terciario);
    margin-top: 4px;
    display: block;
}


/* ========================================================================== */
/*                       STEAM INTEGRATION PANEL                              */
/* ========================================================================== */

.steam-panel {
    background: linear-gradient(145deg, #171a21, #1b2838);
    /* Cores Steam */
    border: 1px solid rgba(102, 192, 244, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
}

.steam-panel .steam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

.steam-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: #c7d5e0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.steam-logo i {
    font-size: 1.5rem;
    color: #66c0f4;
    /* Steam Blue */
}

/* Estado Desconectado */
.steam-connect-state.disconnected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 1rem;
}

.steam-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(90deg, #171a21 0%, #1b2838 100%);
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #66c0f4;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(102, 192, 244, 0.1);
}

.steam-connect-btn:hover {
    background: #66c0f4;
    color: #000;
    box-shadow: 0 0 25px rgba(102, 192, 244, 0.4);
}

/* Estado Conectado */
.steam-profile-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.steam-user-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.steam-avatar-frame {
    position: relative;
    width: 74px;
    height: 74px;
}

.steam-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    /* Steam avatars are usually square-ish */
    border: 2px solid #3d4450;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.steam-avatar-frame.online img {
    border-color: #66c0f4;
    box-shadow: 0 0 10px rgba(102, 192, 244, 0.4);
}

.steam-avatar-frame.ingame img {
    border-color: #90ba3c;
    box-shadow: 0 0 10px rgba(144, 186, 60, 0.4);
}

.steam-status-dot {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #6a6a6a;
    border: 2px solid #171a21;
    border-radius: 50%;
}

.online .steam-status-dot {
    background: #66c0f4;
}

.ingame .steam-status-dot {
    background: #90ba3c;
}

.steam-text-details h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.2;
}

.steam-status-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #66c0f4;
}

.steam-status-text.ingame {
    color: #90ba3c;
}

.steam-status-text.offline {
    color: #898989;
}

.steam-game-activity {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #90ba3c;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Lista de Jogos */
.steam-games-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    /* Custom Scrollbar for this div */
    scrollbar-width: thin;
    scrollbar-color: #3d4450 transparent;
}

.steam-games-scroll::-webkit-scrollbar {
    height: 6px;
}

.steam-games-scroll::-webkit-scrollbar-thumb {
    background: #3d4450;
    border-radius: 10px;
}

.steam-game-card {
    position: relative;
    flex: 0 0 140px;
    /* Fixed width */
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, border-color 0.2s;
}

.steam-game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}

.steam-game-card:hover {
    transform: translateY(-3px);
    border-color: #66c0f4;
}

.steam-game-tooltip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4px 6px;
    background: rgba(23, 26, 33, 0.9);
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.steam-game-card:hover .steam-game-tooltip {
    transform: translateY(0);
}


/* ========================================================================== */
/*                   STEAM BIG PICTURE PANEL (ULTIMATE V2)                    */
/* ========================================================================== */

.steam-panel {
    /* Reset e Base */
    background: #171a21;
    border: 1px solid rgba(102, 192, 244, 0.3);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    min-height: 450px;
    /* Mais alto como solicitado */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

/* Fundo Dinâmico do Jogo Atual */
.steam-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    filter: blur(2px);
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);
    transition: opacity 0.5s ease;
}

.steam-panel-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* --- Top Header (User & Status) --- */
.steam-top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.steam-user-badge {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.steam-avatar-big {
    width: 90px;
    height: 90px;
    position: relative;
}

.steam-avatar-big img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border: 3px solid #3d4450;
}

/* Status Colors */
.steam-panel.online .steam-avatar-big img {
    border-color: #66c0f4;
}

.steam-panel.ingame .steam-avatar-big img {
    border-color: #90ba3c;
}

.steam-panel.ingame .steam-bg-overlay {
    opacity: 0.4;
}

/* Mais visível se jogando */

.steam-user-details h2 {
    margin: 0;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.steam-status-label {
    font-size: 1.1rem;
    color: #66c0f4;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.steam-panel.ingame .steam-status-label {
    color: #90ba3c;
}

/* --- Main Grid Layout --- */
.steam-grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
    /* Alinhamento perfeito no topo */
    flex: 1;
}

/* Recent Games (Capa Vertical) */
.steam-section-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8f98a0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.steam-games-row {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 20px 10px;
    /* Espaço para o zoom crescer sem cortar */
    margin: -20px -10px;
    /* Anula o espaço extra para manter o alinhamento */
    scrollbar-width: thin;
    scrollbar-color: #66c0f4 rgba(0, 0, 0, 0.3);
}

.steam-game-cover {
    flex: 0 0 110px;
    height: 160px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.steam-game-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.steam-game-cover:hover {
    transform: scale(1.1);
    /* Zoom sutil sem cortes */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
    z-index: 5;
    border: 2px solid #66c0f4;
}

.steam-game-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 10px 5px;
    font-size: 0.8rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.steam-game-cover:hover .steam-game-info-overlay {
    opacity: 1;
}

/* Achievements Section */
.steam-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
}

.achievement-item {
    width: 50px;
    height: 50px;
    background: #2a2a2a;
    border: 1px solid #3d4450;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.achievement-item img {
    width: 100%;
    height: 100%;
}

.achievement-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
    border: 1px solid #66c0f4;
}

.achievement-item:hover {
    border-color: #f0ad4e;
}

.achievement-item:hover .achievement-tooltip {
    opacity: 1;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .steam-grid-layout {
        grid-template-columns: 1fr;
    }

    .steam-avatar-big {
        width: 60px;
        height: 60px;
    }

    .steam-user-details h2 {
        font-size: 1.5rem;
    }
}


/* ========================================================================== */
/*                   STEAM BIG PICTURE PANEL (ULTIMATE V2)                    */
/* ========================================================================== */

.steam-panel {
    /* Reset e Base */
    background: #171a21;
    border: 1px solid rgba(102, 192, 244, 0.3);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    min-height: 450px;
    /* Mais alto como solicitado */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

/* Fundo Dinâmico do Jogo Atual */
.steam-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    filter: blur(2px);
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);
    transition: opacity 0.5s ease;
}

.steam-panel-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* --- Top Header (User & Status) --- */
.steam-top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.steam-user-badge {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.steam-avatar-big {
    width: 90px;
    height: 90px;
    position: relative;
}

.steam-avatar-big img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border: 3px solid #3d4450;
}

/* Status Colors */
.steam-panel.online .steam-avatar-big img {
    border-color: #66c0f4;
}

.steam-panel.ingame .steam-avatar-big img {
    border-color: #90ba3c;
}

.steam-panel.ingame .steam-bg-overlay {
    opacity: 0.4;
}

/* Mais visível se jogando */

.steam-user-details h2 {
    margin: 0;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.steam-status-label {
    font-size: 1.1rem;
    color: #66c0f4;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.steam-panel.ingame .steam-status-label {
    color: #90ba3c;
}

/* --- Main Grid Layout --- */
.steam-grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
    /* Alinhamento perfeito no topo */
    flex: 1;
}

/* Recent Games (Capa Vertical) */
.steam-section-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8f98a0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.steam-games-row {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 20px 10px;
    /* Espaço para o zoom crescer sem cortar */
    margin: -20px -10px;
    /* Anula o espaço extra para manter o alinhamento */
    scrollbar-width: thin;
    scrollbar-color: #66c0f4 rgba(0, 0, 0, 0.3);
}

.steam-game-cover {
    flex: 0 0 110px;
    height: 160px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.steam-game-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.steam-game-cover:hover {
    transform: scale(1.1);
    /* Zoom sutil sem cortes */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
    z-index: 5;
    border: 2px solid #66c0f4;
}

.steam-game-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 10px 5px;
    font-size: 0.8rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.steam-game-cover:hover .steam-game-info-overlay {
    opacity: 1;
}

/* Achievements Section */
.steam-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
}

.achievement-item {
    width: 50px;
    height: 50px;
    background: #2a2a2a;
    border: 1px solid #3d4450;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.achievement-item img {
    width: 100%;
    height: 100%;
}

.achievement-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
    border: 1px solid #66c0f4;
}

.achievement-item:hover {
    border-color: #f0ad4e;
}

.achievement-item:hover .achievement-tooltip {
    opacity: 1;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .steam-grid-layout {
        grid-template-columns: 1fr;
    }

    .steam-avatar-big {
        width: 60px;
        height: 60px;
    }

    .steam-user-details h2 {
        font-size: 1.5rem;
    }
}


/* ========================================================================== */
/*                   STEAM STATS & BADGES EXTENSIONS                          */
/* ========================================================================== */

/* Badge de Nível (Steam Style) */
.steam-level-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #9b9b9b;
    /* Nível 0-9 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-left: 1rem;
}

/* Cores de Nível Steam */
.p-lvl-10 {
    border-color: #c02942;
}

/* 10-19: Vermelho */
.p-lvl-20 {
    border-color: #d95b43;
}

/* 20-29: Laranja */
.p-lvl-30 {
    border-color: #fecc2f;
}

/* 30-39: Amarelo */
.p-lvl-40 {
    border-color: #467a3c;
}

/* 40-49: Verde */
.p-lvl-50 {
    border-color: #4d8cb2;
}

/* 50-59: Azul */
.p-lvl-60 {
    border-color: #705498;
}

/* 60-69: Roxo */
.p-lvl-70 {
    border-color: #c25283;
}

/* 70-79: Rosa */
.p-lvl-80 {
    border-color: #5e1c48;
}

/* 80-89: Vinho */
.p-lvl-90 {
    border-color: #634a1a;
}

/* 90-99: Marrom */
.p-lvl-100 {
    border-color: #fff;
    box-shadow: 0 0 15px #fff;
}

/* 100+: Brilhante */

/* Stats Row (Games, Years) */
.steam-stats-row {
    display: flex;
    gap: 2rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.steam-stat-item {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: #8f98a0;
}

.steam-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

/* Playtime Badge on Game Cover */
.game-playtime-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}


/* Botão de Desconectar Steam */
.steam-unlink-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ef4444;
    /* Vermelho erro */
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.steam-unlink-btn:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
    transform: scale(1.1);
}


/* Seção de Insights da Steam */
.steam-insights-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.insight-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.insight-label {
    font-size: 0.8rem;
    color: #8f98a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insight-value {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
}

.persona-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.persona-casual {
    background: #67c1f5;
    color: #000;
}

.persona-dedicated {
    background: #90ba3c;
    color: #000;
}

.persona-hardcore {
    background: #f43f5e;
    color: #fff;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.4);
}

.steam-quick-actions {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.mini-action-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.75rem;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
}

.mini-action-btn:hover {
    background: #66c0f4;
    color: #000;
    border-color: #66c0f4;
}

/* ========================================================================== */
/*                       PREMIUM ACTIVITY FEED STYLES                         */
/* ========================================================================== */

.activity-panel {
    background: rgba(20, 20, 25, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px);
    align-self: start;
    width: 100%;
}

.activity-panel .notification-list {
    flex: 0 1 auto;
    max-height: 260px;
    min-height: 0;
    scrollbar-gutter: stable;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 5px 10px 15px 5px;
    margin-top: 0.5rem;
}

.dashboard-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.2s ease;
    list-style: none;
    width: 100%;
    box-sizing: border-box;
}

.dashboard-activity-item span {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: #e4e4e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.dashboard-activity-details {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.dashboard-activity-details span {
    width: 100%;
}

.dashboard-activity-details small {
    color: #71717a;
    font-size: 0.7rem;
    line-height: 1.2;
}

.dashboard-activity-empty {
    padding: 1rem;
    color: #a1a1aa;
    font-size: 0.9rem;
    text-align: center;
}

.dashboard-activity-item strong {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.activity-icon-box {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    /* Impede o ícone de amassar */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.activity-info {
    flex: 1;
    /* Ocupa todo o espaço central */
    min-width: 0;
    /* Essencial para o truncate funcionar no flex */
    display: flex;
    flex-direction: column;
}

.activity-info .desc {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e4e4e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Corta nomes gigantes com ... */
    display: block;
}

.activity-info .time {
    font-size: 0.7rem;
    color: #71717a;
    text-transform: capitalize;
}

.activity-amount {
    flex-shrink: 0;
    /* Garante que o valor não suma */
    font-size: 0.9rem;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    padding-left: 0.5rem;
    text-align: right;
}

.activity-amount.income {
    color: #10B981;
}

.activity-amount.outcome {
    color: #F43F5E;
}


/* ========================================================================== */
/*                       STEAM PANEL RESPONSIVENESS                           */
/* ========================================================================== */

@media (max-width: 992px) {
    .steam-top-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .steam-insights-card {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .steam-panel-content {
        padding: 1.5rem;
        gap: 2rem;
    }

    .steam-user-details h2 {
        font-size: 1.8rem;
    }

    .steam-avatar-big {
        width: 80px;
        height: 80px;
    }

    .steam-grid-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .steam-section-title {
        font-size: 0.75rem;
    }

    .steam-game-cover {
        flex: 0 0 110px;
        /* Reduz um pouco no mobile */
        height: 165px;
    }

    /* Melhora o scroll de jogos no touch */
    .steam-games-row {
        padding: 15px 5px;
        margin: -15px -5px;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .steam-user-badge {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .steam-user-details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .steam-user-details h2 {
        text-align: center;
    }

    .steam-stats-row {
        justify-content: center;
        width: 100%;
    }

    .steam-insights-card {
        padding: 1rem;
    }

    .steam-achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
        gap: 8px;
    }

    .achievement-item {
        width: 45px;
        height: 45px;
    }
}


/* ========================================================================== */
/*                       DASHBOARD QUICK INVENTORY                            */
/* ========================================================================== */

.inventory-dashboard-panel {
    margin-top: 2rem;
    background: rgba(24, 24, 27, 0.4) !important;
}

.inventory-mini-list {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--cor-primaria) transparent;
}

.inventory-mini-list::-webkit-scrollbar {
    height: 4px;
}

.inventory-mini-list::-webkit-scrollbar-thumb {
    background: var(--cor-primaria);
    border-radius: 10px;
}

.mini-inventory-item {
    flex: 0 0 160px;
    /* Largura fixa */
    min-height: 200px;
    /* Altura mínima fixa para garantir igualdade */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Distribui conteúdo uniformemente */
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mini-inventory-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-8px);
    border-color: var(--cor-primaria);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(var(--cor-primaria-rgb), 0.2);
}

.mini-inventory-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--cor-primaria);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.mini-inventory-item:hover::after {
    transform: scaleX(1);
}

.mini-inventory-item .img-box {
    width: 100%;
    aspect-ratio: 1/1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.mini-inventory-item:hover .img-box {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.5);
}

.mini-inventory-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

.mini-inventory-item .info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 4px;
    margin-top: auto;
}

.mini-inventory-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.mini-item-type {
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--cor-primaria) !important;
    opacity: 0.7;
    margin-bottom: 2px;
}


/* Scroll interno para lista de produtos no admin */
#product-list-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding-right: 5px;
}

#product-list-container::-webkit-scrollbar {
    width: 6px;
}


/*                          FEEDBACK SYSTEM (FAB - DESATIVADO)                */
.feedback-fab {
    display: none !important;
}

.feedback-panel {
    display: none !important;
}

.feedback-panel {
    position: fixed;
    bottom: 100px;
    left: 30px;
    width: 350px;
    background: rgba(18, 18, 20, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    z-index: 9998;
    overflow: hidden;
    transform: translateY(20px) scale(0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

.feedback-panel.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.fp-header {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fp-header h3 {
    font-size: 1rem;
    color: #fff;
    margin: 0;
    font-family: 'Syncopate', sans-serif;
}

.fp-close {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
}

.fp-close:hover {
    color: #fff;
    transform: rotate(90deg);
}

.fp-body {
    padding: 1.5rem;
}

.fp-body p {
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Rating Stars */
.rating-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.rating-stars input {
    display: none;
}

.rating-stars label {
    font-size: 1.8rem;
    color: #222;
    cursor: pointer;
    transition: 0.2s;
}

.rating-stars label:hover,
.rating-stars label:hover~label,
.rating-stars input:checked~label {
    color: var(--cor-aviso);
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.fp-body .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-body label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #555;
    text-transform: uppercase;
}

.fp-body textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    color: #fff;
    resize: none;
    font-family: inherit;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .feedback-panel {
        width: calc(100% - 40px);
        left: 20px;
        bottom: 90px;
    }

    .feedback-fab {
        bottom: 20px;
        left: 20px;
    }
}

/* Restante do CSS original */

/* --- VIP VISUAL SYSTEM --- */
.vip-username {
    color: #FFD700 !important;
    font-weight: 900 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.vip-tag {
    background: linear-gradient(90deg, #FFD700, #FDB931);
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    /* Fix para texto invisível dentro de rgb-text */
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
    margin-left: 5px;
}

.vip-username .vip-tag {
    color: #000 !important;
}

.vip-border {
    border: 2px solid #FFD700 !important;
}

.vip-glow {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.3) !important;
}

/* ========================================================================== */
/*                          JARVIS INTRO MODAL                                */
/* ========================================================================== */

.jarvis-intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.jarvis-intro-overlay.active {
    opacity: 1;
    visibility: visible;
}

.jarvis-intro-modal {
    background: linear-gradient(160deg, rgba(20, 18, 30, 0.98), rgba(12, 12, 18, 0.98));
    border: 1px solid rgba(88, 101, 242, 0.2);
    border-radius: 20px;
    padding: 2rem 2rem 1.5rem;
    max-width: 460px;
    width: 92%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(88, 101, 242, 0.08);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jarvis-intro-overlay.active .jarvis-intro-modal {
    transform: translateY(0) scale(1);
}

.jarvis-intro-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #71717A;
    font-size: 1.3rem;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.jarvis-intro-close:hover {
    background: rgba(244, 63, 94, 0.15);
    color: #F43F5E;
    border-color: rgba(244, 63, 94, 0.3);
}

.jarvis-intro-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.jarvis-intro-header > i {
    font-size: 2rem;
    color: var(--cor-primaria);
    filter: drop-shadow(0 0 12px rgba(88, 101, 242, 0.5));
    margin-bottom: 0.5rem;
}

.jarvis-intro-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.jarvis-intro-tagline {
    font-size: 0.85rem;
    color: #71717A;
    font-weight: 500;
}

.jarvis-intro-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.jarvis-intro-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.9rem;
}

.jarvis-intro-section h3 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cor-primaria-light);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jarvis-intro-section h3 i {
    font-size: 0.7rem;
}

.jarvis-intro-section p {
    font-size: 0.73rem;
    color: #A1A1AA;
    line-height: 1.5;
}

.jarvis-intro-section p strong {
    color: #E4E4E7;
}

.jarvis-intro-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-dark));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.jarvis-intro-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}

/* Discord Login Button Global Style */
.discord-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--cor-primaria);
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.discord-login-btn:hover {
    background-color: var(--cor-primaria-light);
    transform: translateY(-2px);
    box-shadow: none;
}

.discord-login-btn i {
    font-size: 1.1rem;
}


/* ========================================================================== */
/*                     FLOATING NEWS CLOUD & MODAL UI                         */
/* ========================================================================== */

.news-cloud-container {
    position: fixed;
    top: 90px;
    right: 30px;
    z-index: 9999;
    cursor: pointer;
    animation: cloud-float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(88, 101, 242, 0.4));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.news-cloud-container:hover {
    transform: scale(1.15) rotate(5deg);
}

.news-cloud-icon {
    font-size: 2.5rem;
    color: #fff;
    position: relative;
}

/* Nuvem de Novidades Minimalista (Mais de 1 mês) */
.news-cloud-container.minimalist {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    opacity: 0.55;
    animation: cloud-float-slow 8s ease-in-out infinite;
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.news-cloud-container.minimalist:hover {
    opacity: 1;
    transform: scale(1.15) rotate(2deg);
    filter: drop-shadow(0 0 10px rgba(88, 101, 242, 0.3));
}

.news-cloud-container.minimalist .news-cloud-icon {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.6);
}

.news-cloud-container.minimalist .news-cloud-badge {
    display: none !important;
}

@keyframes cloud-float-slow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.news-cloud-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #F43F5E;
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid #09090B;
    animation: pulse-red 2s infinite;
}

@keyframes cloud-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(244, 63, 94, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
    }
}

/* Modal de Novidades */
.news-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.news-modal.active {
    display: flex;
}

.news-modal-content {
    background: #121214;
    border: 1px solid #27272A;
    width: 100%;
    max-width: 600px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modal-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-slide-up {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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

.news-modal-header {
    padding: 25px 30px;
    border-bottom: 1px solid #27272A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.1) 0%, transparent 100%);
}

.news-modal-header h2 {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-modal-header h2 i {
    color: #5865F2;
}

.news-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #71717A;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-close-btn:hover {
    background: #F43F5E;
    color: white;
    transform: rotate(90deg);
}

.news-modal-body {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.news-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
}

.news-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.news-item-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.tag-update {
    background: rgba(88, 101, 242, 0.15);
    color: #7983F5;
}

.tag-fix {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.tag-event {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.tag-new {
    background: rgba(244, 63, 94, 0.15);
    color: #F43F5E;
}

.news-item-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.news-item-desc {
    font-size: 0.95rem;
    color: #A1A1AA;
    line-height: 1.6;
}

.news-item-date {
    font-size: 0.75rem;
    color: #71717A;
    margin-top: 12px;
    display: block;
}

.news-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #27272A;
    text-align: center;
}

.news-modal-footer p {
    font-size: 0.8rem;
    color: #71717A;
}

/* Marca Supremacy Estilo Cartoon/Comunidade */
.brand-supremacy {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(to bottom, #ffffff 10%, #d4d4d8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-transform: uppercase;
}

/* ========================================================================== */
/*                                UNIFIED FOOTER                              */
/* ========================================================================== */

.unified-footer {
    background: rgba(10, 5, 15, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4rem 5% 2rem;
    margin-top: auto;
    margin-bottom: 0 !important;
    color: #94a3b8;
}

.unified-footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
}

.unified-footer .footer-brand {
    flex: 1;
    min-width: 250px;
}

.unified-footer .footer-brand h2 {
    font-size: 1.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.feedback-fab:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: none;
}

.unified-footer .footer-brand p {
    color: #64748b;
    line-height: 1.6;
    max-width: 300px;
}

.partners-subheader h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    text-align: center;
}

@media (max-width: 768px) {
    .partners-subheader h3 {
        flex-direction: column;
    }
}

.partners-subheader h3 i {
    color: var(--cor-primaria);
}

.partners-subheader p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    text-align: center;
}

.unified-footer .footer-columns {
    display: flex;
    flex: 2;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.unified-footer .footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 150px;
}

.unified-footer .footer-col h3 {
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.unified-footer .footer-col a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.unified-footer .footer-col a:hover {
    color: #3b82f6;
    transform: translateX(3px);
}

.unified-footer .footer-bottom {
    text-align: center;
    padding-top: 2rem;
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #64748b;
    font-size: 0.9rem;
}

/* Esconder os footers globais/legacy espalhados pelo css antigo */
.global-footer { display: none !important; }

/* Discord Markdown formatting in news */
.news-item-desc blockquote {
    border-left: 4px solid #4f545c;
    padding: 2px 0 2px 12px;
    margin: 8px 0;
    color: #dbdee1;
    background: rgba(255, 255, 255, 0.02);
}
.news-item-desc code {
    background: #2e3035;
    padding: .2em .4em;
    border-radius: 3px;
    font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Monaco, Courier New, monospace;
    font-size: 85%;
    color: #e3e5e8;
}
.news-item-desc pre {
    background: #2e3035;
    border: 1px solid #1e1f22;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
    overflow-x: auto;
}
.news-item-desc pre code {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
}
.news-item-desc ul, .news-item-desc ol {
    margin: 8px 0 8px 20px;
    padding: 0;
}
.news-item-desc li {
    margin-bottom: 4px;
    list-style-type: disc;
}
.news-item-desc strong {
    font-weight: 700;
    color: #fff;
}
.news-item-desc u {
    text-decoration: underline;
}
.news-item-desc em {
    font-style: italic;
}
.news-item-desc del {
    text-decoration: line-through;
    opacity: 0.7;
}
.news-item-desc .discord-spoiler {
    background: #1e1f22;
    color: #1e1f22;
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
}
.news-item-desc .discord-spoiler.revealed {
    background: rgba(255, 255, 255, 0.1);
    color: #dbdee1;
}
.news-item-desc h3.news-header-1 {
    font-size: 1.4rem;
    color: #fff;
    margin: 16px 0 8px 0;
}
.news-item-desc h4.news-header-2 {
    font-size: 1.2rem;
    color: #fff;
    margin: 14px 0 6px 0;
}
.news-item-desc h5.news-header-3 {
    font-size: 1.05rem;
    color: #fff;
    margin: 12px 0 4px 0;
}

/* Forçar simetria perfeita de largura para os cards de patrocinadores */
.mnn-sponsor-card, .discloud-sponsor-card, .divulgatudo-sponsor-card, .divulgacoesgerais-sponsor-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Aparência plana global: sem sombras, halos ou LED neon. */
html body *:not(#supremacy-flat-ui),
html body *:not(#supremacy-flat-ui)::before,
html body *:not(#supremacy-flat-ui)::after {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Public profile navigation confirmation */
.profile-navigation-dialog { width:min(92vw, 460px); padding:0; border:1px solid rgba(124,58,237,.45); border-radius:22px; color:#f7f7fb; background:#111019; box-shadow:0 28px 90px rgba(0,0,0,.7); }
.profile-navigation-dialog::backdrop { background:rgba(4,3,10,.78); backdrop-filter:blur(8px); }
.profile-navigation-card { display:grid; gap:16px; padding:26px; }
.profile-navigation-card h2,.profile-navigation-card p { margin:0; }
.profile-navigation-eyebrow { color:#a78bfa; font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.profile-navigation-status { min-height:24px; color:#b9b6c8; }
.profile-navigation-actions { display:flex; justify-content:flex-end; gap:10px; }
.profile-navigation-actions button { min-height:44px; padding:0 18px; border-radius:12px; border:1px solid rgba(255,255,255,.14); color:#fff; background:#24212e; cursor:pointer; font:inherit; font-weight:700; }
.profile-navigation-actions .profile-navigation-confirm { border-color:transparent; background:linear-gradient(135deg,#7c3aed,#5865f2); }
.profile-navigation-actions button:disabled { cursor:not-allowed; opacity:.45; }
.profile-navigation-actions button:focus-visible { outline:3px solid #c4b5fd; outline-offset:3px; }

/* HEADER ACCOUNT MENU */
.account-menu-host {
    position: relative;
}

.account-menu-host .user-profile-link {
    cursor: pointer;
}

.account-menu-host .user-profile-link[aria-expanded="true"] {
    border-color: rgba(88, 101, 242, 0.55);
    background: #17181d;
}

.account-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10020;
    display: grid;
    width: min(310px, calc(100vw - 24px));
    padding: 7px;
    overflow: hidden;
    border: 1px solid #303139;
    border-radius: 14px;
    background: #111216;
}

.account-menu-panel[hidden] {
    display: none;
}

.account-menu-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #e8e8ec;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
    border-color: #343640;
    outline: none;
    background: #1a1b21;
}

.account-menu-item > i:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #30323c;
    border-radius: 9px;
    color: #9da4ff;
}

.account-menu-copy {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.account-menu-copy strong {
    color: inherit;
    font-size: 0.82rem;
    font-weight: 750;
}

.account-menu-copy small {
    overflow: hidden;
    color: #7f818b;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-arrow {
    color: #656873;
    font-size: 0.68rem;
}

.account-menu-disabled {
    color: #858791;
    cursor: not-allowed;
}

.account-menu-disabled > i:first-child {
    color: #777a84;
}

.account-menu-logout {
    margin-top: 3px;
    border-top-color: #2a2b31;
    border-radius: 0 0 9px 9px;
    color: #ff7084;
}

.account-menu-logout > i:first-child {
    border-color: #4b2930;
    color: #ff7084;
}

@media (max-width: 600px) {
    .account-menu-panel {
        position: fixed;
        top: calc(var(--header-height) - 1px);
        right: 8px;
        left: 8px;
        width: auto;
        border-radius: 0 0 14px 14px;
    }

    .account-menu-item {
        min-height: 52px;
    }
}